Code Interpreter with Vercel AI SDK

UPSTASH_BOX_API_KEY=box_xxxxxxxxxxxxxxxxxxxxxxxx
ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxxxxx

import { streamText, tool, convertToModelMessages, stepCountIs } from "ai";
import { anthropic } from "@ai-sdk/anthropic";
import { EphemeralBox } from "@upstash/box";
import { z } from "zod";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: anthropic("claude-sonnet-4-6"),
    system:
      "You are a helpful assistant with access to a secure code sandbox. " +
      "When the user asks for computation, data analysis, or math — write and run code " +
      "instead of estimating. Prefer Python for numerical work, JavaScript for JSON or string processing.",
    messages: await convertToModelMessages(messages),
    stopWhen: stepCountIs(10),
    tools: {
      executeSandboxCode: tool({
        description:
          "Run Python or JavaScript code in a secure, isolated sandbox. " +
          "Use this for any math, data processing, or computation.",
        inputSchema: z.object({
          lang: z.enum(["python", "js"]).describe("Language to run"),
          code: z.string().describe("The code to execute"),
        }),
        execute: async ({ lang, code }) => {
          const box = await EphemeralBox.create({
            apiKey: process.env.UPSTASH_BOX_API_KEY,
            runtime: lang === "python" ? "python" : "node",
            ttl: 120,
          });

          try {
            const run = await box.exec.code({ lang, code, timeout: 10_000 });
            return {
              success: run.exitCode === 0,
              output: run.result,
            };
          } finally {
            await box.delete();
          }
        },
      }),
    },
  });

  return result.toUIMessageStreamResponse();
}

"use client";

import { useState } from "react";
import { useChat } from "@ai-sdk/react";

export default function Page() {
  const { messages, sendMessage, status } = useChat();
  const [input, setInput] = useState("");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!input.trim()) return;
    sendMessage({ text: input });
    setInput("");
  }

  return (
    <div className="mx-auto flex h-screen max-w-2xl flex-col p-4">
      <h1 className="mb-4 text-lg font-semibold">Code Interpreter</h1>

      <div className="flex-1 space-y-4 overflow-y-auto">
        {messages.map((message) => (
          <div key={message.id}>
            <div className="text-xs font-medium text-gray-500">
              {message.role === "user" ? "You" : "Assistant"}
            </div>
            {message.parts.map((part, i) => {
              if (part.type === "text") {
                return (
                  <p key={i} className="whitespace-pre-wrap text-sm">
                    {part.text}
                  </p>
                );
              }
              if (part.type.startsWith("tool-")) {
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                const p = part as any;
                const toolName = part.type.slice(5);
                const isDone = p.state === "output-available";
                return (
                  <div
                    key={i}
                    className="my-1 rounded border border-gray-200 bg-gray-50 p-2 text-xs"
                  >
                    <code>{toolName}</code>{" "}
                    <span className={isDone ? "text-green-600" : "text-gray-400"}>
                      {isDone ? "✓" : "running…"}
                    </span>
                    {isDone && p.output && (
                      <pre className="mt-1 overflow-x-auto">
                        {String(p.output.output)}
                      </pre>
                    )}
                  </div>
                );
              }
              return null;
            })}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="mt-4 flex gap-2">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask me to compute something..."
          disabled={status === "streaming"}
          className="flex-1 rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400"
        />
        <button
          type="submit"
          disabled={status === "streaming"}
          className="rounded bg-black px-4 py-2 text-sm text-white disabled:opacity-40"
        >
          Send
        </button>
      </form>
    </div>
  );
}