Learning Objectives

1Architect a multi-capability AI application (RAG + tools + streaming)
2Build a RAG pipeline over real documentation files
3Add tool-use for doc navigation, code search, and link extraction
4Implement production streaming UX with error boundaries
5Deploy a polished, portfolio-ready AI docs assistant

Ship It: AI docs assistant (portfolio piece)

By the end of this day, you'll build and deploy a ai docs assistant (portfolio piece). This isn't a toy — it's a real project for your portfolio.

Before You Start — Rate Your Confidence

I can architect a full AI pipeline combining RAG, tools, agents, and streaming into a production-ready application.

1 = no idea · 5 = ship it blindfolded

Predict First — Then Learn

What's the hardest part of building a full AI application?

Week 1 Capstone: Everything Comes Together

This is your first capstone — a real project that combines every skill from Days 1-6: structured output, embeddings, RAG, tools, agents, and streaming UX. You'll build an AI Documentation Assistant that can answer questions about any uploaded documentation, cite sources, and use tools to search and navigate. This is a portfolio-worthy project.

💡A capstone isn't a tutorial — it's proof you can combine every skill into one working system.

Quick Pulse Check

What makes a capstone project different from a tutorial exercise?

🏗️ Architecture: AI Doc Assistant

Click any node to highlight its connections and see which day taught that skill.

Architecture: AI Doc Assistant

The system uses a RAG pipeline with tool-use. Documents are chunked and embedded (Day 2-3). Questions trigger a retrieval tool (Day 4) that searches the vector store. The agent (Day 5) orchestrates multiple tool calls — search, cite, summarize. Responses stream to the UI (Day 6) with source citations. All outputs are structured (Day 1) for consistent rendering.

💡The architecture is days 1-6 stacked: embed → retrieve → reason with tools → stream structured output.

Quick Pulse Check

In the AI Doc Assistant, what triggers the retrieval tool?

🧱 Skill Stack — Days 1-6

Watch the Week 1 skills stack up to build the capstone architecture.

📚 Capstone Foundation

Predict First — Then Learn

Which matters more for RAG answer quality: the LLM model or the chunking strategy?

Design Decisions: What Senior Engineers Ship

A production doc assistant needs: recursive chunking with overlap for context preservation, metadata (filename, page, section) stored with each embedding, hybrid search (semantic + keyword) for better recall, re-ranking retrieved chunks before sending to the LLM, conversation memory so follow-up questions work, and streaming with inline source citations. Each of these is a Day 1-6 skill applied in context.

💡Senior engineers don't just make it work — they add overlap, metadata, hybrid search, and re-ranking.

Quick Pulse Check

Why use hybrid search (semantic + keyword) instead of just semantic search?

Predict First — Then Learn

How many of 6 production criteria must your capstone hit to be 'production-ready'?

Evaluation Rubric: Is It Production-Ready?

Grade your capstone: (1) Does it handle documents over 10 pages? (2) Are source citations accurate and clickable? (3) Does streaming work smoothly? (4) Does it handle 'I don't know' when the answer isn't in the docs? (5) Is there error recovery if the API fails mid-stream? (6) Can it handle follow-up questions using conversation context? Hit 4/6 and you've built something most AI tutorials never cover.

💡4/6 rubric criteria = production-ready. Most tutorials don't even cover 'I don't know' handling.

📋 Capstone Rubric — Self-Grade

Click each criterion you've implemented. Hit 4/6 to pass.

0/6Keep going…

The Full Evolution

Watch one function evolve through every concept you just learned.

🔄 Code Evolution — One Function, Five Stages

Step 1: Raw fetch()

The SWE starting point

Raw fetch, manual headers, raw text output

1async function reviewCode(code: string) {
2  const response = await fetch(
3    "https://api.openai.com/v1/chat/completions",
4    {
5      method: "POST",
6      headers: {
7        "Authorization": `Bearer ${API_KEY}`,
8        "Content-Type": "application/json",
9      },
10      body: JSON.stringify({
11        model: "gpt-4o-mini",
12        messages: [
13          { role: "user", content: `Review: ${code}` }
14        ],
15      }),
16    }
17  );
18  const data = await response.json();
19  return data.choices[0].message.content;
20  // Returns raw text — unparseable!
21}

1 / 5

Production Gotchas

Chunking matters more than your model choice. Bad chunks = bad answers regardless of GPT-4 vs Claude. Test with real documents, not toy examples — academic papers have different chunking needs than API docs. Users will upload 500-page PDFs — set limits and show progress. Cache embeddings aggressively — re-embedding the same doc is wasteful. Always include a 'Sources' section in responses so users can verify answers.

Code Comparison

Static FAQ vs AI Documentation Assistant

Traditional documentation search vs AI-powered doc Q&A

Static FAQ / SearchTraditional

// Traditional docs: keyword search + static pages
const results = docs.filter(doc =>
  doc.content.toLowerCase()
    .includes(query.toLowerCase())
);

// Returns matching pages, user reads them
return results.map(doc => ({
  title: doc.title,
  url: doc.url,
  snippet: doc.content.slice(0, 200),
}));
// Problems:
// - Misses semantic matches ("auth" vs "login")
// - User must read full pages to find answers
// - No conversation or follow-up questions

AI Doc Assistant (RAG + Tools)AI Engineering

// AI docs: semantic search + answer synthesis
import { streamText, tool } from "ai";
import { z } from "zod";

const result = streamText({
  model: openai("gpt-4o-mini"),
  system: "Answer from the documentation. " +
    "Always cite sources with [filename:page].",
  tools: {
    searchDocs: tool({
      description: "Search documentation",
      parameters: z.object({
        query: z.string(),
      }),
      execute: async ({ query }) => {
        // RAG: embed query → search vector store
        const chunks = await vectorSearch(query);
        return chunks.map(c => ({
          content: c.text,
          source: `${c.filename}:p${c.page}`,
          score: c.similarity,
        }));
      },
    }),
  },
  messages: conversationHistory,
});
// Returns: direct answer + source citations
// Handles follow-ups, semantic matching, synthesis

KEY DIFFERENCES

Keyword search misses semantic matches; embeddings catch them
AI synthesizes answers instead of showing raw pages
Tool-use lets the agent decide when/what to search
Conversation history enables follow-up questions

Bridge Map: Full-stack app → AI-native product

Click any bridge to see the translation

Hands-On Challenges

Build, experiment, and get AI-powered feedback on your code.

starter

Capstone: AI Documentation Assistant

Build a simplified AI Documentation Assistant. Given pre-chunked documentation, implement a RAG pipeline that: (1) takes a user question, (2) finds relevant chunks using semantic search, (3) generates an answer with source citations, and (4) returns structured output. This is the starter version — the full project extends this with streaming and conversation memory.

PLAYGROUND

import { useState } from "react";
import { z } from "zod";
// TODO: Import searchDocs, generateObject, openai from mock
// import { searchDocs, generateObject, openai } from "./ai-sdk-mock";

// TODO: Define an answer schema with:
// - answer: string (the generated answer)
// - sources: array of { reference: string, relevance: "high" | "medium" | "low" }
// - confidence: "high" | "medium" | "low"

const sampleQuestions = [
  "How do I authenticate with the API?",
  "What are the rate limits?",
  "How do I create a new user?",
  "How do file uploads work?",
];

export default function App() {
  const [question, setQuestion] = useState("");
  const [result, setResult] = useState<any>(null);
  const [chunks, setChunks] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  async function handleAsk() {
    if (!question.trim()) return;
    setLoading(true);
    setResult(null);
    setChunks([]);

    try {
      // TODO Step 1: Search for relevant documentation chunks
      // const relevantChunks = searchDocs(question);
      // setChunks(relevantChunks);

      // TODO Step 2: Build context from chunks
      // const context = relevantChunks.map(c => `[${c.source}]: ${c.content}`).join("\n\n");

      // TODO Step 3: Generate answer with generateObject()
      // Use system prompt: "Answer based on the documentation provided. Cite sources."
      // Use prompt: "Context:\n{context}\n\nQuestion: {question}"

      setResult({ answer: "Implement the RAG pipeline!", sources: [], confidence: "low" });
    } finally {
      setLoading(false);
    }
  }

  return (
    <div style={{ padding: 20, fontFamily: "sans-serif", maxWidth: 700 }}>
      <h2>📚 AI Documentation Assistant</h2>
      <p style={{ color: "#666", fontSize: 13 }}>Ask anything about the API docs</p>

      <div style={{ display: "flex", gap: 4, flexWrap: "wrap", margin: "8px 0" }}>
        {sampleQuestions.map((q, i) => (
          <button key={i} onClick={() => setQuestion(q)}
            style={{ padding: "4px 10px", fontSize: 12, borderRadius: 12, border: "1px solid #e2e8f0", background: "#f8fafc", cursor: "pointer" }}>
            {q}
          </button>
        ))}
      </div>

      <div style={{ display: "flex", gap: 8 }}>
        <input value={question} onChange={e => setQuestion(e.target.value)}
          onKeyDown={e => e.key === "Enter" && handleAsk()}
          placeholder="Ask a question about the docs..."
          style={{ flex: 1, padding: 10, borderRadius: 8, border: "1px solid #e2e8f0", fontSize: 14 }} />
        <button onClick={handleAsk} disabled={loading}
          style={{ padding: "10px 20px", background: loading ? "#94a3b8" : "#8b5cf6", color: "white", border: "none", borderRadius: 8, cursor: "pointer" }}>
          {loading ? "..." : "Ask"}
        </button>
      </div>

      {chunks.length > 0 && (
        <div style={{ marginTop: 12, padding: 10, background: "#f1f5f9", borderRadius: 8, fontSize: 12 }}>
          <strong>Retrieved {chunks.length} chunks:</strong>
          {chunks.map((c: any, i: number) => (
            <div key={i} style={{ margin: "4px 0", padding: 6, background: "white", borderRadius: 4 }}>
              <span style={{ color: "#8b5cf6", fontWeight: 600 }}>[{c.source}]</span> {c.content.slice(0, 100)}...
            </div>
          ))}
        </div>
      )}

      {result && (
        <div style={{ marginTop: 12, padding: 16, background: "#f0fdf4", borderRadius: 8, border: "1px solid #bbf7d0" }}>
          <p style={{ margin: 0, lineHeight: 1.6 }}>{result.answer}</p>
          {result.sources?.length > 0 && (
            <div style={{ marginTop: 8, paddingTop: 8, borderTop: "1px solid #bbf7d0", fontSize: 12, color: "#666" }}>
              <strong>Sources:</strong>{" "}
              {result.sources.map((s: any, i: number) => (
                <span key={i} style={{ marginRight: 8, padding: "2px 6px", background: "#e0f2fe", borderRadius: 4 }}>
                  📄 {s.reference} ({s.relevance})
                </span>
              ))}
            </div>
          )}
          <div style={{ marginTop: 6, fontSize: 11, color: "#94a3b8" }}>
            Confidence: {result.confidence}
          </div>
        </div>
      )}
    </div>
  );
}

Open Sandbox

Real-World Challenge

AI Documentation Assistant

Build and deploy your Week 1 capstone: an AI-powered documentation assistant that ingests real docs, answers questions with RAG, streams responses, cites sources, and uses tools for navigation. This is your first portfolio-grade AI project.

~5h estimated

Next.js 14+Vercel AI SDKOpenAI GPT-4o-mini + text-embedding-3-smallTailwind CSSVercel (deploy)

Acceptance Criteria

Ingest real documentation files (markdown, text, or PDF) and chunk them intelligently
Embed all chunks and implement vector similarity search for retrieval
Generate answers grounded in retrieved context with clickable source citations
Stream responses in real-time using streamText()
Add tool-use for doc navigation: search, find section, list documents
Support conversation memory so follow-up questions work
Deploy to a public URL (Vercel, Netlify, etc.)

Build Roadmap

0/6

Create a new Next.js app and plan the architecture: document ingestion pipeline, embedding storage, retrieval API, and chat UI with streaming.

npx create-next-app@latest ai-docs-assistant --typescript --tailwind --app

Create folders: /lib/rag (chunking, embedding, retrieval), /app/api (routes), /data (docs)

Deploy Tip

Push to GitHub and import into Vercel. Pre-load your project's own documentation as sample content. This project is your portfolio piece — write a great README with architecture diagram and live demo link.

Sign in to submit your deployed project.

After Learning — Rate Your Confidence Again

I can architect a full AI pipeline combining RAG, tools, agents, and streaming into a production-ready application.

1 = no idea · 5 = ship it blindfolded

Day 6: Multimodal AI & Streaming UX

Day 8: AI Evaluation & Testing

Discussion

Sign in to join the discussion.

Loading...