> 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)*


---

# 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/clickai-docs-en/developer/mcp-build-and-integrate-mcp-clients.md?ask=<question>&goal=<endgoal>
```

`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.