Vercel AI SDK Integration

'use client';  import { useState, useCallback, useRef, useEffect } from 'react'; import { useChat } from '@ai-sdk/react'; import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } from 'ai'; import { createMCPClient } from '@/lib/mcp/create-client'; import { createSmitheryUrl } from "@smithery/sdk/shared/config.js"; import type { Client } from "@modelcontextprotocol/sdk/client/index.js"; import type { Tool as MCPTool } from "@modelcontextprotocol/sdk/types.js";  export default function Home() {  const [text, setText] = useState<string>('');  const [client, setClient] = useState<Client | null>(null);  const [allTools, setAllTools] = useState<MCPTool[]>([]);    // Connect to MCP server on mount  // This is for demo - in your application you might want to let users dynamically add their servers  useEffect(() => {  const connectToMCP = async () => {  try {  // Replace with your server details  const serverUrl = 'https://server.smithery.ai/{server_id}';   const apiKey = '{your_api_key}';   const profile = '{your_profile}';     const connectionUrl = createSmitheryUrl(serverUrl, {   apiKey,   profile,   });     const result = await createMCPClient(new URL(connectionUrl));    if (!result.ok) {  throw result.error;  }    const { client } = result.value;  setClient(client);    // Get available tools  try {  const toolsResult = await client.listTools();  setAllTools(toolsResult.tools || []);  } catch (toolsError) {  console.warn('Failed to list tools:', toolsError);  setAllTools([]);  }    } catch (error) {  console.error('Failed to connect to MCP server:', error);  }  };    connectToMCP();    // Cleanup on unmount  return () => {  if (client) {  client.close().catch(console.error);  }  };  }, []);    // Use a ref to store the latest handler to avoid stale closures  const handleToolCallRef = useRef<((params: any) => Promise<void>) | null>(null);    // Stable wrapper that always calls the latest version  const handleToolCall = useCallback(async (params: any) => {  return handleToolCallRef.current?.(params);  }, []);   // Configure useChat with MCP tool handling  const { messages, sendMessage, status, addToolResult } = useChat({   transport: new DefaultChatTransport({   api: '/api/chat',   }),   sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,   onToolCall: handleToolCall,   });    // Update the ref with the latest implementation  handleToolCallRef.current = async ({ toolCall }: any) => {  // Check if it's a dynamic tool first for proper type narrowing  if (toolCall.dynamic) {  return;  }    try {  if (!client) {  throw new Error('MCP client not connected');  }    // Execute the tool using the MCP client  const result = await client.callTool({   name: toolCall.toolName,   arguments: toolCall.input || {}   });     // Extract text content from the result  let output = 'Tool executed successfully';  if (result.content && Array.isArray(result.content)) {  const textContent = result.content  .filter(item => item.type === 'text')  .map(item => item.text)  .join('\n');  output = textContent || output;  }    // Add the MCP result back to the conversation  addToolResult({  toolCallId: toolCall.toolCallId,  tool: toolCall.toolName,  output,  });  } catch (error) {  // Add error result  addToolResult({  toolCallId: toolCall.toolCallId,  tool: toolCall.toolName,  output: {   error: 'Tool execution failed',   message: error instanceof Error ? error.message : 'Unknown error'   },  });  }  };   const handleSendMessage = useCallback(async () => {  if (!text.trim() || status === 'streaming') return;    // Pass the current tools state to the API  sendMessage({ text }, {   body: {  tools: allTools,  }  });    setText('');  }, [text, status, sendMessage, allTools]);   return (  <div className="flex flex-col h-screen max-w-4xl mx-auto">  {/* Messages */}  <div className="flex-1 overflow-y-auto p-4">  {messages.map((message) => (  <div key={message.id} className="mb-4">  <div className="font-semibold mb-2">  {message.role === 'user' ? 'You' : 'Assistant'}:  </div>    {message.parts.map((part, i) => {  switch (part.type) {  case 'text':  return (  <div key={`${message.id}-${i}`} className="prose">  {part.text}  </div>  );    default:  // Handle tool call parts generically  if (part.type.startsWith('tool-') && 'toolCallId' in part) {  const toolPart = part as any;  const callId = toolPart.toolCallId;  const toolName = part.type.replace('tool-', '');    if ('state' in toolPart) {  switch (toolPart.state) {  case 'input-streaming':  return (  <div key={callId} className="p-3 bg-blue-50 border border-blue-200 rounded-lg">  Preparing {toolName}...  </div>  );  case 'input-available':  return (  <div key={callId} className="p-3 bg-blue-50 border border-blue-200 rounded-lg">  Executing {toolName}...  </div>  );  case 'output-available':  return (  <div key={callId} className="p-3 bg-green-50 border border-green-200 rounded-lg">  <strong>{toolName} result:</strong> {toolPart.output}  </div>  );  case 'output-error':  return (  <div key={callId} className="p-3 bg-red-50 border border-red-200 rounded-lg">  Error in {toolName}: {toolPart.errorText}  </div>  );  }  }  }  return null;  }  })}  </div>  ))}    {status === 'streaming' && (  <div className="mb-4">  <div className="font-semibold mb-2">Assistant:</div>  <div className="animate-pulse">Thinking...</div>  </div>  )}  </div>   {/* Input */}  <div className="p-4 border-t">  <div className="flex gap-2">  <input  value={text}  onChange={(e) => setText(e.target.value)}  placeholder="Ask anything..."  className="flex-1 p-3 border border-gray-300 rounded-lg"  disabled={status === 'streaming'}  onKeyDown={(e) => {  if (e.key === 'Enter' && !e.shiftKey) {  e.preventDefault();  handleSendMessage();  }  }}  />  <button  onClick={handleSendMessage}  disabled={!text.trim() || status === 'streaming'}  className="px-4 py-2 bg-blue-500 text-white rounded-lg disabled:opacity-50"  >  Send  </button>  </div>  </div>  </div>  ); }