> For the complete documentation index, see [llms.txt](https://docs.clickai.vn/clickai-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.clickai.vn/clickai-docs/nha-phat-trien/phat-trien-and-tich-hop-mcp-clients.md). # Phát triển & Tích hợp MCP Clients ## 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": " "icon": " "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",\ " "--header",\ "xc-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 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à \ 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",\ " "--header",\ "xc-mcp-token: token\_crm\_xxx"\ ]\ },\ "Product Catalog": {\ "command": "npx",\ "args": \[\ "mcp-remote",\ " "--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": " "icon": " "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": " "headers": {\ "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\ "X-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": " "headers": {\ "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\ "X-User-ID": "\"\ }\ }\ }\ } 18\. Restart Cursor ### Multi-server Configuration Kết nối nhiều ClickAI apps cùng lúc: {\ "mcpServers": {\ "clickai-mcp": {\ "url": " "headers": {\ "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\ "X-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": " "headers": {\ "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\ "X-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": " "headers": {\ "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\ "X-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 = " HEADERS = {\ "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\ "X-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 = " const HEADERS = {\ "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\ "X-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)* --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.clickai.vn/clickai-docs/nha-phat-trien/phat-trien-and-tich-hop-mcp-clients.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.