Code Interpreter with Vercel AI SDK

UPSTASH_BOX_API_KEY=box_xxxxxxxxxxxxxxxxxxxxxxxxANTHROPIC_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>  );}