justjoehere/mcp_gradio_client

This repository is a proof of concept for implementing a Model Context Protocol (MCP) client using Gradio. It demonstrates how to interact with MCP servers using both STDIO and SSE communication methods within a Gradio interface.
The Model Context Protocol (MCP) aims to standardize the interaction between language models and tools, providing a uniform interface for communication. This proof of concept showcases the practical application of MCP in building AI assistants with tool integration.
## Table of Contents
Introduction
Features
Installation
Configuration
STDIO Server Definition
SSE Server Definition
Usage
Notes
License
Contributing
## Introduction
This project implements an MCP client within a Gradio application, allowing users to interact with tools exposed via the MCP. By leveraging the MCP's standardized communication protocol, the client can seamlessly integrate with various tools, enhancing the capabilities of language models.
Key elements from the Model Context Protocol:
Standardization: MCP provides a standardized way for language models to interact with tools, promoting interoperability.
Communication Methods: Supports multiple communication methods, including STDIO and SSE, for flexibility in tool integration.
Tool Integration: Enables language models to use external tools, enhancing their functionality and applicability.
## Features
Gradio Interface: User-friendly interface for interacting with the MCP client and tools.
STDIO and SSE Support: Demonstrates how to connect to MCP servers using both STDIO and SSE methods.
Dynamic Tool Loading: Automatically discovers and integrates tools exposed by MCP servers.
Debugging Support: Optional debug mode to aid in development and troubleshooting.
## Installation
### Prerequisites
Python 3.12 or higher
Node.js
uvicorn (for UVX for STDIO servers)
NPX (for NPX for STDIO servers)
Python (for Python module STDIO servers)
OpenAI API Key (for language model interaction)
### Steps
1. Clone the Repository
bash
git clone https://github.com/yourusername/mcp-gradio-client.git
cd mcp-gradio-client
2. Create a Virtual Environment
Unix/macOS:
bash
python -m venv venv
source venv/bin/activate # On Windows use venv\Scripts\activate
Windows:
bash
python -m venv .venv
.venv\Scripts\activate
3. Install Dependencies
bash
pip install -r requirements.txt
4. Set Up Environment Variables
Create a .env file in the root directory using .env.example as a reference and add your OpenAI API key:
env
OPENAIAPIKEY=youropenaiapikey
5. Running the App
Start the Gradio application:
bash
python gradioui.py
## Understanding MCP STDIO vs SSE Servers
See stdioversusssemcpservers.md for details on the differences between the two server types.
## Configuration
The application requires a config.json file to define MCP servers. This file should be placed in the root directory.
config.json should have the following format:
json
"mcpServers": {
"stdioservername": {
"type": "stdio",
"command": "uvx",
"args": [],
"env": {}
},
"sseservername": {
"type": "sse",
"url": "http://127.0.0.1:3001/sse",
"headers": {}
See Information - How to Configure the config.json file for details. Please note, while the file structure if very similar to what Claude Desktop uses, it is not exactly the same.