{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"connect-mcp-tag","__idx":0},"children":["Connect MCP tag"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["connect-mcp"]}," tag renders a button that allows users to connect to the MCP (Model Context Protocol) server through various MCP clients."," ","When clicked or hovered, it displays a dropdown menu."," ","The menu has options to connect via Cursor or VS Code, copy the Claude Code or Codex CLI command, or copy the MCP configuration."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Before you begin"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Connect MCP button requires a properly configured Docs MCP server to function."," ","See the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/mcp"},"children":["MCP configuration documentation"]}," for setup instructions."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"syntax-and-usage","__idx":1},"children":["Syntax and usage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["connect-mcp"]}," tag where you want the button to appear."]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor","vscode","claude-code","codex","copy"]},"children":[]}],"rawContent":"{% connect-mcp /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The button opens a dropdown menu on hover with connection options."," ","Users can click to connect their editor or copy the configuration."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"attributes","__idx":2},"children":["Attributes"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Attribute"},"children":["Attribute"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["placement"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the vertical placement of the dropdown menu relative to the button."," ","Accepts ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom"]},"."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["alignment"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the horizontal alignment of the dropdown menu relative to the button."," ","Accepts ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["start"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["end"]},"."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["start"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["options"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["array"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specifies which connection options to display in the dropdown."," ","Accepts an array containing any combination of: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cursor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vscode"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["claude-code"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["codex"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["copy"]},"."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[\"cursor\", \"vscode\", \"claude-code\", \"codex\", \"copy\"]"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":3},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-usage","__idx":4},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Connect MCP"]}," button with all default options:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor","vscode","claude-code","codex","copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor","vscode","claude-code","codex","copy"]},"children":[]}],"rawContent":"{% connect-mcp /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dropdown-placement","__idx":5},"children":["Dropdown placement"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display the dropdown above the button:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"top","alignment":"start","options":["cursor","vscode","claude-code","codex","copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"top","alignment":"start","options":["cursor","vscode","claude-code","codex","copy"]},"children":[]}],"rawContent":"{% connect-mcp placement=\"top\" /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dropdown-alignment","__idx":6},"children":["Dropdown alignment"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Align the dropdown to the end (right side) of the button:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"end","options":["cursor","vscode","claude-code","codex","copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"end","options":["cursor","vscode","claude-code","codex","copy"]},"children":[]}],"rawContent":"{% connect-mcp alignment=\"end\" /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"display-specific-options","__idx":7},"children":["Display specific options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display only the Cursor connection option:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor"]},"children":[]}],"rawContent":"{% connect-mcp options=[\"cursor\"] /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display only the Copy option configuration:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["copy"]},"children":[]}],"rawContent":"{% connect-mcp options=[\"copy\"] /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"combined-attributes","__idx":8},"children":["Combined attributes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize multiple attributes:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"top","alignment":"end","options":["vscode","copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"top","alignment":"end","options":["vscode","copy"]},"children":[]}],"rawContent":"{% connect-mcp placement=\"top\" alignment=\"end\" options=[\"vscode\", \"copy\"] /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":9},"children":["Best practices"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use placement strategically"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placement=\"top\""]}," when the button appears near the bottom of the page to prevent the dropdown from extending beyond the viewport."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Choose appropriate alignment"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alignment=\"start\""]}," for inline usage in content to align the dropdown with the left side of the button."," ","Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alignment=\"end\""]}," for navbar or right-aligned layouts to align the dropdown with the right side of the button."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Display relevant options"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["options"]}," array to display only the connection methods relevant to your audience."," ","If your users primarily use Cursor, consider showing only that option to reduce cognitive load."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":10},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/mcp"},"children":["MCP configuration"]}]}," - Configure the MCP server and Connect MCP button visibility"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/mcp-server"},"children":["Model Context Protocol server"]}]}," - Learn about MCP servers and integration with AI tools"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/learn/markdoc"},"children":["Markdoc overview for technical writers"]}]}," - Learn how to use Markdoc in your documentation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags"},"children":["Markdoc tags"]}]}," - See the full list of supported Markdoc tags"]}]}]},"frontmatter":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["admonition","configOptionRequirements","connect-mcp","markdoc-example","table"],"title":"Connect MCP tag","lastModified":"2026-10-01T23:00:57.000Z"}