# AI Chat

This track builds one thing end to end: a **durable AI chat app**. By the last chapter you will have a chat whose transcript — messages, streaming markdown, and tool-call cards — survives reload, reconnect, and a second tab, because it is backed by a durable session stream rather than component state. It runs on shipped NetScript seams: the [`@netscript/fresh/ai`](https://rickylabs.github.io/netscript/reference/fresh/) durable-chat plane (published on JSR in `@netscript/fresh` and usable now) and the [`@netscript/fresh-ui`](https://rickylabs.github.io/netscript/reference/fresh-ui/) copy-registry chat components.

1. [1 · Scaffold](https://rickylabs.github.io/netscript/netscript/tutorials/chat/01-scaffold/)
2. [2 · Durable chat route](https://rickylabs.github.io/netscript/netscript/tutorials/chat/02-durable-chat-route/)
3. [3 · Chat UI](https://rickylabs.github.io/netscript/netscript/tutorials/chat/03-chat-ui/)
4. [4 · Server-side tool call](https://rickylabs.github.io/netscript/netscript/tutorials/chat/04-tool-call/)

## What you will build

A `chat-app/` Fresh workspace whose home screen is a working chat. The reader scaffolds a fresh NetScript project with the streams runtime, wires a durable chat session route that calls a model directly on `@tanstack/ai`, copies the fresh-ui `ai` component collection and hydrates a chat island, then adds one server-side tool whose result surfaces as a tool-call card with citation chips. This is a learning track: the same project grows chapter by chapter, so do them in order.

## Before you begin

You need the standard NetScript toolchain — Deno, the Aspire CLI, and Docker — plus a model provider key. Confirm the toolchain:

```sh
deno --version && aspire --version && docker info
```

You should see a Deno 2.x version, an Aspire CLI version, and Docker engine details. If any are missing, the [quickstart](https://rickylabs.github.io/netscript/quickstart/) walks through installing them. Install the NetScript CLI once:

```sh
deno install --global --allow-all --name netscript jsr:@netscript/cli@0.0.1-beta.4
```

> You need a model provider key
>
> This track calls Anthropic directly through
>
> @tanstack/ai
>
> . Have an
>
> ANTHROPIC_API_KEY
>
> ready before chapter 1 — chapter 1 shows where to set it so Aspire injects it into the app process. Any provider
>
> @tanstack/ai
>
> supports works; this track uses Anthropic for concreteness.

## The arc: session → route → UI → tool

Each chapter adds exactly one link in the durable-chat spine:

[1 · Scaffold the workspace  Create `chat-app/` with `netscript init`, add the `streams` plugin so durable sessions have a runtime, set `ANTHROPIC_API_KEY`, and boot under Aspire.](https://rickylabs.github.io/netscript/netscript/tutorials/chat/01-scaffold/)

[2 · The durable chat route  Wire the session route with `toNetScriptChatResponse` + a required `authorize` hook, the one `createNetScriptChatStreamProxy`, and a direct model call on `@tanstack/ai`.](https://rickylabs.github.io/netscript/netscript/tutorials/chat/02-durable-chat-route/)

[3 · The chat UI  Copy the fresh-ui `ai` collection (message, prompt-input, markdown, chat-render) and hydrate an island that seeds from `resolveChatSnapshot` and drives `createNetScriptChatConnection`.](https://rickylabs.github.io/netscript/netscript/tutorials/chat/03-chat-ui/)

[4 · A server-side tool call  Add one `@tanstack/ai` tool the model can call; surface the invocation as a `tool-call-card` and render its citations as chips.](https://rickylabs.github.io/netscript/netscript/tutorials/chat/04-tool-call/)

> What this track deliberately leaves out
>
> The tutorial stops at what works on shipped seams: durable chat, streaming markdown, one server-side tool, and citations rendered from plain tool output. It does
>
> not
>
> cover MCP-UI widget round-trips, the generative-UI renderer, agent memory / semantic recall, or RAG — those seams are not shipped in this cut. The
>
> @netscript/ai
>
> engine that will own the model-call layer arrives in
>
> 0.0.1-beta.2
>
> and is
>
> publish:false
>
> today.

## What you built

By the end of this track you own a working durable chat app and understand the four seams that make it durable — the session route, the stream proxy, the SSR seed, and the client connection — plus how the fresh-ui chat components render its transcript.

[Tutorials](https://rickylabs.github.io/netscript/netscript/tutorials/) [1 · Scaffold](https://rickylabs.github.io/netscript/netscript/tutorials/chat/01-scaffold/)