Merge pull request #315 from nocodb/docs/mcp

docs: mcp

Author: dstala

components/icons/Mcp.tsx

@@ -0,0 +1,37 @@
+export default function Mcp(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <defs>
+        <clipPath id="clip0_7011_10333">
+          <rect width="16" height="16" rx="2" fill="white" />
+        </clipPath>
+      </defs>
+      <g clipPath="url(#clip0_7011_10333)">
+        <path 
+          d="M5.64617 9.44949L10.1972 4.89847C11.0069 4.08873 11.0069 2.77589 10.1972 1.96615C9.38745 1.15641 8.07461 1.15641 7.26487 1.96615L1.25 7.98102" 
+          stroke="#1F293A" 
+          strokeWidth="1.33" 
+          strokeLinecap="round" 
+        />
+        <path 
+          d="M7.58284 13.5992L10.1626 11.0195L13.1834 7.9987C14.0247 7.15741 14.0247 5.79342 13.1834 4.95213C12.3421 4.11085 10.9781 4.11085 10.1368 4.95213L5.61851 9.47043" 
+          stroke="#1F293A" 
+          strokeWidth="1.33" 
+          strokeLinecap="round" 
+        />
+        <path 
+          d="M8.45532 3.71483L7.15276 5.01739L4.10645 8.0637C3.27925 8.89089 3.27925 10.232 4.10645 11.0592C4.93364 11.8864 6.27478 11.8864 7.10198 11.0592L11.6458 6.51541" 
+          stroke="#1F293A" 
+          strokeWidth="1.33" 
+          strokeLinecap="round" 
+        />
+        <path 
+          d="M7.51895 14.0675L8.89563 15.5" 
+          stroke="#1F293A" 
+          strokeWidth="1.33" 
+          strokeLinecap="round" 
+        />
+      </g>
+    </svg>
+  );
+}

content/blog/moving-to-playwright-from-cypress-part-1.mdx

@@ -64,7 +64,7 @@ This is the speedup we measured, granted this no way a fair comparison between P
 Total **3.87x** speedup 😳
 
 
-![image](https://media.tenor.com/WXUFUZ5g7uUAAAAC/speed.gif)
+![Speed GIF](/img/blog/cypress/speed.gif)
 
 And beyond speed, the ease to develop - debugging tests has improved drastically mainly due to really short feedback loop and really good APIs from the playwright. Also for the first time, many of the developers in the team feel it's a joy to write tests! In conclusion, we think Playwright was a big game changer for us on how fastly we can ship releases.
 

content/docs/account-settings/oss-specific-details.mdx

@@ -17,7 +17,7 @@ Signup without an invitation is disabled by default and can be managed from UI b
 
 App store lists available integrations for NocoDB. You can install and configure these integrations from the App store.
 
-![Screenshot 2023-08-22 at 5 02 26 PM](https://github.com/nocodb/nocodb/assets/86527202/e739a4b6-6ab6-4ee7-aac3-073d3aaf20ac)
+![App Store](/img/v2/account-settings/app-store.png)
 We provide different integrations in three main categories.
 
 |    Category   | App Name                                                                                                                                                                                                                      |

content/docs/bases/meta.json

@@ -6,6 +6,7 @@
     "share-base",
     "snapshots",
     "private-base",
-    "actions-on-base"],
+    "actions-on-base"
+  ],
   "icon": "baseOutlineLogo"
 }

content/docs/mcp.mdx

@@ -0,0 +1,96 @@
+---
+title: MCP Server
+description: Connect NocoDB to Large Language Models (LLMs) via the Model Context Protocol (MCP).
+tags: ["MCP", "LLM", "AI", "Claude", "Cursor", "Windsurf"]
+keywords: ["MCP", "Model Context Protocol", "NocoDB MCP", "LLM Integration", "Claude", "Cursor", "Windsurf"]
+icon: 'mcp'
+---
+
+The **Model Context Protocol (MCP) Server** lets you connect NocoDB with LLMs that support MCP, such as Claude, Cursor, or Windsurf. With this integration, LLMs can interact directly with your NocoDB workspace to create, query, update, and manage records.
+
+Each MCP endpoint in NocoDB provides a secure URL that can be linked to an MCP-compatible client.
+Once configured, the LLM can execute database operations in your workspace through natural language prompts.
+
+<Callout type="info"> The MCP integration currently works only with desktop clients that support MCP. Support for web based clients is coming soon. </Callout>
+
+MCP server exposes standard CRUD operations. These can be triggered conversationally, without writing SQL or scripts.
+
+| Action | Purpose              | Sample Prompt                                                 |
+|--------|----------------------|---------------------------------------------------------------|
+| Create | Add new records      | Create a task named ‘Review Documentation’                    |
+| Read   | Look up information  | Show me all projects with deadlines this week                 |
+| Update | Change existing data | Mark the status of Project X as completed & re-assign to John |
+| Delete | Remove records       | Remove all tasks assigned to John                             |
+
+
+## Server Configuration (NocoDB)
+
+1. Click on the **Overview** button in the left sidebar.
+2. Select the **Settings** tab.
+3. Select the **Model Context Protocol**
+4. Click on the **New MCP Endpoint** to create a new MCP config JSON for your base.
+5. Provide a name for the MCP endpoint
+6. Click **Create** to generate the MCP Config JSON.
+7. Copy the generated JSON configuration. This will be used in your LLM client configuration.
+
+![MCP Config](/img/v2/mcp/server-configuration.png)
+
+![MCP Config](/img/v2/mcp/server-configuration-2.png)
+
+
+## Client Configuration
+
+### Claude
+
+1. Open **Claude Desktop Preferences** (`⌘+,`).
+2. Under **Develop**, click **Edit Config**.
+3. Insert the JSON block copied [here](#server-configuration-nocodb) as `claude_desktop_config.json`.
+4. Save the file and restart Claude Desktop.
+
+
+### Cursor
+
+1. Go to **Cursor Settings** (`⇧+⌘+J`).
+2. Open the **MCP** tab and select **Add Custom MCP**.
+3. Paste the JSON block copied [here](#server-configuration-nocodb). Save.
+
+<Callout type="info"> On success, you will see `11 tools enabled` below the MCP Server just installed. If you see an error, double-check the JSON configuration. </Callout>
+
+![Cursor MCP Settings](/img/v2/mcp/cursor-mcp.png)
+
+
+### Windsurf
+
+1. Open **Windsurf Settings** (`⌘+,`).
+2. In the **Cascade** section > `Plugins (MCP Server)` > Click **Manage Plugins**
+3. Paste the JSON block copied [here](#server-configuration-nocodb). Save.
+
+![Windsurf MCP Settings](/img/v2/mcp/windsurf-mcp-1.png)
+
+![Windsurf MCP Settings](/img/v2/mcp/windsurf-mcp-2.png)
+
+
+## JSON Example
+
+```json
+{
+  "mcpServers": {
+    "NocoDB MCP": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "https://your-domain.com/mcp/<ncId>",
+        "--header",
+        "xc-mcp-token: <ncToken>"
+      ]
+    }
+  }
+}
+
+````
+
+<Callout type="warning"> Your MCP configurations generated above functions as a set of access credentials, granting full control over your NocoDB base. Ensure it remains confidential, never include it in source control, and store it only in secure, protected locations.</Callout>
+
+---
+
+

content/docs/meta.json

@@ -15,6 +15,7 @@
     "noco-ai",
     "extensions",
     "dashboards",
+    "mcp",
     "roles-and-permissions",
     "collaboration",
     "automation",

lib/iconMap.ts

@@ -29,6 +29,7 @@ import Extension from '@/components/icons/Extension';
 import Sparkle from '@/components/icons/Sparkle';
 import Chart from '@/components/icons/Chart';
 import Legal from '@/components/icons/Legal';
+import Mcp from '@/components/icons/Mcp';
 
 const iconMap = {
     alertCircle: AlertCircle,
@@ -62,6 +63,7 @@ const iconMap = {
     sparkle: Sparkle,
     chart: Chart,
     legal: Legal,
+    mcp: Mcp,
 } as const;
 
 type IconNameType = keyof typeof iconMap;