wehub-resource-sync
609 lines
25 KiB
TypeScript
609 lines
25 KiB
TypeScript
import {
|
||
CopilotRuntime,
|
||
ExperimentalEmptyAdapter,
|
||
copilotRuntimeNextJSAppRouterEndpoint,
|
||
} from "@copilotkit/runtime";
|
||
import { BuiltInAgent, defineTool } from "@copilotkit/runtime/v2";
|
||
import { z } from "zod";
|
||
import { NextRequest } from "next/server";
|
||
import { MCPAppsMiddleware, getServerHash } from "@ag-ui/mcp-apps-middleware";
|
||
import { map } from "rxjs/operators";
|
||
import { E2BWorkspaceProvider } from "@/lib/workspace/e2b";
|
||
import { getDefaultMcpServers, type McpServerConfig } from "@/lib/mcp-defaults";
|
||
|
||
// Allow up to 5 minutes for long agent loops
|
||
export const maxDuration = 300;
|
||
|
||
/**
|
||
* Fallback used only when no x-mcp-servers header is present
|
||
* (e.g. direct API calls, curl tests).
|
||
* In normal frontend usage the header is always sent by DynamicCopilotKitProvider.
|
||
*/
|
||
function readMcpServersFromHeader(req: NextRequest): McpServerConfig[] {
|
||
try {
|
||
const raw = req.headers.get("x-mcp-servers");
|
||
if (raw == null) return getDefaultMcpServers();
|
||
const parsed = JSON.parse(raw) as McpServerConfig[];
|
||
if (!Array.isArray(parsed)) return getDefaultMcpServers();
|
||
console.log(
|
||
"[copilotkit] MCP servers from header:",
|
||
parsed.map((s) => s.url),
|
||
);
|
||
return parsed;
|
||
} catch {
|
||
console.warn(
|
||
"[copilotkit] Failed to parse x-mcp-servers header, using defaults",
|
||
);
|
||
return getDefaultMcpServers();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Subclass that fixes widget HTML for CSP-safe rendering:
|
||
* 1. Strips <base> tags (blocked by CSP base-uri 'self' in SANDBOX_HTML)
|
||
* 2. Rewrites internal origin refs to the external server origin
|
||
* (for window.__mcpPublicUrl, window.__getFile, etc.)
|
||
*
|
||
* With --inline builds, all JS/CSS is inlined into the HTML, so no external
|
||
* script/style loads are needed. Only image/fetch URLs need rewriting.
|
||
*/
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
class MCPAppsMiddlewareFixBase extends MCPAppsMiddleware {
|
||
private _mcpServers: McpServerConfig[];
|
||
|
||
constructor(opts: { mcpServers: McpServerConfig[] }) {
|
||
super(opts);
|
||
this._mcpServers = opts.mcpServers || [];
|
||
}
|
||
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
run(input: any, next: any) {
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const source = super.run(input, next) as any;
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const proxiedReq = (input as any).forwardedProps?.__proxiedMCPRequest;
|
||
const isResourceRead = proxiedReq?.method === "resources/read";
|
||
if (!isResourceRead) return source;
|
||
|
||
// Find the server config to get the correct external origin URL
|
||
let serverOrigin: string | null = null;
|
||
if (proxiedReq) {
|
||
const cfg = this._mcpServers.find((s) => {
|
||
if (proxiedReq.serverId && s.serverId)
|
||
return s.serverId === proxiedReq.serverId;
|
||
if (proxiedReq.serverHash)
|
||
return (
|
||
getServerHash({ type: s.type, url: s.url } as Parameters<
|
||
typeof getServerHash
|
||
>[0]) === proxiedReq.serverHash
|
||
);
|
||
return false;
|
||
});
|
||
if (cfg) {
|
||
try {
|
||
serverOrigin = new URL(cfg.url).origin;
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
}
|
||
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
return source.pipe(
|
||
map((event: any) => {
|
||
if (
|
||
event.type === "RUN_FINISHED" &&
|
||
Array.isArray(event.result?.contents)
|
||
) {
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const contents = event.result.contents.map((c: any) => {
|
||
if (typeof c.text === "string") {
|
||
let html = c.text;
|
||
const baseTagMatch = html.match(/<base\s+href="([^"]*)"[^>]*>/i);
|
||
if (baseTagMatch) {
|
||
try {
|
||
const internalOrigin = new URL(baseTagMatch[1]).origin;
|
||
// Strip <base> tag (violates CSP base-uri 'self')
|
||
html = html.replace(/<base\b[^>]*>/gi, "");
|
||
// Rewrite all remaining internal origin references
|
||
if (serverOrigin && internalOrigin !== serverOrigin) {
|
||
html = html.replaceAll(internalOrigin, serverOrigin);
|
||
}
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
}
|
||
return { ...c, text: html };
|
||
}
|
||
return c;
|
||
});
|
||
return { ...event, result: { ...event.result, contents } };
|
||
}
|
||
return event;
|
||
}),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ── E2B workspace provider (stateless — safe to reuse across requests) ──────
|
||
|
||
const workspaceProvider = new E2BWorkspaceProvider();
|
||
|
||
// ── Backend tools — run server-side inside the agent loop ────────────────────
|
||
|
||
const workspaceTools = [
|
||
defineTool({
|
||
name: "provision_workspace",
|
||
description:
|
||
"Create an E2B sandbox from the pre-built mcp-use-server template. " +
|
||
"With a template this takes ~3 s (deps + server are baked in). " +
|
||
"Returns workspaceId and endpoint. " +
|
||
"After success, ALWAYS call add_mcp_server(endpoint, serverId) " +
|
||
"and set_active_workspace(workspaceId, endpoint) so the UI updates.",
|
||
parameters: z.object({
|
||
name: z
|
||
.string()
|
||
.describe("Short identifier for this workspace, e.g. 'weather-widget'"),
|
||
}),
|
||
execute: async ({ name }) => {
|
||
const info = await workspaceProvider.provision(name);
|
||
return JSON.stringify({
|
||
workspaceId: info.workspaceId,
|
||
endpoint: info.endpoint,
|
||
status: info.status,
|
||
nextSteps: [
|
||
`Call add_mcp_server("${info.endpoint}", "${name}") to connect the sandbox to the UI`,
|
||
`Call set_active_workspace("${info.workspaceId}", "${info.endpoint}") to show the status badge`,
|
||
],
|
||
});
|
||
},
|
||
}),
|
||
|
||
defineTool({
|
||
name: "read_file",
|
||
description:
|
||
"Read a file from the active E2B workspace. Path is relative to workspace root " +
|
||
"(/home/user/workspace). Use this to inspect existing code before editing.",
|
||
parameters: z.object({
|
||
workspaceId: z
|
||
.string()
|
||
.describe("Sandbox ID returned by provision_workspace"),
|
||
path: z
|
||
.string()
|
||
.describe("Relative file path, e.g. 'index.ts' or 'tools/my-tool.ts'"),
|
||
}),
|
||
execute: async ({ workspaceId, path }) => {
|
||
return await workspaceProvider.readFile(workspaceId, path);
|
||
},
|
||
}),
|
||
|
||
defineTool({
|
||
name: "write_file",
|
||
description:
|
||
"Write (create or overwrite) a file in the active E2B workspace. " +
|
||
"Parent directories are created automatically. Path is relative to workspace root.",
|
||
parameters: z.object({
|
||
workspaceId: z.string().describe("Sandbox ID"),
|
||
path: z
|
||
.string()
|
||
.describe(
|
||
"Relative file path, e.g. 'resources/price-chart/widget.tsx'",
|
||
),
|
||
content: z.string().describe("Full file content to write"),
|
||
}),
|
||
execute: async ({ workspaceId, path, content }) => {
|
||
await workspaceProvider.writeFile(workspaceId, path, content);
|
||
return `Wrote ${content.length} chars to "${path}"`;
|
||
},
|
||
}),
|
||
|
||
defineTool({
|
||
name: "edit_file",
|
||
description:
|
||
"Targeted search-and-replace in a workspace file. " +
|
||
"The search string must match exactly (including whitespace/newlines). " +
|
||
"Prefer this over write_file for small changes.",
|
||
parameters: z.object({
|
||
workspaceId: z.string().describe("Sandbox ID"),
|
||
path: z.string().describe("Relative file path"),
|
||
search: z.string().describe("Exact string to find in the file"),
|
||
replace: z.string().describe("String to replace it with"),
|
||
}),
|
||
execute: async ({ workspaceId, path, search, replace }) => {
|
||
await workspaceProvider.editFile(workspaceId, path, search, replace);
|
||
return `Edited "${path}" — replaced the target string.`;
|
||
},
|
||
}),
|
||
|
||
defineTool({
|
||
name: "exec",
|
||
description:
|
||
"Run a shell command in the workspace root of the active E2B sandbox. " +
|
||
"Use background=true for long-running processes (e.g. starting the dev server). " +
|
||
"Rebuild sequence after edits: " +
|
||
"1) exec(\"ss -tlnp 'sport = :3109' | grep -oP 'pid=\\\\K[0-9]+' | head -1 | xargs -r kill; sleep 1\") " +
|
||
"2) exec('npm run dev', background=true).",
|
||
parameters: z.object({
|
||
workspaceId: z.string().describe("Sandbox ID"),
|
||
cmd: z.string().describe("Shell command to run"),
|
||
background: z
|
||
.boolean()
|
||
.optional()
|
||
.describe(
|
||
"Run in background and return immediately (for servers). Default: false.",
|
||
),
|
||
timeoutMs: z
|
||
.number()
|
||
.optional()
|
||
.describe(
|
||
"Timeout in milliseconds for foreground commands. Default: 60000.",
|
||
),
|
||
}),
|
||
execute: async ({ workspaceId, cmd, background, timeoutMs }) => {
|
||
const result = await workspaceProvider.exec(workspaceId, cmd, {
|
||
background,
|
||
timeoutMs,
|
||
});
|
||
if (result.background) return `Started in background: ${cmd}`;
|
||
const parts: string[] = [];
|
||
if (result.stdout) parts.push(`stdout:\n${result.stdout}`);
|
||
if (result.stderr) parts.push(`stderr:\n${result.stderr}`);
|
||
parts.push(`exit code: ${result.exitCode}`);
|
||
return parts.join("\n");
|
||
},
|
||
}),
|
||
|
||
defineTool({
|
||
name: "get_workspace_info",
|
||
description: "Get current status and endpoint of the active E2B sandbox.",
|
||
parameters: z.object({
|
||
workspaceId: z.string().describe("Sandbox ID"),
|
||
}),
|
||
execute: async ({ workspaceId }) => {
|
||
const info = await workspaceProvider.getInfo(workspaceId);
|
||
return JSON.stringify(info);
|
||
},
|
||
}),
|
||
|
||
defineTool({
|
||
name: "download_workspace",
|
||
description:
|
||
"Package the current workspace as a .tar.gz archive (excludes node_modules/dist) and return a signed download URL. " +
|
||
"Present the URL to the user so they can download their MCP server.",
|
||
parameters: z.object({
|
||
workspaceId: z.string().describe("Sandbox ID"),
|
||
}),
|
||
execute: async ({ workspaceId }) => {
|
||
const { downloadUrl } =
|
||
await workspaceProvider.prepareDownload(workspaceId);
|
||
return `Workspace packaged. Download URL (valid ~1 hour): ${downloadUrl}`;
|
||
},
|
||
}),
|
||
];
|
||
|
||
// ── System prompt ─────────────────────────────────────────────────────────────
|
||
|
||
const AGENT_SYSTEM_PROMPT = `You are the MCP UI Studio coding agent. You can USE existing MCP tools and BUILD new ones in live E2B sandboxes.
|
||
|
||
CRITICAL — DO NOT STOP AFTER A TOOL CALL:
|
||
After every tool result you MUST continue in the same run. Either:
|
||
(a) Call the next tool in your plan, or
|
||
(b) Send a short text message to the user (e.g. "Done. Next I'll…" or "That succeeded. …").
|
||
Never end your turn immediately after a tool returns without doing (a) or (b). The user sees nothing if you stop without a message. Keep going until the workflow is complete, then send a final summary.
|
||
|
||
COMMUNICATION — follow these rules on every turn:
|
||
- Before calling any tool, send a short message explaining what you are about to do.
|
||
- After each tool returns, send a brief update: what succeeded and what comes next (or call the next tool).
|
||
- When the task is done, send a plain-text summary to the user.
|
||
- Keep messages concise (1–2 sentences). No filler phrases.
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
TEMPLATE KNOWLEDGE — mcp-use-server
|
||
═══════════════════════════════════════════════════════════════
|
||
The E2B sandbox runs a pre-built mcp-use-server template.
|
||
Deps and build artifacts are baked in — provisioning takes ~3 s.
|
||
The dev server starts automatically on port 3109.
|
||
|
||
Key files in the workspace (/home/user/workspace):
|
||
index.ts — Entry point. Has TWO marker comments:
|
||
// ADD NEW TOOL IMPORTS HERE
|
||
// ADD NEW TOOL REGISTRATIONS HERE
|
||
tools/<name>.ts — Tool backend: exports register(server).
|
||
resources/<widget-name>/widget.tsx — Widget UI: React component rendered in an iframe.
|
||
resources/<widget-name>/types.ts — Prop types: zod schema + TS type for the widget props.(Only needed for complex widgets)
|
||
resources/styles.css — Shared Tailwind styles (already exists, import in widgets).(Only needed for complex widgets)
|
||
package.json — Uses mcp-use framework + React + Tailwind.
|
||
|
||
Every MCP UI tool has TWO parts that you MUST create:
|
||
1. A tool file (tools/<name>.ts) — backend logic + widget binding
|
||
2. A widget folder (resources/<name>/) — React component the user sees
|
||
|
||
── TOOL FILE PATTERN (tools/<name>.ts) ─────────────────────────
|
||
|
||
\`\`\`ts
|
||
import { MCPServer, text, widget } from "mcp-use/server";
|
||
import { z } from "zod";
|
||
|
||
export function register(server: MCPServer) {
|
||
server.tool(
|
||
{
|
||
name: "get-weather",
|
||
description: "Fetch weather for a city and display it in a widget",
|
||
schema: z.object({
|
||
city: z.string().describe("City name"),
|
||
}),
|
||
widget: {
|
||
name: "weather-widget", // must match the folder name under resources/
|
||
invoking: "Fetching weather…",
|
||
invoked: "Weather loaded",
|
||
},
|
||
_meta: {
|
||
// REQUIRED for MCP UI Studio: preview shown in sidebar before any live call
|
||
"ui/previewData": {
|
||
city: "London",
|
||
temperature: 22,
|
||
conditions: "Sunny",
|
||
},
|
||
},
|
||
},
|
||
async ({ city }) => {
|
||
const temp = Math.round(15 + Math.random() * 20);
|
||
const conditions = ["Sunny", "Cloudy", "Rainy", "Windy"][Math.floor(Math.random() * 4)];
|
||
return widget({
|
||
props: { city, temperature: temp, conditions },
|
||
output: text(\`Weather in \${city}: \${temp}°C, \${conditions}\`),
|
||
});
|
||
}
|
||
);
|
||
}
|
||
\`\`\`
|
||
|
||
Key points:
|
||
• widget.name in the tool config MUST match the resources/ folder name.
|
||
• For every widget tool you MUST add _meta["ui/previewData"] with sample data matching
|
||
the widget props shape. This powers the MCP UI Studio sidebar preview (demo before any live call).
|
||
Example: _meta: { "ui/previewData": { city: "London", temperature: 22, conditions: "Sunny" } }
|
||
• The handler returns widget({ props, output }) — props go to the React component,
|
||
output is the text summary the LLM sees.
|
||
• For tools without UI, skip the widget config and _meta, and return text(...) instead.
|
||
|
||
── WIDGET FILE PATTERN (resources/<name>/types.ts) ─────────────
|
||
|
||
\`\`\`ts
|
||
import { z } from "zod";
|
||
|
||
export const propSchema = z.object({
|
||
city: z.string(),
|
||
temperature: z.number(),
|
||
conditions: z.string(),
|
||
});
|
||
|
||
export type WeatherWidgetProps = z.infer<typeof propSchema>;
|
||
\`\`\`
|
||
|
||
── WIDGET FILE PATTERN (resources/<name>/widget.tsx) ───────────
|
||
|
||
\`\`\`tsx
|
||
import { McpUseProvider, useWidget, type WidgetMetadata } from "mcp-use/react";
|
||
import React from "react";
|
||
import "../styles.css";
|
||
import { propSchema } from "./types";
|
||
import type { WeatherWidgetProps } from "./types";
|
||
|
||
export const widgetMetadata: WidgetMetadata = {
|
||
description: "Displays weather information for a city",
|
||
props: propSchema,
|
||
metadata: { prefersBorder: false },
|
||
};
|
||
|
||
const WeatherWidget: React.FC = () => {
|
||
const { props, isPending } = useWidget<WeatherWidgetProps>();
|
||
|
||
if (isPending) {
|
||
return (
|
||
<McpUseProvider>
|
||
<div className="p-6 animate-pulse">Loading weather…</div>
|
||
</McpUseProvider>
|
||
);
|
||
}
|
||
|
||
const { city, temperature, conditions } = props;
|
||
|
||
return (
|
||
<McpUseProvider>
|
||
<div className="rounded-2xl border border-default bg-surface-elevated p-6">
|
||
<h2 className="text-xl font-bold">{city}</h2>
|
||
<p className="text-4xl font-light mt-2">{temperature}°C</p>
|
||
<p className="text-secondary mt-1">{conditions}</p>
|
||
</div>
|
||
</McpUseProvider>
|
||
);
|
||
};
|
||
|
||
export default WeatherWidget;
|
||
\`\`\`
|
||
|
||
Key points:
|
||
• MUST export widgetMetadata (with props: propSchema) and a default React component.
|
||
• Wrap the entire component tree in <McpUseProvider>.
|
||
• useWidget<Props>() gives you { props, isPending } — show a loading state when isPending.
|
||
• Import "../styles.css" for Tailwind classes.
|
||
• The widget renders inside an iframe — it must be self-contained.
|
||
|
||
── REGISTERING IN index.ts ─────────────────────────────────────
|
||
|
||
Use edit_file with these exact marker strings:
|
||
1. Add import BEFORE the marker:
|
||
search: "// ADD NEW TOOL IMPORTS HERE"
|
||
replace: 'import { register as registerMyTool } from "./tools/my-tool";\\n// ADD NEW TOOL IMPORTS HERE'
|
||
2. Add registration BEFORE the marker:
|
||
search: "// ADD NEW TOOL REGISTRATIONS HERE"
|
||
replace: "registerMyTool(server);\\n// ADD NEW TOOL REGISTRATIONS HERE"
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
WORKFLOWS
|
||
═══════════════════════════════════════════════════════════════
|
||
|
||
You handle three kinds of requests. Pick the right workflow.
|
||
|
||
── A. BUILD A NEW MCP UI TOOL (user has no sandbox yet) ───────
|
||
|
||
Goal: spin up a sandbox, create the tool + widget, and make it live.
|
||
|
||
1. Spin up the sandbox.
|
||
provision_workspace("weather-app") → gives you workspaceId + endpoint.
|
||
|
||
2. Wire the sandbox into the UI so the user sees it.
|
||
add_mcp_server(endpoint, "weather-app")
|
||
set_active_workspace(workspaceId, endpoint)
|
||
|
||
3. Study the template so you understand the patterns.
|
||
read_file(workspaceId, "index.ts")
|
||
read_file(workspaceId, "tools/product-search.ts")
|
||
read_file(workspaceId, "resources/product-search-result/widget.tsx")
|
||
read_file(workspaceId, "resources/product-search-result/types.ts")
|
||
|
||
4. Create the widget (the UI the user will see).
|
||
write_file(workspaceId, "resources/weather-widget/types.ts", <prop schema + type>)
|
||
write_file(workspaceId, "resources/weather-widget/widget.tsx", <React component>)
|
||
The folder name ("weather-widget") becomes the widget name you reference in the tool.
|
||
|
||
5. Create the tool (the backend that powers the widget).
|
||
write_file(workspaceId, "tools/weather.ts", <tool code>)
|
||
Make sure the tool config has widget: { name: "weather-widget" } matching the folder.
|
||
|
||
6. Register the tool in index.ts so the server knows about it.
|
||
edit_file — add import at "// ADD NEW TOOL IMPORTS HERE"
|
||
edit_file — add registration at "// ADD NEW TOOL REGISTRATIONS HERE"
|
||
Skipping this step means the tool won't load.
|
||
|
||
7. Restart the dev server to pick up all changes.
|
||
"npm run dev" first runs "mcp-use build" (compiles widget React code into
|
||
the iframe bundle), then starts the server. Both steps must succeed.
|
||
exec(workspaceId, "kill $(lsof -t -i:3109) 2>/dev/null; sleep 1")
|
||
exec(workspaceId, "npm run dev", background=true)
|
||
|
||
8. Verify everything works.
|
||
exec(workspaceId, "sleep 8") — give the build + server startup time to finish.
|
||
refresh_mcp_tools()
|
||
If the new tool does NOT appear, check for build errors:
|
||
exec(workspaceId, "cat /tmp/dev.log") or re-run npm run dev in foreground
|
||
to see the error output, fix the code, and restart again.
|
||
Once confirmed, tell the user it's live.
|
||
|
||
── B. ADD / EDIT A TOOL (sandbox already running) ─────────────
|
||
|
||
The sandbox and UI are already connected — skip steps 1–2.
|
||
|
||
• To edit an existing tool → read_file the tool and/or widget, then edit_file.
|
||
• To add a new tool → create the widget folder (types.ts + widget.tsx),
|
||
create the tool file, register in index.ts (same as A.4–A.6).
|
||
• After any change → restart the server (A.7) and verify (A.8).
|
||
Remember: "npm run dev" rebuilds widgets before starting, so widget
|
||
changes only take effect after a restart.
|
||
|
||
── C. USE AN EXISTING MCP TOOL ────────────────────────────────
|
||
|
||
The user wants to call a tool already registered on a connected server.
|
||
No sandbox work — the tool is available to you via the middleware. Just call it.
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
EXAMPLE — "Build me a crypto price widget"
|
||
═══════════════════════════════════════════════════════════════
|
||
|
||
User: "Build a crypto price widget"
|
||
|
||
→ You say: "I'll spin up a sandbox and build that for you."
|
||
→ provision_workspace("crypto-price")
|
||
→ add_mcp_server(endpoint, "crypto-price")
|
||
→ set_active_workspace(workspaceId, endpoint)
|
||
|
||
→ You say: "Sandbox is ready. Let me study the template first."
|
||
→ read_file(workspaceId, "index.ts")
|
||
→ read_file(workspaceId, "tools/product-search.ts")
|
||
→ read_file(workspaceId, "resources/product-search-result/widget.tsx")
|
||
→ read_file(workspaceId, "resources/product-search-result/types.ts")
|
||
|
||
→ You say: "Got it. I'll create the widget UI first, then the tool."
|
||
→ write_file(workspaceId, "resources/crypto-price/types.ts",
|
||
<zod schema: symbol, price, change24h, marketCap>)
|
||
→ write_file(workspaceId, "resources/crypto-price/widget.tsx",
|
||
<React component: shows coin name, price in large text, 24h change with
|
||
green/red coloring, market cap, loading skeleton when isPending>)
|
||
|
||
→ You say: "Widget created. Now writing the tool that fetches prices."
|
||
→ write_file(workspaceId, "tools/crypto-price.ts",
|
||
<tool: name "get-crypto-price", schema { symbol: z.string() },
|
||
widget: { name: "crypto-price" }, handler fetches mock/real price data
|
||
and returns widget({ props, output: text(...) })>)
|
||
|
||
→ You say: "Registering the tool in index.ts."
|
||
→ edit_file(workspaceId, "index.ts", ...) — add import
|
||
→ edit_file(workspaceId, "index.ts", ...) — add registration
|
||
|
||
→ You say: "All files written. Restarting the server — this will rebuild the widget and start fresh."
|
||
→ exec(workspaceId, "kill $(lsof -t -i:3109) 2>/dev/null; sleep 1")
|
||
→ exec(workspaceId, "npm run dev", background=true)
|
||
→ exec(workspaceId, "sleep 8")
|
||
→ refresh_mcp_tools()
|
||
|
||
→ You say: "Your crypto price widget is live! You should see get-crypto-price in the sidebar. Try asking me to look up the price of Bitcoin."
|
||
|
||
═══════════════════════════════════════════════════════════════
|
||
AVAILABLE TOOLS
|
||
═══════════════════════════════════════════════════════════════
|
||
BACKEND (run inside the E2B sandbox):
|
||
provision_workspace — create a new sandbox (~3 s with template)
|
||
read_file — read any file in the workspace
|
||
write_file — create or overwrite a file
|
||
edit_file — search-and-replace inside a file
|
||
exec — run a shell command (use background=true for servers)
|
||
get_workspace_info — check sandbox status
|
||
download_workspace — archive the workspace and get a download URL
|
||
|
||
FRONTEND ACTIONS (update UI state — no server-side effect):
|
||
add_mcp_server(endpoint, serverId) — connect sandbox to the sidebar
|
||
set_active_workspace(workspaceId, endpoint) — show the "Running" badge
|
||
refresh_mcp_tools() — re-introspect servers after a restart
|
||
|
||
Always pass the workspaceId from provision_workspace to every subsequent backend tool call.`;
|
||
|
||
// ── Request handler ────────────────────────────────────────────────────────────
|
||
// Note: If the agent stops after one or two tool calls with no final message, the
|
||
// LLM is likely ending the turn after tool results. The system prompt instructs it
|
||
// to always continue (next tool or a user message). If it persists, see CopilotKit
|
||
// issues e.g. #2416 (tool result / RunError handling) and runtime agent-loop options.
|
||
|
||
export const POST = async (req: NextRequest) => {
|
||
const mcpServers = readMcpServersFromHeader(req);
|
||
|
||
const middleware = new MCPAppsMiddlewareFixBase({ mcpServers });
|
||
|
||
const agent = new BuiltInAgent({
|
||
model: "openai/gpt-4o",
|
||
prompt: AGENT_SYSTEM_PROMPT,
|
||
// Cast: defineTool() returns specific Zod types; BuiltInAgent expects ToolDefinition<ZodTypeAny>[]
|
||
tools: workspaceTools as unknown as ConstructorParameters<
|
||
typeof BuiltInAgent
|
||
>[0]["tools"],
|
||
});
|
||
|
||
agent.use(middleware);
|
||
|
||
const serviceAdapter = new ExperimentalEmptyAdapter();
|
||
|
||
const runtime = new CopilotRuntime({
|
||
agents: {
|
||
default: agent,
|
||
},
|
||
});
|
||
|
||
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
|
||
runtime,
|
||
serviceAdapter,
|
||
endpoint: "/api/copilotkit",
|
||
});
|
||
|
||
return handleRequest(req);
|
||
};
|