diff --git a/README.md b/README.md index 762aa11..0be91e8 100644 --- a/README.md +++ b/README.md @@ -322,16 +322,31 @@ Specs live in git (`docs/specs/*.md` by convention), not in CodePlans. Link a sp --- -## Connect Claude (MCP) +## Connect Claude Code or Cursor (MCP) -CodePlans ships an MCP server at `/api/mcp/mcp` (Streamable HTTP). Create an API key in **Settings → API Keys**, then: +CodePlans ships an MCP server at `/api/mcp/mcp` (Streamable HTTP). Create an API key in **Settings → API Keys** — the settings page shows these snippets with your host and freshly minted key pre-filled. + +**Claude Code** (user scope — available in every project): ```bash -claude mcp add --transport http codeplans http://localhost:3000/api/mcp/mcp \ +claude mcp add --scope user --transport http codeplans http://localhost:3000/api/mcp/mcp \ --header "Authorization: Bearer cpk_your_key" ``` -Claude can then read plans/work items/tech debt and (with a write-scope key) model products, assets, and dependencies, manage plans end-to-end (create, target assets, activate/complete), file work items, manage tasks, and record branch/PR status on plan assets. Keys act as your user, so org access rules and mirrored-field protections apply unchanged. See [`docs/specs/mcp-server-spec.md`](docs/specs/mcp-server-spec.md). +**Cursor** — add to `~/.cursor/mcp.json` (or `.cursor/mcp.json` per project), then enable under Settings → MCP: + +```json +{ + "mcpServers": { + "codeplans": { + "url": "http://localhost:3000/api/mcp/mcp", + "headers": { "Authorization": "Bearer cpk_your_key" } + } + } +} +``` + +Your agent can then read plans/work items/tech debt and (with a write-scope key) model products, assets, and dependencies, manage plans end-to-end (create, target assets, activate/complete), file work items, manage tasks, and record branch/PR status on plan assets. Keys act as your user, so org access rules and mirrored-field protections apply unchanged. See [`docs/specs/mcp-server-spec.md`](docs/specs/mcp-server-spec.md). --- diff --git a/app/(dashboard)/settings/api-keys-panel.tsx b/app/(dashboard)/settings/api-keys-panel.tsx index 9f658da..0368a31 100644 --- a/app/(dashboard)/settings/api-keys-panel.tsx +++ b/app/(dashboard)/settings/api-keys-panel.tsx @@ -1,13 +1,14 @@ 'use client' -import { useState, useTransition } from 'react' +import { useEffect, useState, useTransition } from 'react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Badge } from '@/components/ui/badge' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' -import { KeyRound, Plus, Trash2, Copy } from 'lucide-react' +import { KeyRound, Plus, Trash2, Copy, TerminalSquare } from 'lucide-react' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { formatDateShort } from '@/lib/utils' import { createApiKeyAction, revokeApiKeyAction } from '../actions' @@ -40,6 +41,7 @@ export function ApiKeysPanel({ keys }: { keys: ApiKeyRow[] }) { } return ( + <>
@@ -130,5 +132,93 @@ export function ApiKeysPanel({ keys }: { keys: ApiKeyRow[] }) { )} + + + ) +} + +/** Copy-paste client setup, shown alongside key generation. */ +function ConnectCard({ mintedKey }: { mintedKey: string | null }) { + const [origin, setOrigin] = useState('https://your-codeplans-host') + const [copied, setCopied] = useState(null) + useEffect(() => setOrigin(window.location.origin), []) + + const key = mintedKey ?? 'cpk_your_key' + const claudeSnippet = `claude mcp add --scope user --transport http codeplans ${origin}/api/mcp/mcp \\ + --header "Authorization: Bearer ${key}"` + const cursorSnippet = `{ + "mcpServers": { + "codeplans": { + "url": "${origin}/api/mcp/mcp", + "headers": { "Authorization": "Bearer ${key}" } + } + } +}` + + function copy(label: string, text: string) { + navigator.clipboard.writeText(text) + setCopied(label) + setTimeout(() => setCopied(null), 1500) + } + + function Snippet({ label, text }: { label: string; text: string }) { + return ( +
+
+          {text}
+        
+ + {copied === label && ( + Copied + )} +
+ ) + } + + return ( + + +
+ + Use with Claude Code & Cursor +
+ + {mintedKey + ? 'Your new key is already filled in below — copy a snippet before navigating away.' + : 'Generate a key above, then connect your agent. Snippets show a placeholder key.'} + +
+ + + + Claude Code + Cursor + + +

+ Run once in a terminal — --scope user makes the server available in every project: +

+ +

+ Verify with claude mcp list, then ask Claude to “list my CodePlans products”. +

+
+ +

+ Add to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json in a repo (that project only), then enable it under Cursor Settings → MCP: +

+ +
+
+
+
) } diff --git a/package.json b/package.json index 4287a81..72b123e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "codeplans", - "version": "0.3.17", + "version": "0.3.18", "description": "Manage and track coordinated changes across your software architecture.", "author": "Sai Prakash ", "homepage": "https://codeplans.ai",