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 durable-chat plane (published on JSR in @netscript/fresh and usable now) and the @netscript/fresh-ui copy-registry chat components.

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:

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 walks through installing them. Install the NetScript CLI once:

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

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.

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.

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.

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.

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.