The UI Index
Server Details
Real website screens for UI inspiration: login, pricing, checkout and more from live sites.
- Status
- Healthy
- Last Tested
- Transport
- Streamable HTTP · MCP 2025-11-25
- URL
- ChatGPT
- –
- Claude
- –
TDQS
Scored across 3 tools
get_screen retrieves one screen by id, search_screens finds multiple examples, and list_screen_types exposes the filter vocabulary. The boundaries are explicit, and no tools overlap in purpose.
All tools follow a consistent snake_case verb_noun pattern: get_screen, list_screen_types, and search_screens. The singular/plural distinction is meaningful and readable.
Three tools is lean but well-scoped for a read-only screenshot reference: discover facets, search examples, and inspect a specific screen. Each tool earns its place without bloat.
The set covers the core read-only workflow: list filter vocabulary, search screens, and get full screen details. The only minor gap is that search returns up to eight screens with no visible pagination, though filters provide a workaround.
Available Tools
3 toolsget_screenGet one website screenARead-onlyIdempotentInspect
Read one captured screen by its id (from search_screens): site, device, type, sector, state, summary, the interface elements marked on it, a thumbnail and the link to the full screenshot on theuiindex.com.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes | Screen id from search_screens. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, destructiveHint=false and openWorldHint=false, so safety is covered. The description adds useful context not in the annotations: the payload includes both a thumbnail and a link to the full screenshot hosted on theuiindex.com, which tells the agent it may need a follow-up fetch for full resolution. Failure behavior for an unknown id is not disclosed.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
One sentence, front-loaded with the action and the id dependency before the field enumeration. The field list earns its length because there is no output schema, and there is no filler wording.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With a single trivial parameter, no output schema, and full annotation coverage, the definition supplies what an agent needs: the id source and a preview of the response shape. Only the not-found/error path is left implicit, a minor gap for a read-only lookup tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% for the single required id parameter and the schema already states 'Screen id from search_screens'. The description restates the same provenance, adding no format, length, or validation detail beyond the schema, so baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('Read one captured screen by its id') and immediately differentiates itself from the sibling search_screens by emphasizing single-record retrieval. The enumeration of returned fields (site, device, type, sector, state, summary, elements, thumbnail, link) makes the output scope concrete, so an agent can tell exactly what it gets.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The parenthetical '(from search_screens)' establishes the workflow dependency: this tool is called after a search, using an id obtained there. There is no explicit when-not guidance or statement about what happens with an invalid id, but the sequencing context is clear enough to select the tool correctly.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_screen_typesList screen types, sectors and statesARead-onlyIdempotentInspect
List the screen types (login, pricing, checkout…), sectors (banking, software…) and interface states (form error, empty cart…) The UI Index uses, with how many screens each has. Use the keys as search_screens filters.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, destructiveHint=false and openWorldHint=false, so the safety profile is covered. The description's added value is limited to the return payload (counts per key) and the fact that returned keys are valid filter values; it says nothing about ordering, size limits, or whether the vocabulary is stable over time.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, front-loaded with the resource list and closed with the actionable instruction. The phrase 'The UI Index uses' is slightly awkward but carries scope information; there is no filler or repetition.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description carries the burden of describing returns, and it does so adequately (three key categories plus per-key screen counts). It does not specify the response structure (grouped by category vs. flat), which would fully close the gap for a no-parameter lookup tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
There are zero parameters, so the baseline is 4. The description compensates by explaining the semantic role of the values returned (they are filter keys for search_screens), which is more than the empty schema can convey.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a specific verb (List) and three concrete resources (screen types, sectors, interface states), each illustrated with examples like 'login, pricing, checkout' and 'banking, software'. It also states the payload ('with how many screens each has'), so an agent knows exactly what comes back and can distinguish it from get_screen and search_screens.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It explicitly routes the agent to a sibling: 'Use the keys as search_screens filters', which establishes this as the discovery step before search_screens. It stops short of saying when not to call it or how it relates to get_screen, but the primary usage context is unambiguous.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_screensSearch real website screensARead-onlyIdempotentInspect
Find real examples of website screens captured from live sites: login and sign-up pages, pricing pages, checkouts, carts, search results, home pages, forms with errors and more, on desktop and mobile, across sectors such as banking, insurance, software, retail and travel. Use it for UI and UX inspiration, design references, competitor research, or "show me how other sites do X". Returns up to 8 screens with a summary, a thumbnail and a link to the full screenshot on theuiindex.com.
| Name | Required | Description | Default |
|---|---|---|---|
| type | No | Screen type key, e.g. home, landing, pricing, login (sign-in and sign-up), checkout, cart, search-results, product-detail, form, contact, help. See list_screen_types. | |
| query | No | Free words: a site, a brand, a pattern or what the screen does, e.g. "two-factor login", "bol", "annual pricing toggle". | |
| state | No | Interface state key, e.g. search-results, search-no-results, filters-applied, menu-open, form-error, cart-populated. See list_screen_types. | |
| device | No | Device the screen was captured on. | |
| offset | No | Skip this many results (for more of the same search). | |
| sector | No | Sector key, e.g. software, ai, developer-tools, banking, insurance, retail, groceries, travel, energy, telecom, government. See list_screen_types. | |
| language | No | Language of the page. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly, idempotent, non-destructive and closed-world, so the safety profile is fully covered elsewhere. The description adds genuinely new behavioral facts — a hard cap of 8 screens per search and the shape of each result (summary, thumbnail, full-screenshot link) — but says nothing about why pagination stops at offset 16 or what happens on empty results.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences, both front-loaded: the first establishes what is searchable, the second establishes why to use it and what comes back. The long enumeration of sectors and screen kinds is dense but earns its place by showing the breadth of the index.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description usefully compensates by stating the return payload and result cap. For a 7-parameter, fully-optional search tool this is close to complete; only the interaction between the free-text query and the type/state/sector filters is left unstated.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and all 7 parameters carry their own descriptions with examples and enum values, so the baseline of 3 applies. The description adds no parameter-specific guidance, such as how query and type interact or how offset should be stepped given the 8-result cap.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb and resource ("Find real examples of website screens captured from live sites") and enumerates the screen categories, states and devices covered, so the agent knows exactly what universe of results to expect. It does not explicitly distinguish itself from get_screen or list_screen_types, leaving that differentiation to the schema's cross-reference.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It gives concrete use cases ("UI and UX inspiration, design references, competitor research, or 'show me how other sites do X'"), which is clear context for when to reach for this tool. It stops short of naming when NOT to use it or pointing to get_screen/list_screen_types as alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
3 tool updates
- First observed
get_screen - First observed
list_screen_types - First observed
search_screens
Related MCP Connectors
Search 300k+ real app screens, flows, and UX microcopy from 1,500+ shipped products.
Real landing-page design inspiration: hero, pricing, testimonial and feature section screenshots.
Search real-world UI & UX design references for mobile apps, web apps, and websites with Mobbin.
Real SaaS UI screenshots for coding agents: onboarding flows, pricing pages, design inspiration.
Related MCP Servers
- AlicenseNot gradedqualityCmaintenanceStructured design references from 1,000+ curated websites for AI-powered web design. Retrieve real CSS values, typography specs, color palettes, and design rationale via MCP.1MIT
- AlicenseNot gradedqualityBmaintenanceProvides curated real website design references with structured JSON data on type, spacing, palette, and layout. Enables AI agents to search, browse, and analyze over 1,000 sites and their sections.1MIT
- AlicenseNot gradedqualityAmaintenanceSTOP UI SLOP. Gives coding agents searchable evidence from 800,000+ real web and iOS screens, design contracts, and a hard UI finish gate.1MIT
- AlicenseAqualityDmaintenance🎨 AI-powered UI/UX design intelligence - 1519+ curated design resources through MCP | React, Vue, Next.js, Flutter & more7142 npm40MIT
Glama MCP Gateway
Add one secure layer between your agents and this server.