%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%23061b40;%20}%20.st1%20{%20fill:%20%23306af1;%20}%20.st2%20{%20fill:%20%235ce5cf;%20}%20%3c/style%3e%3c/defs%3e%3cg%3e%3cpath%20class='st0'%20d='M55,10.5h9v3h-9v9h12V7.5h-12v3ZM64,19.5h-6v-3h6v3Z'/%3e%3cpolygon%20class='st0'%20points='69%2016.5%2078%2016.5%2078%2019.5%2069%2019.5%2069%2022.5%2081%2022.5%2081%2013.5%2072%2013.5%2072%2010.5%2081%2010.5%2081%207.5%2069%207.5%2069%2016.5'/%3e%3cpolygon%20class='st0'%20points='95%2010.5%2095%207.5%2083%207.5%2083%2022.5%2095%2022.5%2095%2019.5%2086%2019.5%2086%2016.5%2095%2016.5%2095%2013.5%2086%2013.5%2086%2010.5%2095%2010.5'/%3e%3cpath%20class='st0'%20d='M40,1.5v21h11.6l1.4-1.4v-7.6h0c0,0-1.4-1.5-1.4-1.5l1.4-1.4V2.9l-1.4-1.4h-11.6ZM50,19.5h-7v-6h7v6ZM50,10.5h-7v-6h7v6Z'/%3e%3c/g%3e%3cpath%20class='st1'%20d='M23.1,24L14.7,4.8l-4.9,11.2h3.8l-1.8,4H3.3L12.1,0H2C.9,0,0,.9,0,2v20c0,1.1.9,2,2,2h21.1Z'/%3e%3cpath%20class='st2'%20d='M34,0h-16.8l10.6,24h6.2c1.1,0,2-.9,2-2V2C36,.9,35.1,0,34,0ZM32.5,20h-4V4h4v16Z'/%3e%3c/svg%3e)
Mcpclient
This project is an MCP protocol client implementation based on the Vercel AI SDK, used to simplify LLM chat processing in browsers, supporting connecting to the MCP server via SSE and automatically discovering available tools.
rating : 2 points
downloads : 6.3K
What is an MCP server?
The MCP server is a framework based on the Model Context Protocol that allows developers to easily build and manage LLM (Large Language Model) chat services. It provides features such as automatic tool discovery and SSE connections, simplifying the complexity of handling AI chats in browsers.How to use the MCP server?
Through a simple SSE connection, the front - end can automatically discover the tool functions provided by the server and directly request to use these tools to complete specific tasks.Applicable scenarios
Suitable for enterprise applications that need to integrate multiple AI tools, chatbots that need flexible function expansion, and developer projects that want to simplify LLM integration.Main features
SSE connection
Supports the Server - Sent Events (SSE) protocol for efficient real - time communication
Automatic tool discovery
Clients can automatically discover all available tools provided by the server
Tool invocation
Supports direct requests to use specific tools to process tasks
Advantages
Simplifies the LLM integration process
Supports automatic tool discovery, reducing configuration work
Achieves efficient real - time communication based on SSE
Seamlessly integrates with the Vercel AI SDK
Limitations
Currently mainly supports the SSE protocol
Requires specific client SDK support
The tool discovery mechanism depends on the server implementation
How to use
Install dependencies
Use npm to install the dependencies required for the project
%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%230080ff;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='st0'%20d='M16.2,11.1c.4.5.4,1.2,0,1.8l-4.7,7.1h-3.8l5.3-8L7.6,4h3.8l4.7,7.1Z'/%3e%3c/svg%3e)
Start the development server
Run the development server
Access the application
Open the application in the browser
Use the Inspector tool
Run the MCP Inspector to check the connection status
Usage examples
Connect to the MCP server
Establish an SSE connection with the MCP server and get a list of available tools
Invoke a specific tool
Request to use a specific tool to process user input
Frequently Asked Questions
Which transport protocols does the MCP server support?
How to create your own MCP server?
What is the function of the Inspector tool?
Related resources
MCP Framework Official Website
Official documentation and resource center
Guide to Creating an SSE MCP Server
A detailed guide on how to create an MCP server using SSE
Vercel AI SDK
Vercel official AI SDK documentation
MCP Inspector Tool
The npm package of the MCP connection check tool
Gitlab MCP Server
Certified
The GitLab MCP server is a project based on the Model Context Protocol that provides a comprehensive toolset for interacting with GitLab accounts, including code review, merge request management, CI/CD configuration, and other functions.
TypeScript
16.6K
4.3 points
Notion Api MCP
Certified
A Python-based MCP Server that provides advanced to-do list management and content organization functions through the Notion API, enabling seamless integration between AI models and Notion.
Python
14.8K
4.5 points
Markdownify MCP
Markdownify is a multi-functional file conversion service that supports converting multiple formats such as PDFs, images, audio, and web page content into Markdown format.
TypeScript
24.5K
5 points
Duckduckgo MCP Server
Certified
The DuckDuckGo Search MCP Server provides web search and content scraping services for LLMs such as Claude.
Python
43.7K
4.3 points
Unity
Certified
UnityMCP is a Unity editor plugin that implements the Model Context Protocol (MCP), providing seamless integration between Unity and AI assistants, including real - time state monitoring, remote command execution, and log functions.
C#
19.2K
5 points
Figma Context MCP
Framelink Figma MCP Server is a server that provides access to Figma design data for AI programming tools (such as Cursor). By simplifying the Figma API response, it helps AI more accurately achieve one - click conversion from design to code.
TypeScript
45.3K
4.5 points
Minimax MCP Server
The MiniMax Model Context Protocol (MCP) is an official server that supports interaction with powerful text-to-speech, video/image generation APIs, and is suitable for various client tools such as Claude Desktop and Cursor.
Python
30.2K
4.8 points
Context7
Context7 MCP is a service that provides real-time, version-specific documentation and code examples for AI programming assistants. It is directly integrated into prompts through the Model Context Protocol to solve the problem of LLMs using outdated information.
TypeScript
62.4K
4.7 points