Skip to content

Commit db09203

Browse files
burtenshawburtenshaw
authored
Merge pull request #71 from yinde0/fix-chatInference-and-apikey
fixed the error message "not a valid arg for chatInference"
2 parents f4594db + 118e026 commit db09203

File tree

2 files changed

+146
-146
lines changed

2 files changed

+146
-146
lines changed

‎units/en/unit2/gradio-client.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,10 @@ tools = mcp_client.get_tools()
6969
```
7070

7171
Now that we have the tools, we can create a simple agent that uses them to answer questions. We'll just use a simple `InferenceClientModel` and the default model from `smolagents` for now.
72+
It is important to pass your api_key to the InferenceClientModel. You can access the token from your huggingface account. [check here.](https://huggingface.co/docs/hub/en/security-tokens).
7273

7374
```python
74-
model = InferenceClientModel()
75+
model = InferenceClientModel(api_key = YOUR_API_TOKEN)
7576
agent = CodeAgent(tools=[*tools], model=model)
7677
```
7778

@@ -83,8 +84,7 @@ demo = gr.ChatInterface(
8384
type="messages",
8485
examples=["Prime factorization of 68"],
8586
title="Agent with MCP Tools",
86-
description="This is a simple agent that uses MCP tools to answer questions.",
87-
messages=[],
87+
description="This is a simple agent that uses MCP tools to answer questions."
8888
)
8989

9090
demo.launch()

‎units/vi/unit2/gradio-client.mdx‎

Lines changed: 143 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,144 @@
1-
# Gradio với vai trò Máy khách MCP
2-
3-
Ở chương trước, chúng ta đã tìm hiểu cách tạo MCP Server bằng Gradio và kết nối đến nó bằng một MCP Client. Trong chương này, chúng ta sẽ khám phá cách sử dụng Gradio như một MCP Client để kết nối đến MCP Server.
4-
5-
<Tip>
6-
7-
Gradio phù hợp nhất để tạo UI client và MCP server, nhưng cũng có thể dùng nó như MCP Client và hiển thị dưới dạng UI.
8-
9-
</Tip>
10-
11-
Chúng ta sẽ kết nối đến MCP server đã tạo ở chương trước và dùng nó để trả lời câu hỏi.
12-
13-
## MCP Client trong Gradio
14-
15-
Đầu tiên, cần cài đặt các thư viện `smolagents`, gradio và mcp-client nếu chưa có:
16-
17-
```bash
18-
pip install smolagents[mcp] gradio[mcp] mcp
19-
```
20-
21-
Giờ chúng ta có thể import các thư viện cần thiết và tạo giao diện Gradio đơn giản sử dụng MCP Client để kết nối đến MCP Server.
22-
23-
```python
24-
import gradio as gr
25-
26-
from mcp.client.stdio import StdioServerParameters
27-
from smolagents import ToolCollection, CodeAgent
28-
from smolagents import CodeAgent, InferenceClientModel
29-
from smolagents.mcp_client import MCPClient
30-
```
31-
32-
Tiếp theo, kết nối đến MCP Server và lấy các công cụ có thể dùng để trả lời câu hỏi.
33-
34-
```python
35-
mcp_client = MCPClient(
36-
{"url": "http://localhost:7860/gradio_api/mcp/sse"}
37-
)
38-
tools = mcp_client.get_tools()
39-
```
40-
41-
Sau khi có các công cụ, ta có thể tạo một agent đơn giản sử dụng chúng để trả lời câu hỏi. Hiện tại chúng ta sẽ dùng `InferenceClientModel` và mô hình mặc định từ `smolagents`.
42-
43-
```python
44-
model = InferenceClientModel()
45-
agent = CodeAgent(tools=[*tools], model=model)
46-
```
47-
48-
Giờ tạo giao diện Gradio đơn giản sử dụng agent để trả lời câu hỏi.
49-
50-
```python
51-
demo = gr.ChatInterface(
52-
fn=lambda message, history: str(agent.run(message)),
53-
type="messages",
54-
examples=["Prime factorization of 68"],
55-
title="Agent with MCP Tools",
56-
description="Đây là agent đơn giản sử dụng các công cụ MCP để trả lời câu hỏi.",
57-
messages=[],
58-
)
59-
60-
demo.launch()
61-
```
62-
63-
Vậy là xong! Chúng ta đã tạo một giao diện Gradio đơn giản dùng MCP Client để kết nối đến MCP Server và trả lời câu hỏi.
64-
65-
<iframe
66-
src="https://mcp-course-unit2-gradio-client.hf.space"
67-
frameborder="0"
68-
width="850"
69-
height="450"
70-
></iframe>
71-
72-
73-
## Ví dụ hoàn chỉnh
74-
75-
Dưới đây là ví dụ hoàn chỉnh của MCP Client trong Gradio:
76-
77-
```python
78-
import gradio as gr
79-
80-
from mcp.client.stdio import StdioServerParameters
81-
from smolagents import ToolCollection, CodeAgent
82-
from smolagents import CodeAgent, InferenceClientModel
83-
from smolagents.mcp_client import MCPClient
84-
85-
86-
try:
87-
mcp_client = MCPClient(
88-
# {"url": "https://abidlabs-mcp-tools.hf.space/gradio_api/mcp/sse"}
89-
{"url": "http://localhost:7860/gradio_api/mcp/sse"}
90-
)
91-
tools = mcp_client.get_tools()
92-
93-
model = InferenceClientModel()
94-
agent = CodeAgent(tools=[*tools], model=model)
95-
96-
def call_agent(message, history):
97-
return str(agent.run(message))
98-
99-
100-
demo = gr.ChatInterface(
101-
fn=lambda message, history: str(agent.run(message)),
102-
type="messages",
103-
examples=["Prime factorization of 68"],
104-
title="Agent with MCP Tools",
105-
description="Đây là agent đơn giản sử dụng các công cụ MCP để trả lời câu hỏi.",
106-
messages=[],
107-
)
108-
109-
demo.launch()
110-
finally:
111-
mcp_client.close()
112-
```
113-
114-
Bạn sẽ thấy chúng ta đóng MCP Client trong khối `finally`. Điều này quan trọng vì MCP Client là đối tượng tồn tại lâu dài cần được đóng khi chương trình kết thúc.
115-
116-
## Triển khai lên Hugging Face Spaces
117-
118-
Để chia sẻ server của bạn với mọi người, bạn có thể triển khai lên Hugging Face Spaces như đã làm ở chương trước.
119-
Để triển khai Gradio MCP client lên Hugging Face Spaces:
120-
121-
1. Tạo Space mới trên Hugging Face:
122-
- Truy cập huggingface.co/spaces
123-
- Click "Create new Space"
124-
- Chọn "Gradio" làm SDK
125-
- Đặt tên cho Space (ví dụ: "mcp-client")
126-
127-
2. Tạo một tệp `requirements.txt`:
128-
```txt
129-
gradio[mcp]
130-
smolagents[mcp]
131-
```
132-
133-
3. Đẩy code lên Space:
134-
```bash
135-
git init
136-
git add server.py requirements.txt
137-
git commit -m "Initial commit"
138-
git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/mcp-client
139-
git push -u origin main
140-
```
141-
142-
## Kết luận
143-
1+
# Gradio với vai trò Máy khách MCP
2+
3+
Ở chương trước, chúng ta đã tìm hiểu cách tạo MCP Server bằng Gradio và kết nối đến nó bằng một MCP Client. Trong chương này, chúng ta sẽ khám phá cách sử dụng Gradio như một MCP Client để kết nối đến MCP Server.
4+
5+
<Tip>
6+
7+
Gradio phù hợp nhất để tạo UI client và MCP server, nhưng cũng có thể dùng nó như MCP Client và hiển thị dưới dạng UI.
8+
9+
</Tip>
10+
11+
Chúng ta sẽ kết nối đến MCP server đã tạo ở chương trước và dùng nó để trả lời câu hỏi.
12+
13+
## MCP Client trong Gradio
14+
15+
Đầu tiên, cần cài đặt các thư viện `smolagents`, gradio và mcp-client nếu chưa có:
16+
17+
```bash
18+
pip install smolagents[mcp] gradio[mcp] mcp
19+
```
20+
21+
Giờ chúng ta có thể import các thư viện cần thiết và tạo giao diện Gradio đơn giản sử dụng MCP Client để kết nối đến MCP Server.
22+
23+
```python
24+
import gradio as gr
25+
26+
from mcp.client.stdio import StdioServerParameters
27+
from smolagents import ToolCollection, CodeAgent
28+
from smolagents import CodeAgent, InferenceClientModel
29+
from smolagents.mcp_client import MCPClient
30+
```
31+
32+
Tiếp theo, kết nối đến MCP Server và lấy các công cụ có thể dùng để trả lời câu hỏi.
33+
34+
```python
35+
mcp_client = MCPClient(
36+
{"url": "http://localhost:7860/gradio_api/mcp/sse"}
37+
)
38+
tools = mcp_client.get_tools()
39+
```
40+
41+
Sau khi có các công cụ, ta có thể tạo một agent đơn giản sử dụng chúng để trả lời câu hỏi. Hiện tại chúng ta sẽ dùng `InferenceClientModel` và mô hình mặc định từ `smolagents`.
42+
43+
```python
44+
model = InferenceClientModel()
45+
agent = CodeAgent(tools=[*tools], model=model)
46+
```
47+
48+
Giờ tạo giao diện Gradio đơn giản sử dụng agent để trả lời câu hỏi.
49+
50+
```python
51+
demo = gr.ChatInterface(
52+
fn=lambda message, history: str(agent.run(message)),
53+
type="messages",
54+
examples=["Prime factorization of 68"],
55+
title="Agent with MCP Tools",
56+
description="Đây là agent đơn giản sử dụng các công cụ MCP để trả lời câu hỏi.",
57+
messages=[],
58+
)
59+
60+
demo.launch()
61+
```
62+
63+
Vậy là xong! Chúng ta đã tạo một giao diện Gradio đơn giản dùng MCP Client để kết nối đến MCP Server và trả lời câu hỏi.
64+
65+
<iframe
66+
src="https://mcp-course-unit2-gradio-client.hf.space"
67+
frameborder="0"
68+
width="850"
69+
height="450"
70+
></iframe>
71+
72+
73+
## Ví dụ hoàn chỉnh
74+
75+
Dưới đây là ví dụ hoàn chỉnh của MCP Client trong Gradio:
76+
77+
```python
78+
import gradio as gr
79+
80+
from mcp.client.stdio import StdioServerParameters
81+
from smolagents import ToolCollection, CodeAgent
82+
from smolagents import CodeAgent, InferenceClientModel
83+
from smolagents.mcp_client import MCPClient
84+
85+
86+
try:
87+
mcp_client = MCPClient(
88+
# {"url": "https://abidlabs-mcp-tools.hf.space/gradio_api/mcp/sse"}
89+
{"url": "http://localhost:7860/gradio_api/mcp/sse"}
90+
)
91+
tools = mcp_client.get_tools()
92+
93+
model = InferenceClientModel()
94+
agent = CodeAgent(tools=[*tools], model=model)
95+
96+
def call_agent(message, history):
97+
return str(agent.run(message))
98+
99+
100+
demo = gr.ChatInterface(
101+
fn=lambda message, history: str(agent.run(message)),
102+
type="messages",
103+
examples=["Prime factorization of 68"],
104+
title="Agent with MCP Tools",
105+
description="Đây là agent đơn giản sử dụng các công cụ MCP để trả lời câu hỏi.",
106+
messages=[],
107+
)
108+
109+
demo.launch()
110+
finally:
111+
mcp_client.close()
112+
```
113+
114+
Bạn sẽ thấy chúng ta đóng MCP Client trong khối `finally`. Điều này quan trọng vì MCP Client là đối tượng tồn tại lâu dài cần được đóng khi chương trình kết thúc.
115+
116+
## Triển khai lên Hugging Face Spaces
117+
118+
Để chia sẻ server của bạn với mọi người, bạn có thể triển khai lên Hugging Face Spaces như đã làm ở chương trước.
119+
Để triển khai Gradio MCP client lên Hugging Face Spaces:
120+
121+
1. Tạo Space mới trên Hugging Face:
122+
- Truy cập huggingface.co/spaces
123+
- Click "Create new Space"
124+
- Chọn "Gradio" làm SDK
125+
- Đặt tên cho Space (ví dụ: "mcp-client")
126+
127+
2. Tạo một tệp `requirements.txt`:
128+
```txt
129+
gradio[mcp]
130+
smolagents[mcp]
131+
```
132+
133+
3. Đẩy code lên Space:
134+
```bash
135+
git init
136+
git add server.py requirements.txt
137+
git commit -m "Initial commit"
138+
git remote add origin https://huggingface.co/spaces/YOUR_USERNAME/mcp-client
139+
git push -u origin main
140+
```
141+
142+
## Kết luận
143+
144144
Trong phần này, chúng ta đã tìm hiểu cách sử dụng Gradio như một MCP Client để kết nối đến một MCP Server. Chúng ta cũng đã xem qua cách triển khai MCP Client trên Hugging Face Spaces.

0 commit comments

Comments
 (0)