Add vibe-coding-platform project (#1186)

Adds the Vibe Coding Platform example

Author: javivelasco

apps/vibe-coding-platform/.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.env*.local

apps/vibe-coding-platform/ai/constants.ts

@@ -0,0 +1,19 @@
+import { type GatewayModelId } from '@ai-sdk/gateway'
+
+export const DEFAULT_MODEL: GatewayModelId[number] = 'openai/wagyu-a5'
+
+export const SUPPORTED_MODELS: GatewayModelId[] = [
+  'amazon/nova-pro',
+  'anthropic/claude-4-sonnet',
+  'google/gemini-2.5-flash',
+  'moonshotai/kimi-k2',
+  'openai/gpt-4o',
+  'openai/o4-mini',
+  'openai/wagyu-a5',
+  'xai/grok-3-fast',
+]
+
+export const TEST_PROMPTS = [
+  'Generate a Next.js app that allows to list and search Pokemons',
+  'Create a `golang` server that responds with "Hello World" to any request',
+]

apps/vibe-coding-platform/ai/gateway.ts

@@ -0,0 +1,70 @@
+import type { JSONValue } from 'ai'
+import type { OpenAIResponsesProviderOptions } from '@ai-sdk/openai'
+import { createGatewayProvider, type GatewayModelId } from '@ai-sdk/gateway'
+
+const gateway = createGatewayProvider({
+  baseURL: process.env.AI_GATEWAY_BASE_URL,
+})
+
+interface AvailableModel {
+  id: GatewayModelId | 'openai/wagyu-a5'
+  name: string
+}
+
+export async function getAvailableModels(): Promise<AvailableModel[]> {
+  const response = await gateway.getAvailableModels()
+  return [
+    ...response.models.map(({ id, name }) => ({ id, name })),
+    { id: 'openai/wagyu-a5', name: 'GPT-5' },
+  ]
+}
+
+interface ModelOptions {
+  model: string
+  providerOptions?: Record<string, Record<string, JSONValue>>
+  headers?: Record<string, string>
+}
+
+export function getModelOptions(modelId: string): ModelOptions {
+  if (modelId === 'openai/o4-mini') {
+    return {
+      model: modelId,
+      providerOptions: {
+        openai: {
+          reasoningEffort: 'low',
+          reasoningSummary: 'detailed',
+        } satisfies OpenAIResponsesProviderOptions,
+      },
+    }
+  }
+
+  if (modelId === 'openai/wagyu-a5') {
+    return {
+      model: modelId,
+      providerOptions: {
+        openai: {
+          include: ['reasoning.encrypted_content'],
+          reasoningEffort: 'low',
+          reasoningSummary: 'detailed',
+        } satisfies OpenAIResponsesProviderOptions,
+      },
+    }
+  }
+
+  if (modelId === 'anthropic/claude-4-sonnet') {
+    return {
+      model: modelId,
+      headers: { 'anthropic-beta': 'fine-grained-tool-streaming-2025-05-14' },
+      providerOptions: {
+        // gateway: { order: ["bedrock", "vertex"] },
+        anthropic: {
+          cacheControl: { type: 'ephemeral' },
+        },
+      },
+    }
+  }
+
+  return {
+    model: modelId,
+  }
+}

apps/vibe-coding-platform/ai/messages/data-parts.ts

@@ -0,0 +1,33 @@
+import z from 'zod/v3'
+
+export const dataPartSchema = z.object({
+  'create-sandbox': z.object({
+    sandboxId: z.string().optional(),
+    status: z.enum(['loading', 'done']),
+  }),
+  'generating-files': z.object({
+    paths: z.array(z.string()),
+    status: z.enum(['generating', 'uploading', 'uploaded', 'done']),
+  }),
+  'run-command': z.object({
+    command: z.string(),
+    args: z.array(z.string()),
+    status: z.enum(['loading', 'done']),
+    commandId: z.string().optional(),
+    sandboxId: z.string(),
+  }),
+  'wait-command': z.object({
+    sandboxId: z.string(),
+    commandId: z.string(),
+    command: z.string(),
+    args: z.array(z.string()),
+    exitCode: z.number().optional(),
+    status: z.enum(['loading', 'done']),
+  }),
+  'get-sandbox-url': z.object({
+    url: z.string().optional(),
+    status: z.enum(['loading', 'done']),
+  }),
+})
+
+export type DataPart = z.infer<typeof dataPartSchema>

apps/vibe-coding-platform/ai/messages/metadata.ts

@@ -0,0 +1,7 @@
+import z from 'zod/v3'
+
+export const metadataSchema = z.object({
+  model: z.string(),
+})
+
+export type Metadata = z.infer<typeof metadataSchema>

apps/vibe-coding-platform/ai/tools/create-sandbox.md

@@ -0,0 +1,55 @@
+Use this tool to create a new Vercel Sandbox — an ephemeral, isolated Linux container that serves as your development environment for the current session. This sandbox provides a secure workspace where you can upload files, install dependencies, run commands, start development servers, and preview web apps. Each sandbox is uniquely identified and must be referenced for all subsequent operations (e.g., file generation, command execution, or URL access).
+
+## When to Use This Tool
+
+Use this tool **once per session** when:
+
+1. You begin working on a new user request that requires code execution or file creation
+2. No sandbox currently exists for the session
+3. The user asks to start a new project, scaffold an application, or test code in a live environment
+4. The user requests a fresh or reset environment
+
+## Sandbox Capabilities
+
+After creation, the sandbox allows you to:
+
+- Upload and manage files via `Generate Files`
+- Execute shell commands with `Run Command` and `Wait Command`
+- Access running servers through public URLs using `Get Sandbox URL`
+
+Each sandbox mimics a real-world development environment and supports rapid iteration and testing without polluting the local system. The base system is Amazon Linux 2023 with the following additional packages:
+
+```
+bind-utils bzip2 findutils git gzip iputils libicu libjpeg libpng ncurses-libs openssl openssl-libs pnpm procps tar unzip which whois zstd
+```
+
+You can install additional packages using the `dnf` package manager. You can NEVER use port 8080 as it is reserved for internal applications. When requested, you need to use a different port.
+
+## Best Practices
+
+- Create the sandbox at the beginning of the session or when the user initiates a coding task
+- Track and reuse the sandbox ID throughout the session
+- Do not create a second sandbox unless explicitly instructed
+- If the user requests an environment reset, you may create a new sandbox **after confirming their intent**
+
+## Examples of When to Use This Tool
+
+<example>
+User: Can we start fresh? I want to rebuild the project from scratch.
+Assistant: Got it — I’ll create a new sandbox so we can start clean.
+*Calls Create Sandbox*
+</example>
+
+## When NOT to Use This Tool
+
+Skip using this tool when:
+
+1. A sandbox has already been created for the current session
+2. You only need to upload files (use Generate Files)
+3. You want to execute or wait for a command (use Run Command / Wait Command)
+4. You want to preview the application (use Get Sandbox URL)
+5. The user hasn’t asked to reset the environment
+
+## Summary
+
+Use Create Sandbox to initialize a secure, temporary development environment — but **only once per session**. Treat the sandbox as the core workspace for all follow-up actions unless the user explicitly asks to discard and start anew.

apps/vibe-coding-platform/ai/tools/create-sandbox.ts

@@ -0,0 +1,50 @@
+import type { UIMessageStreamWriter, UIMessage } from 'ai'
+import type { DataPart } from '../messages/data-parts'
+import { Sandbox } from '@vercel/sandbox'
+import { tool } from 'ai'
+import description from './create-sandbox.md'
+import z from 'zod/v3'
+
+interface Params {
+  writer: UIMessageStreamWriter<UIMessage<never, DataPart>>
+}
+
+export const createSandbox = ({ writer }: Params) =>
+  tool({
+    description,
+    inputSchema: z.object({
+      timeout: z
+        .number()
+        .optional()
+        .describe(
+          'Maximum time in milliseconds the Vercel Sandbox will remain active before automatically shutting down. Defaults to 300000ms (5 minutes). The sandbox will terminate all running processes when this timeout is reached.'
+        ),
+      ports: z
+        .array(z.number())
+        .max(2)
+        .optional()
+        .describe(
+          'Array of network ports to expose and make accessible from outside the Vercel Sandbox. These ports allow web servers, APIs, or other services running inside the Vercel Sandbox to be reached externally. Common ports include 3000 (Next.js), 8000 (Python servers), 5000 (Flask), etc.'
+        ),
+    }),
+    execute: async ({ timeout, ports }, { toolCallId }) => {
+      writer.write({
+        id: toolCallId,
+        type: 'data-create-sandbox',
+        data: { status: 'loading' },
+      })
+
+      const sandbox = await Sandbox.create({
+        timeout,
+        ports,
+      })
+
+      writer.write({
+        id: toolCallId,
+        type: 'data-create-sandbox',
+        data: { sandboxId: sandbox.sandboxId, status: 'done' },
+      })
+
+      return `Sandbox created with ID: ${sandbox.sandboxId}. You can now upload files, run commands, and access services on the exposed ports.`
+    },
+  })

apps/vibe-coding-platform/ai/tools/generate-files-prompt.md

@@ -0,0 +1,11 @@
+Create a set of files based on the current state of the project and conversation. Your output will be uploaded directly into a Vercel Sandbox environment, so it must be immediately usable and correct on first iteration. Do not include explanations or markdown. Your output will be parsed programmatically and uploaded to a live environment.
+
+## Instructions
+
+1. Generate only the files that are relevant to the user's request.
+2. All file paths must be relative to the sandbox root (e.g., \`src/app.tsx\`, \`package.json\`, \`routes/api.ts\`).
+3. Ensure every file is syntactically valid, consistent with the chosen tech stack, and complete.
+4. Do not include placeholder comments like “TODO” unless explicitly instructed.
+5. Assume any previously generated files already exist in the sandbox — write with compatibility in mind.
+6. Favor minimal, functional implementations that demonstrate correctness and are ready to be run, built, or extended.
+7. Include configuration, setup, or support files (e.g., \`.env\`, \`tsconfig.json\`, \`vite.config.ts\`) if the task depends on them working.

apps/vibe-coding-platform/ai/tools/generate-files.md

@@ -0,0 +1,63 @@
+Use this tool to generate and upload code files into an existing Vercel Sandbox. It leverages an LLM to create file contents based on the current conversation context and user intent, then writes them directly into the sandbox file system.
+
+The generated files should be considered correct on first iteration and suitable for immediate use in the sandbox environment. This tool is essential for scaffolding applications, adding new features, writing configuration files, or fixing missing components.
+
+All file paths must be relative to the sandbox root (e.g., `src/index.ts`, `package.json`, `components/Button.tsx`).
+
+## When to Use This Tool
+
+Use Generate Files when:
+
+1. You need to create one or more new files as part of a feature, scaffold, or fix
+2. The user requests code that implies file creation (e.g., new routes, APIs, components, services)
+3. You need to bootstrap a new application structure inside a sandbox
+4. You’re completing a multi-step task that involves generating or updating source code
+5. A prior command failed due to a missing file, and you need to supply it
+
+## File Generation Guidelines
+
+- Every file must be complete, valid, and runnable where applicable
+- File contents must reflect the user’s intent and the overall session context
+- File paths must be well-structured and use consistent naming conventions
+- Generated files should assume compatibility with other existing files in the sandbox
+
+## Best Practices
+
+- Avoid redundant file generation if the file already exists and is unchanged
+- Use conventional file/folder structures for the tech stack in use
+- If replacing an existing file, ensure the update fully satisfies the user’s request
+
+## Examples of When to Use This Tool
+
+<example>
+User: Add a `NavBar.tsx` component and include it in `App.tsx`
+Assistant: I’ll generate the `NavBar.tsx` file and update `App.tsx` to include it.
+*Uses Generate Files to create:*
+- `components/NavBar.tsx`
+- Modified `App.tsx` with import and usage of `NavBar`
+</example>
+
+<example>
+User: Let’s scaffold a simple Express server with a `/ping` route.
+Assistant: I’ll generate the necessary files to start the Express app.
+*Uses Generate Files to create:*
+- `package.json` with Express as a dependency
+- `index.js` with basic server and `/ping` route
+</example>
+
+## When NOT to Use This Tool
+
+Avoid using this tool when:
+
+1. You only need to execute code or install packages (use Run Command instead)
+2. You’re waiting for a command to finish (use Wait Command)
+3. You want to preview a running server or UI (use Get Sandbox URL)
+4. You haven’t created a sandbox yet (use Create Sandbox first)
+
+## Output Behavior
+
+After generation, the tool will return a list of the files created, including their paths and contents. These can then be inspected, referenced, or used in subsequent commands.
+
+## Summary
+
+Use Generate Files to programmatically create or update files in your Vercel Sandbox. It enables fast iteration, contextual coding, and dynamic file management — all driven by user intent and conversation context.