Skip to main content
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.
Free accounts start with 20 credits. No payment required to get started.
1

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.
2

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.
3

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:
"Create a button component with hover effects"

"Build a navbar with dark mode toggle"

"Make a landing page for a gym"

"Add a contact form to the site"

"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.
4

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.”
5

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.
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.

​
Next steps

Once you’ve got your first project running, explore these topics to go further:
  • Voice coding — learn advanced voice patterns and how to have multi-turn conversations with the AI
  • AI models — switch models to balance speed, capability, and credit cost
  • Virtual File System — understand how your project files are stored and managed
  • Account Setup — configure your subscription, manage credits, and add API keys