Curriculum/Day 13: Adding AI to Existing Apps

Day 13Ship AI to Production

Adding AI to Existing Apps

The #1 question devs ask: 'I have an existing app — how do I add AI?' Today you'll learn the patterns: AI-powered search, smart autocomplete, content generation, automated tagging, and intelligent routing. You'll take a standard Next.js CRUD app and add 3 AI features without rewriting anything.

80 min(+35 min boss)★★★☆☆

🔌

Bridge:Existing codebaseAI-enhanced features

Use this at work tomorrow

Pick the highest-value feature in your app and add AI — search, autocomplete, or auto-tagging.

Learning Objectives

1Identify which features in existing apps benefit most from AI
2Add AI-powered search to replace keyword search (Day 2 → production)
3Implement smart autocomplete and content suggestions
4Add automated content tagging and classification
5Ship 3 AI features into an existing Next.js app — zero rewrites

Ship It: AI features in an existing Next.js app

By the end of this day, you'll build and deploy a ai features in an existing next.js app. This isn't a toy — it's a real project for your portfolio.

Before You Start — Rate Your Confidence

I can audit an existing app for AI opportunities, add AI features progressively, and keep graceful degradation when AI is unavailable.

1 = no idea · 5 = ship it blindfolded

Predict First — Then Learn

In reality, how will you most often use AI engineering skills?

Adding AI to Existing Apps: The Real-World Skill

Most AI tutorials build from scratch. In reality, you'll add AI to existing CRUD apps that already have users, databases, and business logic. This is the hardest and most valuable skill: identifying WHERE AI adds value in an existing product and adding it WITHOUT breaking what already works. Today's lesson is a surgical guide to AI integration.

💡The real skill isn't building from scratch — it's adding AI to existing apps without breaking what works.

Quick Pulse Check

Why is adding AI to existing apps harder than building from scratch?

The AI Opportunity Audit: Where to Add AI

Audit your existing app with this framework: (1) Text generation — anywhere users need to write (emails, descriptions, comments). (2) Search — anywhere users search or filter (replace keyword search with semantic search). (3) Classification — anywhere users categorize things manually (tagging, prioritization, routing). (4) Extraction — anywhere users read and extract data (form filling from documents, data entry). (5) Summarization — anywhere users read long content (meeting notes, reports, threads).

💡5 AI opportunity categories: generation, search, classification, extraction, summarization. Audit your app against all 5.

Quick Pulse Check

Which type of AI enhancement typically has the best effort-to-impact ratio?

🔍 AI Opportunity Audit

Check which AI features could apply to your app. Get a prioritized action plan.

0/8 selected

Predict First — Then Learn

What's the safest way to add AI to an existing feature?

Pattern: Progressive AI Enhancement

Don't rip out your existing features. Enhance them progressively. Start with "AI suggestions" alongside existing UI — user can accept or ignore. Then make AI the default with easy override. Finally, automate fully for high-confidence cases. Example: search bar → add "AI Answer" card above regular results. Form → add "Auto-fill with AI" button. Listing → add "AI-generated description" draft. Each step is independently shippable and testable.

💡Progressive enhancement: suggestions → default with override → full automation. Each step is independently shippable.

Quick Pulse Check

What's the first step in progressive AI enhancement?

📊 Progressive Enhancement: Search

Slide to see how search evolves from traditional to AI-native.

No AIAI-EnhancedAI-Native

Level 0: No AI

Traditional keyword search with SQL LIKE/ILIKE

User experience:

🔍 Search: "react hooks" → exact match only

Implementation

// Traditional search
const results = await db.query(
  'SELECT * FROM posts WHERE title ILIKE $1',
  ['%react hooks%']
);

Pattern: AI-Augmented CRUD

Most web apps are CRUD. Add AI at each step: Create — auto-generate draft content, suggest categories, validate with AI. Read — summarize long items, highlight key info, AI-powered search. Update — suggest changes, auto-complete fields, detect anomalies. Delete — confirm impact with AI analysis ('this will affect 3 downstream records'). Each makes your existing app significantly more useful without rewriting it.

💡CRUD + AI: Create (drafts), Read (summaries), Update (suggestions), Delete (impact analysis). Enhance, don't rewrite.

🔄 CRUD → AI-Enhanced CRUD Mapper

See how each CRUD operation can be enhanced with AI. Toggle to compare.

CreateAI auto-suggests, validates, generates draft content

▼

ReadSemantic search + natural language queries + summaries

▼

UpdateAI suggests edits, auto-fills related fields, detects conflicts

▼

DeleteImpact analysis, dependency check, soft-delete with archival summary

▼

Click any operation to see an example · Toggle above to compare approaches

Integration Architecture: Where AI Code Lives

Keep AI code isolated from business logic. Create an /api/ai/ namespace for AI endpoints. Use the adapter pattern: AIService wraps your LLM calls and returns typed results that your existing code consumes. Your React components call the AI service just like any other API. This way, you can swap models, add caching, or remove AI features without touching business logic.

💡Isolate AI behind /api/ai/ + adapter pattern. Swap models or remove AI without touching business logic.

Quick Pulse Check

Why isolate AI code behind an adapter/service pattern?

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

AI features MUST be optional and gracefully degradable. If the AI API is down, your app should still work — show the original UI without AI enhancements. Set aggressive timeouts (3-5 seconds) — users will tolerate 'AI unavailable' more than a frozen page. Feature-flag every AI integration so you can kill it instantly. Start with the lowest-risk, highest-value feature first. Get real user feedback before expanding. Most users want AI to save time, not to be 'smart' — optimize for speed.

Code Comparison

Regular Search vs AI-Enhanced Search

Adding AI to an existing search feature without replacing it

Keyword Search (existing)Traditional

// Existing search: keyword matching
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const query = searchParams.get("q") || "";

  // SQL LIKE search
  const results = await db.products.findMany({
    where: {
      OR: [
        { name: { contains: query } },
        { description: { contains: query } },
      ],
    },
    take: 20,
  });

  return Response.json({ results });
}

// "comfortable office chair for back pain"
// → Matches: "chair", "office"
// → Misses: "ergonomic", "lumbar support"
// → 3 results, none great

AI-Enhanced Search (progressive)AI Engineering

// Enhanced search: AI + existing, side by side
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const query = searchParams.get("q") || "";

  // Keep existing search (always works)
  const keywordResults = await db.products.findMany({
    where: {
      OR: [
        { name: { contains: query } },
        { description: { contains: query } },
      ],
    },
    take: 10,
  });

  // Add AI search (optional enhancement)
  let aiResults: any[] = [];
  let aiSummary = "";
  try {
    const embedding = await embed(query);
    aiResults = await vectorSearch(embedding, 5);

    const { text } = await generateText({
      model: openai("gpt-4o-mini"),
      prompt: `Summarize the best match for:
"${query}" from: ${JSON.stringify(
        aiResults.map(r => r.name)
      )}`,
    });
    aiSummary = text;
  } catch {
    // AI fails gracefully — keyword results
    // still show, app still works
  }

  return Response.json({
    aiSummary,  // "Based on your needs..."
    aiResults,  // Semantic matches
    results: keywordResults,  // Always works
  });
}
// "comfortable office chair for back pain"
// AI: "ergonomic", "lumbar support", "posture"
// → 5 semantic matches + summary

KEY DIFFERENCES

Keyword search stays as fallback — app always works
AI search runs in parallel, wrapped in try/catch
AI adds semantic matches + natural language summary
Gradual enhancement: keyword → keyword + AI → AI primary

Bridge Map: Existing codebase → AI-enhanced features

Click any bridge to see the translation

Hands-On Challenges

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

starter

Add AI Auto-Categorization to a Todo App

Take an existing todo list app and add AI auto-categorization. When a user adds a new todo, an AI model automatically suggests a category (Work, Personal, Shopping, Health, Finance, Learning). The user can accept the suggestion or pick their own category. The AI feature must be optional — the todo app works fine without it.

PLAYGROUND

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

const CATEGORIES = ["Work", "Personal", "Shopping", "Health", "Finance", "Learning"];
const CATEGORY_COLORS: Record<string, string> = {
  Work: "#3b82f6", Personal: "#8b5cf6", Shopping: "#f59e0b",
  Health: "#10b981", Finance: "#ef4444", Learning: "#06b6d4",
};

interface Todo {
  id: string;
  text: string;
  category: string;
  aiSuggested: boolean;
  done: boolean;
}

export default function App() {
  const [todos, setTodos] = useState<Todo[]>([
    { id: "1", text: "Review pull request for API changes", category: "Work", aiSuggested: false, done: false },
    { id: "2", text: "Buy groceries for dinner", category: "Shopping", aiSuggested: false, done: false },
    { id: "3", text: "Schedule dentist appointment", category: "Health", aiSuggested: false, done: false },
  ]);
  const [newTodo, setNewTodo] = useState("");
  const [aiEnabled, setAiEnabled] = useState(true);
  const [suggesting, setSuggesting] = useState(false);
  const [suggestion, setSuggestion] = useState<{ category: string; confidence: number } | null>(null);

  async function handleAddTodo() {
    if (!newTodo.trim()) return;

    let category = "Personal"; // Default category
    let aiSuggested = false;

    if (aiEnabled) {
      setSuggesting(true);
      try {
        // TODO: Use generateObject to get an AI category suggestion
        // Schema: { category: one of CATEGORIES, confidence: number 0-1 }
        // If confidence > 0.7, auto-apply the category
        // Show the suggestion to the user

        // For now, just use default:
        category = "Personal";
        aiSuggested = false;
      } catch {
        // AI failed — use default category (graceful fallback)
        category = "Personal";
      } finally {
        setSuggesting(false);
      }
    }

    const todo: Todo = {
      id: crypto.randomUUID(),
      text: newTodo,
      category,
      aiSuggested,
      done: false,
    };

    setTodos(prev => [todo, ...prev]);
    setNewTodo("");
    setSuggestion(null);
  }

  function toggleDone(id: string) {
    setTodos(prev => prev.map(t => t.id === id ? { ...t, done: !t.done } : t));
  }

  function changeCategory(id: string, category: string) {
    setTodos(prev => prev.map(t => t.id === id ? { ...t, category } : t));
  }

  return (
    <div style={{ padding: 20, fontFamily: "sans-serif", maxWidth: 600 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <h2>✅ Smart Todo List</h2>
        <label style={{ fontSize: 13, cursor: "pointer", display: "flex", alignItems: "center", gap: 4 }}>
          <input type="checkbox" checked={aiEnabled} onChange={e => setAiEnabled(e.target.checked)} />
          AI auto-categorize {aiEnabled ? "🤖" : ""}
        </label>
      </div>

      <div style={{ display: "flex", gap: 8, margin: "12px 0" }}>
        <input value={newTodo} onChange={e => setNewTodo(e.target.value)}
          onKeyDown={e => e.key === "Enter" && handleAddTodo()}
          placeholder="Add a new todo..."
          style={{ flex: 1, padding: 10, borderRadius: 8, border: "1px solid #e2e8f0", fontSize: 14 }} />
        <button onClick={handleAddTodo} disabled={suggesting}
          style={{ padding: "10px 20px", background: suggesting ? "#94a3b8" : "#8b5cf6", color: "white", border: "none", borderRadius: 8, cursor: "pointer" }}>
          {suggesting ? "🤖..." : "Add"}
        </button>
      </div>

      {suggestion && (
        <div style={{ padding: 8, background: "#f0f9ff", borderRadius: 6, border: "1px solid #bae6fd", fontSize: 12, marginBottom: 8 }}>
          🤖 AI suggests: <strong>{suggestion.category}</strong> ({(suggestion.confidence * 100).toFixed(0)}% confident)
        </div>
      )}

      <div>
        {todos.map(todo => (
          <div key={todo.id} style={{
            display: "flex", alignItems: "center", gap: 8, padding: 8, margin: "4px 0",
            background: todo.done ? "#f8fafc" : "white", borderRadius: 6, border: "1px solid #e2e8f0",
          }}>
            <input type="checkbox" checked={todo.done} onChange={() => toggleDone(todo.id)} />
            <span style={{ flex: 1, textDecoration: todo.done ? "line-through" : "none", color: todo.done ? "#94a3b8" : "black" }}>
              {todo.text}
            </span>
            <select value={todo.category} onChange={e => changeCategory(todo.id, e.target.value)}
              style={{ padding: "2px 6px", borderRadius: 4, border: "1px solid #e2e8f0", fontSize: 12, color: CATEGORY_COLORS[todo.category] || "#666", fontWeight: 600 }}>
              {CATEGORIES.map(cat => <option key={cat} value={cat}>{cat}</option>)}
            </select>
            {todo.aiSuggested && <span title="AI categorized" style={{ fontSize: 10 }}>🤖</span>}
          </div>
        ))}
      </div>

      <div style={{ marginTop: 16, color: "#94a3b8", fontSize: 11 }}>
        {todos.filter(t => !t.done).length} of {todos.length} remaining |{" "}
        {todos.filter(t => t.aiSuggested).length} AI-categorized
      </div>
    </div>
  );
}

Open Sandbox

Real-World Challenge

AI-Enhanced Existing App

Take an existing CRUD app (todos, notes, tasks, or any project you've built before) and add 3 AI features without rewriting anything: auto-categorization, semantic search, and AI content generation. This is the #1 skill companies hire for — adding AI to existing products.

~4h estimated

Next.js 14+Vercel AI SDKOpenAI GPT-4o-miniMongoDB or any existing backendTailwind CSSVercel (deploy)

Acceptance Criteria

Start with an existing CRUD app (build a simple one if needed, or use an open-source template)
Add AI auto-categorization that classifies new items automatically with confidence scores
Replace keyword search with semantic search while keeping keyword search as fallback
Add 'Generate with AI' buttons for text fields (descriptions, summaries, etc.)
Each AI feature must have a feature flag toggle (on/off)
All AI features must fail gracefully — the app works fine without them
Deploy to a public URL (Vercel, Netlify, etc.)

Build Roadmap

0/6

Either use an existing CRUD app you've built, clone an open-source template, or quickly scaffold a todo/notes app with Next.js. The app needs: create, read, update, delete, and a list view.

A simple todo or notes app is perfect — the AI features are what matter

If building from scratch: npx create-next-app + a MongoDB or JSON file backend

Make sure it works fully before adding any AI

Deploy Tip

Push to GitHub and import into Vercel. Pre-populate with sample data so all AI features are visible immediately. This project proves you can add AI to real products — the #1 skill companies want.

After Learning — Rate Your Confidence Again

I can audit an existing app for AI opportunities, add AI features progressively, and keep graceful degradation when AI is unavailable.

1 = no idea · 5 = ship it blindfolded

Day 12: Fine-tuning & Model Customization

Day 14: Capstone: AI Codebase Q&A

Adding AI to Existing Apps

Learning Objectives

Ship It: AI features in an existing Next.js app

Adding AI to Existing Apps: The Real-World Skill

The AI Opportunity Audit: Where to Add AI

🔍 AI Opportunity Audit

Pattern: Progressive AI Enhancement

📊 Progressive Enhancement: Search

Pattern: AI-Augmented CRUD

🔄 CRUD → AI-Enhanced CRUD Mapper

Integration Architecture: Where AI Code Lives

The Full Evolution

🔄 Code Evolution — One Function, Five Stages

Step 1: Raw fetch()

Production Gotchas

Code Comparison

Regular Search vs AI-Enhanced Search

Bridge Map: Existing codebase → AI-enhanced features

Hands-On Challenges

Add AI Auto-Categorization to a Todo App

AI-Enhanced Existing App

Acceptance Criteria

Build Roadmap

Discussion

🔍 AI Opportunity Audit

📊 Progressive Enhancement: Search

🔄 CRUD → AI-Enhanced CRUD Mapper

🔄 Code Evolution — One Function, Five Stages

Step 1: Raw fetch()

Add AI Auto-Categorization to a Todo App

Discussion