Implementing an MCP Client with Browser-based OAuth
LocalAbout Implementing an MCP Client with Browser-based OAuth
A browser-based MCP client for OAuth-enabled Streamable HTTP servers, aimed at developers inspecting connections and tool calls. It supports authorization and message inspection, while prompt and resource listing is not implemented.
Key features
- 01Browser-based OAuth flow
- 02Connects to Streamable HTTP servers
- 03Lists server tools
- 04Runs tools with input parameters
- 05Inspects tool responses
Use cases
- 01Testing OAuth-protected MCP servers
- 02Reviewing transport and message exchanges
- 03Calling tools and examining responses
MCP support
Acts as an MCP client for Streamable HTTP servers that provide `/authorize` and `/token` endpoints. It retrieves server capabilities, lists and runs tools, and displays responses for inspection.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.
Tools
Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.
Details
From the project READMEImplementing an MCP Client with Browser-based OAuth
Overview
The purpose of this project is to implement an MCP Client with end-to-end OAuth support with a Streamable HTTP Server and then use it to inspect the transport and messages exchanged with the MCP Server.
Demo
https://github.com/user-attachments/assets/278bf15e-a762-47ac-8b2d-8f4a8e64eada
Operating Modes
At a minimum, this requires implementing an OAuthClientProvider that saves and retrieves auth information in session storage. When the user requests to connect with a server in the Connect panel, the client handles this through the useConnection hook, where the connect method works in two steps:
Step 1: No access token available -> (1) trigger OAuth flow through the server's authorize endpoint, (2) acquire an access token when the server returns an auth code
Step 2: Access token available, no transport set up: (1) create client and transport, (2) connect to server, (3) retrieve server capabilities
Step 1 precedes Step 2 to communicate with MCP Servers that require authorization. As such, this client will only work with servers that implement client authorization, specifically the /authorize and /token endpoints.
Once the client has connected to the server and server capabilities are available, the client offers users the option to list its tools in the Tools tab. Listing the prompts and resources available with the server has not been implemented yet (these tabs provide no content).
Once the list of tools are available, the user can choose to call any of the tools by entering the required input parameters in the Run panel.
As the tool is executed (through the server), the user can inspect the responses in the Inspect panel.
PS: If this seems similar to the MCP Inspector, it's not a coincidence. This project borrows a lot from it while maintaining as much simplicity as possible.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.