AI for TypeScript Developers 🌲

CascadiaJS 2026 · Thursday, June 4 · with Eve Porcello

Today we build real AI features in TypeScript with the Vercel AI SDK (v6) and the AI Gateway. We start with a single model call and end with a production-ready RAG feature: streaming, structured, type-safe, and cost-aware.

---

⚙️ Setup

1. Node 20+: node --version.
2. Clone & install:

   npm install

3. Get an AI Gateway key: Vercel dashboard → AI Gateway → API Keys. Then:

   cp .env.example .env   # paste your key into .env

4. Smoke test:

   npm run hello

   If you get a two-sentence answer, you're ready. 🎉

💡 The Gateway is the star. One key, every model. Open src/config.ts and change MODEL to openai/gpt-5.5 or google/gemini-3.1-pro-preview, every example re-routes. No new SDK, no new key. That's the whole pitch.

---

🗺️ The day

Morning, AI SDK essentials

#	Lesson	Run
00	Setup & the SDK in 5 minutes	npm run hello
01	Fundamentals: generate & stream	npm run stream
02	Streaming chat UI with useChat	(see next-chat/)
03	Prompts, messages & responses	npm run system
04	Structured outputs with Zod	npm run structured

Afternoon, shipping advanced patterns

#	Lesson	Run
05	Retrieval Augmented Generation (RAG)	npm run embeddings · npm run rag
06	Production AI features	npm run errors · npm run production

🔬 Labs

Each lesson has a matching lab in labs/. The labs follow one project across the whole day — you pick it during setup and add each lesson's pattern to it. No starter code, no prescribed answer. Use your AI tools to build.

Lab	What you add
00 · Pick your project	Project brief + initial scaffold
01 · First AI call	generateText or streamText
02 · Streaming UI	useChat browser interface
03 · Sharpen your prompts	System prompt + few-shot examples
04 · Structured output	Zod schema + generateObject
05 · RAG	Knowledge base + retrieval
06 · Ship it	Caching, fallbacks, cost awareness

🏃 All the scripts

Command	What it shows
npm run hello	one-shot generation through the Gateway
npm run stream	token streaming
npm run chat	multi-turn terminal chat
npm run system	system prompts & few-shot messages
npm run structured	typed output with generateObject + Zod
npm run errors	retries, fallbacks, timeouts
npm run embeddings	semantic similarity
npm run rag	full tiny RAG pipeline (npm run rag "your question")
npm run production	caching, rate limiting, cost tracking

🖥️ The browser chat (next-chat/)

A minimal Next.js app showing the canonical useChat streaming UI. It's self-contained with its own install, see next-chat/README.md.

Let's build. ✨