Mcp Aoai Web Browsing

MCP Server & Client w/ Azure OpenAI & OpenAI

• A minimal server/client application implementation utilizing the Model Context Protocol (MCP) and Azure OpenAI.

  1. The MCP server is built with FastMCP.
  2. Playwright is an an open source, end to end testing framework by Microsoft for testing your modern web applications.
  3. The MCP response about tools will be converted to the OpenAI function calling format.
  4. The bridge that converts the MCP server response to the OpenAI function calling format customises the MCP-LLM Bridge implementation.
  5. To ensure a stable connection, the server object is passed directly into the bridge.
  6. The client_bridge supports both in-process and external (stdio) MCP server connections, enabling reuse by different clients (e.g., Claude Code, VS Code, custom scripts).

Model Context Protocol (MCP)

Model Context Protocol (MCP) MCP (Model Context Protocol) is an open protocol that enables secure, controlled interactions between AI applications and local or remote resources.

Official Repositories

• MCP Python SDK
• Create Python Server
• MCP Servers

Community Resources

• Awesome MCP Servers
• MCP on Reddit

Related Projects

• FastMCP: The fast, Pythonic way to build MCP servers.
• Chat MCP: MCP client
• MCP-LLM Bridge: MCP implementation that enables communication between MCP servers and OpenAI-compatible LLMs

MCP Playwright

• MCP Playwright server
• Microsoft Playwright for Python

Configuration

During the development phase in December 2024, the Python project should be initiated with 'uv'. Other dependency management libraries, such as 'pip' and 'poetry', are not yet fully supported by the MCP CLI.

1. Rename .env.template to .env, then fill in the values in .env for Azure OpenAI:

   AZURE_OPEN_AI_ENDPOINT=
   AZURE_OPEN_AI_API_KEY=
   AZURE_OPEN_AI_DEPLOYMENT_MODEL=
   AZURE_OPEN_AI_API_VERSION=
   

2. Install uv for python library management

   pip install uv
   uv sync
   

3. Execute python chatgui.py

   • The sample screen shows the client launching a browser to navigate to the URL.
   

Using with External Clients

The MCP server can be used by external clients (Claude Desktop, VS Code, Claude Code, etc.) via mcp.json configuration.

Claude Desktop / Claude Code

Add to your claude_desktop_config.json (Claude Desktop) or .claude/mcp.json (Claude Code):

{
  "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

Add to .vscode/mcp.json in your workspace:

{
  "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": "..."
      }
    }
  }
}

Using the Bridge Programmatically (stdio)

The client_bridge also

... View full README on GitHub