Hugging Face's logo

Spaces:
Japhari
/
mcp-client
Runtime error

App Files Community
mcp-client
File size: 3,893 Bytes 
7c7b9ca
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
# 🧩 Unit 2 (Part 2): Building MCP Clients

Now that we've built and deployed an MCP server using Gradio, it’s time to build **MCP clients** that can interact with it — both in the browser (JavaScript) and backend (Python). We’ll also show how to build a UI-driven MCP client using Gradio itself.

---

## 📁 Configuring MCP Clients

### MCP Configuration Files

MCP clients typically read from a `mcp.json` file to know how to connect to servers. Here's a basic example:

```json
{
  "servers": [
    {
      "name": "MCP Server",
      "transport": {
        "type": "sse",
        "url": "http://localhost:7860/gradio_api/mcp/sse"
      }
    }
  ]
}
```

- **`type: sse`** – Use this for remote servers (like Hugging Face Spaces)
- **`type: stdio`** – Use this for local scripts or CLI tools

### Example for Remote (Hugging Face Space):

```json
{
  "servers": [
    {
      "name": "Sentiment Tool",
      "transport": {
        "type": "sse",
        "url": "https://japhari-mcp-sentiment.hf.space/gradio_api/mcp/sse"
      }
    }
  ]
}
```

---

## 🧠 Python Client using `smolagents`

### Install dependencies:

```bash
pip install "smolagents[mcp]" "gradio[mcp]"
```

### Simple Python Client:

```python
from smolagents import ToolCollection, CodeAgent, InferenceClientModel
from mcp.client.sse import SSEServerParameters

server = SSEServerParameters(url="http://localhost:7860/gradio_api/mcp/sse")

with ToolCollection.from_mcp(server, trust_remote_code=True) as tools:
    agent = CodeAgent(tools=[*tools.tools], model=InferenceClientModel())
    agent.run("What is the sentiment of 'I love MCP?'")
```

This client connects to your server, loads available tools, and allows LLM-driven execution.

---

## 🌐 JavaScript Client using HuggingFace.js (Example)

If you're using a UI front end (e.g., React or Vue), you can call your MCP server using any SSE-capable HTTP client.

```json
{
  "mcpServers": {
    "mcp": {
      "url": "http://localhost:7860/gradio_api/mcp/sse"
    }
  }
}
```

This config can be used with tools like `mcp-remote` or integrated into a custom JS agent.

---

## 🖥 Gradio as an MCP Client (UI Agent)

### Concept

Gradio isn’t just for building servers — it can also be used to build **UI wrappers around MCP Clients**. This is powerful when you want a browser interface for tools provided by another MCP server.

---

### Step-by-Step Example

Install necessary libraries:

```bash
pip install "smolagents[mcp]" "gradio[mcp]" mcp
```

Create a new file: `app.py`

```python
import gradio as gr
from smolagents import InferenceClientModel, CodeAgent
from smolagents.mcp_client import MCPClient

try:
    # Connect to a remote MCP server
    mcp_client = MCPClient({
        "url": "http://localhost:7860/gradio_api/mcp/sse"
        # or test this working remote one:
        # "url": "https://abidlabs-mcp-tools.hf.space/gradio_api/mcp/sse"
    })
    tools = mcp_client.get_tools()
    model = InferenceClientModel()
    agent = CodeAgent(tools=[*tools], model=model)

    # Gradio UI
    demo = gr.ChatInterface(
        fn=lambda msg, history: str(agent.run(msg)),
        type="messages",
        title="Agent with MCP Tools",
        examples=["What is the sentiment of 'That’s awesome!'"],
        description="A UI MCP Client that connects to a remote tool server"
    )

    demo.launch()
finally:
    mcp_client.disconnect()
```

---

### Deploy to Hugging Face Spaces

1. Go to [https://huggingface.co/spaces](https://huggingface.co/spaces)
2. Click **“Create new Space”**
3. Choose **Gradio** SDK
4. Name it something like: `mcp-client-ui`
5. Create `requirements.txt`:

```
gradio[mcp]
smolagents[mcp]
```

6. Push it:

```bash
git init
git add app.py requirements.txt
git commit -m "MCP client UI"
git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/mcp-client-ui
git push -u origin main
```