feat: MCP Connect guide -- live key injection + connection test (OPE-168)#292
Merged
DevanshuNEU merged 3 commits intoMar 11, 2026
Merged
Conversation
…st (OPE-168) ConnectGuide enhancements: - Active API key injected into config snippets (was hardcoded ci_your-key-here) - Per-tab setup hints (Settings > Developer > Edit Config, etc.) - Cursor config now includes Authorization header with user's key - Wifi icon in section header New ConnectionTest widget: - 3-step animated health check: MCP reachable -> Auth verified -> Repos accessible - Sequential test with per-step pass/fail/running states - Emerald badges on success, destructive on failure - Error message on failure with troubleshooting hint - Test button toggles between 'Test connection' -> 'Testing...' -> 'Connected' Props flow: activeKeys[0].key_preview passed to ConnectGuide -> ConnectionTest Build: clean. No new dependencies.
|
@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughAdds a ConnectionTest component and integrates it into ConnectGuide (now accepting an API key preview and session token) to run three sequential checks (MCP health, API auth, repository access). Also introduces an exported MCP_URL constant in API config and interpolates API key into snippets. Changes
Sequence DiagramsequenceDiagram
participant User
participant ConnectGuide
participant ConnectionTest
participant MCPServer
participant APIService
participant Repository
User->>ConnectGuide: open guide / select API key
ConnectGuide->>ConnectionTest: pass activeKeyPreview & sessionToken
User->>ConnectionTest: click "Run Connection Test"
ConnectionTest->>MCPServer: GET /health (MCP_URL)
MCPServer-->>ConnectionTest: health response
ConnectionTest->>ConnectionTest: set step1 status
ConnectionTest->>APIService: authenticate using API key
APIService-->>ConnectionTest: auth success/fail
ConnectionTest->>ConnectionTest: set step2 status
ConnectionTest->>Repository: attempt repo access with token
Repository-->>ConnectionTest: access result
ConnectionTest->>ConnectionTest: set step3 status
ConnectionTest->>User: render overall pass/fail result
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
Collaborator
Author
|
@CodeRabbit review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/pages/APIKeysPage.tsx`:
- Around line 293-305: The UI is copying the preview-only value
(activeKeyPreview / keyDisplay) into generated configs and passing it to
ConnectionTest, but the backend auth (middleware.auth hashing logic) requires
the full token so the preview will always 401; change the logic so that
functions/components that build or test auth configs (referenced by keyDisplay,
activeKeyPreview, and ConnectionTest) only use the real fullKey held in memory
immediately after generation (e.g., when createKey returns the raw secret) and
never pull tokens from the /keys list; if the full key is not available fall
back to inserting an explicit placeholder and showing a “copy/paste the full key
now” instruction (manual-paste flow) rather than reusing the preview string.
- Around line 190-193: The health probe is hardcoded to
https://mcp.opencodeintel.com/health while the rest of the page uses the
env-derived API base (API_URL); change the fetch in the MCP health check to
build its base from the same config/env variable used for the API base (e.g.,
use API_URL or the existing config getter) instead of the literal string, e.g.
derive mcpBase = <existing API base source> (or derive a dedicated MCP_BASE from
env) then call fetch(`${mcpBase.replace(/\/$/,'')}/health`), leaving the
surrounding logic (update(0, 'running') and the try/catch) intact.
- Around line 314-316: The Claude MCP example in APIKeysPage.tsx currently sets
config to the multiline string starting with "claude mcp add codeintel
--transport http https://mcp.opencodeintel.com/mcp" but omits authentication;
update that config string to include an explicit header flag per Anthropic MCP
docs (e.g., add --header "Authorization: Bearer <YOUR_API_KEY>") so the snippet
shows how to send the Bearer token with the HTTP transport; locate the config
literal in the APIKeysPage component and append the header flag to the existing
command string.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 0c0e3043-606c-4494-be55-7aca51d9bb7d
📒 Files selected for processing (1)
frontend/src/pages/APIKeysPage.tsx
Connection test was broken: used key_preview (truncated, e.g. ci_80ba...e980) for Authorization header -- always 401 because backend hashes the full key. Fixed: ConnectionTest now receives the session JWT token from useAuth, which works with require_auth middleware. The test verifies the user's backend access, not the API key specifically. Added MCP_URL to config/api.ts (separate Railway service from API_URL). Health check now uses env-derived MCP_URL instead of hardcoded string. Claude Code snippet now includes --header flag for auth, matching how Desktop (env.API_KEY) and Cursor (headers.Authorization) handle it.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
frontend/src/pages/APIKeysPage.tsx (1)
316-316:⚠️ Potential issue | 🟡 MinorMissing space in Authorization header will cause auth failures.
The HTTP Authorization header syntax requires a space after the colon. The current format
Authorization:Bearerwill likely be rejected by the MCP server.🔧 Proposed fix
config: `claude mcp add codeintel \\ --transport http \\ - --header "Authorization:Bearer ${keyDisplay}" \\ + --header "Authorization: Bearer ${keyDisplay}" \\ https://mcp.opencodeintel.com/mcp`,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/APIKeysPage.tsx` at line 316, In APIKeysPage.tsx update the Authorization header string where the curl/header is constructed so it includes a space after the colon; change the header that currently reads "Authorization:Bearer ${keyDisplay}" to "Authorization: Bearer ${keyDisplay}" (locate the string near the curl/headers construction referencing keyDisplay) to ensure the MCP server accepts the header.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@frontend/src/pages/APIKeysPage.tsx`:
- Line 316: In APIKeysPage.tsx update the Authorization header string where the
curl/header is constructed so it includes a space after the colon; change the
header that currently reads "Authorization:Bearer ${keyDisplay}" to
"Authorization: Bearer ${keyDisplay}" (locate the string near the curl/headers
construction referencing keyDisplay) to ensure the MCP server accepts the
header.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 18494e68-e1c1-4e3c-9619-12255f51f4e3
📒 Files selected for processing (2)
frontend/src/config/api.tsfrontend/src/pages/APIKeysPage.tsx
'Authorization:Bearer' -> 'Authorization: Bearer' per HTTP spec. Missing space could cause header parsing failures on strict servers. Skipped preview-in-config finding: ConnectionTest already uses session JWT (fixed in prior commit). Config snippets intentionally show masked preview (ci_80ba...e980) as a visual hint -- the '...' masking clearly signals 'replace with your key'.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
frontend/src/pages/APIKeysPage.tsx (1)
200-217:⚠️ Potential issue | 🔴 CriticalThis can show “Connected” for configs that will never authenticate.
Line 293 still feeds the copyable snippets from
key_preview, but this file already treats that value as display-only/incomplete. Lines 203-217 then validate the browser session token instead, so the widget can pass even though the pasted Desktop/Code/Cursor config is unusable. Please only inject a real key whilegeneratedKeyis still in memory after creation; otherwise keep the placeholder/manual-paste flow and avoid presenting this as an API-key connection test.Also applies to: 293-327, 582-586
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/pages/APIKeysPage.tsx` around lines 200 - 217, The current auth/repo checks in APIKeysPage use the browser session token (variable token) to call `${API_URL}/keys` and `${API_URL}/repos`, which lets the widget show "Connected" even when the displayed copyable snippets come from key_preview and no real API key exists; change the logic so that the auth tests (the update(1, ...) and update(2, ...) fetches) only run when a freshly created generatedKey is still in memory (i.e., after key creation and before it’s cleared), and when running use the real generatedKey value (not token) as the Bearer credential; otherwise keep the placeholder/manual-paste UI/state (do not run the fetches and do not mark as connected). Ensure places that render copyable snippets (key_preview) remain display-only unless generatedKey is present.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/pages/APIKeysPage.tsx`:
- Around line 299-327: The snippets for Desktop/Code/Cursor currently hardcode
"https://mcp.opencodeintel.com/mcp"; update them to use the normalized MCP URL
(the same MCP_URL/MCP normalization used by the health check) instead of the
literal host so non-prod environments show correct endpoints — modify the
template strings in the config fields for the mcpServers block, the code object
config, and the cursor config to interpolate the normalized MCP base (reuse the
existing normalizedMcpUrl or MCP_URL variable) in place of the hardcoded URL
while keeping keyDisplay for the Authorization header.
- Around line 190-217: The three raw fetch probes (MCP health, auth check, repos
accessible) must be replaced with React Query calls: use
queryClient.fetchQuery() (or create test-specific hooks) instead of direct fetch
to respect retries, error/abort handling and caching; locate the probes using
MCP_URL, API_URL, token, update and setRunning in APIKeysPage.tsx and convert
each try/catch block to await queryClient.fetchQuery(key, () => fetch(...)) or
corresponding custom hooks, propagating success/fail into update(...) and
setRunning(...) and ensuring you pass abort signal and react-query options
(retry, staleTime) consistent with the app.
---
Duplicate comments:
In `@frontend/src/pages/APIKeysPage.tsx`:
- Around line 200-217: The current auth/repo checks in APIKeysPage use the
browser session token (variable token) to call `${API_URL}/keys` and
`${API_URL}/repos`, which lets the widget show "Connected" even when the
displayed copyable snippets come from key_preview and no real API key exists;
change the logic so that the auth tests (the update(1, ...) and update(2, ...)
fetches) only run when a freshly created generatedKey is still in memory (i.e.,
after key creation and before it’s cleared), and when running use the real
generatedKey value (not token) as the Bearer credential; otherwise keep the
placeholder/manual-paste UI/state (do not run the fetches and do not mark as
connected). Ensure places that render copyable snippets (key_preview) remain
display-only unless generatedKey is present.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 6ed68cd3-47d3-43a1-80b8-5242e4624da2
📒 Files selected for processing (1)
frontend/src/pages/APIKeysPage.tsx
15 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
OPE-168: MCP Connect page upgrade
What changed
ConnectGuide now injects the user's actual API key into config snippets. No more
ci_your-key-hereplaceholder -- the first active key's preview is embedded directly in the Claude Desktop, Claude Code, and Cursor configs.New ConnectionTest widget runs a 3-step live health check:
Each step shows animated pass/fail/running state. All three green = 'Connected' badge. Any failure = error message with troubleshooting hint.
Other improvements
Files changed
Build: clean. No new dependencies.
Closes OPE-168
Summary by CodeRabbit
New Features
Documentation
Bug Fixes / UI