Skip to content

Consolidate MCP setup into unified install guide component#71

Open
marcopesani wants to merge 5 commits intomainfrom
claude/improve-mcp-install-ux-6lqGx
Open

Consolidate MCP setup into unified install guide component#71
marcopesani wants to merge 5 commits intomainfrom
claude/improve-mcp-install-ux-6lqGx

Conversation

@marcopesani
Copy link
Owner

Summary

Replaced the separate McpServerUrl and ApiKeyCard components with a new unified McpInstallGuide component that provides a complete, step-by-step setup experience for connecting AI clients to Brevet's MCP endpoint.

Key Changes

  • New Component: Created McpInstallGuide component with comprehensive setup instructions for multiple AI clients (Claude, ChatGPT, Claude Code, Cursor)
  • Integrated API Key Management: Moved API key generation and rotation functionality directly into the install guide with inline display and management
  • Client-Specific Instructions: Added tabbed interface with platform-specific setup steps for:
    • Claude.ai/Claude Desktop (custom connector setup)
    • ChatGPT (developer mode connector creation)
    • Claude Code (CLI-based MCP server registration)
    • Cursor (JSON configuration file setup)
  • Reference Sections: Added expandable sections for available tools, authentication reference, and MCP Inspector testing instructions
  • Improved UX:
    • Consolidated multi-card layout into single card with tabs
    • Real-time API key display after generation with copy functionality
    • Clear warnings about key security and rotation implications
    • Placeholder text that updates with actual key when generated
  • Updated Loading State: Simplified skeleton loader to match new unified component structure
  • API Revalidation: Added /dashboard/mcp path revalidation when API key is regenerated

Implementation Details

  • Component uses React hooks for state management (API key, tab selection, copy feedback)
  • Includes helper components: CopyButton, CodeBlock, Step, ApiKeyInline, ExpandableSection
  • Supports both modern clipboard API and fallback for older browsers
  • Generates dynamic MCP endpoint URLs based on user's humanHash
  • Integrates with existing regenerateApiKey server action for key management

https://claude.ai/code/session_01Pi2C7fV57P2vRkoX1JzKjy

Replace generic MCP URL + separate API key cards with a unified
install flow that reduces cognitive effort:

- Add tabbed client picker (Claude, ChatGPT, Claude Code, Cursor)
  with pre-filled, copy-ready configuration for each client
- Inline API key generation into the install flow so users see
  complete instructions immediately after generating a key
- Collapse tool list, auth reference, and inspector docs into
  expandable sections to reduce visual noise
- Add numbered step components and full-config copy buttons
- Update loading skeleton to match new single-card layout

Inspired by Vercel's MCP docs pattern of per-client instructions
with zero-assembly configuration snippets.

https://claude.ai/code/session_01Pi2C7fV57P2vRkoX1JzKjy
@vercel
Copy link

vercel bot commented Feb 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
brevet Ready Ready Preview, Comment Feb 28, 2026 2:41pm

Request Review

Copy link
Contributor

@devin-ai-integration devin-ai-integration bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 5 additional findings.

Open in Devin Review

…bile tabs

- Claude tab: use ?api_key= in URL instead of auth headers (not supported)
- Cursor tab: add 1-click install button via cursor:// deeplink protocol
- Mobile: switch tabs to 2x2 grid on small screens, abbreviate "Claude Code" to "CLI"

https://claude.ai/code/session_01Pi2C7fV57P2vRkoX1JzKjy
devin-ai-integration[bot]

This comment was marked as resolved.

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Available tools, authentication reference, and MCP Inspector testing
are informational — not part of the setup flow. Give each its own card
for clearer visual separation. Remove unused ExpandableSection component
and ChevronDown import.

https://claude.ai/code/session_01Pi2C7fV57P2vRkoX1JzKjy
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants