Update docs for MCP v2

docs/customization/layout.mdx

@@ -56,10 +56,13 @@ The table below lists all the available properties that modify the chatbot modal
 | `hide-feedback`        | **Type**: `boolean`<br />**Default value**: `false`<br /><br />When set to `true`, removes the feedback options (like thumbs up/down) that users can use to rate AI responses. |
 | `hide-sources`         | **Type**: `boolean`<br />**Default value**: `false`<br /><br />When set to `true`, hides the sources section from AI responses in the chat interface. |
 | `hide-settings-button` | **Type**: `boolean`<br />**Default value**: `false`<br /><br />When set to `true`, hides the settings button (reasoning mode selector) from the chatbot header. Only applies if your project has the reasoning mode plugin enabled. |
+| `hide-connect-button`  | **Type**: `boolean`<br />**Default value**: `false`<br /><br />When set to `true`, hides the Connect button from the chatbot header. This button allows users to connect to MCP (Model Context Protocol) servers. When hidden, users won't be able to access MCP connection options even if MCP is enabled for the project. |
 | `hide-tooltips`        | **Type**: `boolean`<br />**Default value**: `false`<br /><br />When set to `true`, hides the tooltips that appear when hovering over header icons. |
 | `modal-position`       | **Type**: `string`<br />**Default value**: `center`<br />**Available values:** `center`, `top-center`, `bottom-right`, `bottom-left`<br /><br />Determines where the chat modal appears on the screen when opened. Choose the position that best fits your website's layout.|
 | `show-terms-modal` | **Type**: `boolean`<br />**Default value**: `false`<br /><br />When set to `true`, displays a terms and conditions modal before starting the chat. |
 | `think-mode-enabled`   | **Type**: `boolean`<br />**Default value**: `false`<br /><br />When set to `true`, selects Think mode by default (instead of Auto) for deeper AI reasoning. Users can still change modes via the settings dropdown unless you also set `hide-settings-button` to `true`. Requires the reasoning mode plugin to be enabled for your project. See [Reasoning modes](./reasoning-modes) for details. |
+| **MCP Integration**  |  |  |
+| `mcp-server-url`       | **Type**: `string`<br />**Default value**: ``<br /><br />Manually override the MCP (Model Context Protocol) server URL. Use this when you need to connect to a custom MCP server or when your MCP server requires authentication (e.g., API keys). Takes priority over the API-provided MCP URL. Example: `https://mcp.biel.ai/v2/YOUR_PROJECT/mcp?api_key=sk_...` See [MCP Server Integration](/integrations/mcp-server) for details. |
 | **Text**             |  |  |
 | `assistant-label`      | **Type**: `string`<br />**Default value**: `Assistant`<br /><br />Label text displayed above AI responses in the chat. |
 | `close-button-text`    | **Type**: `string`<br />**Default value**: `Close`<br /><br />Tooltip text for the close button in the chatbot header. |

docs/integrations/mcp-server.md

@@ -31,15 +31,45 @@ This integration requires:
 - **AI coding assistant** that supports MCP:
   - Cursor IDE
   - Claude Desktop
-  - VS Code (with MCP extension)
+  - VS Code
   - Other MCP-compatible tools
 - **API key** (optional) - only for private projects on Business/Enterprise plans
 
 ## Setup
 
 Connect your AI coding assistant to Biel.ai using our hosted MCP server (no installation or maintenance required).
 
-Add this configuration to your AI tool's MCP settings:
+### Option 1: Streamable HTTP - Recommended
+
+This is the most reliable and fastest connection method.
+
+We have simplified the setup process with a "One-Click" configuration.
+
+1. Go to your **Biel.ai Widget**.
+2. Click on the **Connect** button.
+3. Choose your preferred option:
+   - **Copy MCP server URL**: Copies the HTTP URL for manual configuration.
+   - **Connect to Claude Code**: Copies the installation command to your clipboard.
+   - **Connect to Copilot**: Automatically opens VS Code and adds the MCP server.
+   - **Connect to Cursor**: Automatically opens Cursor and adds the MCP server.
+
+**Manual Configuration (if needed):**
+
+```json
+{
+  "mcpServers": {
+    "biel-ai": {
+      "name": "Biel.ai",
+      "type": "http",
+      "url": "https://mcp.biel.ai/v2/YOUR_PROJECT_SLUG/mcp"
+    }
+  }
+}
+```
+
+### Option 2: Legacy SSE - Deprecated
+
+Use this if your client doesn't support the Streamable HTTP protocol.
 
 ```json
 {
@@ -49,18 +79,90 @@ Add this configuration to your AI tool's MCP settings:
       "command": "npx",
       "args": [
         "mcp-remote",
-        "https://mcp.biel.ai/sse?project_slug=YOUR_PROJECT_SLUG&domain=https://your-docs-domain.com"
+        "https://mcp.biel.ai/sse?project_slug=YOUR_PROJECT_SLUG"
       ]
     }
   }
 }
 ```
 
-Set the following parameters:
+## Configuration Parameters
+
+You can append query parameters to the URL to customize the connection:
+
+- `project_slug`: Your Biel.ai project slug from your dashboard.
+- `domain`: Optional, domain URL to pass as context. Required only if 'Allowed domains' is enabled in project settings.
+- `api_key`: Optional, API key (only needed for private projects).
+- `metadata`: Optional, tag to identify the conversation source (e.g., `?metadata=cursor`).
+
+**Example URL with parameters:**
+`https://mcp.biel.ai/v2/YOUR_PROJECT_SLUG/mcp?api_key=sk_...&domain=docs.example.com`
+
+## Widget customization
+
+You can control how the MCP integration appears in your Biel.ai widget using the following properties:
+
+### Hide Connect button
+
+Use the `hide-connect-button` property to hide the Connect button from the widget header. This is useful when you want MCP to be enabled for your project, but don't want to show the connection options to your users:
+
+**biel-button example:**
+```html
+<biel-button 
+  project="YOUR_PROJECT_ID" 
+  hide-connect-button="true"
+>
+  Ask AI
+</biel-button>
+```
+
+**biel-search-button example:**
+```html
+<biel-search-button 
+  project="YOUR_PROJECT_ID" 
+  hide-connect-button="true"
+>
+  Search
+</biel-search-button>
+```
+
+**Priority:** When `hide-connect-button` is set to `true`, the Connect button will be hidden regardless of whether MCP is enabled in your project settings. This gives you full control over the user interface.
 
-- `project_slug:` Your Biel.ai project slug from your dashboard.
-- `domain`: Your documentation domain.
-- `api_key`: Optional, API key (only needed for private projects)
+### Custom MCP server URL
+
+Use the `mcp-server-url` property to manually specify a custom MCP server URL. This is useful when:
+- Your MCP server requires authentication (e.g., API keys)
+- You're running a custom or self-hosted MCP server
+- You need to override the default MCP server provided by the API
+
+**biel-button example:**
+```html
+<biel-button 
+  project="YOUR_PROJECT_ID" 
+  mcp-server-url="https://mcp.biel.ai/v2/YOUR_PROJECT/mcp?api_key=sk_..."
+>
+  Ask AI
+</biel-button>
+```
+
+**biel-search-button example:**
+```html
+<biel-search-button 
+  project="YOUR_PROJECT_ID" 
+  mcp-server-url="https://custom-mcp-server.example.com/mcp"
+>
+  Search
+</biel-search-button>
+```
+
+**Priority:** When `mcp-server-url` is specified, it takes priority over the MCP URL provided by the API response. This ensures your custom configuration is always used.
+
+**Use cases:**
+- **API Key Authentication**: Add your API key directly to the URL for private projects
+- **Custom MCP Servers**: Point to your own self-hosted or custom MCP implementation
+- **Testing**: Override the production MCP URL with a staging or development server
+
+For more details on available widget properties, see [Widget Customization](/customization/layout).
 
 ## Configuration for specific tools
 
@@ -104,12 +206,9 @@ Your IDE will automatically call the MCP server when needed. The AI reads the `d
 {
   "mcpServers": {
     "biel-ai": {
-      "command": "npx",
-      "args": [
-        "mcp-remote",
-        "https://mcp.biel.ai/sse?project_slug=YOUR_PROJECT_SLUG&domain=https://your-docs-domain.com"
-      ],
-      "description": "Query your product's documentation, APIs, and knowledge base. Ask about API specs, guides, and troubleshooting."
+      "type": "http",
+      "url": "https://mcp.biel.ai/v2/YOUR_PROJECT_SLUG/mcp?domain=docs.example.com",
+      "name": "Biel.ai"
     }
   }
 }
@@ -168,6 +267,7 @@ The MCP server supports several configuration parameters:
 - **`base_url`** (optional): Defaults to `https://app.biel.ai`
 - **`domain`** (optional): Your documentation domain for additional context
 - **`chat_uuid`** (optional): To continue previous conversations
+- **`metadata`** (optional): Tag to identify the conversation source (e.g., `?metadata=cursor`)
 
 ## Troubleshooting