realtime-agent-starter-template

A standalone Next.js coding agent that demonstrates the full Morph stack on the Vercel AI SDK, running against a real cloud sandbox. WarpGrep for search, Fast Apply for edits, e2b/Daytona for execution and live preview.

This repo is a starter template. The README below is the build prompt. Hand it to a coding agent (or build it yourself) to produce the working app.

---

Build: Morph coding-agent demo site

Goal. A standalone Next.js app — a working coding agent in the browser — that demonstrates the full Morph stack on the Vercel AI SDK, running against a real cloud sandbox. A visitor opens an example repo (live in an e2b/Daytona sandbox), types "add rate limiting to the API route," and watches the agent search the repo (WarpGrep), read/edit files (Fast Apply), run commands, and see the result in a live preview — all streaming, with diffs and terminal output rendered inline. This is the reference integration we point every Vercel-AI-SDK customer at.

Stack (non-negotiable).

• Next.js 15 (App Router) + React 19, TypeScript, Tailwind, shadcn/ui
• Vercel AI SDK v5 (ai, @ai-sdk/react)
• AI Elements (npx ai-elements@latest) for all chat UI — do not hand-roll chat components
• @ai-sdk/openai-compatible as the only provider, pointed at https://api.morphllm.com/v1
• @morphllm/morphsdk for the tool factories (/vercel adapter)

Required integrations (all three, no shortcuts).

1. WarpGrep — codebase search subagent (createExploreSubagent). The agent must search via WarpGrep, not grep/regex.
2. Fast Apply — code editing (createEditFileTool). All file edits go through Fast Apply applying an edit snippet — never raw full-file rewrites.
3. Sandboxes (e2b + Daytona) — the example repo lives in a real cloud sandbox. All file reads/writes and command execution run against the sandbox, with a live preview URL. Build one Sandbox adapter interface with two implementations (e2b via @e2b/code-interpreter, Daytona via @daytonaio/sdk), selectable by env/UI. No in-memory FS fallback.

Provider wiring.

// lib/morph.ts
import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
export const morph = createOpenAICompatible({
  name: 'morph',
  apiKey: process.env.MORPH_API_KEY,
  baseURL: 'https://api.morphllm.com/v1',
});

Sandbox adapter.

// lib/sandbox/index.ts
export interface Sandbox {
  start(repoUrl: string): Promise<void>;
  readFile(path: string): Promise<string>;
  writeFile(path: string, content: string): Promise<void>;
  list(path: string): Promise<string[]>;
  exec(cmd: string): Promise<{ stdout: string; stderr: string; exitCode: number }>;
  previewUrl(port: number): Promise<string>;
}
// e2b.ts (@e2b/code-interpreter) and daytona.ts (@daytonaio/sdk) implement this.
// Selected via SANDBOX_PROVIDER=e2b|daytona.

Agent loop (app/api/chat/route.ts). streamText with:

• model: morph('morph-dsv4flash') (default; expose a model selector for morph-qwen35-397b, morph-qwen36-27b, morph-minimax27-230b — same set as the fast-code playground)
• tools:
  • createExploreSubagent(...) — WarpGrep search (multi-turn, returns a summary)
  • createEditFileTool(...) — Fast Apply edits, applied to the sandbox FS
  • read_file / list_directory / run_command — backed by the Sandbox adapter (the edit tool's writes also land in the sandbox)
• stopWhen: stepCountIs(10) for the multi-step loop
• return result.toUIMessageStreamResponse()
• optional: route tool outputs >10k tokens through Compact before feeding back

UI (AI Elements). Conversation + Message + Response (streamed markdown) + PromptInput. Render the agent loop with:

• Tool / ToolHeader / ToolInput / ToolOutput driven by the v5 state machine (input-streaming → output-available) — one card per WarpGrep search, Fast Apply edit, and command run
• CodeBlock for syntax-highlighted diffs inside Fast Apply tool output
• Terminal for run_command output, File Tree + read-only editor pane (Monaco/CodeMirror) reflecting the sandbox, Web Preview for the sandbox preview URL
• Task/Reasoning for the agent's step list

Example repo. Clone a small but real repo into the sandbox on session start (e.g. a toy Express/Next API) so the demo is deterministic and runnable. Seed 3-4 example prompts as Suggestion chips.

What "done" looks like. Deployed on Vercel, working against both e2b and Daytona. Picking a suggested prompt and watching: WarpGrep tool card resolves → files highlight in the tree → Fast Apply tool card renders a diff → file updates in the editor → run_command shows tests/build passing in the Terminal → Web Preview reflects the change. All streaming, no page reload.

Reference material.

• AI SDK: https://ai-sdk.dev/docs/introduction · OpenAI-compatible provider: https://ai-sdk.dev/providers/openai-compatible-providers
• AI Elements: https://elements.ai-sdk.dev/overview (install npx ai-elements@latest add tool conversation message response code-block file-tree terminal web-preview prompt-input)
• Morph SDK + tool factories: https://docs.morphllm.com/sdk/reference · full agent context: https://docs.morphllm.com/llms-full.txt
• e2b: https://e2b.dev/docs · Daytona: https://www.daytona.io/docs
• Mirror the existing model selector in landing/src/app/dashboard/playground/fast-code/FastCodePlayground.tsx
• MUST use the new model router: https://docs.morphllm.com/sdk/components/router

---

Getting started

cp .env.example .env.local   # fill in MORPH_API_KEY, sandbox keys
npm install
npm run dev

Set SANDBOX_PROVIDER=e2b or daytona and provide the matching API key.