'use client'; import { useState } from 'react'; import ChatInput from '@/components/chat-input'; import { useChat } from '@ai-sdk/react'; import { DefaultChatTransport } from 'ai'; import type { ToolTimeoutMessage } from '@/app/api/chat/tool-timeout/route'; function ErrorDetails({ errorText, toolName, query, timeoutMs, }: { errorText: string; toolName: string; query: string; timeoutMs: number; }) { const [open, setOpen] = useState(false); const timestamp = new Date().toISOString(); return (

Tool execution timed out

{open && (

{timestamp}

tool . {toolName} ( "{query}" )

timeout: {timeoutMs}ms

ERR {errorText}

Tool aborted - error sent to model as context

)}

); } export default function Chat() { const { messages, status, sendMessage } = useChat({ transport: new DefaultChatTransport({ api: '/api/chat/tool-timeout' }), }); return (

Tool Timeout Demo

Tools abort after 1 second. Try "what is the weather in tokyo".

{messages?.map(m => (

{m.role}

{m.parts.map((part, index) => { switch (part.type) { case 'text': return ( {part.text} ); case 'step-start': return index > 0 ? (

) : null; case 'tool-getWeather': { switch (part.state) { case 'input-streaming': return (

Getting weather...

); case 'input-available': return (

Getting weather for {part.input.city}...

); case 'output-available': return (

Result: {JSON.stringify(part.output)}

); case 'output-error': return ( ); } break; } } })}

))}

sendMessage({ text })} />

); }