[Docs][Content] - MCP installation instructions #915
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a new MCP setup documentation page and registers it in docs metadata; introduces two SVG icon components and a client-side Button component; extends the Info component with size variants; and exposes the new components to the MDX runtime mapping. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Page as MCP MDX Page
participant MDXMap as getMDXComponents()
participant UI as Components (Button, Icons, Info)
participant Browser as Browser
Page->>MDXMap: request component mapping
MDXMap-->>Page: returns { Button, StackAuthIcon, CursorIcon, Info, ... }
Page->>UI: instantiate components (props: size, href, icon, etc.)
UI-->>Browser: render UI (SVGs, buttons, tabs, content)
Browser-->>UI: user interactions (tab switch, clicks)
UI-->>Page: state-driven updates / re-render
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Review by RecurseML
🔍 Review performed on 7a0bf86..4ca1edf
✨ No bugs found, your code is sparkling clean
✅ Files analyzed, no issues (4)
• docs/src/components/mdx/button.tsx
• docs/src/components/icons.tsx
• docs/src/components/mdx/info.tsx
• docs/src/mdx-components.tsx
⏭️ Files skipped (6)
| Locations |
|---|
docs/docs-platform.yml |
docs/public/imgs/cursor.svg |
docs/public/imgs/mcp.svg |
docs/public/imgs/vscode.svg |
docs/templates/meta.json |
docs/templates/others/mcp-setup.mdx |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
docs/src/components/icons.tsx (1)
353-361: Add accessible defaults for decorative icons (aria-hidden/role), allow override via aria-label.These icons are decorative in most MDX contexts. Default them to aria-hidden to reduce noise for screen readers, while allowing consumers to set aria-label when needed.
Apply this diff to both SVGs:
<svg ref={ref} width={size} height={size} viewBox="0 0 200 242" fill="none" xmlns="http://www.w3.org/2000/svg" className={cn('flex-shrink-0', className)} + aria-hidden={props['aria-label'] ? undefined : true} + role={props['aria-label'] ? 'img' : undefined} {...props} ><svg ref={ref} width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={cn('flex-shrink-0', className)} + aria-hidden={props['aria-label'] ? undefined : true} + role={props['aria-label'] ? 'img' : undefined} {...props} >Also applies to: 378-387
docs/src/components/mdx/info.tsx (1)
63-65: Mark inline SVG icons as decorative for screen readers.These icons convey no additional information beyond the text; hide them by default.
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon}> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon} aria-hidden="true"> ... - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon}> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon} aria-hidden="true"> ... - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon}> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={sizes.icon} aria-hidden="true">Also applies to: 68-70, 73-75
docs/templates/others/mcp-setup.mdx (1)
45-45: Minor copy: Use the official product name “VS Code”.Change “VSCode” to “VS Code”.
- Configure Stack Auth MCP in VSCode IDE for enhanced code assistance. + Configure Stack Auth MCP in VS Code for enhanced code assistance.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
docs/public/imgs/cursor.svgis excluded by!**/*.svgdocs/public/imgs/mcp.svgis excluded by!**/*.svgdocs/public/imgs/vscode.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
docs/docs-platform.yml(1 hunks)docs/src/components/icons.tsx(1 hunks)docs/src/components/mdx/button.tsx(1 hunks)docs/src/components/mdx/info.tsx(2 hunks)docs/src/mdx-components.tsx(2 hunks)docs/templates/meta.json(1 hunks)docs/templates/others/mcp-setup.mdx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer ES6 Map over Record when representing key–value collections
Files:
docs/src/components/mdx/info.tsxdocs/src/components/mdx/button.tsxdocs/src/components/icons.tsxdocs/src/mdx-components.tsx
⏰ 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). (9)
- GitHub Check: build (22.x)
- GitHub Check: restart-dev-and-test
- GitHub Check: build (22.x)
- GitHub Check: setup-tests
- GitHub Check: lint_and_build (latest)
- GitHub Check: docker
- GitHub Check: docker
- GitHub Check: all-good
- GitHub Check: Security Check
🔇 Additional comments (5)
docs/src/components/mdx/info.tsx (1)
12-12: LGTM: Size variants are a clean, minimal extension.Prop signature and size variants look good; usage is consistent throughout the component.
Also applies to: 36-47
docs/templates/meta.json (1)
36-36: LGTM: New page registered in meta.Entry aligns with docs-platform.yml addition.
docs/docs-platform.yml (1)
273-275: LGTM: Page exposed across all platforms.Matches Other section conventions.
docs/src/mdx-components.tsx (1)
21-23: LGTM: Components exposed to MDX.Icons and Button are properly imported and added to the MDX runtime surface.
Also applies to: 83-89
docs/templates/others/mcp-setup.mdx (1)
47-47: LGTM: Fixed CTA text for VS Code section.“Add to VS Code” label is correct now.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
docs/src/components/mdx/button.tsx (1)
59-67: Add defaulttype="button"to prevent accidental form submissions.HTML buttons default to
type="submit"when no type is specified. If this Button component is used inside a form without an explicit type prop, clicking it will submit the form, which is likely unintended behavior.+ const buttonType = (props as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? 'button'; + return ( <button ref={ref as React.Ref<HTMLButtonElement>} + type={buttonType} className={buttonClasses} {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}Alternatively, destructure
typewith a default in the component parameters:->(({ className, color = 'secondary', size = 'sm', icon, href, children, ...props }, ref) => { +>(({ className, color = 'secondary', size = 'sm', icon, href, children, type = 'button', ...props }, ref) => { + // ... component body return ( <button ref={ref as React.Ref<HTMLButtonElement>} + type={type} className={buttonClasses}Note: The second approach requires TypeScript to understand that
typeonly exists on ButtonAsButton. You may need to adjust the type narrowing.
🧹 Nitpick comments (1)
docs/src/components/mdx/button.tsx (1)
47-48: Consider removing role="button" from anchor elements.Adding
role="button"to an anchor element changes its semantic meaning from a link to a button. Since this element has anhrefand navigates, it's semantically a link. Screen readers will announce it as a button, which may confuse users who expect link behavior (e.g., right-click to open in new tab, middle-click, etc.).If the intent is purely visual styling to make it look like a button, the CSS classes alone should suffice without changing the semantic role.
return ( <a - role="button" href={href} className={buttonClasses} ref={ref as React.Ref<HTMLAnchorElement>}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/src/components/mdx/button.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer ES6 Map over Record when representing key–value collections
Files:
docs/src/components/mdx/button.tsx
⏰ 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). (10)
- GitHub Check: build (22.x)
- GitHub Check: build (22.x)
- GitHub Check: restart-dev-and-test
- GitHub Check: setup-tests
- GitHub Check: lint_and_build (latest)
- GitHub Check: docker
- GitHub Check: all-good
- GitHub Check: Vercel Agent Review
- GitHub Check: docker
- GitHub Check: Security Check
🔇 Additional comments (1)
docs/src/components/mdx/button.tsx (1)
6-23: LGTM! Discriminated union types address previous type safety concerns.The discriminated union approach with
href?: neverfor buttons andhref: stringfor links properly prevents invalid prop combinations. This addresses the type safety issues raised in previous reviews.
Adds MCP installation instructions pages to docs:
High-level PR Summary
This PR adds MCP (Model Context Protocol) installation documentation to the Stack Auth docs. It creates a new page (
mcp-setup.mdx) with instructions for setting up Stack Auth's MCP server in various development environments including Cursor, VS Code, Claude Code, Claude Desktop, Windsurf, ChatGPT, and Gemini CLI. The PR includes necessary supporting assets like SVG icons, a new button component, modifications to existing components, and updates to configuration files to properly register the new documentation page.⏱️ Estimated Review Time: 15-30 minutes
💡 Review Order Suggestion
docs/templates/others/mcp-setup.mdxdocs/docs-platform.ymldocs/src/components/icons.tsxdocs/src/components/mdx/button.tsxdocs/src/components/mdx/info.tsxdocs/src/mdx-components.tsxdocs/templates/meta.jsondocs/public/imgs/mcp.svgdocs/public/imgs/vscode.svgdocs/public/imgs/cursor.svgImportant
Adds MCP installation instructions to documentation, introduces new components, and updates existing components for enhanced MDX support.
mcp-setup.mdxfor MCP installation instructions indocs/templates/others.docs-platform.ymlandmeta.jsonto include the new MCP setup page.Buttoncomponent inbutton.tsxfor MDX content.Infocomponent ininfo.tsxto include a size option for compact notices.StackAuthIconandCursorIcontoicons.tsxfor MDX use.Buttonand icons inmdx-components.tsx.This description was created by
for d8ef95c. You can customize this summary. It will automatically update as commits are pushed.
Summary by CodeRabbit
New Features
Documentation