Skip to main content
Every app Vibra Code generates is shaped by a system prompt that tells the AI agent who it is, what constraints it operates under, and how it should write code. Because Vibra Code is open source, you can read, edit, and completely replace these prompts to match your own product requirements.

​
Where prompts live

Vibra Code stores prompts in two places:
  • vibracode-backend/lib/prompts.ts — contains the getSystemPrompt() function, which returns the global system prompt used by the AI agent inside every sandbox. This is the detailed prompt covering TypeScript rules, routing patterns, animation guidance, web compatibility, and more.
  • vibracode-backend/config.ts — each Template object has a systemPrompt field. This is the per-template prompt that describes the template’s stack and sets the AI’s goal for that specific sandbox type.

​
The FILE: reference

The Expo React Native template uses a special syntax for its systemPrompt: 
systemPrompt: "FILE:system-prompt.md", // Reference to external prompt file
When the backend sees a systemPrompt value that starts with FILE:, it reads the referenced file from the backend root directory (vibracode-backend/system-prompt.md) and uses its contents as the prompt. This makes the Expo template’s prompt easier to edit — it’s a plain Markdown file rather than a TypeScript string. Other templates (Next.js, Shopify, FastAPI, etc.) use inline strings concatenated directly in config.ts.

​
How AGENT_TYPE affects prompts

The AGENT_TYPE environment variable controls which AI agent runs inside the sandbox:
AGENT_TYPEAgentBilling mode
claude (default)Claude Code via Anthropic Agent SDKCredit-based (2× multiplier)
cursorCursor AI agentToken-based (fixed messages per plan)
geminiGemini CLICredit-based (2× multiplier)
The system prompt you write should match the capabilities of the chosen agent. Claude Code responds well to agentic instructions and tool-use guidance; the Cursor agent responds to a different instruction style. When you switch AGENT_TYPE, consider updating the relevant prompts accordingly.

​
How to modify the system prompt

1

Edit the Expo template prompt

Open vibracode-backend/system-prompt.md and make your changes. This file is loaded at runtime, so no recompilation is needed — changes take effect on the next sandbox creation.
# Identity

You are Claude Code working for Acme Corp. You are an agentic coding
agent and an exceptional senior React Native developer...
2

Edit a non-Expo template prompt

Open vibracode-backend/config.ts and find the systemPrompt field for the template you want to change. Edit the inline string directly.
systemPrompt:
  "# GOAL\nYou are a helpful assistant building a Next.js app.\n" +
  "- The dev server runs on port 3000.\n" +
  "- ShadCN UI is installed with all components.\n" +
  "- Always use the App Router, not Pages Router.\n",
3

Convert an inline prompt to a file reference

For long prompts, switch any template to file-based loading by replacing the inline string with FILE:your-prompt.md:
systemPrompt: "FILE:nextjs-prompt.md",
Then create vibracode-backend/nextjs-prompt.md with the full prompt content.
4

Restart the backend

If you edited config.ts, restart the Next.js server:
npm run dev
If you only edited a .md file (loaded at runtime), no restart is needed — the change applies to the next new session.

​
The systemPrompt field in config.ts

Here is the full Template interface showing the systemPrompt field in context: 
export interface Template {
  id: string;
  name: string;
  description: string;
  repository: string;
  logos: string[];
  image?: string;                  // E2B sandbox template ID
  startCommands: {
    command: string;
    status: "INSTALLING_DEPENDENCIES" | "STARTING_DEV_SERVER";
    background?: boolean;
  }[];
  secrets?: Record<string, string>;
  systemPrompt: string;            // Inline string or "FILE:filename.md"
}
And the Expo template entry, showing the FILE: reference: 
{
  id: "expo",
  name: "Expo React Native",
  description:
    "Build cross-platform mobile apps with Expo SDK, TypeScript, and NativeWind styling.",
  repository: "https://github.com/sa4hnd/expo-template",
  logos: ["expo.svg"],
  image: "YOUR_E2B_TEMPLATE_ID",
  startCommands: [
    {
      command:
        "echo fs.inotify.max_user_watches=524288 >> /etc/sysctl.conf && sysctl -p && npx expo start --tunnel --port 3000",
      status: "STARTING_DEV_SERVER",
      background: true,
    },
  ],
  systemPrompt: "FILE:system-prompt.md",
}

​
What makes a good system prompt for mobile app generation

A strong system prompt for mobile code generation covers six areas:
Tell the agent who it is and what its primary job is. Be specific about the stack: Expo SDK version, React Native version, and any package manager conventions.
You are an expert React Native engineer building cross-platform mobile apps
with Expo SDK 54 and React Native 0.81.4. Use bun for package management.
The sandbox has real restrictions. Document them so the agent doesn’t waste tool calls on impossible actions:
  • Git is not available inside the sandbox
  • EAS CLI is not available
  • Custom native packages cannot be installed (only those bundled with Expo Go)
  • Xcode and Android emulators are not running
Include concrete rules about typing, imports, and patterns you want enforced. For example: always use explicit generics with useState<Type[]>([]), always use optional chaining, never hardcode secrets.
Describe the visual quality bar: “production-quality, not cookie-cutter.” Reference iOS Human Interface Guidelines if relevant. Specify your icon library (lucide-react-native, @expo/vector-icons), and mention styling approach (StyleSheet, NativeWind, etc.).
Expo Router, React Navigation, and Zustand each have patterns that cause bugs when misused. Spell out which router to use, how to handle tabs vs. stacks, and how to manage global state.
If users preview apps on web (React Native Web), list the APIs with partial or no web support and provide workaround patterns using Platform.select() or conditional imports.
Keep your prompt focused. A 200-line prompt that covers the specific stack your templates use will outperform a 1,000-line prompt that tries to cover every possible scenario.
The getSystemPrompt() function in lib/prompts.ts is used by the Cursor agent path. The FILE:system-prompt.md reference is used by the Claude agent path. If you run both AGENT_TYPE values, make sure both prompts are updated.

Build docs developers (and LLMs) love

Get started for freeTalk to us