Phát triển & Tích hợp MCP Clients
Sử dụng MCP (Model Contex Protocol) — để kết nối App Connectors (các ứng dụng bên ngoài) và Tables (bảng quản trị dữ liệu) bên trong Click AI Workspace và publish ClickAI Apps to MCP Server cho IDEs
Mục lục
· [Tổng quan](#tổng-quan)
· [MCP là gì?](#mcp-là-gì)
· [Loại 1: MCP App Connectors — Kết nối công cụ AI](#loại-1-mcp-app-connectors)
· [Loại 2: MCP Tables — Kết nối bảng dữ liệu](#loại-2-mcp-tables)
· [Cấu hình App thành MCP Server](#cấu-hình-app-thành-mcp-server)
· [Tích hợp với Claude Desktop](#tích-hợp-với-claude-desktop)
· [Tích hợp với Cursor](#tích-hợp-với-cursor)
· [Tích hợp với VS Code](#tích-hợp-với-vs-code)
· [Tích hợp với Windsurf](#tích-hợp-với-windsurf)
· [Tích hợp với Custom App (Python)](#tích-hợp-với-custom-app)
· [Lưu ý thực tế](#lưu-ý-thực-tế)
Tổng quan
ClickAI cung cấp hai loại MCP Server cho phép bạn kết nối với các AI client:
┌──────────────────────────────────────────────────────────────┐ │ ClickAI MCP Ecosystem │ ├──────────────────────────────┬───────────────────────────────┤ │ │ │ │ 📡 MCP App Connectors │ 📊 MCP Tables │ │ Kết nối công cụ AI │ Kết nối bảng dữ liệu │ │ │ │ │ URL: mcp.clickai.io/mcp/sse │ URL: table.clickai.io/mcp/.. │ │ Transport: SSE │ Transport: npx mcp-remote │ │ Auth: Basic + X-User-ID │ Auth: xc-mcp-token │ │ │ │ │ → Claude Desktop │ → Claude Desktop │ │ → Cursor IDE │ → Cursor IDE │ │ → VS Code │ → VS Code │ │ → Windsurf │ → Windsurf │ │ │ │ └──────────────────────────────┴───────────────────────────────┘
MCP là gì?
MCP (Model Context Protocol) là giao thức mở chuẩn hóa cách AI applications giao tiếp với tools và services bên ngoài. Được phát triển bởi Anthropic, MCP cung cấp:
· Chuẩn hóa — Một giao thức duy nhất cho mọi kết nối AI-to-tool
· Bảo mật — Xác thực tích hợp, không cần expose API keys
· Khám phá tự động — Client tự nhận biết tools có sẵn
· Đa nền tảng — Hoạt động với mọi AI client hỗ trợ MCP
Loại 1: MCP App Connectors
Kết nối AI Apps (Chatbot, Agent, Workflow) đã tạo trong ClickAI Studio với các AI client bên ngoài.
Cấu hình MCP App Connectors
[ { "name": "ClickAI MCP", "server_identifier": "clickaimcp", "server_url": "https://mcp.clickai.io/mcp/sse", "icon": "https://clickai.io/clickai_mcp_server.jpg", "icon_type": "image", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "{user_id}" } } ]
Trường
Giá trị
Mô tả
server_url
https://mcp.clickai.io/mcp/sse
MCP endpoint (SSE transport)
Authorization
Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=
Basic auth credentials (cố định)
X-User-ID
{user_id}
User ID của bạn trên ClickAI
💡 TIP: Thay `{user_id}` bằng User ID thực tế. Lấy User ID trong **Settings** → **Account** trên ClickAI Studio.
Khi nào dùng?
· Muốn gọi đến Chatbot / Agent / Workflow đã tạo trong ClickAI
· Tích hợp khả năng AI vào Cursor, Claude Desktop, VS Code
· Cho phép AI client sử dụng tools từ 300+ App Integrations
Loại 2: MCP Tables
Kết nối Tables (bảng quản trị dữ liệu NocoDB) với AI client — cho phép AI đọc, ghi, truy vấn dữ liệu trực tiếp.
Cấu hình MCP Tables
{ "mcpServers": { "NocoDB Base - CRM AI & Academy": { "command": "npx", "args": [ "mcp-remote", "https://table.clickai.io/mcp/{base_id}", "--header", "xc-mcp-token: <YOUR_MCP_TOKEN>" ] } } }
Trường
Mô tả
command
npx — chạy trực tiếp qua Node.js
mcp-remote
Package bridge cho MCP qua HTTP
https://table.clickai.io/mcp/{base_id}
URL của base cụ thể trên Tables
xc-mcp-token
Token xác thực MCP cho Tables
Lấy thông tin kết nối
1. Mở ClickAI Tables tại https://table.clickai.io
2. Chọn Base cần kết nối (VD: CRM AI & Academy)
3. Vào Settings → MCP → Copy MCP URL và MCP Token
4. Thay {base_id} và <YOUR_MCP_TOKEN> trong config
Khi nào dùng?
· Cho AI đọc/ghi dữ liệu khách hàng, đơn hàng, sản phẩm
· Query dữ liệu CRM trực tiếp từ Claude Desktop / Cursor
· Tự động phân tích, báo cáo dữ liệu từ Tables
Ví dụ cấu hình nhiều Tables base
{ "mcpServers": { "CRM Database": { "command": "npx", "args": [ "mcp-remote", "https://table.clickai.io/mcp/nc_crm_base_id", "--header", "xc-mcp-token: token_crm_xxx" ] }, "Product Catalog": { "command": "npx", "args": [ "mcp-remote", "https://table.clickai.io/mcp/nc_product_base_id", "--header", "xc-mcp-token: token_product_xxx" ] } } }
📝 NOTE: MCP Tables yêu cầu **Node.js** đã cài đặt trên máy. Package `mcp-remote` sẽ được tự động tải qua `npx`.
Cấu hình App thành MCP Server
Bước 1: Mở Publish Settings
5. Mở ứng dụng trong ClickAI Studio
6. Nhấn "Publish" ở góc phải trên
7. Chọn tab "MCP Server"
Bước 2: Bật MCP Server
8. Toggle "Enable MCP Server" → ON
9. Cấu hình thông tin server:
Trường
Mô tả
Ví dụ
Server Name
Tên hiển thị trong client
ClickAI Customer Support
Description
Mô tả chi tiết cho AI hiểu khi nào nên gọi tool này
Hệ thống hỗ trợ khách hàng AI — trả lời câu hỏi về sản phẩm, bảo hành và kỹ thuật
Tool Name
Tên tool khi client gọi
customer_support_query
Input Parameters
Mô tả các tham số đầu vào
Xem bảng dưới
Bước 3: Cấu hình Input Parameters
Mỗi input parameter cần mô tả rõ ràng:
{ "query": { "type": "string", "description": "Câu hỏi của khách hàng cần được giải đáp. Có thể về sản phẩm, dịch vụ, bảo hành, hoặc hỗ trợ kỹ thuật.", "required": true }, "language": { "type": "string", "description": "Ngôn ngữ phản hồi: 'vi' (Tiếng Việt) hoặc 'en' (English). Mặc định: 'vi'", "required": false, "default": "vi" } }
Bước 4: Publish
10. Nhấn "Publish"
11. Copy MCP Server URL được tạo
Cấu hình MCP Server của ClickAI:
{ "name": "ClickAI MCP", "server_identifier": "clickaimcp", "server_url": "https://mcp.clickai.io/mcp/sse", "icon": "https://clickai.io/clickai_mcp_server.jpg", "icon_type": "image", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "{user_id}" } }
Trường
Giá trị
Mô tả
server_url
https://mcp.clickai.io/mcp/sse
MCP endpoint (SSE transport)
Authorization
Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=
Basic auth credentials (cố định)
X-User-ID
{user_id}
User ID của bạn trên ClickAI
⚠️ IMPORTANT: **Thay `{user_id}`** bằng User ID thực tế của bạn. Bạn có thể lấy User ID trong **Settings** → **Account** trên ClickAI Studio.
>
**Viết description hiệu quả:** Hãy nghĩ từ góc nhìn AI khi viết description. Mô tả rõ ràng, cụ thể giúp AI client biết chính xác khi nào nên gọi tool của bạn.
Tích hợp với Claude Desktop
Cấu hình
12. Mở Claude Desktop
13. Vào Settings → Developer → Edit Config
14. Thêm server vào file config:
{ "mcpServers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
15. Restart Claude Desktop
Sử dụng
Sau khi cấu hình, Claude sẽ tự nhận biết tool và sử dụng khi phù hợp:
User: Tôi muốn hỏi về chính sách bảo hành laptop XYZ Claude: Để tôi tra cứu thông tin cho bạn... [Calling clickai-support tool] Dựa trên thông tin từ hệ thống, sản phẩm laptop XYZ có chính sách bảo hành 24 tháng...
Tích hợp với Cursor
Cấu hình
16. Mở project trong Cursor IDE
17. Tạo file .cursor/mcp.json trong thư mục gốc project:
{ "mcpServers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
18. Restart Cursor
Multi-server Configuration
Kết nối nhiều ClickAI apps cùng lúc:
{ "mcpServers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
Tích hợp với VS Code
Cấu hình
19. Mở VS Code → Cmd + Shift + P → "Preferences: Open User Settings (JSON)"
20. Thêm cấu hình:
{ "mcp.servers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
21. Trong Copilot Chat, sử dụng: @clickai-assistant hãy giải thích đoạn code này
Tích hợp với Windsurf
Cấu hình
22. Mở Windsurf → Settings → MCP
23. Thêm server configuration:
{ "mcpServers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
Tích hợp với Custom App
Python — MCP SDK
import asyncio from mcp import ClientSession from mcp.client.sse import sse_client MCP_URL = "https://mcp.clickai.io/mcp/sse" HEADERS = { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } async def main(): # Kết nối đến ClickAI MCP Server (SSE transport) async with sse_client(MCP_URL, headers=HEADERS) as (read, write): async with ClientSession(read, write) as session: # Khởi tạo session await session.initialize() # Liệt kê tools có sẵn tools = await session.list_tools() print("📋 Available tools:") for tool in tools.tools: print(f" - {tool.name}: {tool.description}") # Gọi tool result = await session.call_tool( "customer_support_query", arguments={ "query": "Chính sách bảo hành sản phẩm ABC?" } ) print(f"\n🤖 Response: {result.content}") asyncio.run(main())
Node.js — MCP SDK
import { Client } from "@modelcontextprotocol/sdk/client/index.js"; import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js"; const MCP_URL = "https://mcp.clickai.io/mcp/sse"; const HEADERS = { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" }; async function main() { const transport = new SSEClientTransport( new URL(MCP_URL), { requestInit: { headers: HEADERS } } ); const client = new Client({ name: "my-app", version: "1.0.0" }); await client.connect(transport); // List tools const tools = await client.listTools(); console.log("Tools:", tools); // Call tool const result = await client.callTool({ name: "customer_support_query", arguments: { query: "Warranty policy?" } }); console.log("Result:", result); } main();
So sánh hai loại MCP
MCP App Connectors
MCP Tables
Mục đích
Kết nối AI Apps (Agent/Workflow)
Kết nối bảng dữ liệu
Server URL
mcp.clickai.io/mcp/sse
table.clickai.io/mcp/{base_id}
Transport
SSE (Server-Sent Events)
npx mcp-remote (HTTP bridge)
Auth
Basic Auth + X-User-ID
xc-mcp-token
Yêu cầu
Không cần cài đặt thêm
Cần Node.js
Use case
Gọi AI tools, chatbot, workflow
Đọc/ghi database, CRM, báo cáo
Lưu ý thực tế
📝 Descriptiveness — Mô tả tốt = AI gọi đúng
Mô tả tool và parameters quyết định AI client có gọi đúng tool hay không:
❌ Kém: Description: "Xử lý dữ liệu" Input: "data" — "Dữ liệu đầu vào" ✅ Tốt: Description: "Hệ thống hỗ trợ khách hàng AI cho sản phẩm công nghệ. Trả lời câu hỏi về: thông số kỹ thuật, giá, bảo hành, hướng dẫn sử dụng, và khắc phục sự cố." Input: "query" — "Câu hỏi cụ thể của khách hàng cần giải đáp, bao gồm tên sản phẩm và vấn đề gặp phải"
⏱️ Latency — Hiệu suất quan trọng
Thời gian xử lý
Trải nghiệm
Khuyến nghị
< 3 giây
✅ Tuyệt vời
Lý tưởng cho interactive use
3-10 giây
⚠️ Chấp nhận được
Thêm progress indicators
10-30 giây
❌ Chậm
Chia nhỏ workflow
> 30 giây
🚫 Quá chậm
Redesign approach
🔐 Security
· Không chia sẻ xc-mcp-token hoặc X-User-ID công khai
· Sử dụng token riêng cho từng môi trường (dev/staging/production)
· Rotate token định kỳ nếu nghi ngờ bị lộ
· Monitor access logs để phát hiện sử dụng bất thường
📖 Xem thêm: [API Reference](./01-api-reference.md) · [Build](../01-build.md) · [Tables](../tables/01-overview.md)
Last updated