Add option to install MCP server for docs #348
Conversation
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughThe pull request introduces MCP (Model Context Protocol) server integration for VS Code through the documentation UI. A new "Add MCP server to VS Code" button is added to the markdown dropdown menu with corresponding handler logic that constructs an MCP configuration, encodes it into a VS Code installation URI, and navigates to that URI. Concurrently, tooltip behavior is enhanced with zero delay display and dynamic title attribute conversion using the Tippy.js library. CSS properties are added to the dark theme for rendering optimization. Sequence DiagramsequenceDiagram
actor User
participant Dropdown as Markdown Dropdown
participant Handler as handleAddMCP
participant VSCode as VS Code
User->>Dropdown: Clicks "Add MCP server"
Dropdown->>Handler: Triggers add-mcp action
Handler->>Handler: Constructs MCP configuration
Handler->>Handler: Serializes & encodes to URI
Handler->>VSCode: Navigates to VS Code install URI
VSCode->>VSCode: Processes MCP server installation
Dropdown->>Dropdown: Closes dropdown
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (4)
src/css/doc.css(2 hunks)src/js/12-activate-tooltips.js(2 hunks)src/js/14-markdown-dropdown.js(2 hunks)src/partials/markdown-dropdown.hbs(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (5)
src/partials/markdown-dropdown.hbs (1)
58-69: LGTM! Well-structured menu item addition.The new MCP server button follows the established pattern for dropdown items with proper accessibility attributes, consistent styling, and appropriate iconography.
src/js/14-markdown-dropdown.js (2)
61-63: LGTM! Action handler follows established pattern.The handler correctly invokes
handleAddMCPand closes the dropdown afterward, maintaining consistency with other menu item handlers.
177-194: The URI scheme format is correct—this review comment is based on incorrect information.The format
vscode:mcp/install?{json-configuration}is the correct standard for VS Code MCP server installation, and the implementation properly applies JSON stringification and URL encoding as required. The concern about the format being "non-standard" is unfounded.The code does lack error handling for protocol failures or missing VS Code, but this is a minor enhancement suggestion rather than a defect.
Likely an incorrect or invalid review comment.
src/css/doc.css (1)
1496-1497: Rendering optimization approved, but note summary inconsistency.The 3D rendering hints (
transform: translateZ(0)andbackface-visibility: hidden) are reasonable optimizations that can improve rendering performance by creating a new stacking context and enabling GPU acceleration.However, these properties apply to all themes, not just dark theme as stated in the AI summary. The selectors
.doc .source-toolbox .copy-buttonand.doc .source-toolbox .ask-ai-buttonhave no dark theme scope.Also applies to: 1562-1563
src/js/12-activate-tooltips.js (1)
29-60: LGTM! Solid implementation of title-to-tippy conversion.The implementation properly:
- Removes native
titleattributes to prevent double tooltips- Configures boundary detection with viewport to prevent clipping
- Appends tooltips to body to avoid overflow issues in constrained containers
- Provides flexible positioning with flip fallbacks
This ensures consistent tooltip behavior across code block buttons while respecting viewport boundaries.
This pull request introduces improvements to the documentation site's user experience, focusing on enhanced tooltip behavior for code block buttons and adding a new feature to integrate the MCP server with VS Code directly from the UI. The changes also include minor CSS optimizations for rendering code tokens.
User experience enhancements:
src/js/12-activate-tooltips.js) [1] [2]New feature: VS Code MCP server integration:
src/partials/markdown-dropdown.hbs,src/js/14-markdown-dropdown.js) [1] [2] [3]2025-11-20_15-04-58.mp4