How to add an AI agent to a SvelteKit app

What an agent in a SvelteKit app is made of

• A server endpoint: a +server.ts file such as src/routes/api/chat/+server.ts that holds the model API key and calls the model. Model keys are private environment variables, importable only from server code.
• Tools: typed functions the model may call, each wrapping an operation your app already has, such as a query in src/lib/server or a call to an internal API.
• The agent loop: the model calls a tool, receives the result and decides the next step until it can answer. Cap the number of steps.
• A chat UI: a Svelte component that streams messages from the endpoint and shows tool activity.
• Authorization and approval: the handle hook puts the signed-in user on event.locals, tools act as that user, and actions that change data wait for the user to approve them.

Ways to add an agent to SvelteKit

Build an agent with the AI SDK

The AI SDK is Vercel's TypeScript library for model calls, tool calling and chat UIs; @ai-sdk/svelte provides its Svelte 5 bindings. The examples below use AI SDK 7 with SvelteKit 3 on a Node server (adapter-node). Install them with Zod for tool input schemas:

npm install ai @ai-sdk/svelte zod

1. Declare the secrets

SvelteKit 3 declares environment variables in src/env.ts. Variables without public: true can only be imported from $app/env/private, so the model key and the approval secret cannot end up in a browser bundle.

import { defineEnvVars } from "@sveltejs/kit/env";

export const variables = defineEnvVars({
  // ...your existing variables
  AI_GATEWAY_API_KEY: { description: "Vercel AI Gateway key" },
  TOOL_APPROVAL_SECRET: { description: "Signs tool approval requests" },
});

2. The endpoint

The endpoint reads the user your handle hook put on locals and answers 401 without one. Each tool closes over that user, so the model can choose an order ID but never whose orders it reads or cancels. The condition isStepCount(5) lets the model call tools and continue for up to five steps. The setting toolApproval makes cancelOrder wait for the user, and experimental_toolApprovalSecret signs approval requests so a client cannot forge one in the message history it sends back. A +server.ts handler returns a web Response, so the streamed body goes to the browser as it is produced.

import { error } from "@sveltejs/kit";
import {
  convertToModelMessages,
  createGateway,
  createUIMessageStreamResponse,
  isStepCount,
  streamText,
  toUIMessageStream,
  tool,
  type UIMessage,
} from "ai";
import { z } from "zod";
import { AI_GATEWAY_API_KEY, TOOL_APPROVAL_SECRET } from "$app/env/private";
import { cancelOrder, listOrders } from "#lib/server/orders.ts"; // your existing data layer
import type { RequestHandler } from "./$types";

const gateway = createGateway({ apiKey: AI_GATEWAY_API_KEY });

export const POST: RequestHandler = async ({ request, locals }) => {
  const user = locals.user; // set by your handle hook in src/hooks.server.ts
  if (!user) error(401, "Unauthorized");

  const { messages }: { messages: UIMessage[] } = await request.json();

  const result = streamText({
    model: gateway("anthropic/claude-sonnet-5.5"),
    instructions: "You help the signed-in user manage their orders. Use the tools; never guess order data.",
    messages: await convertToModelMessages(messages),
    tools: {
      listOrders: tool({
        description: "List the signed-in user's recent orders",
        inputSchema: z.object({ status: z.enum(["open", "shipped", "cancelled"]).optional() }),
        execute: async ({ status }) => listOrders(user.id, { status }),
      }),
      cancelOrder: tool({
        description: "Cancel one of the signed-in user's open orders",
        inputSchema: z.object({ orderId: z.string() }),
        execute: async ({ orderId }) => cancelOrder(user.id, orderId),
      }),
    },
    toolApproval: { cancelOrder: "user-approval" },
    experimental_toolApprovalSecret: TOOL_APPROVAL_SECRET,
    stopWhen: isStepCount(5),
    abortSignal: request.signal,
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
};

3. The chat page

In Svelte the AI SDK exposes a Chat class instead of a hook; its messages are reactive state, and it posts to /api/chat by default. When the model calls cancelOrder, the tool part arrives in the state approval-requested. The user's answer is sent with chat.addToolApprovalResponse, and the option sendAutomaticallyWhen resumes the conversation once every pending approval has a response.

<script lang="ts">
  import { Chat } from "@ai-sdk/svelte";
  import { lastAssistantMessageIsCompleteWithApprovalResponses } from "ai";

  let input = $state("");
  const chat = new Chat({
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
  });

  function send(event: SubmitEvent) {
    event.preventDefault();
    chat.sendMessage({ text: input });
    input = "";
  }
<\/script>

{#each chat.messages as message (message.id)}
  {#each message.parts as part, i (i)}
    {#if part.type === "text"}
      <p>{part.text}</p>
    {:else if part.type === "tool-cancelOrder" && part.state === "approval-requested" && !part.approval.isAutomatic}
      {@const id = part.approval.id}
      <p>Cancel order {JSON.stringify(part.input)}?</p>
      <button onclick={() => chat.addToolApprovalResponse({ id, approved: true })}>Approve</button>
      <button onclick={() => chat.addToolApprovalResponse({ id, approved: false })}>Deny</button>
    {/if}
  {/each}
{/each}

<form onsubmit={send}>
  <input bind:value={input} aria-label="Message" />
</form>

Production checklist for SvelteKit

• Authorize in the endpoint and in every tool. A +layout.server.ts check does not run for +server.ts requests, so check locals.user in the endpoint itself (or in the handle hook for all of /api) and scope every query to that user. See the SvelteKit auth guide.
• Keep the built-in CSRF check on. SvelteKit rejects cross-origin POSTs with form content types (including text/plain), and a cross-origin application/json POST needs a CORS preflight the endpoint does not grant. Do not add the chat endpoint's callers to csrf.trustedOrigins.
• Treat tool input and tool results as untrusted. The model chooses tool arguments, and data a tool returns (user-written text, emails, web pages) can contain instructions. Validate arguments with the schema and your own business rules, and require approval for anything irreversible.
• Limit cost. Cap steps, rate-limit the endpoint per user (for example in the handle hook) and set spending limits with your model provider.
• Allow for long responses. With adapter-node a stream runs as long as the connection stays open; on serverless adapters, raise the function's maximum duration and check that any proxy does not buffer the response.
• Keep secrets server-side. Import the model key and the approval secret only from $app/env/private, never declare them public: true.

Option: embed an in-app agent with Bunkhouse

If the agent's job is to help signed-in users do work your SvelteKit app already supports, you may not need to build the tools, agent loop and chat UI yourself. Bunkhouse adds an Assistant pane to an existing web app with one script tag. When a user opens it, the assistant works with what the page already offers: buttons, links, form fields and tables, the API requests your app makes, a hints file you publish for operations it cannot see, and WebMCP tools your page declares.

The model writes small programs that run in a sandbox on the embed origin, not in your page. They can only call capabilities the assistant has discovered and your configuration allows. Write actions are shown to the user for review before they run, the model never sees credentials, and your SvelteKit backend keeps enforcing its own authorization on every request.

In SvelteKit, put the loader in src/app.html before %sveltekit.head%, so it runs before the app's scripts and client-side navigation never re-runs it. With a nonce-based CSP, give it nonce="%sveltekit.nonce%". For signed-in users, add a src/routes/api/agent-identity/+server.ts endpoint that signs a short-lived token for the user on locals; the signing secret stays in $app/env/private.

<!-- src/app.html, before %sveltekit.head% -->
<script src="/agent-identity.js" nonce="%sveltekit.nonce%"><\/script>
<script src="https://embed.bunkhouse.ai/embed.js" nonce="%sveltekit.nonce%"
  data-public-key="pk_YOUR_SITE_PUBLIC_KEY"><\/script>

The tested SvelteKit integration guide has the complete code for each session mode (signed identity token, server mint and anonymous), CSRF headers and Content Security Policy settings.

When Bunkhouse fits, and when to build it yourself

• Bunkhouse fits when users want tasks done inside your existing pages, such as filtering, editing or submitting through the controls and API you already have, and you would rather not write and maintain a tool definition for each action, a sandbox for model-written code, an approval UI and usage metering.
• Build it yourself when the agent must run without a browser page (background jobs, email, chat platforms, scheduled work), when you need to choose the model provider, use your own keys or run inference on your own infrastructure, or when the conversation must be part of your own UI components.
• Plan for the limits: discovery cannot see server-only routes, workflows the user has not visited, closed shadow roots or cross-origin frames (describe those in a hints file); some controls need a real user gesture; password, payment and file fields are never read, and you can mark other content private.
• Cost: production use is $49 per month, including $20 of usage credit per paid billing period, then $1 per million input tokens and $3 per million output tokens. See billing.

Try it on your SvelteKit app first

A coding agent such as Claude Code, Codex or Cursor can run a free, disposable agent trial on a dummy page of your SvelteKit app. No account, card or model API key is needed: your coding agent acts as the assistant's model. A trial lasts 24 hours and allows 100 turns. Give your agent this instruction, changing the address if your app runs elsewhere:

Read https://api.bunkhouse.ai/agent-trial.md and follow it to run a Bunkhouse agent trial on my dummy SvelteKit page at http://localhost:5173.

The trial evaluation checklist shows how to test a read, a rejected write and an approved change, and what a trial does not prove about production use.

Related guides

• How to add AI to your website: chat assistants, in-app agents and custom builds compared
• MCP vs WebMCP: choosing where outside agents act on your site
• AI agents in other JavaScript and TypeScript frameworks: Angular, Astro, Express, Fastify, Hono, NestJS, Next.js, Nuxt, React, Vue