From 5114a355d9ada9bcb508d8621987004adeeaec20 Mon Sep 17 00:00:00 2001 From: "Alexandro T. Netto" Date: Sun, 10 May 2026 18:01:31 -0700 Subject: [PATCH 1/2] feat(web): universal-agent install prompt as primary action MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Both existing install panels assumed Claude Code's CLI surface — the plugin marketplace one is Claude-Code-only by design, and the "any MCP client" panel ironically shipped the `claude mcp add ...` one-liner. Anyone using Cursor / Codex / Cline / Aider had to translate. Lead with a copyable prompt instead. The user pastes it into any agent chat and the agent installs the MCP its own way (Claude Code's `claude mcp add`, Cursor's `~/.cursor/mcp.json`, Codex's config, etc.) and reads the linked SKILL.md to learn when to call show_ui / check_result. The two CLI one-liners aren't gone — they're tucked behind a "Or run a CLI command directly" disclosure for power users who want to skip the round-trip through their agent. Step 1 of "How it works" also reframes from "Install in Claude Code" to "Install in your agent". Also fixes a stale alias reference in requests.prod.http: `viewHost` was still pointing at the legacy `pagent.vercel.app` instead of the canonical `agent-ui-session.vercel.app` declared in #9. --- apps/web/home.ts | 166 ++++++++++++++++++++++++++++++++++----------- requests.prod.http | 2 +- 2 files changed, 129 insertions(+), 39 deletions(-) diff --git a/apps/web/home.ts b/apps/web/home.ts index 60fd089..8f5662b 100644 --- a/apps/web/home.ts +++ b/apps/web/home.ts @@ -1,8 +1,19 @@ import { LitElement, html, css } from 'lit'; -type InstallKind = 'plugin' | 'http'; +type InstallKind = 'prompt' | 'plugin' | 'http'; + +const AGENT_PROMPT = `Add the pagent MCP server to your tools so you can render real UI forms for me instead of asking in chat. + +MCP server (streamable HTTP): + https://pagent.up.railway.app/mcp + +Skill (when and how to use it — read this): + https://raw.githubusercontent.com/blockful/pagent/main/skills/pagent/SKILL.md + +Install the MCP however your client expects, read the skill, then confirm by listing the show_ui and check_result tools.`; const INSTALL_COMMANDS: Record = { + prompt: AGENT_PROMPT, plugin: '/plugin marketplace add blockful/pagent\n/plugin install pagent@pagent', http: 'claude mcp add --scope project --transport http pagent "https://pagent.up.railway.app/mcp"', }; @@ -278,6 +289,14 @@ class HomePage extends LitElement { white-space: pre; overflow-x: auto; } + .install-body.is-prompt { + font-size: 13px; + line-height: 1.65; + white-space: pre-wrap; + word-break: break-word; + max-height: 320px; + overflow-y: auto; + } .install-body .prompt { color: var(--accent); user-select: none; @@ -300,6 +319,53 @@ class HomePage extends LitElement { font-size: 11.5px; } + .cli-fallback { + margin-top: 28px; + max-width: 640px; + animation: rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; + animation-delay: 0.2s; + } + + .cli-fallback summary { + cursor: pointer; + list-style: none; + font-family: 'JetBrains Mono', ui-monospace, monospace; + font-size: 11.5px; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--muted); + padding: 8px 0; + display: inline-flex; + align-items: center; + gap: 10px; + transition: color 0.15s ease; + } + .cli-fallback summary::-webkit-details-marker { + display: none; + } + .cli-fallback summary::before { + content: '+'; + font-size: 14px; + color: var(--accent); + transition: transform 0.2s ease; + display: inline-block; + width: 12px; + text-align: center; + } + .cli-fallback[open] summary::before { + content: '−'; + } + .cli-fallback summary:hover { + color: var(--ink); + } + .cli-fallback .install { + margin-top: 14px; + animation: none; + } + .cli-fallback .install:first-of-type { + margin-top: 16px; + } + .terminal { margin-top: 18px; max-width: 640px; @@ -507,50 +573,74 @@ class HomePage extends LitElement {
- Install · Claude Code + Install · Any agent
- 
›/plugin marketplace add blockful/pagent
-›/plugin install pagent@pagent
+ 
${AGENT_PROMPT}
- Verify with /mcp — you'll see show_ui & - check_result. + Paste into any chat with your agent. Cursor, Claude Code, Codex, Cline, Aider — + anything that speaks MCP installs itself.
-
-
- Or via HTTP · any MCP client - +
+ Or run a CLI command directly + +
+
+ Claude Code · plugin marketplace + +
+ 
›/plugin marketplace add blockful/pagent
+›/plugin install pagent@pagent
+
+ Verify with /mcp — you'll see show_ui & + check_result. +
- 
›claude mcp add --scope project --transport http pagent "https://pagent.up.railway.app/mcp"
-
- Same tools, no local install. Works with Codex, OpenCode, Cursor, Cline, anything - that speaks streamable HTTP MCP. + +
+
+ HTTP MCP · any client + +
+ 
›claude mcp add --scope project --transport http pagent "https://pagent.up.railway.app/mcp"
+
+ Same tools, no local install. Works with Codex, OpenCode, Cursor, Cline, anything + that speaks streamable HTTP MCP. +
-
+
-
- Or run a CLI command directly - -
-
- Claude Code · plugin marketplace - -
- 
›/plugin marketplace add blockful/pagent
-›/plugin install pagent@pagent
-
- Verify with /mcp — you'll see show_ui & - check_result. -
-
- -
-
- HTTP MCP · any client - -
- 
›claude mcp add --scope project --transport http pagent "https://pagent.up.railway.app/mcp"
-
- Same tools, no local install. Works with Codex, OpenCode, Cursor, Cline, anything - that speaks streamable HTTP MCP. -
-
-
-