Add MCP client tabs to onboarding with copyable configs - #761
Conversation
Give host-specific setup for Cursor, Codex/ChatGPT, Claude Desktop, Claude Code, OpenCode, VS Code, and other clients, including JSON/TOML snippets with copy buttons and a note that non-coding agents are fine for using packages while coding agents are better for creating them. Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds client-specific MCP configuration builders and a tabbed onboarding interface for Cursor, Claude, Codex, OpenCode, and VS Code. The onboarding route, documentation, and end-to-end coverage now reflect the client setup instructions. ChangesMCP onboarding
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant AgentUser
participant Onboarding
participant ClientTabs
participant MCPClient
AgentUser->>Onboarding: Open Get started page
Onboarding->>ClientTabs: Provide mcpServerUrl
ClientTabs->>AgentUser: Show client-specific configuration
AgentUser->>MCPClient: Add Kody MCP configuration
MCPClient->>Onboarding: Connect using MCP URL
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
|
🔎 Preview deployed: https://kody-pr-761.kody-a99.workers.dev Worker: Mocks:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/worker/client/routes/onboarding-mcp-client-tabs.tsx (1)
73-80: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider extracting the URL snippet into a reusable helper.
The
preblock andCopyTextButtonfor themcpServerUrlare repeated identically across multiple tabs (Cursor, Codex/ChatGPT, Claude Desktop, and Other). Extracting this into a local helper component would reduce duplication and clean up the tab definitions.♻️ Proposed refactor
Define a helper at the top of the file:
function UrlSnippet(handle: Handle<{ url: string }>) { return () => ( <> <pre mix={css(codeBlockCss)}>{handle.props.url}</pre> <div mix={css(buttonRowCss)}> <CopyTextButton value={handle.props.url} idleLabel="Copy MCP URL" variant="primary" /> </div> </> ) }Then replace the repeated blocks with:
<UrlSnippet url={mcpServerUrl} />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/worker/client/routes/onboarding-mcp-client-tabs.tsx` around lines 73 - 80, Extract the repeated mcpServerUrl preformatted block and CopyTextButton markup into a local UrlSnippet helper component near the top of the file, accepting the URL through its props and preserving the existing styling and button configuration. Replace the identical URL sections in the Cursor, Codex/ChatGPT, Claude Desktop, and Other tab definitions with UrlSnippet usage.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/worker/client/routes/onboarding-mcp-client-tabs.tsx`:
- Around line 61-63: Update the mcpClientTabs.map rendering to add a stable key
prop to each Tab, using the existing tab.id identifier, while preserving the
current name and label props.
---
Nitpick comments:
In `@packages/worker/client/routes/onboarding-mcp-client-tabs.tsx`:
- Around line 73-80: Extract the repeated mcpServerUrl preformatted block and
CopyTextButton markup into a local UrlSnippet helper component near the top of
the file, accepting the URL through its props and preserving the existing
styling and button configuration. Replace the identical URL sections in the
Cursor, Codex/ChatGPT, Claude Desktop, and Other tab definitions with UrlSnippet
usage.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 53d9e6b2-4c05-465b-81ac-8a2ee6ba7759
📒 Files selected for processing (5)
docs/use/connect-your-agent.mdpackages/worker/client/routes/onboarding-mcp-client-tabs.tsxpackages/worker/client/routes/onboarding-mcp-clients.node.test.tspackages/worker/client/routes/onboarding-mcp-clients.tspackages/worker/client/routes/onboarding.tsx
| {mcpClientTabs.map((tab) => ( | ||
| <Tab name={tab.id}>{tab.label}</Tab> | ||
| ))} |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add a key prop to the mapped Tab components.
React requires a key prop when rendering arrays of elements to properly track them during reconciliation.
♻️ Proposed fix
{mcpClientTabs.map((tab) => (
- <Tab name={tab.id}>{tab.label}</Tab>
+ <Tab key={tab.id} name={tab.id}>{tab.label}</Tab>
))}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {mcpClientTabs.map((tab) => ( | |
| <Tab name={tab.id}>{tab.label}</Tab> | |
| ))} | |
| {mcpClientTabs.map((tab) => ( | |
| <Tab key={tab.id} name={tab.id}>{tab.label}</Tab> | |
| ))} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/worker/client/routes/onboarding-mcp-client-tabs.tsx` around lines 61
- 63, Update the mcpClientTabs.map rendering to add a stable key prop to each
Tab, using the existing tab.id identifier, while preserving the current name and
label props.
The invite-signup verification flow asserted a single /mcp text match; client tabs render many config snippets, so assert the tablist and Copy MCP URL button instead. Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
3 participants
Summary
docs/use/connect-your-agent.md.Test plan
npm run typecheck/onboarding, switch tabs, copy JSON/TOML/URLSystem recap — composes existing primitives (low risk)
Mode: recap · Base:
main· Head:cursor/onboarding-mcp-client-tabs-a1b2Classification: composes — no primitives added or changed; this PR wires existing UI and onboarding surfaces together with client-specific copy and config snippets.
Primitives touched
app-uimcp-server/mcp(no server changes)System map
Risk notes
serversvsmcpServers) are called out explicitly.Summary by CodeRabbit
https://<this-host>/mcpURL.