Map the three flavors

Welcome! I'm Param, and in this workshop we are going to ship three different RAG flavors in the same Next.js app. By the end, you will have a direct streaming chat route, a native-tool route that uses Gemini's urlContext, and a custom LangChain pipeline, all speaking the Vercel AI SDK streaming protocol.

Most RAG tutorials pick one pattern and hide the tradeoffs. We are going to build all three and run them on the same URL so you can feel the difference in latency, control, and cost yourself.

The three routes

One Next.js app, three different retrieval strategies, one streaming protocol.

src/app/api/
text
src/app/api/
  chat/route.ts    # Direct streaming chat with OpenRouter or Mistral
  rag/route.ts     # Gemini urlContext tool, zero-setup URL RAG
  rag2/route.ts    # Cheerio + splitter + Mistral embeddings + Gemini

Three routes, three strategies, one repo. Same useChat hook on the frontend can talk to any of them because they all stream through the Vercel AI SDK.

Because "most powerful" costs latency and complexity. A custom pipeline gives you full control, but every request now runs scrape, split, embed, and search before the LLM sees anything. If the question is about a single public URL, Gemini's urlContext tool returns a grounded answer in one call. Choosing well is the skill.

Quiz: Quiz

Loading practice…