构建端到端 MCP 应用程序
从零开始构建一个完整的（MCP）应用程序，使用 Gradio 创建一个服务器，并将其与多个客户端连接。
先决条件
- 对（MCP）概念有基本了解
- 熟悉 Python 和 JavaScript/TypeScript 编程语言
- 对 API 和客户端-服务器架构有基本了解
- 具备以下开发环境：
- Python 3.10 或更高版本
- Node.js 18 或更高版本
- Hugging Face 账户（用于部署）
端到端项目
将构建一个情感分析应用程序，该应用程序主要由三个部分组成：服务器、客户端和部署。
服务器端
- 使用 Gradio 通过
gr.Interface创建一个网页界面和（MCP）服务器 - 利用 TextBlob 实现情感分析工具
- 通过 HTTP 和 MCP 协议两种方式暴露该工具
客户端
- 创建一个 smolagents Python 客户端
- 演示如何使用客户端实现与服务器进行交互
部署
- 配置客户端以与已部署的服务器协同工作
构建 Gradio 模型上下文协议（MCP）服务器
使用 Gradio 创建情感分析 MCP 服务。该服务将暴露一个情感分析工具，用户可通过网页界面使用，而人工智能模型则可通过模型上下文协议（MCP）协议使用。
Gradio MCP 集成简介
Gradio 提供了一种简单直接的方法来创建 MCP 服务器，它会自动将你的 Python 函数转换为 MCP 工具。当你在 launch() 方法中设置 mcp_server=True 时，Gradio 会：
- 自动将你的函数转换为 MCP 工具
- 将输入组件映射到工具参数架构
- 根据输出组件确定响应格式
- 为客户端-服务器通信设置基于 HTTP+SSE 的 JSON-RPC
- 同时创建一个网页界面和一个 MCP 服务器端点
项目设置
为项目创建一个新目录，并设置所需的依赖项：
mkdir mcp-sentiment
cd mcp-sentiment
conda activate mcp
pip install "gradio[mcp]" textblob
创建服务
#filename app.py
import gradio as gr
from textblob import TextBlob
def sentiment_analysis(text: str) -> dict:
"""
Analyze the sentiment of the given text.
Args:
text (str): The text to analyze
Returns:
dict: A dictionary containing polarity, subjectivity, and assessment
"""
blob = TextBlob(text)
sentiment = blob.sentiment
return {
"polarity": round(sentiment.polarity, 2), # -1 (negative) to 1 (positive)
"subjectivity": round(sentiment.subjectivity, 2), # 0 (objective) to 1 (subjective)
"assessment": "positive" if sentiment.polarity > 0 else "negative" if sentiment.polarity < 0 else "neutral"
}
# Create the Gradio interface
demo = gr.Interface(
fn=sentiment_analysis,
inputs=gr.Textbox(placeholder="Enter text to analyze..."),
outputs=gr.JSON(),
title="Text Sentiment Analysis",
description="Analyze the sentiment of text using TextBlob"
)
# Launch the interface and MCP server
if __name__ == "__main__":
demo.launch(mcp_server=True,server_name="0.0.0.0", server_port=7860)
代码解释：
函数定义：
sentiment_analysis函数接收一个文本输入并返回一个字典- 它使用 TextBlob 来分析情感
- 文档（docstring）至关重要，因为它帮助 Gradio 生成 MCP 工具
- 类型提示（
str和dict）有助于定义输入/输出
Gradio 接口：
gr.Interface同时创建网页用户界面（UI）和 MCP 服务- 该函数会自动暴露为一个 MCP 工具
- 输入和输出组件定义了该工具的架构
- JSON 输出组件确保了正确的序列化
MCP 服务器：
- 设置
mcp_server=True启用 MCP 服务 - 服务将在
http://localhost:7860/gradio_api/mcp/sse - 也可以通过环境变量来启用它
export GRADIO_MCP_SERVER=True
启动服务：
python app.py
测试服务
可以通过以下两种方式测试服务：
网页界面：
- 在浏览器中打开
http://localhost:7860 - 输入一些文本并点击“提交”后看到情感分析的结果
MCP Schema：
- 访问
http://localhost:7860/gradio_api/mcp/schema - 这一页面会显示客户端将使用的 MCP 工具
故障排除提示
类型提示和文档字符串：
- 始终为函数参数和返回值提供类型提示
- 为每个参数包含一个带有“Args:”（参数）块的文档
- 这有助于 Gradio 生成准确的 MCP 工具
字符串输入：
- 当存在疑问时，将输入参数接受为字符串类型（
str） - 在函数内部将其转换为所需的类型
- 这样可以提高与 MCP 客户端的兼容性
SSE (Server-Sent Events) 支持：
-
某些 MCP 客户端不支持基于SSE的 MCP 服务器
-
在这些情况下，可以使用
mcp-remote作为替代方案： -
{ "mcpServers": { "gradio": { "command": "npx", "args": [ "mcp-remote", "http://localhost:7860/gradio_api/mcp/sse" ] } } }
使用 MCP 客户端与应用程序
将 MCP（模型上下文协议）客户端与应用程序结合使用，可以增强应用程序的功能和灵活性。
配置 MCP 客户端
要有效地部署 MCP（模型上下文协议）服务器和客户端，需要进行适当的配置。由于 MCP 规范仍在不断发展，因此配置方法也可能随之变化。
MCP 配置文件：MCP 主机使用配置文件来管理服务器连接。这些文件定义了哪些服务器可用以及如何连接到它们。配置文件非常简单，并且在主要的 MCP 主机中保持一致。MCP 的标准配置文件名为 mcp.json，以下是其基本结构：
{
"servers": [
{
"name": "MCP Server",
"transport": {
"type": "sse",
"url": "http://localhost:7860/gradio_api/mcp/sse"
}
}
]
}
在这个示例中，配置了一个使用SSE传输方式的服务，连接到运行在端口 7860 上的本地 Gradio 服务器。通过 SSE 传输方式连接到 Gradio 应用，因为我们假设 Gradio 应用是运行在远程服务器上的。然而，如果你想连接到一个本地脚本，那么使用标准输入输出（stdio）传输方式而不是 SSE 传输方式会是一个更好的选择。
HTTP+SSE 传输方式的配置，对于使用 HTTP+SSE 传输方式的远程服务器，配置中需包含服务器 URL：
{
"servers": [
{
"name": "Remote MCP Server",
"transport": {
"type": "sse",
"url": "https://example.com/gradio_api/mcp/sse"
}
}
]
}
配置 UI MCP 客户端，创建一个名为 config.json 的新文件，并包含以下配置内容：
{
"mcpServers": {
"mcp": {
"url": "http://localhost:7860/gradio_api/mcp/sse"
}
}
}
在 Cursor IDE 中配置 MCP 客户端
Cursor 内置了对 MCP（模型上下文协议）的支持，使你能够将已部署的 MCP 服务器直接连接到开发环境中。
配置步骤
-
在 Cursor IDE 中，你可以通过快捷键
Ctrl + Shift + J/Cmd + Shift + J）打开设置。 -
添加新的全局 MCP 服务器
{ "mcpServers": { "sentiment-analysis": { "command": "npx", # macOs "args": [ "-y", "mcp-remote", "https://YOURUSENAME-mcp-sentiment.hf.space/gradio_api/mcp/sse", "--transport", "sse-only" ] } } }{ "mcpServers": { "sentiment-analysis": { "command": "cmd", # winOs "args": [ "/c", "npx", "-y", "mcp-remote", "https://YOURUSENAME-mcp-sentiment.hf.space/gradio_api/mcp/sse", "--transport", "sse-only" ] } } }
目前，大多数 MCP 客户端（包括 Cursor）仅支持通过 stdio（标准输入/输出）传输方式与本地服务器进行通信，并且尚未支持需要 OAuth 认证的远程服务器。mcp-remote 工具作为一种桥梁解决方案。
Gradio 作为 MCP 客户端
Gradio 最适合用于创建用户界面（UI）客户端和 MCP 服务器，但也可以将其用作 MCP 客户端，并将其作为 UI 暴露出来。
首先，要安装 smolagents、Gradio 和 mcp-client 这几个库：pip install "smolagents[mcp]" "gradio[mcp]" mcp fastmcp
下面这段代码演示了如何使用 Gradio 和 smolagents 库创建一个简单的聊天界面，用户可以与一个通过 MCP 协议连接到服务器的聊天代理进行交互，代理能够利用服务器提供的工具来回答问题。
MCPClient用于连接到 MCP 服务器。这里通过一个字典参数指定服务器的 URL（"http://localhost:7860/gradio_api/mcp/sse"）。mcp_client.get_tools()从 MCP 服务器获取可用的工具，这些工具可以被代理用来处理请求。TransformersModel创建一个基于 Transformers 的模型实例，指定使用的模型为"Qwen2.5-7B-Instruct"。CodeAgent创建一个代理，该代理可以使用获取到的工具和指定的模型来处理请求。gr.ChatInterface创建一个聊天界面，fn参数指定处理消息的函数。在这里，使用lambda函数将消息传递给代理，并返回代理的运行结果。type="messages"指定聊天界面以消息列表的形式展示。examples提供一些示例问题，用户可以直接点击这些示例进行提问。title和description用于设置聊天界面的标题和描述。finally块确保在程序结束时断开与 MCP 服务器的连接，以释放资源。
import os
import gradio as gr
from mcp import StdioServerParameters
from smolagents import TransformersModel, CodeAgent, DuckDuckGoSearchTool, MCPClient
try:
mcp_client = MCPClient(
{"url": "http://localhost:7860/gradio_api/mcp/sse"} # This is the MCP Server we created in the previous section
)
tools = mcp_client.get_tools()
model = TransformersModel(model_id="~/Qwen2.5-7B-Instruct")
agent = CodeAgent(tools=[*tools]+[DuckDuckGoSearchTool], model=model)
demo = gr.ChatInterface(
fn=lambda message, history: str(agent.run(message)),
type="messages",
examples=["Prime factorization of 68"],
title="Agent with MCP Tools",
description="This is a simple agent that uses MCP tools to answer questions.",
)
demo.launch()
finally:
mcp_client.disconnect()
使用 MCP 和 Hugging Face Hub 构建微型代理
接下来我们通过构建一个能够与我们的情感分析工具无缝交互的代理，来完成我们的端到端应用程序。从构建一个暴露情感分析工具的 Gradio MCP 服务器，到创建一个能够使用该工具以及其他功能的灵活代理。
安装构建“微型代理”所需的必要软件包：
npm install -g npx
npm i mcp-remote
pip install "huggingface_hub[mcp]>=0.32.0"
sudo npm install -g n
# 升级 node.js
n stable/latest
node.js要求GLIBC_2.28
微型代理（Tiny Agents）MCP 客户端
微型代理可以根据 JSON 配置文件从命令行创建 MCP 客户端。这是一种更灵活的方式配置和运行 MCP 客户端。通过 JSON 配置文件，可以指定 MCP 客户端的各种参数，例如服务器地址、认证信息、使用的工具等。这种方式使得微型代理可以轻松地与不同的 MCP 服务器进行交互，而无需编写大量的代码。
以下是一个简单的 JSON 配置文件示例，用于创建一个基本的微型代理 MCP 客户端：
{
"model": "Qwen/Qwen2.5-72B-Instruct",
"provider": "nebius",
"servers": [
{
"type": "stdio",
"config": {
"command": "npx",
"args": [
"mcp-remote",
"http://localhost:7860/gradio_api/mcp/sse"
]
}
}
]
}
要使用这个配置文件从命令行启动微型代理 MCP 客户端，你可以运行类似以下的命令（具体命令可能因微型代理项目的实现而有所不同）：
tiny-agents run agent.json
这里，tiny_agents 是启动微型代理的命令行工具，agent.json 指定了要使用的配置文件。
我们还可以使用在本地运行的开源模型与微型代理（Tiny Agents）进行交互。
{
"model": "~/Qwen2.5-72B-Instruct-AWQ",
"endpointUrl": "http://localhost:1234/v1",
"servers": [
{
"type": "stdio",
"config": {
"command": "npx",
"args": [
"mcp-remote",
"http://localhost:1234/v1/mcp/sse"
]
}
}
]
}
自定义微型代理（Tiny Agents）MCP 客户端
MCP 的美妙之处在于，它为代理提供了一种标准化的方式，使其能够与任何兼容 MCP 的服务器进行交互，包括之前构建的基于 Gradio 的情感分析服务器，只需将其添加到服务器列表中即可。
import os
from huggingface_hub import Agent
agent = Agent(
model="Qwen/Qwen2.5-72B-Instruct",
provider="nebius",
servers=[
{
"command": "npx",
"args": [
"mcp-remote",
"http://localhost:7860/gradio_api/mcp/sse" # Your Gradio MCP server
]
}
],
)
一个简单的聊天界面，通过 MCP（Model Context Protocol）协议与一个 MCP 服务器进行通信，提供情感分析和搜索两个工具：
扫一扫
1076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
