MCP — Build & Integrate MCP Clients
Use MCP (Model Context Protocol) to connect App Connectors (External Apps) and Tables (Data management in Click AI workspace, and publish ClickAI apps as MCP Servers for other IDE.
Connect ClickAI with AI Clients & Tools
Claude Desktop, Cursor, VS Code, and other AI development tools.
Table of Contents
· [Overview](#overview)
· [What is MCP?](#what-is-mcp)
· [Type 1: MCP App Connectors — AI Tools](#type-1-mcp-app-connectors)
· [Type 2: MCP Tables — Database Access](#type-2-mcp-tables)
· [Configure App as MCP Server](#configure-app-as-mcp-server)
· [Integration with Claude Desktop](#integration-with-claude-desktop)
· [Integration with Cursor](#integration-with-cursor)
· [Integration with VS Code](#integration-with-vs-code)
· [Integration with Windsurf](#integration-with-windsurf)
· [Integration with Custom Apps](#integration-with-custom-apps)
· [Practical Considerations](#practical-considerations)
Overview
ClickAI provides two types of MCP Servers for connecting with AI clients:
┌──────────────────────────────────────────────────────────────┐ │ ClickAI MCP Ecosystem │ ├──────────────────────────────┬───────────────────────────────┤ │ │ │ │ 📡 MCP App Connectors │ 📊 MCP Tables │ │ Connect AI tools │ Connect data tables │ │ │ │ │ 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 │ └──────────────────────────────┴───────────────────────────────┘
What is MCP?
MCP (Model Context Protocol) is an open standard that standardizes how AI applications communicate with external tools and services. Developed by Anthropic, MCP provides:
· Standardization — One protocol for all AI-to-tool connections
· Security — Built-in authentication, no API key exposure needed
· Auto-discovery — Clients automatically detect available tools
· Cross-platform — Works with any MCP-compatible AI client
Type 1: MCP App Connectors
Connect AI Apps (Chatbot, Agent, Workflow) created in ClickAI Studio with external AI clients.
Configuration
[ { "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}" } } ]
Field
Value
Description
server_url
https://mcp.clickai.io/mcp/sse
MCP endpoint (SSE transport)
Authorization
Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=
Basic auth credentials (fixed)
X-User-ID
{user_id}
Your ClickAI User ID
💡 TIP: Replace `{user_id}` with your actual User ID. Find it in **Settings** → **Account** on ClickAI Studio.
When to use?
· Call Chatbot / Agent / Workflow apps from AI clients
· Integrate AI capabilities into Cursor, Claude Desktop, VS Code
· Access 300+ App Integrations via AI clients
Type 2: MCP Tables
Connect Tables (NocoDB data management) with AI clients — enabling AI to read, write, and query data directly.
Configuration
{ "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>" ] } } }
Field
Description
command
npx — runs directly via Node.js
mcp-remote
Bridge package for MCP over HTTP
https://table.clickai.io/mcp/{base_id}
URL for the specific Tables base
xc-mcp-token
MCP authentication token for Tables
Getting Connection Info
1. Open ClickAI Tables at https://table.clickai.io
2. Select the Base to connect (e.g., CRM AI & Academy)
3. Go to Settings → MCP → Copy MCP URL and MCP Token
4. Replace {base_id} and <YOUR_MCP_TOKEN> in config
When to use?
· Let AI read/write customer, order, product data
· Query CRM data directly from Claude Desktop / Cursor
· Auto-analyze and report data from Tables
Multi-base configuration
{ "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 requires **Node.js** installed on your machine. The `mcp-remote` package is auto-downloaded via `npx`.
Configure App as MCP Server
Step 1: Open Publish Settings
5. Open your app in ClickAI Studio
6. Click "Publish" in the top right
7. Select the "MCP Server" tab
Step 2: Enable MCP Server
8. Toggle "Enable MCP Server" → ON
9. Configure server information:
Field
Description
Example
Server Name
Display name in client
ClickAI Customer Support
Description
Detailed description for AI to understand when to call this tool
AI customer support system — answers product, warranty, and technical questions
Tool Name
Tool name when client calls
customer_support_query
Input Parameters
Input parameter descriptions
See example below
Step 3: Configure Input Parameters
{ "query": { "type": "string", "description": "Customer question to be answered. Can be about products, services, warranty, or technical support.", "required": true }, "language": { "type": "string", "description": "Response language: 'en' (English) or 'vi' (Vietnamese). Default: 'en'", "required": false, "default": "en" } }
Step 4: Publish
10. Click "Publish"
11. Copy the generated MCP Server URL
ClickAI MCP Server Configuration:
{ "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}" } }
Field
Value
Description
server_url
https://mcp.clickai.io/mcp/sse
MCP endpoint (SSE transport)
Authorization
Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=
Basic auth credentials (fixed)
X-User-ID
{user_id}
Your ClickAI User ID
⚠️ IMPORTANT: **Replace `{user_id}`** with your actual User ID. You can find your User ID in **Settings** → **Account** on ClickAI Studio.
>
**Write effective descriptions:** Think from an AI's perspective. Clear, specific descriptions help AI clients know exactly when to call your tool.
Integration with Claude Desktop
12. Open Claude Desktop → Settings → Developer → Edit Config
13. Add server to config:
{ "mcpServers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
14. Restart Claude Desktop
Integration with Cursor
15. Create .cursor/mcp.json in your project root:
{ "mcpServers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
16. Restart Cursor
Multi-server Configuration
{ "mcpServers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
Integration with VS Code
17. Open VS Code → Cmd + Shift + P → "Preferences: Open User Settings (JSON)"
18. Add:
{ "mcp.servers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
19. Use in Copilot Chat: @clickai-assistant explain this code
Integration with Windsurf
Add to Windsurf Settings → MCP:
{ "mcpServers": { "clickai-mcp": { "url": "https://mcp.clickai.io/mcp/sse", "headers": { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" } } } }
Integration with Custom Apps
Python
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(): async with sse_client(MCP_URL, headers=HEADERS) as (read, write): async with ClientSession(read, write) as session: await session.initialize() tools = await session.list_tools() for tool in tools.tools: print(f" - {tool.name}: {tool.description}") result = await session.call_tool( "customer_support_query", arguments={"query": "Warranty policy?"} ) print(f"Response: {result.content}") asyncio.run(main())
Node.js
import { Client } from "@modelcontextprotocol/sdk/client/index.js"; import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js"; const HEADERS = { "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=", "X-User-ID": "<YOUR_USER_ID>" }; const transport = new SSEClientTransport( new URL("https://mcp.clickai.io/mcp/sse"), { requestInit: { headers: HEADERS } } ); const client = new Client({ name: "my-app", version: "1.0.0" }); await client.connect(transport); const result = await client.callTool({ name: "customer_support_query", arguments: { query: "Warranty policy?" } }); console.log("Result:", result);
Comparison
MCP App Connectors
MCP Tables
Purpose
Connect AI Apps (Agent/Workflow)
Connect data tables
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
Requires
No additional setup
Node.js required
Use case
AI tools, chatbot, workflow
Read/write database, CRM, reports
Practical Considerations
Descriptiveness
Quality
Description Example
❌ Poor
"Process data"
✅ Good
"AI customer support system for tech products. Answers questions about: specifications, pricing, warranty, usage guides, and troubleshooting."
Latency
Processing Time
Experience
Recommendation
< 3 seconds
✅ Excellent
Ideal for interactive use
3-10 seconds
⚠️ Acceptable
Add progress indicators
10-30 seconds
❌ Slow
Break down workflow
> 30 seconds
🚫 Too slow
Redesign approach
Security
· Never share xc-mcp-token or X-User-ID publicly
· Use separate tokens for each environment (dev/staging/production)
· Rotate tokens regularly if compromise is suspected
· Monitor access logs for unusual activity
📖 See also: [API Reference](./01-api-reference-en.md) · [Build](../en/01-build-en.md) · [Tables](../tables/en/01-overview.md)
Last updated