Use your library with AI (MCP)

Add PocketUI to your AI tool, sign in and click Allow: it can then read your folders. Ask for a page "in my Dark UI style" and it uses what you saved there. It can read your library, never change it.

Where to click Your AI toolConnectors or MCP settingsAdd PocketUIAllow
The assistant reads your library and answers with your saved styles.

Steps

  1. 1

    Copy the PocketUI server address: https://pocketui.app/api/mcp

  2. 2

    Add it to your AI tool. Each tool has its own place for it, below.

  3. 3

    Your AI tool opens PocketUI. Sign in, check what it can see, and click Allow.

    No key to copy: the tool signs in for you, like "Sign in with Google".

  4. 4

    Test it: ask your AI tool "Use PocketUI. Show me my library folders."

ChatGPT

In ChatGPT, open Settings → Apps & Connectors → Advanced settings and turn on Developer mode. Then create a connector named PocketUI with this URL and OAuth.

Connector URL

https://pocketui.app/api/mcp

Claude (web, desktop and phone)

In Claude, open Settings → Connectors → Add custom connector, paste this URL and click Connect.

Connector URL

https://pocketui.app/api/mcp

Claude Code

Run this in your terminal. Then type /mcp inside Claude Code, pick pocketui and choose Authenticate.

Terminal

claude mcp add pocketui --transport http --scope user https://pocketui.app/api/mcp

Cursor

Add this to your Cursor MCP settings (Settings → MCP → Add new MCP server), then click Connect next to PocketUI.

~/.cursor/mcp.json

{
  "mcpServers": {
    "pocketui": {
      "url": "https://pocketui.app/api/mcp"
    }
  }
}

VS Code (GitHub Copilot)

Add this to your workspace, then start PocketUI from the file and sign in when VS Code asks.

.vscode/mcp.json

{
  "servers": {
    "pocketui": {
      "type": "http",
      "url": "https://pocketui.app/api/mcp"
    }
  }
}

Windsurf, Gemini CLI, Codex and others

Tools that run local MCP servers connect through mcp-remote, which opens your browser to sign in the first time. Put this in the tool’s MCP settings (Codex uses the same thing in TOML, see the Codex page).

MCP settings

{
  "mcpServers": {
    "pocketui": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://pocketui.app/api/mcp"
      ]
    }
  }
}

With a personal token instead

For scripts, or tools that cannot open a browser, use a personal token: go to your profile, open AI, and under Personal token click Generate. Copy it straight away: it is shown only once. Send it as Authorization: Bearer <token>; your profile shows the ready-made setup for Claude Code, Cursor and VS Code.

Disconnecting

Every app you connected is listed in your profile under AI → Connected apps. Click Disconnect and its access ends at once. Personal tokens are revoked from the same page.

Things to ask

  • "Use the palette from my @Dark UI folder for this page."
  • "Use @Dark UI / Pricing card as the reference for this component."
  • "Use my saved colors from PocketUI to create Tailwind theme tokens."

Tips

  • AI access works on every plan, Free included.
  • Mention a folder with @ and its name, and a single save with @Folder / Save name.
  • Every tool your AI can call is in the MCP tools reference; every endpoint is in the MCP server reference.