Happy slice of mcp pizzaMCP.pizza

vercel-ai-mcp-client

MCP.Pizza Chef: QuantGeekDev

The vercel-ai-mcp-client is a Model Context Protocol client built on Next.js App Router that integrates the Vercel AI SDK. It simplifies managing LLM chat sessions in the browser by connecting to MCP servers via Server-Sent Events (SSE), auto-discovering available tools, and enabling tool usage through an intuitive UI. This client streamlines real-time, context-aware AI interactions in web applications.

Use This MCP client To

Connect browser-based apps to MCP servers using SSE Auto-discover and list available MCP tools dynamically Manage LLM chat sessions with Vercel AI SDK integration Enable real-time tool invocation from user chat input Develop interactive AI chat interfaces on Next.js Prototype MCP client workflows quickly with example code

README

This is an example implementation of the Model Context Protocol SDK's client code with the Vercel AI SDK which simplifies handling an LLM chat in the browser. Check out how to make your own mcp servers quick here

How It Works

  1. Connect to an MCP server with SSE through the UI ( you can learn more about creating mcp servers with SSE)
  2. The system automatically discovers available tools
  3. Ask it to use the tool

Getting Started

# Install dependencies
npm install

# Run the development server
npm run dev

Then go to http://localhost:3000

vercel-ai-mcp-client FAQ

How do I start the vercel-ai-mcp-client locally?
Install dependencies with 'npm install' and run 'npm run dev', then open http://localhost:3000.
What transport protocol does this client use to connect to MCP servers?
It uses Server-Sent Events (SSE) for real-time communication.
Can this client automatically detect available MCP tools?
Yes, it automatically discovers and lists available tools from the connected MCP server.
Is this client tied only to Vercel AI SDK?
While optimized for Vercel AI SDK, it follows MCP standards and can work with other LLM providers like OpenAI, Claude, and Gemini.
What framework is this client built on?
It is built using Next.js App Router for modern React-based web applications.
Does this client support multi-step reasoning workflows?
Yes, by leveraging MCP protocol features, it supports complex multi-step interactions with tools.
Where can I learn to create MCP servers compatible with this client?
Visit https://mcp-framework.com/docs/Transports/sse for server creation guides.
Can I customize the UI or extend this client?
Yes, the client code is open and designed for easy customization and extension.