feat (ui): typed tool parts in ui messages (vercel#6736)

## Background

Working with tool invocations on the client was untyped and required
several levels of resolution.

## Summary

* replace `tool-invocation` parts with typed `tool-TOOL` parts in ui
messages

## Verification

* manually test tools calls in next-openai tools example

## Future Work

* fix human in the loop example

Author: lgrammel

.changeset/clean-ants-brake.md

@@ -0,0 +1,8 @@
+---
+'@ai-sdk/svelte': major
+'@ai-sdk/react': major
+'@ai-sdk/vue': major
+'ai': major
+---
+
+feat (ui): typed tool parts in ui messages

examples/next-fastapi/app/(examples)/02-chat-data/page.tsx

@@ -2,6 +2,7 @@
 
 import { Card } from '@/app/components';
 import { useChat } from '@ai-sdk/react';
+import { getToolName, isToolUIPart } from 'ai';
 import { GeistMono } from 'geist/font/mono';
 import { useState } from 'react';
 
@@ -18,23 +19,21 @@ export default function Page() {
 
             <div className="flex flex-col gap-2">
               {message.parts.map((part, index) => {
-                switch (part.type) {
-                  case 'text':
-                    return <div key={index}>{part.text}</div>;
-                  case 'tool-invocation': {
-                    return (
-                      <div
-                        key={index}
-                        className={`${GeistMono.className} text-sm text-zinc-500 bg-zinc-100 p-3 rounded-lg`}
-                      >
-                        {`${part.toolInvocation.toolName}(${JSON.stringify(
-                          part.toolInvocation.args,
-                          null,
-                          2,
-                        )})`}
-                      </div>
-                    );
-                  }
+                if (part.type === 'text') {
+                  return <div key={index}>{part.text}</div>;
+                } else if (isToolUIPart(part)) {
+                  return (
+                    <div
+                      key={index}
+                      className={`${GeistMono.className} text-sm text-zinc-500 bg-zinc-100 p-3 rounded-lg`}
+                    >
+                      {`${getToolName(part)}(${JSON.stringify(
+                        part.args,
+                        null,
+                        2,
+                      )})`}
+                    </div>
+                  );
                 }
               })}
             </div>

examples/next-openai-pages/app/api/call-tool/route.ts

@@ -1,20 +1,14 @@
-import { ToolInvocation, streamText } from 'ai';
+import { convertToModelMessages, streamText, UIMessage } from 'ai';
 import { openai } from '@ai-sdk/openai';
 import { z } from 'zod';
 
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-  toolInvocations?: ToolInvocation[];
-}
-
 export async function POST(req: Request) {
-  const { messages }: { messages: Message[] } = await req.json();
+  const { messages }: { messages: UIMessage[] } = await req.json();
 
   const result = streamText({
     model: openai('gpt-4'),
     system: 'You are a helpful assistant.',
-    messages,
+    messages: convertToModelMessages(messages),
     tools: {
       celsiusToFahrenheit: {
         description: 'Converts celsius to fahrenheit',

examples/next-openai-pages/app/api/call-tools-in-parallel/route.ts

@@ -1,5 +1,5 @@
 import { useChat } from '@ai-sdk/react';
-import { DefaultChatTransport } from 'ai';
+import { DefaultChatTransport, isToolUIPart } from 'ai';
 import { useState } from 'react';
 
 export default function Page() {
@@ -17,16 +17,10 @@ export default function Page() {
             <strong>{`${message.role}: `}</strong>
 
             {message.parts.map((part, index) => {
-              switch (part.type) {
-                case 'text':
-                  return <div key={index}>{part.text}</div>;
-                case 'tool-invocation': {
-                  return (
-                    <div key={index}>
-                      {JSON.stringify(part.toolInvocation.args)}
-                    </div>
-                  );
-                }
+              if (part.type === 'text') {
+                return <div key={index}>{part.text}</div>;
+              } else if (isToolUIPart(part)) {
+                return <div key={index}>{JSON.stringify(part.args)}</div>;
               }
             })}
           </div>