AI agents (MCP)
Connect Claude
Claude can design in Popcorn Editor through the MCP server at your app origin + /mcp/popcorn
(streamable HTTP). This page uses https://popcorneditor.com/mcp/popcorn as a placeholder; your
exact URL is shown in the app under Settings → Your agent access. The Claude apps
authenticate with OAuth; Claude Code can use either OAuth or an agent token. For what connected
agents can actually do, see the overview.
Claude apps (web, desktop, mobile)
Custom connectors are configured on your Claude account rather than on one device, so you set this up once and it is available in every Claude client you sign into, the mobile apps included.
- Open Customize → Connectors.
- Click +, then Add custom connector.
- Enter any name (for example "Popcorn Editor") and your MCP URL
(
https://popcorneditor.com/mcp/popcorn). - Under Advanced settings, leave the OAuth Client ID and OAuth Client Secret fields empty. The server registers the client itself.
- Click Add, then Connect.
- 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.
On Team and Enterprise plans, an owner adds the connector first under Organization settings → Connectors. Members then open Customize → Connectors and click Connect on it.
Turn it on in a conversation. Connectors are not active in every chat by default. Use the + button in the composer and pick your Popcorn connector for that conversation.
"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 occasionally moves these settings and changes which plans include custom connectors. If the menu path above does not match what you see, look for "connectors" in your Claude settings; the URL you paste never changes.
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://popcorneditor.com/mcp/popcorn --header "Authorization: Bearer <token>"
Popcorn shows you this exact command, with your URL and token already filled in, right after you mint the token. Copy it from there rather than assembling it by hand.
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://popcorneditor.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, render it so you can
check the layout, then create it and give me the link.
Claude reads the 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, patching them and starting from templates, is in the tools reference. For token scopes, expiry, and revocation, see Tokens & security. For a worked print job end to end, see Make print-ready designs by chatting with ChatGPT or Claude.