Skip to content

Commit 28a9a29

Browse files
yinde0yinde0
committed
fixed the error message not a valid arg for chatInference and 401 Client Error: Unauthorized for url
1 parent 0131b0f commit 28a9a29

File tree

1 file changed

+143
-143
lines changed

1 file changed

+143
-143
lines changed

‎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)