Connect Claude

Claude can design in Popcorn Editor through the MCP server at your app origin + /mcp/popcorn (streamable HTTP). This page uses https://app.example.com/mcp/popcorn as a placeholder — your exact URL is shown in the app under Settings → Your agent access. The connector apps (Claude.ai and Claude Desktop) authenticate with OAuth; Claude Code can use either OAuth or an agent token. For what connected agents can actually do, see the overview.

Claude.ai & Claude Desktop#

Claude.ai on the web and Claude Desktop use custom connectors — a paid-plan Claude feature that Anthropic marks as beta. The steps are identical in both apps:

1. Open Settings → Connectors and click Add custom connector.
2. Enter any name (e.g. "Popcorn Editor") and your MCP URL (https://app.example.com/mcp/popcorn).
3. In Advanced settings, leave the OAuth Client ID and OAuth Client Secret fields empty — the server supports dynamic client registration, so Claude registers itself.
4. Click Add, then click Connect.
5. A Popcorn sign-in page opens. Sign in, then click Authorize on the consent screen.

Once authorized, Claude can read and write: list and read your designs, create new ones, and edit existing ones. Access tokens expire after 24 hours and refresh automatically for up to 30 days. To revoke access, remove the connector in the Claude app — access lapses at the next token refresh.

"The dialog only shows OAuth fields — where do I put my token?" You don't. The connector flow uses OAuth instead of a token: paste the URL, leave the OAuth fields blank, and sign in through the browser when prompted. Agent tokens are for CLI and IDE clients like Claude Code — see Tokens & security.

Claude Code (terminal)#

Install Claude Code if you haven't already (if claude says command not found, it isn't installed):

npm install -g @anthropic-ai/claude-code

Then connect using either method.

With an agent token — mint one in Popcorn under Settings → Your agent access (choose Read & write or Read only; the token is shown once), then:

claude mcp add --transport http popcorn https://app.example.com/mcp/popcorn --header "Authorization: Bearer <token>"

Run /mcp inside Claude Code to confirm the popcorn server is listed and connected.

With OAuth — add the server without a header, then authenticate interactively:

claude mcp add --transport http popcorn https://app.example.com/mcp/popcorn

Inside Claude Code, run /mcp, select the popcorn server, and choose Authenticate — it opens the same browser sign-in and consent flow as the connector apps.

Try it#

Ask Claude:

Design an A5 flyer for our summer opening — validate it, create it, give me the link.

Claude reads the server's schema and authoring guide, drafts a Design Document, loops validate-design until it passes, then calls create-design. The response includes the new design's uuid, title, and an editor_url — open it to see the design in the editor and keep editing by hand or by follow-up prompts. MCP usage consumes no Popcorn AI credits; the connected Claude brings its own model.

The full tool list — including reading designs back, updating them, and starting from templates — is in the tools reference. For token scopes, expiry, and revocation, see Tokens & security.