Building AI-Powered Apps

Build a streaming AI shopping assistant on top of a real React Router app

Take a working React Router 7 e-commerce app and progressively layer in a production-grade AI shopping assistant: a streaming chat endpoint, a polished client UI built on useChat, page-aware system prompts, tools that hit a real Prisma catalog, structured output, approval flows for mutating actions, and finally code-mode orchestration running in a V8 isolate. By the end you've shipped real AI features into a real app — not a toy demo.

---

---

What you'll build

A floating AI shopping assistant pinned to the bottom-right of every product page in the included EpicStore e-commerce app. By the end of the workshop, the assistant can:

• Stream replies from an OpenRouter-backed LLM
• Stay grounded in the product the user is currently viewing
• Search the real Prisma-backed catalog through type-safe tools
• Recommend sizes by reasoning over real review data
• Return structured product comparisons that render as a typed React component
• Add items to the user's cart only after explicit approval

Every exercise lands in the same e-commerce app so the AI features feel like real product work, not isolated demos.

Prerequisites

• Solid React fundamentals (components, hooks, state)
• Basic familiarity with React Router 7 (loaders, actions, framework mode)
• Basic TypeScript
• Comfort reading short Prisma queries (you won't write any in this workshop — the data layer is scaffolding)
• An OpenRouter account — the free tier is enough

You do not need prior experience with LLMs, prompt engineering, agents, or any other AI tooling. The workshop builds that mental model from zero.

Pre-workshop Resources

These are optional but useful to skim before showing up:

• TanStack AI overview — the library this workshop is built on
• TanStack AI quick start — the basic chat() + useChat pattern
• React Router 7 framework mode — the host framework

System Requirements

• git v2.18 or greater
• NodeJS v24 or greater
• npm v9 or greater
• A native C++ build toolchain (for the code-mode exercise — V8 isolates via isolated-vm):
  • macOS: Xcode Command Line Tools (xcode-select --install)
  • Linux: build-essential
  • Windows: Visual Studio C++ build tools (the npm install should handle this automatically with the bundled windows-build-tools)

All of these must be available in your PATH. To verify:

git --version
node --version
npm --version

If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.

Setup

npx --yes epicshop@latest add ai-powered-apps

Then add your OpenRouter API key to the .env in any exercise playground:

OPENROUTER_API_KEY=your-key-here

If you experience errors during setup, please open an issue with as many details as you can offer.

The Workshop App

Learn all about the workshop app on the Epic Web Getting Started Guide.

Make sure to complete the Epic Workshop app Tutorial:

npx --yes epicshop@latest add epicshop-tutorial