Add an AI chat to SvelteKit where the user approves every tool call

The Vercel AI SDK gives a Svelte app the conversation: the messages, the stream, the tool calls. The chat itself (bubbles, Markdown that renders as it streams, a composer, what a tool call looks like, how a person approves one) is yours to build: the SDK's ready-made chat components are React. In this tutorial we put a whole chat on a SvelteKit page, in about 150 lines: the model is called from a SvelteKit route, so the API key never reaches the browser; the model can call one tool, add_task, and it runs only after the user clicks Approve; the call is drawn by a Svelte component of yours. The chat UI is aparté, an MIT library I maintain: Web Components with a thin Svelte wrapper (there are React, Vue and Angular ones too). The code below is for SvelteKit 3.1, Svelte 5.57, AI SDK 7 and aparté 1.0.2. The finished app is in apartejs/examples, and you can try it on StackBlitz before reading on, without a key: with none, a scripted model answers in place of Claude. It understands