MCP Aoai Web Browsing

MCP服务器和客户端，带Azure OpenAI和OpenAI

• 利用模型上下文协议（MCP）和Azure OpenAI的最小服务器/客户端应用程序实现。

1. MCP服务器由以下组件构建 FastMCP. 1. Playwright 是微软为测试您的现代web应用程序而开发的开源端到端测试框架。 1. 关于工具的MCP响应将被转换为OpenAI函数调用格式。 1. 将MCP服务器响应转换为OpenAI函数调用格式的网桥可定制 MCP-LLM Bridge 实施。 1. 为了确保稳定的连接，服务器对象直接传递到网桥中。 1. 这 client_bridge 支持进程内和外部（stdio）MCP服务器连接，允许不同客户端（例如Claude Code、VS Code、自定义脚本）重用。

模型上下文协议（MCP）

模型上下文协议（MCP） MCP（模型上下文协议）是一种开放协议，可实现人工智能应用程序与本地或远程资源之间的安全、受控交互。

官方存储库

• MCP Python SDK
• 创建Python服务器
• MCP服务器

社区资源

• 出色的MCP服务器
• Reddit上的MCP

相关项目

• FastMCP：构建MCP服务器的快速Python方法。
• 聊天MCP：MCP客户端
• MCP-LLM电桥：启用MCP服务器和OpenAI兼容LLM之间通信的MCP实现

MCP剧作家

• MCP剧作家服务器
• 微软Python剧作家

配置

在2024年12月的开发阶段，Python项目应该以“uv”启动。MCP CLI尚未完全支持其他依赖关系管理库，如“pip”和“poetry”。

1. 重命名 .env.template 到 .env，然后填写以下值 .env 对于Azure OpenAI：

   AZURE_OPEN_AI_ENDPOINT=
   AZURE_OPEN_AI_API_KEY=
   AZURE_OPEN_AI_DEPLOYMENT_MODEL=
   AZURE_OPEN_AI_API_VERSION=

1. 安装 uv 用于python库管理

   pip install uv
   uv sync

1. 执行 python chatgui.py

- 示例屏幕显示客户端启动浏览器以导航到URL。

与外部客户端一起使用

MCP服务器可供外部客户端（Claude Desktop、VS Code、Claude Code等）通过以下方式使用 mcp.json 配置。

克劳德桌面/克劳德代码

添加到您的 claude_desktop_config.json （克劳德桌面）或 .claude/mcp.json （克劳德代码）：

{
  "mcpServers": {
    "browser-navigator": {
      "command": "uv",
      "args": ["run", "fastmcp", "run", "./server/browser_navigator_server.py:app"],
      "cwd": "/path/to/mcp-aoai-web-browsing",
      "env": {
        "AZURE_OPEN_AI_ENDPOINT": "...",
        "AZURE_OPEN_AI_API_KEY": "...",
        "AZURE_OPEN_AI_DEPLOYMENT_MODEL": "...",
        "AZURE_OPEN_AI_API_VERSION": "..."
      }
    }
  }
}

VS Code

添加 .vscode/mcp.json 在您的工作空间中：

{
  "servers": {
    "browser-navigator": {
      "command": "uv",
      "args": ["run", "fastmcp", "run", "./server/browser_navigator_server.py:app"],
      "cwd": "${workspaceFolder}",
      "env": {
        "AZURE_OPEN_AI_ENDPOINT": "...",
        "AZURE_OPEN_AI_API_KEY": "...",
        "AZURE_OPEN_AI_DEPLOYMENT_MODEL": "...",
        "AZURE_OPEN_AI_API_VERSION": "..."
      }
    }
  }
}

以编程方式使用网桥（stdio）

这 client_bridge 还支持从Python通过stdio连接到外部MCP服务器：

from client_bridge import BridgeConfig, MCPServerConfig, BridgeManager
from client_bridge.llm_config import get_default_llm_config

config = BridgeConfig(
    server_config=MCPServerConfig(
        command="uv",
        args=["run", "fastmcp", "run", "./server/browser_navigator_server.py:app"],
    ),
    llm_config=get_default_llm_config(),
    system_prompt="You are a helpful assistant.",
)

async with BridgeManager(config) as bridge:
    response = await bridge.process_message("Navigate to https://example.com")

使用标准OpenAI（非Azure）

from client_bridge.llm_config import get_openai_llm_config

config = BridgeConfig(
    mcp=server,
    llm_config=get_openai_llm_config(),
)

设置环境变量：

OPENAI_API_KEY=sk-...
OPENAI_MODEL=gpt-...

直接工具执行

对于管理自己的LLM循环的客户端，网桥公开工具元数据并直接执行：

async with BridgeManager(config) as bridge:
    tools = bridge.get_tools()  # OpenAI function calling format
    result = await bridge.execute_tool("playwright_navigate", {"url": "https://example.com"})

w.r.t.“stdio”

stdio 是一个 传输层 （原始数据流），而 JSON-RPC 是一个 应用协议 （结构化沟通）。它们是不同的，但经常互换使用，例如协议中的“JSON-RPC over stdio”。

工具说明

@self.mcp.tool()
async def playwright_navigate(url: str, timeout=30000, wait_until="load"):
    """Navigate to a URL.""" -> This comment provides a description, which may be used in a mechanism similar to function calling in LLMs.

# Output
Tool(name='playwright_navigate', description='Navigate to a URL.', inputSchema={'properties': {'url': {'title': 'Url', 'type': 'string'}, 'timeout': {'default': 30000, 'title': 'timeout', 'type': 'string'}

提示：紫外线

• 特征

uv run: Run a script.
uv venv: Create a new virtual environment. By default, '.venv'.
uv add: Add a dependency to a script
uv remove: Remove a dependency from a script
uv sync: Sync (Install) the project's dependencies with the environment.

小贴士

• python.exe的taskkill命令

taskkill /IM python.exe /F

• 可视化代码：Python调试器：使用launch.json进行调试将使用.vcode/launch.json中的配置启动调试器。