Multi-Step & Generative UI

Your chatbot can already call tools, but we can make it more powerful. Right now, when you ask for weather in multiple cities, the model makes separate calls - let's enable it to handle multiple steps intelligently. And those tool results? We can render them as custom React components instead of debugging displays.

In this lesson, you'll enable multi-step conversations where the AI can chain multiple tool calls together, and generative UI where tool results render as custom React components instead of the Elements Tool components.

What We're Building

Try asking your current chatbot: "What's the weather in San Francisco and New York?"

You'll get weather data, but the flow feels incomplete. We can make this much more intelligent by allowing the AI to:

Make multiple tool calls
Synthesize a natural language response
Display results in custom UI components instead of debug tool cards

Good news: Your template already includes a polished Weather component ready to use! We'll integrate it to replace the tool debugging display.

Step 1: Enable Multi-Step Conversations

Right now, if you ask "What's the weather in San Francisco and New York?", the AI makes tool calls but doesn't provide a natural language summary afterward. Let's fix that!

Why Multi-Step is Required

Without multi-step, the AI must choose ONE action per request:

Either call tools (one or multiple)
Or generate a text response
Not both!

This limitation means:

❌ Can't call weather tool AND explain the results
❌ Can't make sequential tool calls based on previous results
❌ Can't provide a synthesis after gathering data

Multi-step conversations solve this by allowing the AI to take multiple "steps" where each step can:

Call one or more tools in parallel
Process tool results
Decide to call more tools OR generate a response
Finally synthesize everything into natural language

Learn more about multi-step interfaces and stepCountIs in the documentation.

The key is adding stopWhen configuration to your API route:

typescript

Understanding stepCountIs

The stepCountIs(5) allows up to 5 "steps" in the conversation. Here's what might happen:

Example flow for "Weather in SF and NYC?":

Step 1: AI calls getWeather("San Francisco") and getWeather("New York") in parallel

Step 2: AI receives both results and generates text response comparing them

Example flow for complex query:

Step 1: AI calls first tool

Step 2: Based on results, AI calls another tool

Step 3: AI processes all data

Step 4: AI generates final response

Step 5: (Buffer for edge cases)

Use stepCountIs(2) for simple tool + response, stepCountIs(5) for most cases, or stepCountIs(10) for complex multi-tool scenarios. Each step uses tokens, so balance capability with cost.

Testing Multi-Step Behavior

Save your changes to app/api/chat/route.ts
Restart your dev server if needed: pnpm dev
Navigate to http://localhost:3000/chat
Test these queries to see multi-step in action:

Single city (baseline): "What's the weather in Tokyo?"
- Expected: One tool call, then a response
Multiple cities: "What's the weather in San Francisco and New York?"
- Expected: Two tool calls, then a synthesis comparing both
Complex query: "Compare the weather in London, Paris, and Berlin"
- Expected: Three tool calls, then a comprehensive comparison

Screenshot of the chat UI showing the two tool calls and the natural language summary

You should now see:

Tool calls for each city (shown as Tool components)
A natural language summary that synthesizes all the data

Learn More About Multi-Step Interfaces

For detailed information about multi-step interfaces and the stopWhen configuration, see the Multi-step Interfaces documentation.

How Multi-Step Works

When the AI makes a tool call, the result automatically feeds back into the conversation context. The model then decides whether to:

Make another tool call

Provide a text response

Both

This even works when tools fail! If a tool returns an error, the AI can acknowledge the failure and offer alternatives or retry suggestions.

Step 2: Build Generative UI with Weather Components

Right now, tool results display using the Elements Tool component - which works great for debugging but isn't very user-friendly. Generative UI means rendering custom React components based on tool data. Instead of showing tool execution details, let's create visual weather cards that users actually want to see.

Generative UI Documentation

Learn more about Generative UI concepts and patterns in the Generative User Interfaces guide.

Understanding the Weather Component

Your template includes app/(5-chatbot)/chat/weather.tsx - a pre-built Weather component. Let's understand what it provides:

typescript

This component:

Exports WeatherData interface with city, temperature, weatherCode, and humidity that is used in the component props
Maps weather codes to appropriate icons (sun, clouds, rain, snow, etc.)
Renders a gradient card with the weather information
Has a fallback to default San Francisco weather if no data is provided

Update Your Chat Page

Now let's integrate the Weather component. We need to:

Import the Weather component
Conditionally render it for successful tool results
Keep the Tool component as fallback for loading/error states

TODO: Before looking at the solution below, try to:

Add import Weather from "./weather"; after your other imports (around line 24)
Find the case "tool-getWeather": section in your switch statement
Add a conditional check: if part.state === "output-available" && part.output
- Render <Weather weatherData={part.output} />
- Otherwise, keep the existing Tool component
Make sure to keep the same key prop pattern

💡 Hints if you're stuck

The Weather component expects a prop called weatherData
Check part.state === "output-available" to know when the tool succeeded
You'll need both the Weather import AND keep the Tool imports for fallback
The conditional goes inside the case statement, not around it

Solution:

typescript

Implementation Guide

The key changes you made:

Line 24: Import the Weather component from ./weather
Lines 56-63: Modified the tool-getWeather case to:
- Check if part.state === "output-available" (tool completed successfully)
- If yes → Render the custom Weather component with the data
- If no → Keep showing the Tool component for loading/error states

This conditional rendering pattern lets you show polished UI for success while maintaining debugging visibility for errors.

Test Your Implementation

Try it: Ask "What's the weather in Tokyo?" and you should see a styled weather card instead of the tool display!

Screenshot of chat UI. User asks for weather. A styled 'Weather' card component appears, visually displaying temperature, city, and condition. Final text answer follows.

Preventing AI Overpromising

Notice in the screenshot the AI might offer "more details or a forecast"? Our system prompt in Step 1 helps prevent this by explicitly stating what the tool provides. If you still see overpromising, you can:

Make the tool description more explicit: description: "Returns ONLY current temperature, weather code, and humidity - no forecasts available"

Add validation in your tool's execute function to return clear capability messages

Implement the additional features the AI keeps promising!

Perfect! Now you have polished weather cards that display instead of tool debugging info.

Key Takeaways

You've built a sophisticated chatbot with multi-step tool use and custom UI components:

Multi-Step Conversations: Use stopWhen: stepCountIs(5) server-side to enable the AI to make multiple tool calls and synthesize results.
Generative UI: Render custom React components based on tool results (part.state === 'output-available') instead of generic tool displays.
Message Parts: AI SDK 5.0 uses message.parts array structure with typed tool parts like tool-getWeather.
Conditional Rendering: Show custom components for successful results, fallback to tool UI for loading/error states.

Finally: Course Wrap-up & Your AI Future

You've built a sophisticated chatbot with multi-step tool use and generative UI! It's time to wrap up.

This final lesson provides resources, next steps, and guidance for continuing your AI development journey with the AI SDK and beyond.