Skip to main content
Every Vibra Code session starts from a template — a pre-configured repository that gets cloned into an E2B cloud sandbox. The template sets the tech stack, installs the right dependencies, and starts the correct dev server before the AI agent begins generating code. Templates are defined in vibracode-backend/config.ts and are selected by the user on the Create screen before writing their first prompt.

​
How templates work

When you start a session:
  1. The backend clones the template’s repository into a fresh E2B sandbox
  2. The sandbox runs each startCommand in sequence (installing dependencies, then starting the dev server)
  3. A tunnel URL is created so you can preview the running app on your device
  4. The AI agent receives a template-specific system prompt and begins generating code based on your description
This means every session is fully isolated — changes in one sandbox never affect another.

​
Available templates

Expo React Native

ID: expoBuild cross-platform mobile apps with Expo SDK, TypeScript, and NativeWind styling. This is the primary mobile template and the recommended starting point for any native iOS or Android app.Repository: github.com/sa4hnd/expo-templateTech: Expo SDK, TypeScript, NativeWind, Expo RouterStart command: npx expo start --tunnel --port 3000

Next.js

ID: nextjsBuild scalable web applications with server-side rendering, static site generation, and API routes. ShadCN UI is pre-installed with all components available.Repository: github.com/superagent-ai/e2b-nextjsTech: Next.js, ShadCN UI, TypeScriptStart commands: npm i → npm run dev

Next.js + Supabase + Auth

ID: nextjs-supabase-authBuild a production-ready SaaS with authentication, database, and real-time features out of the box. Supabase CLI and Auth are pre-installed and ready to use.Repository: vercel/next.js with-supabase exampleTech: Next.js, Supabase, ShadCN UI, TypeScriptStart commands: npm i → npm run dev

Next.js + Convex + Clerk

ID: nextjs-convex-clerkCreate collaborative apps with real-time sync, instant auth, and seamless user management. Convex dev server runs alongside Next.js for live schema updates.Repository: github.com/get-convex/convex-clerk-users-tableTech: Next.js, Convex, Clerk, ShadCN UI, TypeScriptStart commands: npm i → npm run dev + npx convex dev (parallel)

Shopify Hydrogen

ID: shopify-hydrogenBuild fast headless commerce storefronts with Shopify’s official Hydrogen framework. The Shopify CLI is pre-installed.Repository: github.com/superagent-ai/e2b-shopifyTech: Shopify Hydrogen, Remix, TypeScriptStart commands: npm i → install Shopify CLI → shopify hydrogen dev --codegen --host

FastAPI + Next.js

ID: fastapi-nextjsBuild modern full-stack apps with a FastAPI Python backend and a Next.js frontend. Both servers run simultaneously — FastAPI on port 8000, Next.js on port 3000.Repository: github.com/tiangolo/full-stack-fastapi-templateTech: FastAPI, Next.js, ShadCN UI, Python, TypeScriptStart commands: npm i → npm run dev

​
The Expo React Native template

The expo template is the heart of Vibra Code and is the only template with a custom E2B sandbox image (image: "YOUR_E2B_TEMPLATE_ID"). The custom image has all native build tools, Expo CLI, and the tunnel utilities pre-installed, so the sandbox starts and runs commands much faster than a generic Linux image. Key differences from the web templates:
  • Uses npx expo start --tunnel so the preview is accessible on a physical phone via the Vibra Code app
  • The template repository (github.com/sa4hnd/expo-template) contains a clean Expo SDK project with NativeWind already configured
  • The AI agent’s system prompt is loaded from an external system-prompt.md file, making it easy to customise the mobile-specific guidance without touching config.ts
If you self-host Vibra Code, you need to build your own E2B sandbox template and replace YOUR_E2B_TEMPLATE_ID in config.ts with your template ID. See the Quick Start guide for the build command.

​
Adding a custom template

To add your own template, append an entry to the templates array in config.ts: 
{
  id: "my-template",
  name: "My Custom Stack",
  description: "A short description shown in the template picker.",
  repository: "https://github.com/your-org/your-template-repo",
  logos: ["nextjs.svg"],
  startCommands: [
    { command: "npm i", status: "INSTALLING_DEPENDENCIES" },
    { command: "npm run dev", status: "STARTING_DEV_SERVER", background: true },
  ],
  systemPrompt: "# GOAL\nYou are helping the user build an app with my custom stack.\n",
}
The status values in startCommands must match the valid session status literals (INSTALLING_DEPENDENCIES or STARTING_DEV_SERVER) so the UI shows the correct progress indicator.

Build docs developers (and LLMs) love

Get started for freeTalk to us