> 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/clickai-docs-en/developer/mcp-build-and-integrate-mcp-clients.md).

# MCP — Build & Integrate MCP Clients

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",\
&#x20;   "server\_url": "<https://mcp.clickai.io/mcp/sse",\\>
&#x20;   "icon": "<https://clickai.io/clickai\\_mcp\\_server.jpg",\\>
&#x20;   "icon\_type": "image",\
&#x20;   "headers": {\
&#x20;     "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\
&#x20;     "X-User-ID": "{user\_id}"\
&#x20;   }\
&#x20; }\
]

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Field</td><td valign="top">Value</td><td valign="top">Description</td></tr><tr><td valign="top">server_url</td><td valign="top">https://mcp.clickai.io/mcp/sse</td><td valign="top">MCP endpoint (SSE transport)</td></tr><tr><td valign="top">Authorization</td><td valign="top">Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=</td><td valign="top">Basic auth credentials (fixed)</td></tr><tr><td valign="top">X-User-ID</td><td valign="top">{user_id}</td><td valign="top">Your ClickAI User ID</td></tr></tbody></table>

&#x20;

💡 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

&#x20;

## Type 2: MCP Tables

Connect Tables (NocoDB data management) with AI clients — enabling AI to read, write, and query data directly.

### Configuration

{\
&#x20; "mcpServers": {\
&#x20;   "NocoDB Base - CRM AI & Academy": {\
&#x20;     "command": "npx",\
&#x20;     "args": \[\
&#x20;       "mcp-remote",\
&#x20;       "<https://table.clickai.io/mcp/{base\\_id}",\\>
&#x20;       "--header",\
&#x20;       "xc-mcp-token: \<YOUR\_MCP\_TOKEN>"\
&#x20;     ]\
&#x20;   }\
&#x20; }\
}

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Field</td><td valign="top">Description</td></tr><tr><td valign="top">command</td><td valign="top">npx — runs directly via Node.js</td></tr><tr><td valign="top">mcp-remote</td><td valign="top">Bridge package for MCP over HTTP</td></tr><tr><td valign="top">https://table.clickai.io/mcp/{base_id}</td><td valign="top">URL for the specific Tables base</td></tr><tr><td valign="top">xc-mcp-token</td><td valign="top">MCP authentication token for Tables</td></tr></tbody></table>

&#x20;

### 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

{\
&#x20; "mcpServers": {\
&#x20;   "CRM Database": {\
&#x20;     "command": "npx",\
&#x20;     "args": \[\
&#x20;       "mcp-remote",\
&#x20;       "<https://table.clickai.io/mcp/nc\\_crm\\_base\\_id",\\>
&#x20;       "--header",\
&#x20;       "xc-mcp-token: token\_crm\_xxx"\
&#x20;     ]\
&#x20;   },\
&#x20;   "Product Catalog": {\
&#x20;     "command": "npx",\
&#x20;     "args": \[\
&#x20;       "mcp-remote",\
&#x20;       "<https://table.clickai.io/mcp/nc\\_product\\_base\\_id",\\>
&#x20;       "--header",\
&#x20;       "xc-mcp-token: token\_product\_xxx"\
&#x20;     ]\
&#x20;   }\
&#x20; }\
}

📝 NOTE: MCP Tables requires \*\*Node.js\*\* installed on your machine. The \`mcp-remote\` package is auto-downloaded via \`npx\`.

&#x20;

## 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:

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Field</td><td valign="top">Description</td><td valign="top">Example</td></tr><tr><td valign="top">Server Name</td><td valign="top">Display name in client</td><td valign="top">ClickAI Customer Support</td></tr><tr><td valign="top">Description</td><td valign="top">Detailed description for AI to understand when to call this tool</td><td valign="top">AI customer support system — answers product, warranty, and technical questions</td></tr><tr><td valign="top">Tool Name</td><td valign="top">Tool name when client calls</td><td valign="top">customer_support_query</td></tr><tr><td valign="top">Input Parameters</td><td valign="top">Input parameter descriptions</td><td valign="top">See example below</td></tr></tbody></table>

&#x20;

### Step 3: Configure Input Parameters

{\
&#x20; "query": {\
&#x20;   "type": "string",\
&#x20;   "description": "Customer question to be answered. Can be about products, services, warranty, or technical support.",\
&#x20;   "required": true\
&#x20; },\
&#x20; "language": {\
&#x20;   "type": "string",\
&#x20;   "description": "Response language: 'en' (English) or 'vi' (Vietnamese). Default: 'en'",\
&#x20;   "required": false,\
&#x20;   "default": "en"\
&#x20; }\
}

### Step 4: Publish

10\.  Click "Publish"

11\.  Copy the generated MCP Server URL

ClickAI MCP Server Configuration:

{\
&#x20; "name": "ClickAI MCP",\
&#x20; "server\_identifier": "clickaimcp",\
&#x20; "server\_url": "<https://mcp.clickai.io/mcp/sse",\\>
&#x20; "icon": "<https://clickai.io/clickai\\_mcp\\_server.jpg",\\>
&#x20; "icon\_type": "image",\
&#x20; "headers": {\
&#x20;   "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\
&#x20;   "X-User-ID": "{user\_id}"\
&#x20; }\
}

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Field</td><td valign="top">Value</td><td valign="top">Description</td></tr><tr><td valign="top">server_url</td><td valign="top">https://mcp.clickai.io/mcp/sse</td><td valign="top">MCP endpoint (SSE transport)</td></tr><tr><td valign="top">Authorization</td><td valign="top">Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=</td><td valign="top">Basic auth credentials (fixed)</td></tr><tr><td valign="top">X-User-ID</td><td valign="top">{user_id}</td><td valign="top">Your ClickAI User ID</td></tr></tbody></table>

&#x20;

⚠️ IMPORTANT: \*\*Replace \`{user\_id}\`\*\* with your actual User ID. You can find your User ID in \*\*Settings\*\* → \*\*Account\*\* on ClickAI Studio.

\>&#x20;

*\*\*Write effective descriptions:\*\* Think from an AI's perspective. Clear, specific descriptions help AI clients know exactly when to call your tool.*

&#x20;

## Integration with Claude Desktop

12\.  Open Claude Desktop → Settings → Developer → Edit Config

13\.  Add server to config:

{\
&#x20; "mcpServers": {\
&#x20;   "clickai-mcp": {\
&#x20;     "url": "<https://mcp.clickai.io/mcp/sse",\\>
&#x20;     "headers": {\
&#x20;       "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\
&#x20;       "X-User-ID": "\<YOUR\_USER\_ID>"\
&#x20;     }\
&#x20;   }\
&#x20; }\
}

14\.  Restart Claude Desktop

&#x20;

## Integration with Cursor

15\.  Create .cursor/mcp.json in your project root:

{\
&#x20; "mcpServers": {\
&#x20;   "clickai-mcp": {\
&#x20;     "url": "<https://mcp.clickai.io/mcp/sse",\\>
&#x20;     "headers": {\
&#x20;       "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\
&#x20;       "X-User-ID": "\<YOUR\_USER\_ID>"\
&#x20;     }\
&#x20;   }\
&#x20; }\
}

16\.  Restart Cursor

### Multi-server Configuration

{\
&#x20; "mcpServers": {\
&#x20;   "clickai-mcp": {\
&#x20;     "url": "<https://mcp.clickai.io/mcp/sse",\\>
&#x20;     "headers": {\
&#x20;       "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\
&#x20;       "X-User-ID": "\<YOUR\_USER\_ID>"\
&#x20;     }\
&#x20;   }\
&#x20; }\
}

&#x20;

## Integration with VS Code

17\.  Open VS Code → Cmd + Shift + P → "Preferences: Open User Settings (JSON)"

18\.  Add:

{\
&#x20; "mcp.servers": {\
&#x20;   "clickai-mcp": {\
&#x20;     "url": "<https://mcp.clickai.io/mcp/sse",\\>
&#x20;     "headers": {\
&#x20;       "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\
&#x20;       "X-User-ID": "\<YOUR\_USER\_ID>"\
&#x20;     }\
&#x20;   }\
&#x20; }\
}

19\.  Use in Copilot Chat: @clickai-assistant explain this code

&#x20;

## Integration with Windsurf

Add to Windsurf Settings → MCP:

{\
&#x20; "mcpServers": {\
&#x20;   "clickai-mcp": {\
&#x20;     "url": "<https://mcp.clickai.io/mcp/sse",\\>
&#x20;     "headers": {\
&#x20;       "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\
&#x20;       "X-User-ID": "\<YOUR\_USER\_ID>"\
&#x20;     }\
&#x20;   }\
&#x20; }\
}

&#x20;

## 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 = {\
&#x20;   "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\
&#x20;   "X-User-ID": "\<YOUR\_USER\_ID>"\
}\
\
async def main():\
&#x20;   async with sse\_client(MCP\_URL, headers=HEADERS) as (read, write):\
&#x20;       async with ClientSession(read, write) as session:\
&#x20;           await session.initialize()\
\
&#x20;           tools = await session.list\_tools()\
&#x20;           for tool in tools.tools:\
&#x20;               print(f"  - {tool.name}: {tool.description}")\
\
&#x20;           result = await session.call\_tool(\
&#x20;               "customer\_support\_query",\
&#x20;               arguments={"query": "Warranty policy?"}\
&#x20;           )\
&#x20;           print(f"Response: {result.content}")\
\
asyncio.run(main())

### Node.js

import { Client } from "@modelcontextprotocol/sdk/client/index.js";\
import { SSEClientTransport } from\
&#x20; "@modelcontextprotocol/sdk/client/sse.js";\
\
const HEADERS = {\
&#x20; "Authorization": "Basic ZGlmeS1jbGllbnQ6ZGlmeS1zZWNyZXQ=",\
&#x20; "X-User-ID": "\<YOUR\_USER\_ID>"\
};\
\
const transport = new SSEClientTransport(\
&#x20; new URL("<https://mcp.clickai.io/mcp/sse"),\\>
&#x20; { requestInit: { headers: HEADERS } }\
);\
const client = new Client({ name: "my-app", version: "1.0.0" });\
\
await client.connect(transport);\
const result = await client.callTool({\
&#x20; name: "customer\_support\_query",\
&#x20; arguments: { query: "Warranty policy?" }\
});\
console.log("Result:", result);

&#x20;

## Comparison

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"> </td><td valign="top">MCP App Connectors</td><td valign="top">MCP Tables</td></tr><tr><td valign="top">Purpose</td><td valign="top">Connect AI Apps (Agent/Workflow)</td><td valign="top">Connect data tables</td></tr><tr><td valign="top">Server URL</td><td valign="top">mcp.clickai.io/mcp/sse</td><td valign="top">table.clickai.io/mcp/{base_id}</td></tr><tr><td valign="top">Transport</td><td valign="top">SSE (Server-Sent Events)</td><td valign="top">npx mcp-remote (HTTP bridge)</td></tr><tr><td valign="top">Auth</td><td valign="top">Basic Auth + X-User-ID</td><td valign="top">xc-mcp-token</td></tr><tr><td valign="top">Requires</td><td valign="top">No additional setup</td><td valign="top">Node.js required</td></tr><tr><td valign="top">Use case</td><td valign="top">AI tools, chatbot, workflow</td><td valign="top">Read/write database, CRM, reports</td></tr></tbody></table>

&#x20;

&#x20;

## Practical Considerations

### Descriptiveness

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Quality</td><td valign="top">Description Example</td></tr><tr><td valign="top">❌ Poor</td><td valign="top">"Process data"</td></tr><tr><td valign="top">✅ Good</td><td valign="top">"AI customer support system for tech products. Answers questions about: specifications, pricing, warranty, usage guides, and troubleshooting."</td></tr></tbody></table>

&#x20;

### Latency

<table data-header-hidden><thead><tr><th valign="top"></th><th valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top">Processing Time</td><td valign="top">Experience</td><td valign="top">Recommendation</td></tr><tr><td valign="top">&#x3C; 3 seconds</td><td valign="top">✅ Excellent</td><td valign="top">Ideal for interactive use</td></tr><tr><td valign="top">3-10 seconds</td><td valign="top">⚠️ Acceptable</td><td valign="top">Add progress indicators</td></tr><tr><td valign="top">10-30 seconds</td><td valign="top">❌ Slow</td><td valign="top">Break down workflow</td></tr><tr><td valign="top">> 30 seconds</td><td valign="top">🚫 Too slow</td><td valign="top">Redesign approach</td></tr></tbody></table>

&#x20;

### 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

&#x20;

*📖 See also: \[API Reference]\(./01-api-reference-en.md) · \[Build]\(../en/01-build-en.md) · \[Tables]\(../tables/en/01-overview\.md)*