Skip to main content

​
Get started in 5 minutes

This guide will get you from zero to your first voice-generated React application.
1

Clone the repository

git clone https://github.com/yourusername/viber.git
cd viber
2

Install dependencies

Viber uses Bun as the primary package manager and runtime.
bun install
Don’t have Bun? Install it with curl -fsSL https://bun.sh/install | bash
3

Configure environment variables

Create a .env file in the project root with your API keys:
# Required for code generation
GEMINI_API_KEY=your_gemini_api_key
DEFAULT_MODEL=gemini-3-pro

# Required for sandbox management
DAYTONA_API_KEY=your_daytona_api_key

# Required for image generation
UNSPLASH_ACCESS_KEY=your_unsplash_access_key
UNSPLASH_SECRET_KEY=your_unsplash_secret_key

# Optional - for voice mode
ELEVENLABS_API_KEY=your_elevenlabs_api_key
VITE_ELEVENLABS_AGENT_ID=your_agent_id
Voice mode requires ElevenLabs configuration. Without it, you can still use Viber in text mode.
4

Start the development server

bun run dev
The app will be available at http://localhost:3000.
5

Build your first app with voice

  1. Click the microphone button to start a voice session
  2. Say something like: “Create a simple todo app with a clean UI”
  3. Watch as Viber generates code, sets up the sandbox, and shows you a live preview
  4. Make edits by saying: “Add a dark mode toggle”

​
Try it in text mode

If you haven’t configured ElevenLabs yet, you can still use Viber’s text interface:
  1. Navigate to the builder interface at http://localhost:3000/builder
  2. Type your prompt in the text input
  3. Click “Generate” to create your application
  4. View the code and preview panels to see your app come to life

​
Example prompts

Here are some prompts to get you started: 
Create a weather dashboard that shows current conditions and a 5-day forecast with nice card layouts

​
Understanding the workflow

1

Sandbox initialization

When you first start building, Viber creates a Daytona sandbox workspace. This takes a few seconds.The voice agent will notify you: “Setting up your workspace…”
2

Code generation

Gemini analyzes your prompt and generates a complete React application structure including:
  • Component files (.tsx)
  • Styles and configuration
  • Package dependencies
  • Vite setup
3

File streaming

As files are generated, they’re streamed to the UI and applied to the sandbox in real-time.Watch the code panel to see files being created.
4

Live preview

Once the sandbox builds your app, the preview panel shows the running application.The voice agent narrates: “Your app is ready to preview.”

​
Voice agent tools

The ElevenLabs voice agent has access to special tools:

​
vibe_build

Triggers code generation or editing. Parameters:
  • prompt (string): What you want to build or change
  • action (“create” | “edit”): Whether this is a new app or an edit
Example voice commands:
  • “Create a portfolio website”
  • “Edit the header to include a navigation menu”
Switches between UI panels. Parameters:
  • panel (“preview” | “code” | “files”): Which panel to show
Example voice commands:
  • “Show me the code”
  • “Switch to preview”
  • “Show the file tree”
The voice agent automatically determines when to use these tools based on your natural language input.

​
Next steps

Full installation guide

Learn about all configuration options and deployment

Architecture deep dive

Understand how Viber works under the hood

Build docs developers (and LLMs) love

Get started for freeTalk to us