Skip to content

Commit b97ad7d

Browse files
honghanhhhonghanhh
committed
feat: add toctree and translation unit 2 3 4
1 parent 2ffacfa commit b97ad7d

File tree

7 files changed

+1000
-0
lines changed

7 files changed

+1000
-0
lines changed

‎units/vi/unit2/clients.mdx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Xây dựng MCP Clients
2+
3+
Trong phần này, chúng ta sẽ tạo các client có thể tương tác với MCP server bằng các ngôn ngữ lập trình khác nhau. Chúng ta sẽ triển khai cả client JavaScript sử dụng HuggingFace.js và client Python sử dụng smolagents.
4+
5+
## Cấu hình MCP Clients
6+
7+
Việc triển khai hiệu quả MCP servers và clients yêu cầu cấu hình phù hợp. Đặc tả MCP vẫn đang phát triển, vì vậy các phương pháp cấu hình có thể thay đổi. Chúng ta sẽ tập trung vào các best practice hiện tại về cấu hình.
8+
9+
### Cấu hình Files của MCP
10+
11+
Các MCP hosts sử dụng configuration files để quản lý kết nối server. Những files này xác định các servers nào có sẵn và cách kết nối đến chúng.
12+
13+
Các configuration files rất đơn giản, dễ hiểu và thống nhất giữa các MCP hosts chính.
14+
15+
#### Cấu trúc `mcp.json`
16+
17+
File cấu hình chuẩn cho MCP có tên `mcp.json`. Đây là cấu trúc cơ bản:
18+
19+
```json
20+
{
21+
"servers": [
22+
{
23+
"name": "MCP Server",
24+
"transport": {
25+
"type": "sse",
26+
"url": "http://localhost:7860/gradio_api/mcp/sse"
27+
}
28+
}
29+
]
30+
}
31+
```
32+
33+
Trong ví dụ này, chúng ta có một server được cấu hình sử dụng SSE transport, kết nối đến Gradio server local chạy trên cổng 7860.
34+
35+
<Tip>
36+
37+
Chúng ta đã kết nối đến ứng dụng Gradio qua giao thức SSE vì giả định rằng ứng dụng gradio đang chạy trên một Server từ xa. Tuy nhiên nếu bạn muốn kết nối đến script local, `stdio` transport thay vì `sse` transport là lựa chọn tốt hơn.
38+
39+
</Tip>
40+
41+
#### Cấu hình cho HTTP+SSE Transport
42+
43+
Với các servers từ xa sử dụng HTTP+SSE transport, cấu hình bao gồm URL của server:
44+
45+
```json
46+
{
47+
"servers": [
48+
{
49+
"name": "Remote MCP Server",
50+
"transport": {
51+
"type": "sse",
52+
"url": "https://example.com/gradio_api/mcp/sse"
53+
}
54+
}
55+
]
56+
}
57+
```
58+
59+
Cấu hình này cho phép UI client của bạn giao tiếp với Gradio MCP server sử dụng MCP protocol, giúp tích hợp liền mạch giữa frontend và dịch vụ MCP.
60+
61+
## Cấu hình UI MCP Client
62+
63+
Khi làm việc với Gradio MCP servers, bạn có thể cấu hình UI client để kết nối đến server sử dụng MCP protocol. Cách thiết lập như sau:
64+
65+
### Cấu hình cơ bản
66+
67+
Tạo file mới tên `config.json` với cấu hình sau:
68+
69+
```json
70+
{
71+
"mcpServers": {
72+
"mcp": {
73+
"url": "http://localhost:7860/gradio_api/mcp/sse"
74+
}
75+
}
76+
}
77+
```
78+
79+
Cấu hình này cho phép UI client của bạn giao tiếp với Gradio MCP server sử dụng MCP protocol, giúp tích hợp liền mạch giữa frontend và dịch vụ MCP.

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +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+
144+
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)