The design MCP server for Claude Code.

One command connects Claude Code to 300,000+ real app screens, 21,000+ flows, and searchable microcopy — so your agent researches shipped products before it designs.

Install in Claude Code Check trial eligibility

Included in all paid plans from $9.99/mo. Trial eligibility is shown at checkout. OAuth — no API key.

terminal

$ claude mcp add --transport http --scope user gummble https://mcp.gummble.com/mcp

Added HTTP MCP server gummble

$ claude

> /mcp

gummble ✔ connected · 14 tools

> Find real mobile paywalls with annual-discount framing

⏺ gummble_search_screens(query: "paywall annual discount")

⎿ 42 screens · Revolut, Duolingo, Headspace…

Add Gummble MCP to Claude Code

Follow three setup steps. You need Claude Code installed and an active paid Gummble plan or an already-active eligible trial.

1
Register the Gummble MCP server
Open a terminal and run this command. The user scope keeps Gummble available in all your projects.
```
claude mcp add --transport http --scope user gummble https://mcp.gummble.com/mcp
```
2
Authorize
Start a Claude Code session and run the /mcp command. Choose gummble, select Authenticate, then sign in with your Gummble account to authorize access.
```
/mcp
```
3
Verify the connection
Run a real Gummble request. A successful result confirms both OAuth and tool access.
```
claude -p "Use Gummble to search for onboarding screens."
```
4
Verify the connection
Run claude mcp list in your terminal, or /mcp inside a session — gummble should show as connected with 14 tools.

Pick a scope that fits your team

Claude Code registers MCP servers at three scopes. Where you put Gummble changes who gets it.

--scope user (recommended)

Registers Gummble once for every project on your machine. This is what the install command above uses.

--scope project

Writes the server to a .mcp.json file in the repo root. Commit it and every teammate who opens the project gets Gummble MCP with their own OAuth login — access is per-account, so nobody shares credentials.

--scope local

Keeps the server private to you in the current project only. Useful for trying it out before rolling it into a shared .mcp.json.

What Claude Code does with it

Claude Code is agentic — it plans research, chains tool calls, and cites what it found. These prompts are copy-paste starting points.

Agentic design research

Research 5 real onboarding flows for fitness apps with gummble, then write a spec for ours that cites each reference.

Claude Code plans the research, runs the searches itself, and grounds the spec in shipped products instead of inventing patterns.

gummble_search_flowsgummble_get_flow_screens

Reference-first building

Before you build the paywall component, search gummble for mobile paywalls with annual-discount framing and list the 3 layout decisions they share.

The agent deconstructs real paywalls first, so the component it writes starts from evidence, not a generic template.

gummble_search_screensgummble_get_screen_detail

Microcopy from shipped apps

Search gummble for empty-state microcopy in fintech apps, summarize the tone patterns, and rewrite our empty states to match.

Real product wording — empty states, errors, upgrade nudges — is searchable text, not something to guess from screenshots.

gummble_search_microcopy

All 14 tools

Every tool is read-only. Batch variants exist so multi-screen research doesn't flood your context window — responses are also capped server-side to stay context-friendly.

Search

gummble_search_screens
Search 300,000+ real app screens by pattern, domain, or keyword.
gummble_search_sections
Search real marketing-site sections such as heroes, pricing, and social proof.
gummble_search_flows
Find captured user journeys — onboarding, checkout, upgrade — across 21,000+ browsable flows.
gummble_search_microcopy
Search real product copy: empty states, errors, paywalls, confirmations.
gummble_search_patterns
Browse screens grouped by UI pattern family.
gummble_search_apps
Find any of 1,500+ apps in the catalog by name or category.
gummble_search_store_screenshots
Search App Store marketing screenshots.

Inspect

gummble_get_screen_detail
Full metadata and visual reference for one screen.
gummble_get_flow_screens
Every screen in a flow, in order.
gummble_get_app
An app's profile with its screens and flows.
gummble_get_store_screenshots
Store screenshots for one app.
gummble_find_similar_screens
Given a screen, find visually similar ones.

Batch

gummble_get_screen_details_batch
Look up many screens in one call to keep your context window small.
gummble_get_flow_screens_batch
Expand several flows at once.

Safe to hand to an agent.

Claude Code runs tools autonomously, so the server's security posture matters more than usual.

Read-only by design

All 14 tools are search and lookup. No write access, no destructive operations, and every tool declares a read-only annotation your client can verify.

OAuth, not API keys

Authorization runs through browser sign-in. Nothing to paste into config files, nothing to leak in dotfiles or CI logs, and you can revoke access from your Gummble account at any time.

Plan-scoped and rate-limited

Requests are checked against your plan entitlement and fair-use rate limits, so a runaway agent loop can't burn anything down.

Claude Code questions, answered.

How do I add the Gummble MCP server to Claude Code?

Run one command in your terminal: claude mcp add --transport http --scope user gummble https://mcp.gummble.com/mcp. Then start a Claude Code session, run /mcp, choose gummble, and select Authenticate to sign in with your Gummble account. No API key is needed.

What is the difference between --scope user and --scope project?

--scope user makes Gummble available in every project on your machine. --scope project writes the server into a .mcp.json file you can commit, so teammates get it automatically — each person still authenticates with their own Gummble account.

Why does /mcp show gummble as needing authentication?

Gummble MCP uses OAuth instead of API keys, so the first connection needs a browser sign-in. In the /mcp menu, choose gummble, select Authenticate, and approve access. Tokens refresh automatically afterwards.

Can Claude Code modify anything through Gummble MCP?

No. All 14 tools are read-only search and lookup operations, and each one declares a read-only annotation that Claude Code can verify. There is no write access and no destructive operation on the server.

Do I need an API key?

No. Gummble MCP authenticates with OAuth through your browser. You can revoke access at any time from your Gummble account settings without rotating any keys.

Which Gummble plan do I need?

MCP access is included on every paid plan, starting at $9.99/month. Check the pricing page and checkout for current trial eligibility before subscribing.

How do I remove the server?

Run claude mcp remove gummble. If you added it with --scope project, also delete the entry from the repo's .mcp.json.

Keep going

Server URL: https://mcp.gummble.com/mcp · Streamable HTTP · legacy SSE at /sse