Chat UI Example

The examples/chat-ui directory contains a complete AI Chat application built with React, Tailwind CSS, and use-mcp. It demonstrates how to build a real-world application that leverages MCP servers for tools and context.

Key Features

• Authentication: Implements the OAuth callback flow with a dedicated route.
• Tool Integration: Passes MCP tools to the Vercel AI SDK to allow the LLM to call them.
• Multi-Server: Shows how to manage connections to multiple MCP servers simultaneously.

Notable Code Snippets

handling Tool Calls (Integration with Vercel AI SDK)

In src/components/ChatApp.tsx (simplified concept):

import { useChat } from 'ai/react';

// ... inside component
const { callTool } = useMcp({ /* config */ });

const { messages } = useChat({
  // ...
  async onToolCall({ toolCall }) {
    try {
      // Execute the tool via MCP
      const result = await callTool(toolCall.toolName, toolCall.args);
      return { toolCallId: toolCall.toolCallId, result };
    } catch (error) {
      return { toolCallId: toolCall.toolCallId, result: { error: String(error) } };
    }
  }
});

Multiple Servers

The example uses a McpServerModal component to allow users to input multiple server URLs. Each server is managed by its own instance of the useMcp hook (or a wrapper component that instantiates it).

Running the Example

cd examples/chat-ui
pnpm install
pnpm dev