Screenrove
Real product UI captures (onboarding, pricing, in-app screens) with design guides for coding agents.
Should I use this
Quality & Safety
Based on automated analysis of tool definitions and protocol compliance.
Context Cost
This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.
Install
One-Click Install
Add this to your `claude_desktop_config.json` file:
{
"mcpServers": {
"screenrove": {
"url": "https://screenrove.com/mcp"
}
}
}Remote endpoints
https://screenrove.com/mcpstreamable-httpWhat it can do
Tool inventory
Tools (10)
🟢build_handoff(referenceId, goal, stack, screens, includeDesign)
Build the same ready-to-follow prompt as the "Use in agent" button: ordered screens with notes, observed transitions, image URLs, the design guide and an implementation checklist. Use a product's onboarding flow (`{product}-onboarding`), its whole collection (`{product}-collection`) or any single screen id.
Input Schema
{
"type": "object",
"properties": {
"referenceId": {
"type": "string",
"description": "e.g. linear-onboarding, stripe-collection or vercel-marketing-pricing."
},
"goal": {
"type": "string",
"description": "What you want to build. Goes at the top of the prompt."
},
"stack": {
"type": "string",
"description": "Preferred stack, e.g. Next.js and Tailwind."
},
"screens": {
"type": "string",
"description": "Comma-separated screen ids to keep. Omit to include every screen in the reference."
},
"includeDesign": {
"type": "boolean",
"description": "Include the observed design guide. Set false to use your project's own design system.",
"default": true
}
},
"required": [
"referenceId"
],
"additionalProperties": false
}🟢check_my_ui(description, screenType, sections, flowSteps, flowType, ...)
Find the real product screens closest to the user's own screen or flow and compare them: step counts, plan counts, page sections. First look at the user's screenshot or running app yourself, then describe its structure in these fields. Do not send the image, and leave out real names, emails, prices or customer data: structure only. Returns a short report with the closest references (the best match's screenshot attached). To let the user choose one to build from, pass their ids to pickReference.
Input Schema
{
"type": "object",
"properties": {
"description": {
"type": "string",
"description": "One or two sentences on what the screen is for and how it is laid out, e.g. \"Pricing page with three plan cards, a monthly/yearly toggle and a feature table\"."
},
"screenType": {
"type": "string",
"description": "What kind of screen it is.",
"enum": [
"landing",
"pricing",
"feature-page",
"sign-up",
"sign-in",
"verification",
"onboarding-step",
"plan-picker",
"empty-state",
"dashboard",
"list",
"detail",
"create-form",
"search",
"picker",
"booking",
"checkout",
"marketplace",
"settings",
"docs",
"menu",
"lesson"
]
},
"sections": {
"type": "array",
"items": {
"type": "string"
},
"description": "Page sections top to bottom, e.g. [\"Hero\", \"Plan cards\", \"FAQ\"]."
},
"flowSteps": {
"type": "array",
"items": {
"type": "string"
},
"description": "For a multi-screen flow, each step's title in order, e.g. [\"Sign up\", \"Verify email\", \"Create workspace\"]."
},
"flowType": {
"type": "string",
"description": "What the flow does, so step counts are only compared with flows of the same kind. Inferred from screenType when omitted.",
"enum": [
"signup-onboarding",
"search",
"checkout",
"booking",
"marketplace"
]
},
"primaryAction": {
"type": "string",
"description": "The main button or action, e.g. \"Start free trial\"."
},
"planCount": {
"type": "number",
"description": "For pricing screens, how many plans are shown."
},
"kind": {
"type": "string",
"description": "Only compare with this kind of capture.",
"enum": [
"flow",
"marketing",
"product"
]
},
"product": {
"type": "string",
"description": "Only compare with this product id."
},
"limit": {
"type": "number",
"description": "How many references to return, 1 to 5.",
"default": 4
}
},
"required": [
"description"
],
"additionalProperties": false
}🟢get_design(productId, context)
Get the measured design guide for a product: font, palette, type scale, layout and component notes. Marketing site and product UI are measured separately.
Input Schema
{
"type": "object",
"properties": {
"productId": {
"type": "string",
"description": "Product id from listProducts, e.g. linear, stripe or airbnb."
},
"context": {
"type": "string",
"description": "Which surface to return. Omit for both.",
"enum": [
"marketing",
"product"
]
}
},
"required": [
"productId"
],
"additionalProperties": false
}🟢get_product(productId)
Get a product's coverage notes, design summary and every screen it contains, grouped into the onboarding flow, marketing pages and in-product screens.
Input Schema
{
"type": "object",
"properties": {
"productId": {
"type": "string",
"description": "Product id from listProducts, e.g. linear, stripe or airbnb."
}
},
"required": [
"productId"
],
"additionalProperties": false
}🟢get_screen(screenId)
Get everything recorded about one screen: notes, source URL, image URLs and dimensions, observed actions and where they lead, and page sections for long pages.
Input Schema
{
"type": "object",
"properties": {
"screenId": {
"type": "string",
"description": "Screen id from searchScreens or getProduct, e.g. linear-signup."
}
},
"required": [
"screenId"
],
"additionalProperties": false
}🟢get_screen_image(screenId, size)
Get the screenshot itself so you can look at it. For marketing pages taller than 4000px, preview returns only the first screen (above the fold); use size=full for the whole page, which can exceed what vision models accept. getScreen lists the page's sections with their y offsets.
Input Schema
{
"type": "object",
"properties": {
"screenId": {
"type": "string",
"description": "Screen id from searchScreens or getProduct, e.g. linear-signup."
},
"size": {
"type": "string",
"description": "preview (default) keeps images small enough to view; full returns the original capture.",
"enum": [
"preview",
"full"
],
"default": "preview"
}
},
"required": [
"screenId"
],
"additionalProperties": false
}🟢list_products
List every product in the library with its capture date, tags, coverage notes and screen counts. Start here to see what references exist.
Input Schema
{
"type": "object",
"properties": {},
"required": [],
"additionalProperties": false
}🟢pick_reference(q, screens, product, kind, count, ...)
Show the user a few matching references side by side in their browser and let them click the one to build from. Prefer this over sending full-page images whenever the user should decide. Returns a url: open it for them (run `open <url>` on macOS, `xdg-open <url>` on Linux, or show the link), tell them to choose, then call waitForPick with the pickId.
Input Schema
{
"type": "object",
"properties": {
"q": {
"type": "string",
"description": "Search words, e.g. \"pricing page\". The best matches become the options."
},
"screens": {
"type": "string",
"description": "Comma-separated screen ids to show instead of searching, e.g. from an earlier searchScreens."
},
"product": {
"type": "string",
"description": "Only search this product id."
},
"kind": {
"type": "string",
"description": "Only search this kind of screen.",
"enum": [
"flow",
"marketing",
"product"
]
},
"count": {
"type": "number",
"description": "How many options to show when searching, 2 to 6.",
"default": 3
},
"goal": {
"type": "string",
"description": "What the user is building, shown on the page and used in the build prompt, e.g. \"NSDR premium upgrade page\"."
},
"stack": {
"type": "string",
"description": "Preferred stack for the build prompt."
}
},
"required": [],
"additionalProperties": false
}🟢search_screens(q, product, kind, limit)
Search every captured screen by keyword across titles, notes, page sections and observed actions. Filter by product or kind. Use this to find references like "pricing page", "empty state" or "date picker".
Input Schema
{
"type": "object",
"properties": {
"q": {
"type": "string",
"description": "Keywords to match. Omit to list everything that matches the filters."
},
"product": {
"type": "string",
"description": "Only return screens from this product id, e.g. linear."
},
"kind": {
"type": "string",
"description": "Only return this kind of screen.",
"enum": [
"flow",
"marketing",
"product"
]
},
"limit": {
"type": "number",
"description": "Maximum results, 1 to 50.",
"default": 20
}
},
"required": [],
"additionalProperties": false
}🟢wait_for_pick(pickId, wait)
Wait for the user to choose on the pick page. Returns as soon as they click, or status pending after the wait; call again if so. Once chosen, returns their reference with its screenshot and a full build prompt, so you can start building from it.
Input Schema
{
"type": "object",
"properties": {
"pickId": {
"type": "string",
"description": "The pickId returned by pickReference."
},
"wait": {
"type": "number",
"description": "Seconds to wait for a choice, 0 to 50.",
"default": 45
}
},
"required": [
"pickId"
],
"additionalProperties": false
}Community
Evidence