Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 21 additions & 48 deletions src/routes/connect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -280,25 +280,33 @@ const QUICK_PROMPTS: Prompt[] = [
title: "One prompt → fully connected (recommended)",
code: `Connect me to the "Super Agent Skill" MCP server with full access (read + write tools).

Run this in my shell and follow the browser login it opens:
Use the Streamable HTTP endpoint ${ENDPOINT}.

npx -y super-agent connect --client claude-code
1. Add it to my MCP client (Claude Code / Claude Desktop / Cursor / Codex / VS Code / Windsurf).
- Claude Code: claude mcp add --transport http super-agent-skill ${ENDPOINT}
- Claude Desktop / Cursor / VS Code: write the JSON config for my OS (preserve existing servers).
2. For write tools (upload_packages, request_primitive, report_execution): the client opens OAuth in my browser on first call. If my client doesn't auto-OAuth, mint a token at https://superagentskill.com/account/tokens and add Authorization: Bearer <token> to the MCP config.
3. Restart the client, call the MCP tool "overview", and show me the intent→tool map.

Notes:
- It does OAuth (loopback PKCE), stores the token in ~/.superagentskill, and writes my client's MCP config automatically.
- Swap --client for: claude | cursor | codex | vscode | windsurf.
- After it finishes, restart the client, then call the MCP tool "overview" and show me the intent→tool map.
If anything fails, paste the exact command output and the config file it wrote.`,
If anything fails, paste the exact error and the config file you wrote.`,
},
{
title: "Enable write tools (OAuth)",
title: "Enable write tools (OAuth or PAT)",
code: `I want to use the auth-gated write tools (upload_packages, request_primitive, report_execution) of the Super Agent Skill MCP.

1. Run: npx -y super-agent login (complete the browser OAuth login)
2. Run: npx -y super-agent status (confirm the token is valid)
3. If my client supports header auth, ensure the MCP config sends Authorization: Bearer <the saved access_token from ~/.superagentskill/credentials.json>.
Otherwise wire it through the local bridge: command "npx", args ["-y","super-agent","mcp"].
4. Restart the MCP connection and call "overview" to verify write tools are listed.`,
Pick whichever auth my client supports best:

A. OAuth (recommended — Claude Desktop, Cursor, Codex, VS Code with MCP OAuth support):
1. Add the server with URL ${ENDPOINT}.
2. On first write-tool call, the client opens a browser tab to https://superagentskill.com/oauth/authorize — approve.
3. Token is stored by the client and refreshed automatically.

B. Personal access token (any client with header auth — Hermes, OpenClaw, n8n, curl, CI):
1. Mint a token at https://superagentskill.com/account/tokens (shown once; store it).
2. Add Authorization: Bearer <sas_…> to the MCP config or HTTP request.
3. Verify with: curl -i -X POST https://superagentskill.com/api/packages/upload -H "Authorization: Bearer $SAS_TOKEN" -H "Content-Type: application/json" -d '{"files":[{"name":"x.md","content":"# test"}]}'

After auth is wired, restart the MCP connection and call "overview" to confirm write tools are listed.`,
},
{
title: "Codex CLI / OpenCode",
Expand Down Expand Up @@ -573,41 +581,6 @@ function ConnectPage() {
</p>
</section>

{/* ============ ONE-COMMAND (CLI) PATH ============ */}
<section className="mt-10 rounded-2xl border border-primary/30 bg-primary/5 p-6">
<div className="flex items-center gap-2">
<Terminal className="h-4 w-4 text-primary" />
<p className="text-xs font-semibold uppercase tracking-wider text-primary">
Plug and play · one command
</p>
</div>
<h2 className="mt-2 text-xl font-semibold tracking-tight">
OAuth login + client auto-config, no JSON editing
</h2>
<p className="mt-2 max-w-2xl text-sm text-muted-foreground">
The CLI runs the full OAuth flow in your browser (loopback PKCE),
stores the token locally, and writes the MCP config for your client
— including the auth-gated write tools. It also ships a local stdio
bridge that injects and refreshes the token automatically.
</p>
<div className="mt-4">
<CodeBlock
filename="terminal"
lang="bash"
code={`npx super-agent connect --client claude-code
# clients: claude-code · claude · cursor · codex · vscode · windsurf

npx super-agent status # token state
npx super-agent logout # revoke + forget`}
/>
</div>
<p className="mt-3 text-[11px] text-muted-foreground">
Stdio-only client? Point it at{" "}
<code className="font-mono">npx -y super-agent mcp</code> — the
bridge handles auth for you.
</p>
</section>

{/* ============ JUMP NAV ============ */}
<nav className="mt-10 flex flex-wrap gap-2 border-y border-border py-4">
{[
Expand Down
Loading