Day 1: Build A Naive Agent

Your AI agent is now calling tools, but your users still only see plain text responses. How do you surface the actual tool calls and their results in the chat UI?

Day 1 is all about making your AI’s tool invocations visible in the frontend. You’ll learn to leverage the MessagePart type to render structured tool calls alongside text, giving you full insight into what the agent is doing behind the scenes.

You will:

• Update your ChatMessage component to render tool invocations using the parts array instead of plain text.
• Build a new ToolInvocation component that safely extracts and displays tool name, arguments, and results.
• Handle conditional rendering based on the tool call state (pending, result, etc.) to avoid errors.
• Explore how the AI SDK structures message parts and encourage inspecting the types for better understanding.
• Keep your UI simple and clear, laying the foundation for future improvements and debugging.

By the end of Day 1, your frontend will no longer be a black box. You’ll see every tool call, its inputs, and results streaming live in the chat, empowering you to debug, iterate, and improve your AI agent with confidence.