novi-lessons/Samenvattingen/Les13-Samenvatting.md

Les 13: Vercel AI SDK, Tool Calling & Agents

---

Hoofdstuk

Deel 4: Advanced AI & Deployment (Les 13-18)

Beschrijving

Vercel AI SDK fundamentals voor het bouwen van AI-powered features. Stream responses, tool calling, Zod schemas, system prompts, agents met autonome actie. Integreer LLM capabilities in je app.

---

Te Behandelen (~45 min)

• Vercel AI SDK: wat is het en waarom gebruiken?
• Installation en basic setup
• useChat hook voor chat UI state management
• Streaming responses van API
• Tool calling: laat AI externe APIs aanroepen
• Zod schemas voor tool parameters validation
• System prompts schrijven voor AI behavior
• Agent patterns: maxSteps, autonomous execution
• Error handling en edge cases
• Model selection: OpenAI, Claude, Gemini, etc.

---

Vercel AI SDK Basics

Wat is het?

• React library van Vercel voor AI integration
• Streaming responses van LLMs
• Server-side tool calling
• Multi-turn conversations
• Gratis, open-source

Installation:

npm install ai zod openai

---

useChat Hook

Client-side chat state management:

'use client'
import { useChat } from 'ai/react'

export function ChatComponent() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat',
  })

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>
          <strong>{msg.role}:</strong> {msg.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Type message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  )
}

---

Streaming Responses

API Route met streaming:

import { generateText, streamText } from 'ai'
import { openai } from '@ai-sdk/openai'

export async function POST(req: Request) {
  const { messages } = await req.json()

  const result = await streamText({
    model: openai('gpt-4'),
    system: 'You are a helpful assistant',
    messages,
  })

  return result.toAIStreamResponse()
}

Waarom streaming?

• Responses verschijnen real-time (beter UX)
• Bespaar tokens vs waiting for full response

---

Tool Calling

Laat AI externe APIs aanroepen:

import { generateText } from 'ai'
import { openai } from '@ai-sdk/openai'
import { z } from 'zod'

const tools = {
  getWeather: {
    description: 'Get weather for a city',
    parameters: z.object({
      city: z.string(),
    }),
    execute: async ({ city }: { city: string }) => {
      // Call external API
      const response = await fetch(`https://api.weather.com?city=${city}`)
      return response.json()
    },
  },
}

const result = await generateText({
  model: openai('gpt-4'),
  tools,
  prompt: 'What is the weather in Amsterdam?',
})

---

Zod Schemas

Type-safe tool parameters:

import { z } from 'zod'

const SearchProductsSchema = z.object({
  query: z.string().describe('Search query'),
  limit: z.number().optional().describe('Max results'),
  sortBy: z.enum(['price', 'rating']).optional(),
})

type SearchProductsInput = z.infer<typeof SearchProductsSchema>

---

System Prompts

Stuur AI behavior:

const systemPrompt = `You are a helpful recipe assistant.
Your role is to:
1. Suggest recipes based on ingredients
2. Provide cooking instructions
3. Estimate cooking time

Always be friendly and encouraging.`

const result = await generateText({
  model: openai('gpt-4'),
  system: systemPrompt,
  prompt: userMessage,
})

---

Agent Patterns

Multi-step autonomous execution:

const result = await generateText({
  model: openai('gpt-4'),
  tools: { getWeather, getFlights },
  maxSteps: 3, // Maximum iterations
  prompt: 'Plan a trip to Paris next week',
})

Hoe het werkt:

1. AI bepaalt welke tool nodig is
2. Tool wordt uitgevoerd
3. Result teruggestuurd naar AI
4. AI beslist next stap (repeat tot maxSteps of done)

---

Tools

• Vercel AI SDK
• Zod
• OpenAI API (of andere LLM provider)
• Cursor

---

Lesopdracht (2 uur, klassikaal)

Bouw Chat Interface met Streaming

Groepsdiscussie (15 min): Bespreek klassikaal de project setup ervaringen uit Les 12 - hoe goed werken jullie .cursorrules en configuration?

Deel 1: Installation & Setup (30 min)

npm install ai zod openai

Create app/api/chat/route.ts:

• Setup Vercel AI SDK
• Configure OpenAI model
• Add system prompt

Deel 2: Chat Component (45 min)

Build app/page.tsx:

1. Use useChat hook
2. Render messages list
3. Input form for user messages
4. Display streaming responses

Deel 3: Tool Calling (30 min)

Add 2 simple tools:

• getTime: return current time
• getRandomNumber: return random number

Update API route to handle tools with Zod schemas.

Deel 4: Testing (15 min)

Test chat locally with different prompts that trigger tools.

Deliverable

• Werkende chat interface with streaming
• 2 integrated tools
• GitHub commit with AI chat feature

---

Huiswerk (2 uur)

Integreer AI in Eindproject

Deel 1: Project-Specific Tools (1 uur)

Add 2-3 tools relevant to your project:

• Recipe Generator: tool to search recipes API
• Budget App: tool to calculate expenses
• Travel Planner: tool to search destinations

Define with Zod schemas and execute functions.

Deel 2: System Prompt Tuning (30 min)

Write a custom system prompt for your AI:

• Define personality
• Set constraints
• Add context about your app

Deel 3: Integration (30 min)

Connect AI chat to your main app:

• Add chat page/component
• Integrate with Supabase auth (if needed)
• Test end-to-end

Deliverable

• AI feature integrated in project
• Custom tools defined
• docs/AI-DECISIONS.md updated with choices
• GitHub commits with AI integration

---

Leerdoelen

Na deze les kan de student:

• Vercel AI SDK installeren en configureren
• useChat hook gebruiken voor chat UI
• Streaming responses implementeren
• Tool calling setup met Zod schemas
• Externe APIs aanroepen via tools
• System prompts schrijven voor AI behavior
• Agent patterns verstaan (maxSteps)
• AI features in een Next.js app integreren
• Tool parameters valideren met Zod