{
console.log("Sending message:", message)
}}
onFileSelect={(file) => {
console.log("File selected:", file.name)
}}
onAudioRecord={(audioBlob) => {
console.log("Audio recorded:", audioBlob)
}}
/>
```
--------------------------------
### Configure Agent with prepareStep for Model Escalation
Source: https://www.aisdkagents.com/docs/agents/building-agents
Runs custom logic before each iteration to trim message history and optionally escalate to a more capable model as task complexity increases. Returns updated model and/or messages for the current step.
```javascript
const agent = new Agent({
model: "openai/gpt-4o-mini",
tools,
prepareStep: async ({ stepNumber, messages }) => {
const trimmed = messages.slice(-12) // keep it lean
if (stepNumber >= 3) {
return { model: "openai/gpt-4o", messages: trimmed }
}
return { messages: trimmed }
},
})
```
--------------------------------
### Next.js Layout Configuration
Source: https://www.aisdkagents.com/patterns/basics-stream-text
Root layout configuration for the AI SDK Agents application. Provides the basic HTML structure and metadata setup required for the streaming text demo.
```typescript
// app/layout.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Stream Text - AI SDK Agents',
description: 'Stream text responses from AI prompts in real-time'
};
export default function RootLayout({
children
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
--------------------------------
### Custom AI Agent Hook Example (React)
Source: https://www.aisdkagents.com/docs/ai/ai-sdk-blocks
This React component demonstrates a custom AI agent using the `useChat` hook from the AI SDK. It sets up a basic chat interface with initial messages and provides a structure for further customization.
```typescript
export function MyCustomAgent() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: "/api/my-custom-agent",
initialMessages: [
{
id: "1",
role: "assistant",
content: "Hello! I'm your custom AI agent. How can I help?",
},
],
})
return (
{/* Your customized implementation */}
)
}
```
--------------------------------
### Implement Prompt Chaining with AI SDK Agents (TypeScript)
Source: https://www.aisdkagents.com/docs/agents/agent-patterns
This TypeScript code defines an AI Agent that chains multiple prompts together to create content. It uses predefined tools for outlining, drafting, and evaluating content quality. The agent is configured with a system prompt that dictates the creation process and a stopping condition for the number of execution steps. The output includes the generated text and a log of all executed steps.
```typescript
import { Experimental_Agent as Agent, stepCountIs, tool } from "ai"
import { z } from "zod"
const chainingAgent = new Agent({
model: "openai/gpt-4o",
system: `You are a content creation assistant that works in stages.
Process:
1. Create a detailed outline first
2. Write a draft based on the outline
3. Polish and refine the content
Always evaluate quality at each step and retry if needed.`,
tools: {
createOutline: tool({
description: "Create a detailed outline for the given topic",
parameters: z.object({
topic: z.string().describe("The topic to create an outline for"),
}),
execute: async ({ topic }) => {
return { outline: `Detailed outline for: ${topic}` }
},
}),
writeDraft: tool({
description: "Write a draft based on the outline",
parameters: z.object({
outline: z.string().describe("The outline to write from"),
}),
execute: async ({ outline }) => {
return { draft: `Draft based on: ${outline}` }
},
}),
evaluateQuality: tool({
description: "Evaluate the quality of content (1-10 scale)",
parameters: z.object({
content: z.string().describe("The content to evaluate"),
type: z.enum(["outline", "draft", "final"]).describe("Type of content"),
}),
execute: async ({ content, type }) => {
// Simulate quality evaluation
const score = Math.floor(Math.random() * 4) + 7 // 7-10 range
return { score, feedback: `Quality score for ${type}: ${score}/10` }
},
}),
},
stopWhen: stepCountIs(10), // Allow multiple steps for chaining
})
// Use the agent for content creation
const result = await chainingAgent.generate({
prompt: "Create a comprehensive guide about machine learning",
})
console.log(result.text)
console.log(result.steps) // See all the steps taken
```
--------------------------------
### Configure Tailwind Utility Classes in components.json
Source: https://www.aisdkagents.com/docs/theming
Configuration file setup to use Tailwind utility classes for theming by setting tailwind.cssVariables to false. This approach uses predefined Tailwind color utilities instead of custom CSS variables.
```json
{
"style": "default",
"rsc": true,
"tailwind": {
"config": "",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": false
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
```
--------------------------------
### Configure Agent with Default Single Generation Step
Source: https://www.aisdkagents.com/docs/agents/building-agents
Demonstrates default agent behavior with implicit stepCountIs(1), allowing one model generation that produces either text output or tool calls. After tool execution, the loop continues to the next step.
```javascript
const agent = new Agent({
model: "openai/gpt-4o",
tools: { checkPantry, composeMenu },
// stopWhen: stepCountIs(1) ← implicit default
})
// This agent:
// - Step 1: Model might call checkPantry → tool executes → continues
// - Step 2: Model generates final answer → stops
// The limit is on GENERATIONS, not tool calls
```
--------------------------------
### Configure Tailwind CSS Variables in components.json
Source: https://www.aisdkagents.com/docs/theming
Configuration file setup to enable CSS variable-based theming by setting tailwind.cssVariables to true. This enables the use of CSS custom properties defined in globals.css for dynamic theming across the application.
```json
{
"style": "default",
"rsc": true,
"tailwind": {
"config": "",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
```
--------------------------------
### React Component Example with State Management
Source: https://www.aisdkagents.com/patterns/chat-gpt
This React component demonstrates state management using the `useState` hook for text input, search preferences, and message statuses. It also includes functions for streaming responses and handling user messages.
```typescript
import React, { useState, useCallback } from 'react';
// Assuming MessageType and other types/icons are defined elsewhere
const Example = () => {
const [text, setText] = useState("");
const [useWebSearch, setUseWebSearch] = useState(false);
const [useMicrophone, setUseMicrophone] = useState(false);
const [status, setStatus] = useState<
"submitted" | "streaming" | "ready" | "error"
>("ready");
const [messages, setMessages] = useState([]);
const [streamingMessageId, setStreamingMessageId] = useState(
null
);
const streamReasoning = async (
messageKey: string,
versionId: string,
reasoningContent: string
) => {
const words = reasoningContent.split(" ");
let currentContent = "";
for (let i = 0; i < words.length; i++) {
currentContent += (i > 0 ? " " : "") + words[i];
setMessages((prev) =>
prev.map((msg) => {
if (msg.key === messageKey) {
return {
...msg,
reasoning: msg.reasoning
? { ...msg.reasoning, content: currentContent }
: undefined,
};
}
return msg;
})
);
await new Promise((resolve) =>
setTimeout(resolve, Math.random() * 30 + 20)
);
}
setMessages((prev) =>
prev.map((msg) => {
if (msg.key === messageKey) {
return {
...msg,
isReasoningComplete: true,
isReasoningStreaming: false,
};
}
return msg;
})
);
};
const streamContent = async (
messageKey: string,
versionId: string,
content: string
) => {
const words = content.split(" ");
let currentContent = "";
for (let i = 0; i < words.length; i++) {
currentContent += (i > 0 ? " " : "") + words[i];
setMessages((prev) =>
prev.map((msg) => {
if (msg.key === messageKey) {
return {
...msg,
versions: msg.versions.map((v) =>
v.id === versionId ? { ...v, content: currentContent } : v
),
};
}
return msg;
})
);
await new Promise((resolve) =>
setTimeout(resolve, Math.random() * 50 + 25)
);
}
setMessages((prev) =>
prev.map((msg) => {
if (msg.key === messageKey) {
return { ...msg, isContentComplete: true };
}
return msg;
})
);
};
const streamResponse = useCallback(
async (
messageKey: string,
versionId: string,
content: string,
reasoning?: { content: string; duration: number }
) => {
setStatus("streaming");
setStreamingMessageId(versionId);
if (reasoning) {
await streamReasoning(messageKey, versionId, reasoning.content);
await new Promise((resolve) => setTimeout(resolve, 500));
}
await streamContent(messageKey, versionId, content);
setStatus("ready");
setStreamingMessageId(null);
},
[]
);
const streamMessage = useCallback(
async (message: MessageType) => {
if (message.from === "user") {
setMessages((prev) => [...prev, message]);
return;
}
// ... rest of the function
},
[]
);
// ... rest of the component
};
export default Example;
```
--------------------------------
### Design Production-Safe Tool with Input Validation
Source: https://www.aisdkagents.com/docs/agents/building-agents
Implements a tool with strict input schema validation, limit enforcement, user context derivation from server (not model text), and curated output summarization. Demonstrates safe tool patterns including idempotency and output curation.
```javascript
const searchDocs = tool({
description: "Search product docs",
inputSchema: z.object({
q: z.string().min(2),
limit: z.number().int().min(1).max(5).default(3),
}),
execute: async ({ q, limit }, ctx) => {
const results = await docs.search(q, { limit, userId: ctx.user.id })
return {
hits: results.map((r) => ({
id: r.id,
title: r.title,
summary: r.snippet,
})),
}
},
})
```