[vibe-coding-platform] Ship latest updates (#1211)

This PR brings a number of improvements to the `vibe-coding-platform`
example:

- Fixed a bug persisting the prompt in local storage.
- Moved from two tools (run command + wait command) to a single tool
that takes a wait parameter to distinguish if the LLM needs to wait for
completion or if the command is meant to run in background. This makes
the LLM more reliable.
- Moved from a sub-call to the LLM that generates paths & files to one
where the main LLM call decides on the paths and requests just the
content.
- This allows for the main LLM call to have better context on the files
that were already generated.
- It reduces a lot hallucinations where it tries to upload the same
files multiple times.
- Integrated some ai-elements:
- The conversation (including auto-scroll) is now from our newly
component lib.
  - The spinners we show are also from the library.
- Included error handling for all the tool call steps that are possible
to fail.
- This caused some issues where tool calls where shown in an
inconsistent state, now they reflect the error status.
- This also allows to return information for the LLM to fix in the next
iteration instead of swallowing the errors.
- It makes the whole workflow more reliable preventing the effect of
hanging where actually there was a failure.
- Introduced a self-correction feature that triggers once to prevent
infinite iterations if the system is not capable to get to a solution.
- Introduced settings to disable auto-correct and reasoning level for
GPT-5.

Author: javivelasco

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

@@ -1,16 +1,23 @@
 import { type GatewayModelId } from '@ai-sdk/gateway'
 
-export const DEFAULT_MODEL: GatewayModelId[number] = 'openai/gpt-5'
+export enum Models {
+  AmazonNovaPro = 'amazon/nova-pro',
+  AnthropicClaude4Sonnet = 'anthropic/claude-4-sonnet',
+  GoogleGeminiFlash = 'google/gemini-2.5-flash',
+  MoonshotKimiK2 = 'moonshotai/kimi-k2',
+  OpenAIGPT5 = 'gpt-5',
+  XaiGrok3Fast = 'xai/grok-3-fast',
+}
+
+export const DEFAULT_MODEL = Models.OpenAIGPT5
 
 export const SUPPORTED_MODELS: GatewayModelId[] = [
-  'amazon/nova-pro',
-  'anthropic/claude-4-sonnet',
-  'google/gemini-2.5-flash',
-  'moonshotai/kimi-k2',
-  'openai/gpt-4o',
-  'openai/gpt-5',
-  'openai/o4-mini',
-  'xai/grok-3-fast',
+  Models.AmazonNovaPro,
+  Models.AnthropicClaude4Sonnet,
+  Models.GoogleGeminiFlash,
+  Models.MoonshotKimiK2,
+  Models.OpenAIGPT5,
+  Models.XaiGrok3Fast,
 ]
 
 export const TEST_PROMPTS = [

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

@@ -1,59 +1,48 @@
 import type { JSONValue } from 'ai'
 import type { OpenAIResponsesProviderOptions } from '@ai-sdk/openai'
-import { createGatewayProvider, type GatewayModelId } from '@ai-sdk/gateway'
+import { createGatewayProvider } from '@ai-sdk/gateway'
+import { Models } from './constants'
 
 const gateway = createGatewayProvider({
   baseURL: process.env.AI_GATEWAY_BASE_URL,
 })
 
-interface AvailableModel {
-  id: GatewayModelId | 'openai/gpt-5'
-  name: string
-}
-
-export async function getAvailableModels(): Promise<AvailableModel[]> {
+export async function getAvailableModels() {
   const response = await gateway.getAvailableModels()
-  return [...response.models.map(({ id, name }) => ({ id, name }))]
+  return response.models
+    .map((model) => ({ id: model.id, name: model.name }))
+    .concat([{ id: Models.OpenAIGPT5, name: 'GPT-5' }])
 }
 
-interface ModelOptions {
+export 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/gpt-5') {
+export function getModelOptions(
+  modelId: string,
+  options?: { reasoningEffort?: 'low' | 'medium' }
+): ModelOptions {
+  if (modelId === Models.OpenAIGPT5) {
     return {
       model: modelId,
       providerOptions: {
         openai: {
           include: ['reasoning.encrypted_content'],
-          reasoningEffort: 'low',
-          reasoningSummary: 'detailed',
+          reasoningEffort: options?.reasoningEffort ?? 'low',
+          reasoningSummary: 'auto',
+          serviceTier: 'priority',
         } satisfies OpenAIResponsesProviderOptions,
       },
     }
   }
 
-  if (modelId === 'anthropic/claude-4-sonnet') {
+  if (modelId === Models.AnthropicClaude4Sonnet) {
     return {
       model: modelId,
       headers: { 'anthropic-beta': 'fine-grained-tool-streaming-2025-05-14' },
       providerOptions: {
-        // gateway: { order: ["bedrock", "vertex"] },
         anthropic: {
           cacheControl: { type: 'ephemeral' },
         },

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

@@ -1,33 +1,37 @@
 import z from 'zod/v3'
 
+export const errorSchema = z.object({
+  message: z.string(),
+})
+
 export const dataPartSchema = z.object({
   'create-sandbox': z.object({
     sandboxId: z.string().optional(),
-    status: z.enum(['loading', 'done']),
+    status: z.enum(['loading', 'done', 'error']),
+    error: errorSchema.optional(),
   }),
   'generating-files': z.object({
     paths: z.array(z.string()),
-    status: z.enum(['generating', 'uploading', 'uploaded', 'done']),
+    status: z.enum(['generating', 'uploading', 'uploaded', 'done', 'error']),
+    error: errorSchema.optional(),
   }),
   '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(),
+    commandId: z.string().optional(),
     command: z.string(),
     args: z.array(z.string()),
+    status: z.enum(['executing', 'running', 'waiting', 'done', 'error']),
     exitCode: z.number().optional(),
-    status: z.enum(['loading', 'done']),
+    error: errorSchema.optional(),
   }),
   'get-sandbox-url': z.object({
     url: z.string().optional(),
     status: z.enum(['loading', 'done']),
   }),
+  'report-errors': z.object({
+    summary: z.string(),
+    paths: z.array(z.string()).optional(),
+  }),
 })
 
 export type DataPart = z.infer<typeof dataPartSchema>

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

@@ -1,6 +1,7 @@
 import type { UIMessageStreamWriter, UIMessage } from 'ai'
 import type { DataPart } from '../messages/data-parts'
 import { Sandbox } from '@vercel/sandbox'
+import { getRichError } from './get-rich-error'
 import { tool } from 'ai'
 import description from './create-sandbox.md'
 import z from 'zod/v3'
@@ -15,9 +16,11 @@ export const createSandbox = ({ writer }: Params) =>
     inputSchema: z.object({
       timeout: z
         .number()
+        .min(600000)
+        .max(2700000)
         .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.'
+          'Maximum time in milliseconds the Vercel Sandbox will remain active before automatically shutting down. Minimum 600000ms (10 minutes), maximum 2700000ms (45 minutes). Defaults to 600000ms (10 minutes). The sandbox will terminate all running processes when this timeout is reached.'
         ),
       ports: z
         .array(z.number())
@@ -34,17 +37,39 @@ export const createSandbox = ({ writer }: Params) =>
         data: { status: 'loading' },
       })
 
-      const sandbox = await Sandbox.create({
-        timeout,
-        ports,
-      })
+      try {
+        const sandbox = await Sandbox.create({
+          timeout: timeout ?? 600000,
+          ports,
+        })
 
-      writer.write({
-        id: toolCallId,
-        type: 'data-create-sandbox',
-        data: { sandboxId: sandbox.sandboxId, status: 'done' },
-      })
+        writer.write({
+          id: toolCallId,
+          type: 'data-create-sandbox',
+          data: { sandboxId: sandbox.sandboxId, status: 'done' },
+        })
+
+        return (
+          `Sandbox created with ID: ${sandbox.sandboxId}.` +
+          `\nYou can now upload files, run commands, and access services on the exposed ports.`
+        )
+      } catch (error) {
+        const richError = getRichError({
+          action: 'Creating Sandbox',
+          error,
+        })
+
+        writer.write({
+          id: toolCallId,
+          type: 'data-create-sandbox',
+          data: {
+            error: { message: richError.error.message },
+            status: 'error',
+          },
+        })
 
-      return `Sandbox created with ID: ${sandbox.sandboxId}. You can now upload files, run commands, and access services on the exposed ports.`
+        console.log('Error creating Sandbox:', richError.error)
+        return richError.message
+      }
     },
   })