tool-invocation-demo

1"use client";
2 
3import type { UIMessage } from "@ai-sdk/react";
4import type { InferUITools } from "ai";
5import { tool } from "ai";
6import z from "zod";
7import {
8	ChatMessage,
9	ChatMessageAuthor,
10	ChatMessageAvatar,
11	ChatMessageAvatarFallback,
12	ChatMessageAvatarImage,
13	ChatMessageContainer,
14	ChatMessageContent,
15	ChatMessageHeader,
16	ChatMessageMarkdown,
17	ChatMessageTimestamp,
18} from "@/registry/ui/chat-message";
19import {
20	ChatMessageArea,
21	ChatMessageAreaContent,
22	ChatMessageAreaScrollButton,
23} from "@/registry/ui/chat-message-area";
24import {
25	ToolInvocation,
26	ToolInvocationContentCollapsible,
27	ToolInvocationHeader,
28	ToolInvocationName,
29	ToolInvocationRawData,
30} from "@/registry/ui/tool-invocation";
31 
32const searchDatabaseTool = tool({
33	name: "search-database",
34	description: "Search the database for information",
35	inputSchema: z.object({
36		query: z.string(),
37	}),
38	outputSchema: z.string(),
39	execute: () => {
40		return "Result of searching the database";
41	},
42});
43 
44const toolSet = {
45	"search-database": searchDatabaseTool,
46};
47 
48const messages: Array<
49	UIMessage<
50		{
51			member: {
52				image: string;
53				name: string;
54			};
55		},
56		never,
57		InferUITools<typeof toolSet>
58	>
59> = [
60	{
61		id: "1",
62		parts: [
63			{
64				type: "text",
65				text: "Can you search for information about magical forests?",
66			},
67		],
68		role: "user",
69		metadata: {
70			member: {
71				image: "/avatar-1.png",
72				name: "You",
73			},
74		},
75	},
76	{
77		id: "2",
78		parts: [
79			{
80				type: "tool-search-database",
81				toolCallId: "search-tool-1",
82				state: "output-available",
83				input: {
84					query: "magical forest stories",
85				},
86				output: "Found several stories about magical forests, including 'The Whispering Woods' - a tale about a magical forest where trees can talk and animals sing beautiful songs. The story follows Luna, a young fox with silver fur who can speak with ancient trees.",
87			},
88			{
89				type: "text",
90				text: "I found some great information! There's a wonderful story called 'The Whispering Woods' about a magical forest where trees can talk and animals sing. The main character is Luna, a young fox with silver fur who has the special ability to communicate with ancient trees.",
91			},
92		],
93		role: "assistant",
94		metadata: {
95			member: {
96				image: "/avatar-2.png",
97				name: "Assistant",
98			},
99		},
100	},
101];
102 
103export default function ChatMessageAreaDemo() {
104	return (
105		<ChatMessageArea>
106			<ChatMessageAreaContent>
107				{messages.map((message) => (
108					<ChatMessage key={message.id}>
109// … truncated