Every major AI lab is betting on agents. OpenAI, Anthropic, and Google are all racing to ship models that don't just answer questions — they reason, act, and iterate until the job is done. But behind every sophisticated agent lies a deceptively simple pattern: ReAct.

In this tutorial, you'll build AI agents from scratch using TypeScript. You'll start with a raw reasoning loop, then progressively layer in tools, multi-step execution, and production safeguards — all powered by the Vercel AI SDK.

Why ReAct matters in 2026: Gartner reported a 1,445% surge in multi-agent system inquiries from Q1 2024 to Q2 2025. Understanding the core ReAct pattern is the foundation for building any agent system — from simple assistants to complex multi-agent orchestrations.

What You Will Learn

By the end of this tutorial, you will be able to:

Understand the ReAct (Reasoning + Acting) pattern and why it's the backbone of modern AI agents
Build a manual agent loop using generateText to see exactly how agents work
Define type-safe tools with Zod schemas that LLMs can invoke
Use ToolLoopAgent for production-ready agent orchestration
Implement advanced loop control: step limits, cost budgets, and forced tool patterns
Build a practical research agent that searches, analyzes, and synthesizes information

How AI Agents Actually Work

Before writing code, let's understand the mental model. A traditional LLM call is a single turn:

Prompt → LLM → Response

An agent is an LLM in a loop. At each iteration, the model can either respond with text (ending the loop) or call a tool (continuing the loop):

Prompt → LLM → "I need to search for this" → calls search tool
                                                    ↓
         LLM ← tool result ← search executes
          ↓
         LLM → "Now I need to calculate" → calls calculator tool
                                                    ↓
         LLM ← tool result ← calculator executes
          ↓
         LLM → "Here is your answer: ..." → text response (loop ends)

This is the ReAct pattern: the model Reasons about what to do, then Acts by calling a tool. The loop repeats until the model decides it has enough information to respond.

Prerequisites

Before starting, make sure you have:

Node.js 20+ installed
OpenAI API key (or any AI SDK-compatible provider)
Basic knowledge of TypeScript
Familiarity with async/await and Zod schemas
A code editor (VS Code recommended)

Provider flexibility: The Vercel AI SDK supports OpenAI, Anthropic, Google, Mistral, and many other providers. We'll use OpenAI in this tutorial, but you can swap the model with a single line change.

Step 1: Project Setup

Create a new TypeScript project and install dependencies:

mkdir ai-agent-tutorial && cd ai-agent-tutorial
npm init -y
npm install ai @ai-sdk/openai zod dotenv
npm install -D typescript tsx @types/node

Initialize TypeScript:

npx tsc --init --target ES2022 --module NodeNext --moduleResolution NodeNext --outDir dist

Create a .env file for your API key:

OPENAI_API_KEY=sk-your-key-here

Your project structure should look like this:

ai-agent-tutorial/
├── .env
├── package.json
├── tsconfig.json
└── src/
    ├── 01-basic-tool-call.ts
    ├── 02-manual-agent-loop.ts
    ├── 03-tool-loop-agent.ts
    ├── 04-forced-tool-pattern.ts
    └── 05-research-agent.ts

Step 2: Your First Tool Call

Before building a full agent, let's understand the atomic unit: a single tool call. Create src/01-basic-tool-call.ts:

import "dotenv/config";
import { generateText, tool } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";
 
const result = await generateText({
  model: openai("gpt-4o"),
  tools: {
    weather: tool({
      description: "Get the current weather in a location",
      inputSchema: z.object({
        location: z.string().describe("City name, e.g. San Francisco"),
      }),
      execute: async ({ location }) => {
        // In production, call a real weather API
        const conditions = ["sunny", "cloudy", "rainy", "windy"];
        return {
          location,
          temperature: Math.round(15 + Math.random() * 20),
          condition: conditions[Math.floor(Math.random() * conditions.length)],
          unit: "celsius",
        };
      },
    }),
  },
  prompt: "What's the weather like in Tokyo?",
});
 
console.log("Response:", result.text);
console.log("Tool calls:", JSON.stringify(result.toolCalls, null, 2));
console.log("Tool results:", JSON.stringify(result.toolResults, null, 2));

Run it:

npx tsx src/01-basic-tool-call.ts

Notice the model called our weather tool with { location: "Tokyo" }. The AI SDK automatically executed the tool and fed the result back to the model, which then generated a natural language response. But this was a single round trip — not an agent yet.

Step 3: Building a Manual Agent Loop

Now let's build a real agent loop from scratch. This is the raw ReAct pattern — no abstractions, just the core logic. Create src/02-manual-agent-loop.ts:

import "dotenv/config";
import { generateText, tool } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";
import type { ModelMessage } from "ai";
 
// Define our tools
const tools = {
  search: tool({
    description: "Search for information on a topic. Returns relevant facts.",
    inputSchema: z.object({
      query: z.string().describe("The search query"),
    }),
    execute: async ({ query }) => {
      console.log(`  🔍 Searching: "${query}"`);
      // Simulated search results
      const results: Record<string, string> = {
        typescript:
          "TypeScript 5.7 released in 2025. Features include improved inference, decorator metadata, and faster compilation.",
        "ai agents":
          "AI agents market projected to reach $50B by 2030. Key frameworks: Vercel AI SDK, LangChain, CrewAI.",
        "react pattern":
          "ReAct (Reasoning + Acting) proposed by Yao et al. 2022. Combines chain-of-thought with tool use for grounded reasoning.",
      };
      const key = Object.keys(results).find((k) =>
        query.toLowerCase().includes(k)
      );
      return key
        ? results[key]
        : `No specific results for "${query}". Try a more specific query.`;
    },
  }),
  calculator: tool({
    description: "Perform mathematical calculations",
    inputSchema: z.object({
      expression: z.string().describe("Math expression, e.g. '2 + 2'"),
    }),
    execute: async ({ expression }) => {
      console.log(`  🧮 Calculating: ${expression}`);
      try {
        // Safe math evaluation using Function constructor
        const sanitized = expression.replace(/[^0-9+\-*/().% ]/g, "");
        const result = new Function(`return ${sanitized}`)();
        return { expression, result: Number(result) };
      } catch {
        return { expression, error: "Invalid expression" };
      }
    },
  }),
};
 
// The manual ReAct loop
async function runAgent(userPrompt: string, maxSteps = 10) {
  const messages: ModelMessage[] = [
    {
      role: "system",
      content:
        "You are a helpful research assistant. Use the available tools to find information and perform calculations. Think step by step.",
    },
    { role: "user", content: userPrompt },
  ];
 
  console.log(`\n🤖 Agent started: "${userPrompt}"\n`);
 
  for (let step = 0; step < maxSteps; step++) {
    console.log(`--- Step ${step + 1} ---`);
 
    const result = await generateText({
      model: openai("gpt-4o"),
      messages,
      tools,
    });
 
    // Append the model's response to conversation history
    messages.push(...result.response.messages);
 
    // If the model generated text (no tool calls), we're done
    if (result.text) {
      console.log(`\n✅ Agent finished in ${step + 1} step(s)`);
      console.log(`\n📝 Final answer:\n${result.text}`);
      return result.text;
    }
 
    // Log tool calls for this step
    for (const toolCall of result.toolCalls) {
      console.log(`  Tool: ${toolCall.toolName}(${JSON.stringify(toolCall.args)})`);
    }
  }
 
  console.log("⚠️ Agent reached max steps without completing");
  return null;
}
 
// Run the agent
await runAgent(
  "Search for information about the ReAct pattern and AI agents. Then calculate what percentage of the $50B projected agent market would be $7.6B."
);

Run it:

npx tsx src/02-manual-agent-loop.ts

You'll see the agent reason through multiple steps:

🤖 Agent started: "Search for information about..."

--- Step 1 ---
  🔍 Searching: "react pattern"
  Tool: search({"query":"react pattern"})
--- Step 2 ---
  🔍 Searching: "ai agents"
  Tool: search({"query":"ai agents"})
--- Step 3 ---
  🧮 Calculating: (7.6 / 50) * 100
  Tool: calculator({"expression":"(7.6 / 50) * 100"})
--- Step 4 ---

✅ Agent finished in 4 step(s)

📝 Final answer:
The ReAct pattern... AI agents market... 7.6B represents 15.2% of the projected $50B market.

This is the core of every AI agent: a loop where the model decides what to do next. The model called search twice to gather information, then calculator to crunch numbers, and finally synthesized everything into a response.

Step 4: Production Agent with ToolLoopAgent

The manual loop works but requires boilerplate. The AI SDK's ToolLoopAgent class handles all the orchestration for you. Create src/03-tool-loop-agent.ts:

import "dotenv/config";
import { ToolLoopAgent, tool, stepCountIs } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";
 
const researchAgent = new ToolLoopAgent({
  model: openai("gpt-4o"),
  system:
    "You are a research assistant. Use tools to find and analyze information. Always verify claims with searches before presenting them as facts.",
  tools: {
    searchWeb: tool({
      description:
        "Search the web for current information on any topic",
      inputSchema: z.object({
        query: z.string().describe("Search query"),
        topic: z
          .enum(["technology", "science", "business", "general"])
          .describe("Topic category to focus results"),
      }),
      execute: async ({ query, topic }) => {
        console.log(`  🔍 [${topic}] Searching: "${query}"`);
        // Simulated — replace with real API calls
        return {
          results: [
            {
              title: `Top result for: ${query}`,
              snippet: `Comprehensive information about ${query} in the ${topic} domain. Key findings include recent developments and projected trends for 2026-2027.`,
              relevance: 0.95,
            },
          ],
          totalResults: 1,
        };
      },
    }),
    analyzeData: tool({
      description:
        "Analyze and compare data points, identify trends and patterns",
      inputSchema: z.object({
        data: z.string().describe("The data or facts to analyze"),
        analysisType: z
          .enum(["comparison", "trend", "summary", "sentiment"])
          .describe("Type of analysis to perform"),
      }),
      execute: async ({ data, analysisType }) => {
        console.log(`  📊 Analyzing (${analysisType}): ${data.slice(0, 60)}...`);
        return {
          analysisType,
          findings: `Analysis of type '${analysisType}' on the provided data reveals key patterns and actionable insights.`,
          confidence: 0.87,
        };
      },
    }),
  },
  stopWhen: stepCountIs(10),
});
 
// Run the agent
const result = await researchAgent.generate({
  prompt:
    "Research the current state of AI agent frameworks in 2026. Compare the top 3 frameworks and tell me which one is best for TypeScript developers.",
});
 
console.log("\n📝 Final Response:\n");
console.log(result.text);
console.log(`\n📊 Total steps: ${result.steps.length}`);
console.log(
  `📊 Total tokens: ${result.steps.reduce((sum, s) => sum + (s.usage?.totalTokens ?? 0), 0)}`
);

The ToolLoopAgent class gives you:

Automatic conversation management — no manually appending messages
Built-in stop conditions — stepCountIs(10) prevents runaway loops
Step tracking — inspect every step for debugging and observability
Token usage tracking — monitor costs across the entire agent run

Step 5: Advanced Loop Control

Real-world agents need fine-grained control over their execution. Create src/04-forced-tool-pattern.ts:

import "dotenv/config";
import { ToolLoopAgent, tool, stepCountIs } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";
import type { StopCondition } from "ai";
 
// Define tools with types for the StopCondition generic
const tools = {
  gatherEvidence: tool({
    description:
      "Gather evidence and facts about a claim. Always call this before making any assertions.",
    inputSchema: z.object({
      claim: z.string().describe("The claim to investigate"),
    }),
    execute: async ({ claim }) => {
      console.log(`  📋 Gathering evidence: "${claim}"`);
      return {
        claim,
        evidence: [
          { source: "Research paper", supports: true, confidence: 0.9 },
          { source: "Industry report", supports: true, confidence: 0.85 },
        ],
        consensusStrength: "strong",
      };
    },
  }),
  assessRisk: tool({
    description:
      "Assess potential risks or counterarguments to a conclusion",
    inputSchema: z.object({
      conclusion: z.string().describe("The conclusion to assess"),
    }),
    execute: async ({ conclusion }) => {
      console.log(`  ⚠️ Assessing risks: "${conclusion.slice(0, 50)}..."`);
      return {
        risks: ["Limited sample size", "Rapidly evolving field"],
        overallRisk: "medium",
        recommendation: "Present findings with appropriate caveats",
      };
    },
  }),
  // A "done" tool with no execute function — acts as termination signal
  submitReport: tool({
    description:
      "Submit the final research report. Call this ONLY when evidence has been gathered and risks assessed.",
    inputSchema: z.object({
      title: z.string().describe("Report title"),
      findings: z.string().describe("Key findings summary"),
      confidence: z
        .enum(["high", "medium", "low"])
        .describe("Overall confidence level"),
      caveats: z.array(z.string()).describe("Important caveats"),
    }),
    // No execute function — calling this tool stops the loop
  }),
};
 
// Custom stop condition: budget-based
const budgetExceeded: StopCondition<typeof tools> = ({ steps }) => {
  const totalTokens = steps.reduce(
    (sum, step) => sum + (step.usage?.totalTokens ?? 0),
    0
  );
  const estimatedCost = (totalTokens / 1000) * 0.005; // rough estimate
  if (estimatedCost > 0.10) {
    console.log(`  💰 Budget exceeded: ~$${estimatedCost.toFixed(4)}`);
    return true;
  }
  return false;
};
 
const factCheckAgent = new ToolLoopAgent({
  model: openai("gpt-4o"),
  system: `You are a rigorous fact-checking agent. Follow this process:
1. Gather evidence for each major claim
2. Assess risks and counterarguments
3. Submit a final report with your findings
 
You MUST call tools at every step. When done, call submitReport.`,
  tools,
  toolChoice: "required", // Force the model to always call a tool
  stopWhen: [stepCountIs(15), budgetExceeded], // Multiple stop conditions
  prepareStep: async ({ stepNumber }) => {
    // Phase-based tool availability
    if (stepNumber <= 3) {
      return { activeTools: ["gatherEvidence"] };
    }
    if (stepNumber <= 5) {
      return { activeTools: ["gatherEvidence", "assessRisk"] };
    }
    return { activeTools: ["assessRisk", "submitReport"] };
  },
});
 
const result = await factCheckAgent.generate({
  prompt:
    "Fact-check this claim: AI agents will handle 40% of enterprise applications by end of 2026.",
});
 
// With toolChoice: 'required' and a done tool, the answer is in staticToolCalls
console.log("\n📄 Report submitted:");
const report = result.staticToolCalls.find(
  (tc) => tc.toolName === "submitReport"
);
if (report) {
  console.log(JSON.stringify(report.args, null, 2));
}
console.log(`\n📊 Completed in ${result.steps.length} steps`);

This example demonstrates three advanced patterns:

The Forced Tool Pattern

By combining toolChoice: "required" with a submitReport tool that has no execute function, we force the agent to always use tools. When the agent calls submitReport, the loop terminates because there's no function to execute. The structured output is captured in result.staticToolCalls.

Custom Stop Conditions

The budgetExceeded function tracks cumulative token usage and stops the agent if costs exceed a threshold. You can combine multiple conditions in an array — the loop stops when any condition is met.

Phased Tool Availability

The prepareStep callback dynamically controls which tools are available at each step. Early steps only allow evidence gathering, middle steps add risk assessment, and final steps focus on report submission. This guides the agent through a structured workflow.

Step 6: Building a Complete Research Agent

Let's put everything together into a practical research agent with real-world patterns. Create src/05-research-agent.ts:

import "dotenv/config";
import { ToolLoopAgent, tool, stepCountIs } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";
 
// --- Tool definitions ---
 
const searchTool = tool({
  description:
    "Search for current information. Use specific queries for best results.",
  inputSchema: z.object({
    query: z.string().describe("Specific search query"),
  }),
  execute: async ({ query }) => {
    console.log(`  🔍 Search: "${query}"`);
    // Replace with a real search API (Tavily, Serper, Brave, etc.)
    return {
      results: [
        {
          title: `Result for: ${query}`,
          content: `Detailed information about ${query}. The latest data from 2026 shows significant developments in this area, with adoption growing 3x year over year.`,
          url: `https://example.com/search?q=${encodeURIComponent(query)}`,
        },
      ],
    };
  },
});
 
const readUrlTool = tool({
  description: "Read the full content of a URL for deeper analysis",
  inputSchema: z.object({
    url: z.string().url().describe("The URL to read"),
  }),
  execute: async ({ url }) => {
    console.log(`  📄 Reading: ${url}`);
    // Replace with a real web scraper (Firecrawl, Jina Reader, etc.)
    return {
      url,
      content: `Full article content from ${url}. Contains detailed analysis, statistics, and expert opinions on the topic. Key statistics: market size, growth rate, and adoption metrics.`,
      wordCount: 1500,
    };
  },
});
 
const noteTool = tool({
  description:
    "Save an important finding to your notes. Use this to track key facts as you research.",
  inputSchema: z.object({
    category: z
      .enum(["fact", "statistic", "quote", "insight"])
      .describe("Type of note"),
    content: z.string().describe("The note content"),
    source: z.string().describe("Where this information came from"),
    reliability: z
      .enum(["high", "medium", "low"])
      .describe("How reliable this information is"),
  }),
  execute: async ({ category, content, source, reliability }) => {
    console.log(`  📝 Note [${category}/${reliability}]: ${content.slice(0, 60)}...`);
    return { saved: true, category, reliability };
  },
});
 
const outlineTool = tool({
  description:
    "Create or update the report outline before writing the final report",
  inputSchema: z.object({
    sections: z
      .array(
        z.object({
          heading: z.string(),
          keyPoints: z.array(z.string()),
        })
      )
      .describe("Report sections with key points"),
  }),
  execute: async ({ sections }) => {
    console.log(`  📋 Outline created: ${sections.length} sections`);
    return { sections: sections.length, status: "outline_ready" };
  },
});
 
// --- Agent definition ---
 
const researchAgent = new ToolLoopAgent({
  model: openai("gpt-4o"),
  system: `You are an expert research agent. Your process:
 
1. SEARCH: Start by searching for information from multiple angles
2. READ: Deep-dive into the most relevant sources
3. NOTE: Save key findings with reliability ratings
4. OUTLINE: Organize your findings into a structured outline
5. WRITE: Synthesize everything into a comprehensive response
 
Be thorough. Cross-reference information. Note when sources disagree.
Always save important findings as notes before writing your final response.`,
  tools: {
    search: searchTool,
    readUrl: readUrlTool,
    saveNote: noteTool,
    createOutline: outlineTool,
  },
  stopWhen: stepCountIs(15),
  prepareStep: async ({ stepNumber, messages }) => {
    // Trim old messages to manage context window
    if (messages.length > 30) {
      return {
        messages: [messages[0], ...messages.slice(-20)],
      };
    }
    return {};
  },
});
 
// --- Execute ---
 
async function main() {
  console.log("🚀 Research Agent Starting\n");
  console.log("=".repeat(60));
 
  const startTime = Date.now();
 
  const result = await researchAgent.generate({
    prompt:
      "Research the state of AI agent development in 2026. Cover the leading frameworks, design patterns, and enterprise adoption trends. Include specific data points.",
  });
 
  const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
 
  console.log("\n" + "=".repeat(60));
  console.log("\n📝 RESEARCH REPORT:\n");
  console.log(result.text);
 
  // Print execution stats
  console.log("\n" + "=".repeat(60));
  console.log("📊 Execution Statistics:");
  console.log(`   Steps: ${result.steps.length}`);
  console.log(`   Time: ${elapsed}s`);
 
  const totalTokens = result.steps.reduce(
    (sum, s) => sum + (s.usage?.totalTokens ?? 0),
    0
  );
  console.log(`   Tokens: ${totalTokens.toLocaleString()}`);
 
  // Log tool usage breakdown
  const toolUsage: Record<string, number> = {};
  for (const step of result.steps) {
    for (const tc of step.toolCalls) {
      toolUsage[tc.toolName] = (toolUsage[tc.toolName] ?? 0) + 1;
    }
  }
  console.log(`   Tool usage:`, toolUsage);
}
 
main().catch(console.error);

This research agent demonstrates real-world patterns:

Multiple specialized tools — each handles a different aspect of the research process
Structured note-taking — the agent saves findings with reliability ratings as it researches
Context window management — prepareStep trims old messages to prevent context overflow
Execution statistics — track steps, time, tokens, and tool usage for observability

Testing Your Implementation

Run each file to see the agent in action:

# Basic tool call
npx tsx src/01-basic-tool-call.ts
 
# Manual ReAct loop — see the raw pattern
npx tsx src/02-manual-agent-loop.ts
 
# ToolLoopAgent — production-ready orchestration
npx tsx src/03-tool-loop-agent.ts
 
# Advanced patterns — forced tools, budgets, phases
npx tsx src/04-forced-tool-pattern.ts
 
# Complete research agent
npx tsx src/05-research-agent.ts

Agent Design Patterns Reference

Here's a quick reference for the patterns covered and when to use each:

Pattern 1: Simple Tool Loop

const agent = new ToolLoopAgent({
  model: openai("gpt-4o"),
  tools: { /* ... */ },
  stopWhen: stepCountIs(10),
});

When to use: Most agent tasks. The model decides when to call tools and when to respond.

Pattern 2: Forced Tool with Done Signal

const agent = new ToolLoopAgent({
  model: openai("gpt-4o"),
  tools: {
    /* working tools... */
    done: tool({
      description: "Signal completion",
      inputSchema: z.object({ answer: z.string() }),
      // No execute function
    }),
  },
  toolChoice: "required",
});

When to use: When you need structured output or want to ensure the agent always uses tools before responding.

Pattern 3: Phased Execution

const agent = new ToolLoopAgent({
  model: openai("gpt-4o"),
  tools: { search, analyze, summarize },
  prepareStep: async ({ stepNumber }) => {
    if (stepNumber <= 3) return { activeTools: ["search"] };
    if (stepNumber <= 6) return { activeTools: ["analyze"] };
    return { activeTools: ["summarize"] };
  },
});

When to use: When the agent should follow a specific workflow — research first, then analyze, then conclude.

Pattern 4: Manual Loop

const messages: ModelMessage[] = [{ role: "user", content: prompt }];
for (let i = 0; i < maxSteps; i++) {
  const result = await generateText({ model, messages, tools });
  messages.push(...result.response.messages);
  if (result.text) break;
}

When to use: When you need maximum control — custom message filtering, dynamic tool injection, or complex branching logic.

Production Checklist

Before deploying agents to production, consider these factors:

Safety

Set maxSteps or stepCountIs() — always cap the number of iterations to prevent runaway loops
Implement cost budgets — track token usage and stop when costs exceed a threshold
Validate tool inputs — Zod schemas handle this, but add business logic validation in execute
Use needsApproval — for tools that have side effects (sending emails, making purchases, modifying data)

Observability

Log every step — record tool calls, inputs, outputs, and token usage
Track execution time — agents can take seconds to minutes; set timeouts
Monitor error rates — tools will fail; handle gracefully and let the agent retry or adapt

Performance

Use prepareStep for context management — trim old messages to stay within context limits
Choose the right model — use a faster/cheaper model for simple steps, a more capable one for complex reasoning
Cache tool results — if the same search query appears twice, return the cached result

Troubleshooting

Agent loops forever: You likely have toolChoice: "required" without a done tool, or the done tool has an execute function. Remove the execute function so calling it terminates the loop.

Agent doesn't use tools: Check your tool descriptions. The model uses descriptions to decide when to call tools. Be specific: "Search the web for current information" is better than "Search".

Tool schema errors: Ensure Zod schemas match what the model generates. Use .describe() on every field to guide the model's output.

Context window exceeded: Use prepareStep to trim old messages. Keep the system prompt and recent messages; drop older tool results.

Next Steps

You've learned the fundamental patterns behind AI agents. Here's where to go next:

Multi-agent systems: Use the patterns from this tutorial to build specialized agents that hand off tasks to each other. See our Orchestrating Agents: Routines and Handoffs tutorial.
Agentic RAG: Combine agents with vector databases for intelligent document retrieval. See our Building an Autonomous AI Agent with Agentic RAG tutorial.
MCP integration: Connect your agent to external services using the Model Context Protocol. See our Build Your First MCP Server with TypeScript tutorial.
Streaming: Replace generateText with streamText to stream agent responses in real-time to a UI.

Conclusion

Every AI agent — from a simple chatbot to a complex multi-agent orchestration — is built on the same foundation: an LLM in a loop that can reason and act. The ReAct pattern gives agents their power, and the Vercel AI SDK gives you the TypeScript-native tools to build them safely.

You've progressed from a single tool call, through a manual ReAct loop, to production-ready agents with budgets, phases, and structured output. These patterns are the building blocks for any agent system you'll build in 2026 and beyond.

The key insight: agents aren't magic. They're just loops with good tools and clear instructions. Now go build something.

Building AI Agents from Scratch with TypeScript: Master the ReAct Pattern Using the Vercel AI SDK