> ## Documentation Index
> Fetch the complete documentation index at: https://docs.voxcode.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Get your first app running in minutes using Voxcode's voice-first interface.

This guide walks you through building your first project in Voxcode. You'll sign in, issue a voice command, review the generated code, and see your app running live in the browser.

<Note>
  Free accounts start with 20 credits. No payment required to get started.
</Note>

<Steps>
  <Step title="Sign in to Voxcode">
    Open Voxcode in your browser. On the sign-in screen, choose **Continue with GitHub** or **Continue with Google**. Both options use OAuth — no password required.

    Once you sign in, you land on the main chat interface. Your credit balance is visible in the **Settings** menu.

    If you want to try Voxcode before creating an account, tap **Try Without Account** to enter as a guest. Guest sessions are not saved.
  </Step>

  <Step title="Tap the microphone">
    At the bottom of the screen, tap the microphone button. The Voice Orb expands and begins listening.

    On desktop, Voxcode uses the Web Speech API for real-time transcription and sends your command automatically after a brief pause. On mobile, it records your audio and transcribes it via Whisper when you stop speaking.

    You can also type commands directly in the text input if you prefer not to use your voice.
  </Step>

  <Step title="Say a voice command">
    Speak your request clearly and naturally. Voxcode understands plain English — you don't need to memorize syntax or keywords.

    Here are some commands to try:

    ```text theme={null}
    "Create a button component with hover effects"
    ```

    ```text theme={null}
    "Build a navbar with dark mode toggle"
    ```

    ```text theme={null}
    "Make a landing page for a gym"
    ```

    ```text theme={null}
    "Add a contact form to the site"
    ```

    ```text theme={null}
    "Change the background to blue"
    ```

    Voxcode streams the AI response back to you in real time. In voice mode, it also reads the response aloud using ElevenLabs text-to-speech.
  </Step>

  <Step title="Review the generated code">
    The AI response appears in the chat as a message alongside one or more **code snippet** cards. Each card shows the filename, language, and generated code.

    You have two options for each snippet:

    * **Accept** — saves the file to your Virtual File System (VFS)
    * **Edit** — opens the code inline so you can make manual changes before saving

    If the output isn't quite right, speak a follow-up command to refine it. For example: *"Make the button rounded and add a drop shadow."*
  </Step>

  <Step title="Preview your app live">
    Once you've accepted one or more code files, click the **Preview** button (the play icon) in the top navigation bar.

    Voxcode detects your project type and renders it immediately:

    * Static HTML/CSS projects load in an iframe
    * React projects open in a Sandpack editor with a live preview panel
    * Node.js projects run in a WebContainer

    Changes you make through voice or manual edits reflect in the preview without a page refresh.
  </Step>
</Steps>

<Tip>
  Start with a simple, specific request — for example, "Create a card component with a title, description, and button" — rather than a broad prompt like "Build me an app." Focused commands produce cleaner, more usable output that you can build on iteratively.
</Tip>

## Next steps

Once you've got your first project running, explore these topics to go further:

* [Voice coding](/features/voice-coding) — learn advanced voice patterns and how to have multi-turn conversations with the AI
* [AI models](/features/ai-models) — switch models to balance speed, capability, and credit cost
* [Virtual File System](/features/virtual-file-system) — understand how your project files are stored and managed
* [Account Setup](/account-setup) — configure your subscription, manage credits, and add API keys