Curriculum/Day 4: Function Calling & Tool Chains

Day 4Build AI Products

Function Calling & Tool Chains

You define REST endpoints with schemas. Function calling is the same — you define tools with Zod schemas and the LLM decides when to call them. Today you'll go beyond single tool calls: parallel execution, error recovery, and multi-step tool chains where one tool's output feeds another.

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

🔧

Bridge:REST endpoints + ZodTool definitions + LLM routing

Use this at work tomorrow

Wrap your existing internal APIs as tools — let an LLM orchestrate them via natural language.

Learning Objectives

1Define tools with Zod schemas (same library you already use)
2Understand the LLM-as-router mental model — it picks the right tool
3Handle parallel tool calls and multi-step tool chains
4Implement tool error recovery and fallback strategies
5Build an AI assistant that searches, calculates, and notifies

Ship It: AI assistant with live tools

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

Before You Start — Rate Your Confidence

I can define tools with schemas, wire them into an LLM, handle parallel calls, and build error recovery so tool failures don't crash conversations.

1 = no idea · 5 = ship it blindfolded

Predict First — Then Learn

How does an LLM 'tool call' differ from a normal API call?

From Endpoints to Tools

You define REST endpoints like POST /api/send-email with a schema. Function calling is identical — you define tools with Zod schemas, and the LLM decides when to call them. The mental model shift: instead of the client calling your API, the LLM becomes an intelligent router that picks the right tool based on the user's intent.

💡Tool definitions = API endpoint definitions. Same Zod schemas. The LLM is the new 'client' that picks the right tool from intent.

Quick Pulse Check

What does the LLM use to decide which tool to call?

🔧 Tool Call Flow Animator

Watch how an LLM receives a prompt, selects tools, and orchestrates calls

User: What's the weather in Paris?

💬

Receive Prompt

🧠

Parse Intent

🔧

Select Tool

⚡

Execute Tool

✅

Generate Response

The LLM-as-Router Mental Model

Think of the LLM as a smart API gateway. It reads the user's request, looks at available tools (like an OpenAPI spec), picks the right one, generates valid parameters, and calls it. You don't write if/else routing logic — the LLM handles intent classification, parameter extraction, and orchestration in one step.

💡LLM = smart API gateway. It reads intent, picks the right tool, generates valid args. No if/else routing needed.

Quick Pulse Check

User says: 'What's 15% of $200?' — which tool gets called?

🧭 Tool Router Simulator

Type a prompt and see how the LLM picks the right tool from descriptions

Available Tools

🌤️getWeather

Get current weather for a city

✈️searchFlights

Search available flights to a destination

🧮calculate

Perform a math calculation

🔍searchWeb

Search the web for information

📧sendEmail

Send an email to a recipient

Predict First — Then Learn

When should the LLM call tools in parallel vs sequentially?

Parallel Tool Calls & Multi-Step Chains

Modern LLMs can call multiple tools in parallel (e.g., fetch weather AND search flights simultaneously). They can also chain tools — use the output of one tool as the input to another across multiple turns. This is the foundation for building agents (Day 5). The key pattern: tool results go back into the conversation, and the LLM decides what to do next.

💡Independent tools → parallel. Dependent tools → chain. maxSteps enables multi-turn tool use. This is the foundation for agents.

⏱️ Parallel Tool Timeline

Compare sequential vs parallel tool execution — see the time savings

Tools called one after another — slow but simple

0ms600ms1200ms1800ms2400ms

Lane A

getWeather

searchFlights

findHotels

calculateBudget

Total time: 2400ms

Tool calls: 4

Parallelism: 1 lane

Predict First — Then Learn

A tool call fails (API timeout). What should happen?

Tool Error Handling & Recovery

Tools fail. APIs time out. Data is missing. The LLM needs to handle this gracefully. Pattern: wrap tool execution in try/catch, return structured errors, and let the LLM retry or use an alternative. Never let a tool failure crash the entire conversation — return an error message and let the LLM adapt.

💡Wrap tools in try/catch. Return structured errors to the LLM. Let it retry or adapt. Never crash the conversation.

Quick Pulse Check

What's the safest way to handle tool errors in an LLM system?

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

Tool descriptions matter more than you think — the LLM reads them to decide what to call. Vague descriptions = wrong tool calls. Always validate tool parameters with Zod BEFORE execution (don't trust LLM-generated args blindly). Set timeouts on tool execution (LLMs can't wait forever). Log every tool call for debugging — you'll need it when the LLM calls the wrong tool.

Code Comparison

Endpoints vs Tool Definitions

REST endpoint design vs AI tool definitions — same schema, different caller

REST EndpointTraditional

// Define a REST endpoint
app.post("/api/weather", async (req, res) => {
  const { city } = req.body;
  const data = await weatherAPI.get(city);
  res.json({
    temp: data.temperature,
    conditions: data.conditions,
  });
});

// Client calls it EXPLICITLY
const weather = await fetch(
  "/api/weather",
  {
    method: "POST",
    body: JSON.stringify({ city: "NYC" })
  }
);

Tool DefinitionAI Engineering

// Define a tool for the LLM
import { z } from "zod";

const tools = {
  getWeather: {
    description: "Get current weather for a city",
    parameters: z.object({
      city: z.string().describe("City name"),
    }),
    execute: async ({ city }) => {
      const data = await weatherAPI.get(city);
      return {
        temp: data.temperature,
        conditions: data.conditions,
      };
    },
  },
};

// LLM decides WHEN to call it
const { text } = await generateText({
  model: openai("gpt-4o"),
  tools,
  prompt: "What should I wear in NYC today?",
});
// LLM: calls getWeather("NYC") autonomously
// Then uses the result to answer about clothing

KEY DIFFERENCES

REST: client explicitly calls the endpoint with exact parameters
Tools: LLM autonomously decides WHEN to call and WITH WHAT args
Tool schemas = OpenAPI specs. Same Zod library, same pattern
The LLM is the 'smart router' — it picks the right tool from intent

Single Call vs Multi-Step Tool Chain

From simple API calls to autonomous multi-step workflows

Sequential API CallsTraditional

// Developer writes the orchestration
async function planTrip(destination: string) {
  // Step 1: Get weather
  const weather = await fetch(
    "/api/weather?city=" + destination
  ).then(r => r.json());

  // Step 2: Search flights
  const flights = await fetch(
    "/api/flights?to=" + destination
  ).then(r => r.json());

  // Step 3: Find hotels
  const hotels = await fetch(
    "/api/hotels?city=" + destination
  ).then(r => r.json());

  // Developer combines results
  return { weather, flights, hotels };
}

LLM Tool ChainAI Engineering

// LLM orchestrates the tools itself
const tools = {
  getWeather: { /* ... */ },
  searchFlights: { /* ... */ },
  findHotels: { /* ... */ },
  calculateBudget: { /* ... */ },
};

const { text } = await generateText({
  model: openai("gpt-4o"),
  tools,
  maxSteps: 5, // Allow multi-step
  prompt: "Plan a weekend trip to Paris.
           Budget is $2000.",
});
// LLM autonomously:
// 1. Calls getWeather("Paris")
// 2. Calls searchFlights + findHotels
//    in PARALLEL
// 3. Calls calculateBudget with results
// 4. Generates a complete trip plan

KEY DIFFERENCES

Traditional: YOU write the orchestration logic (order, conditions)
Tools: LLM decides the order, parallelism, and data flow
maxSteps allows multi-turn tool use (chain outputs to inputs)
The LLM can call multiple tools in parallel when they're independent

Bridge Map: REST endpoints + Zod → Tool definitions + LLM routing

Click any bridge to see the translation

Hands-On Challenges

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

starter

Define Tools and Handle Tool Calls

Build a tool system where the LLM can call different functions. Define 3 tools (getWeather, searchWeb, calculate), simulate the LLM choosing the right tool based on user input, and execute the tool call. This mirrors the exact Vercel AI SDK tool pattern.

PLAYGROUND

import { useState } from "react";

// TODO: Define 3 tool definitions with:
// - description (string) — tells the LLM what the tool does
// - parameters (object with required fields)
// - execute (function that runs and returns result)

const tools: Record<string, {
  description: string;
  parameters: { type: string; properties: Record<string, any>; required: string[] };
  execute: (args: any) => Promise<string>;
}> = {
  // TODO: Define getWeather tool
  //   description: "Get current weather for a city"
  //   parameters: { city: string }
  //   execute: returns "Weather in {city}: 72°F, Sunny"

  // TODO: Define searchWeb tool
  //   description: "Search the web for information"
  //   parameters: { query: string }
  //   execute: returns "Top result for '{query}': ..."

  // TODO: Define calculate tool
  //   description: "Perform a math calculation"
  //   parameters: { expression: string }
  //   execute: returns the evaluated result
};

// Simulates LLM tool selection based on keywords
function simulateLLMToolChoice(userMessage: string): { toolName: string; args: Record<string, string> } | null {
  const lower = userMessage.toLowerCase();
  if (lower.includes("weather") || lower.includes("temperature")) {
    const cityMatch = userMessage.match(/in (\w+)/i);
    return { toolName: "getWeather", args: { city: cityMatch?.[1] || "NYC" } };
  }
  if (lower.includes("search") || lower.includes("find") || lower.includes("what is")) {
    return { toolName: "searchWeb", args: { query: userMessage } };
  }
  if (lower.includes("calculate") || lower.includes("math") || /\d+\s*[+\-*/]\s*\d+/.test(userMessage)) {
    const expr = userMessage.match(/[\d+\-*/. ()]+/)?.[0] || userMessage;
    return { toolName: "calculate", args: { expression: expr.trim() } };
  }
  return null;
}

export default function App() {
  const [input, setInput] = useState("");
  const [result, setResult] = useState<{ tool: string; args: any; output: string } | null>(null);
  const [error, setError] = useState("");

  async function handleSubmit() {
    if (!input.trim()) return;
    setError("");
    setResult(null);

    const toolCall = simulateLLMToolChoice(input);
    if (!toolCall) {
      setError("No tool matched. Try asking about weather, searching something, or calculating.");
      return;
    }

    const tool = tools[toolCall.toolName];
    if (!tool) {
      setError(`Tool "${toolCall.toolName}" not found.`);
      return;
    }

    try {
      const output = await tool.execute(toolCall.args);
      setResult({ tool: toolCall.toolName, args: toolCall.args, output });
    } catch (err: any) {
      setError(`Tool failed: ${err.message}`);
    }
  }

  return (
    <div style={{ padding: 20, fontFamily: "sans-serif" }}>
      <h2>🔧 AI Tool System</h2>
      <p style={{ color: "#666", fontSize: 13 }}>Available tools: {Object.keys(tools).join(", ") || "none defined yet"}</p>
      <div style={{ display: "flex", gap: 8 }}>
        <input value={input} onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
          placeholder='Try: "Weather in Paris" or "Calculate 42 * 7"'
          style={{ flex: 1, padding: "8px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 13 }}
        />
        <button onClick={handleSubmit}
          style={{ padding: "8px 16px", background: "#0ea5e9", color: "white", border: "none", borderRadius: 6, cursor: "pointer" }}>
          Send
        </button>
      </div>
      {error && <p style={{ color: "#dc2626", fontSize: 13, marginTop: 8 }}>{error}</p>}
      {result && (
        <div style={{ marginTop: 12, padding: 12, background: "#f0fdf4", borderRadius: 8, border: "1px solid #bbf7d0", fontSize: 13 }}>
          <div><strong>Tool called:</strong> {result.tool}</div>
          <div><strong>Arguments:</strong> {JSON.stringify(result.args)}</div>
          <div style={{ marginTop: 6, padding: 8, background: "#dcfce7", borderRadius: 4 }}>
            <strong>Result:</strong> {result.output}
          </div>
        </div>
      )}
    </div>
  );
}

Open Sandbox

stretch

Multi-Step Tool Chain with Error Recovery

Build a trip planner that chains multiple tool calls. The system should: 1) call getWeather for the destination, 2) call searchFlights, 3) if a tool fails, retry once or use a fallback. This simulates how real agents chain tools with error handling.

PLAYGROUND

import { useState } from "react";

// Simulated tools with occasional failures
const tools = {
  getWeather: {
    execute: async (city: string): Promise<string> => {
      await new Promise(r => setTimeout(r, 500));
      if (Math.random() < 0.2) throw new Error("Weather API timeout");
      const temps: Record<string, string> = { Paris: "68°F Partly Cloudy", Tokyo: "75°F Sunny", NYC: "55°F Rainy" };
      return temps[city] || `72°F in ${city}`;
    }
  },
  searchFlights: {
    execute: async (to: string): Promise<string> => {
      await new Promise(r => setTimeout(r, 700));
      if (Math.random() < 0.2) throw new Error("Flight API rate limited");
      return `Found 3 flights to ${to}: $450 (direct, 8h), $320 (1 stop, 12h), $280 (2 stops, 16h)`;
    }
  },
  findHotels: {
    execute: async (city: string): Promise<string> => {
      await new Promise(r => setTimeout(r, 400));
      return `Hotels in ${city}: Luxury $300/n, Standard $120/n, Budget $60/n`;
    }
  }
};

// TODO: Implement the trip planner that:
// 1. Calls getWeather and searchFlights in PARALLEL
// 2. Then calls findHotels
// 3. If any tool fails, retry ONCE before giving up
// 4. Collects all results and returns a summary

interface TripPlan {
  destination: string;
  steps: { tool: string; status: "success" | "failed" | "retried"; result: string }[];
}

async function planTrip(destination: string): Promise<TripPlan> {
  const steps: TripPlan["steps"] = [];

  // TODO: Implement the tool chain with parallel calls and retry logic

  return { destination, steps };
}

export default function App() {
  const [destination, setDestination] = useState("Paris");
  const [plan, setPlan] = useState<TripPlan | null>(null);
  const [loading, setLoading] = useState(false);

  async function handlePlan() {
    setLoading(true);
    setPlan(null);
    const result = await planTrip(destination);
    setPlan(result);
    setLoading(false);
  }

  return (
    <div style={{ padding: 20, fontFamily: "sans-serif" }}>
      <h2>✈️ AI Trip Planner (Tool Chain)</h2>
      <p style={{ color: "#666", fontSize: 13 }}>Chains 3 tools with parallel execution and error recovery</p>
      <div style={{ display: "flex", gap: 8, margin: "12px 0" }}>
        {["Paris", "Tokyo", "NYC"].map(city => (
          <button key={city} onClick={() => setDestination(city)}
            style={{
              padding: "6px 14px", borderRadius: 6, cursor: "pointer",
              background: destination === city ? "#0ea5e9" : "#f1f5f9",
              color: destination === city ? "white" : "black",
              border: "none", fontWeight: destination === city ? 600 : 400,
            }}>
            {city}
          </button>
        ))}
      </div>
      <button onClick={handlePlan} disabled={loading}
        style={{ padding: "8px 20px", background: loading ? "#94a3b8" : "#8b5cf6", color: "white", border: "none", borderRadius: 6, cursor: "pointer" }}>
        {loading ? "Planning..." : "Plan Trip"}
      </button>
      {plan && (
        <div style={{ marginTop: 16, fontSize: 13 }}>
          <h3 style={{ marginBottom: 8 }}>Trip to {plan.destination}:</h3>
          {plan.steps.map((step, i) => (
            <div key={i} style={{
              margin: "6px 0", padding: "8px 12px", borderRadius: 6,
              background: step.status === "success" ? "#f0fdf4" : step.status === "retried" ? "#fefce8" : "#fef2f2",
              border: "1px solid " + (step.status === "success" ? "#bbf7d0" : step.status === "retried" ? "#fef08a" : "#fecaca"),
            }}>
              <strong>{step.tool}</strong>
              <span style={{ marginLeft: 8, fontSize: 11, padding: "1px 6px", borderRadius: 4,
                background: step.status === "success" ? "#dcfce7" : step.status === "retried" ? "#fef9c3" : "#fee2e2",
              }}>
                {step.status}
              </span>
              <div style={{ marginTop: 4, color: "#374151" }}>{step.result}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Open Sandbox

Real-World Challenge

AI Assistant with Live Tools

Build and deploy a conversational AI assistant that can use real tools — search the web, check weather, perform calculations, and chain multiple tools together to answer complex questions. This is how production AI assistants work.

~3h estimated

Next.js 14+Vercel AI SDKOpenAI GPT-4oZodTailwind CSSVercel (deploy)

Acceptance Criteria

Define 3+ tools with Zod schemas using the Vercel AI SDK tool() pattern
Wire tools into generateText() with maxSteps for multi-step tool chains
Show tool calls and results inline in the chat UI (which tool was called, with what arguments, and what it returned)
Handle tool execution errors gracefully with fallback responses
Support multi-turn conversation with tool-call history
Add loading states that show which tool is currently executing
Deploy to a public URL (Vercel, Netlify, etc.)

Build Roadmap

0/6

Create a new Next.js app with TypeScript and Tailwind CSS. Set up the project with a chat interface page and an API route for tool-augmented generation.

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

Plan your API route at /api/chat that handles tool-augmented conversation

Deploy Tip

Push to GitHub and import into Vercel. If using external APIs for tools (weather, search), set those API keys in Vercel environment variables too. Consider rate limiting your endpoint to prevent abuse.

After Learning — Rate Your Confidence Again

I can define tools with schemas, wire them into an LLM, handle parallel calls, and build error recovery so tool failures don't crash conversations.

1 = no idea · 5 = ship it blindfolded

Day 3: RAG Deep Dive

Day 5: AI Agents & Orchestration

Function Calling & Tool Chains

Learning Objectives

Ship It: AI assistant with live tools

From Endpoints to Tools

🔧 Tool Call Flow Animator

The LLM-as-Router Mental Model

🧭 Tool Router Simulator

Available Tools

Parallel Tool Calls & Multi-Step Chains

⏱️ Parallel Tool Timeline

Tool Error Handling & Recovery

The Full Evolution

🔄 Code Evolution — One Function, Five Stages

Step 1: Raw fetch()

Production Gotchas

Code Comparison

Endpoints vs Tool Definitions

Single Call vs Multi-Step Tool Chain

Bridge Map: REST endpoints + Zod → Tool definitions + LLM routing

Hands-On Challenges

Define Tools and Handle Tool Calls

Multi-Step Tool Chain with Error Recovery

AI Assistant with Live Tools

Acceptance Criteria

Build Roadmap

Discussion

🔧 Tool Call Flow Animator

🧭 Tool Router Simulator

Available Tools

⏱️ Parallel Tool Timeline

🔄 Code Evolution — One Function, Five Stages

Step 1: Raw fetch()

Define Tools and Handle Tool Calls

Multi-Step Tool Chain with Error Recovery

Discussion