affectUI
Server Details
Search, read and install agent-ready React components, screens and blocks for AI products.
- Status
- Healthy
- Uptime
- 100.0% over 14 days
- Last Tested
- Transport
- Streamable HTTP · MCP 2025-11-25
- URL
- Repository
- flohoeller/affectui
- GitHub Stars
- 18
TDQS
Scored across 4 tools
get_component (docs) and get_source (raw .tsx) both take an item and fetch it, which is the closest overlap, but descriptions clearly separate documentation from source code. list_components (enumerate all) vs search_components (query by need) are cleanly distinct.
All four tools follow a strict snake_case verb_noun pattern (get_component, get_source, list_components, search_components). Verbs map predictably to actions and nouns to resources.
Four tools is on the lean side but well-scoped for a component library: discover (list/search) plus fetch (docs/source). Nothing feels redundant, though the surface is minimal.
The read-only discovery-to-retrieval lifecycle is fully covered: browse, search, read docs, and pull source. No obvious dead ends for the stated purpose, though there's no batch or related-item lookup.
Available Tools
4 toolsget_componentaffectUI item docsAInspect
Docs for one item: install command, usage example, props, keyboard, accessibility and notes.
| Name | Required | Description | Default |
|---|---|---|---|
| slug | Yes | The item's slug, e.g. reaction-bar – add -clean for the clean style, e.g. ai-answer-clean |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the disclosure burden. It does tell the agent the shape of the returned content (install command, usage example, props, keyboard, accessibility, notes), which is valuable since there is no output schema, but it says nothing about auth requirements, errors for an unknown slug, or whether the response is static or versioned.
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?
A single front-loaded clause listing the returned content with zero filler. It is efficient, though the fragment form is terse and leaves no room for routing guidance.
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?
For a one-parameter lookup with full schema coverage and no output schema, enumerating the returned sections substantially compensates for the missing output schema. The gap is the absence of any guidance distinguishing it from get_source/search_components.
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 the single slug parameter is documented in the schema, including the '-clean' style suffix convention. The description adds no additional parameter meaning, 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 clear resource and scope: documentation for a single item, enumerating what that documentation contains (install command, usage example, props, keyboard, accessibility, notes). The singular 'one item' implicitly contrasts with list_components/search_components, but the description never names those siblings or the get_source alternative, so the differentiation is left to inference.
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?
No explicit when-to-use or when-not-to-use guidance. The phrase 'for one item' implies a single-item lookup versus listing/searching, and the slug-driven schema reinforces that, but the agent must infer when to pick this over get_source (source vs docs). Usage is implied, not stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_sourceaffectUI item sourceAInspect
The full .tsx source of an item, to write to components/ui/.tsx when the shadcn CLI isn't available. Pro items need the user's access key in the MCP connection.
| Name | Required | Description | Default |
|---|---|---|---|
| slug | Yes | The item's slug, e.g. reaction-bar – add -clean for the clean style, e.g. ai-answer-clean |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full behavioral burden. It usefully discloses an auth prerequisite ('Pro items need the user's access key in the MCP connection'), but says nothing about what happens on a missing item, whether access-key-gated items fail or return partial content, or any size/rate constraints.
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, no filler, and the payload description is front-loaded before the usage condition and the auth caveat. Every clause earns its place.
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?
For a single-parameter retrieval tool with no output schema, the description covers what is returned, where it is meant to be written, and the Pro access-key requirement. Minor gaps remain around failure modes, but nothing essential to invoking it correctly is missing.
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% and the schema already explains the slug format including the -clean suffix convention. The description adds no syntax or format detail beyond the schema, so the baseline of 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 precisely what is returned: the full .tsx source of an item, which is distinct from the lookup/listing behavior implied by get_component, list_components, and search_components. The verb is implicit (it reads as a noun phrase, 'The full .tsx source') but the resource and payload are unambiguous.
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?
Gives a concrete usage context – write the output to components/ui/<slug>.tsx when the shadcn CLI is unavailable – which tells the agent the scenario this tool serves. It does not, however, explicitly contrast with get_component or state when this source-fetch is the wrong choice.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsList affectUI itemsBInspect
Every affectUI item with slug, section, category, free or Pro, and a one-line description.
| Name | Required | Description | Default |
|---|---|---|---|
| section | No | Limit to one section |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations exist, so the description carries the full burden. "List" implies a read-only, safe operation, and the description usefully discloses the returned fields (slug, section, category, free/Pro, description) in the absence of an output schema. However it says nothing about pagination, result limits, ordering, or auth, which matters for a tool that returns "every" item.
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 compact sentence that front-loads the enumeration scope and lists the returned fields without a wasted word. Nothing is padded or redundant.
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?
For a zero-required-parameter read tool with no output schema, the description does the useful work of enumerating return fields, which partially covers the missing output schema. It is still silent on pagination and result-size behavior, which is a real gap for a tool that promises every item.
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% with a single enum-typed section parameter, so the schema already documents the filter fully, making 3 the baseline. The description does not add filtering syntax or clarify that "section" in its field list is also the filter parameter, which could confuse an agent about filter vs. return semantics.
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 identifies the resource (affectUI items) and the enumeration scope ("Every ... item"), which implicitly distinguishes it from the singular get_component sibling. It never explicitly contrasts itself with search_components or get_source, so the differentiation is inferred rather than stated.
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?
There is no when-to-use guidance, no mention of when to prefer list_components over search_components, and no conditions or prerequisites. The only hint is the implied "every item" scope, which the agent must reason about on its own.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_componentsSearch affectUIBInspect
Find affectUI components, screens, blocks, illustrations and motion effects for a UI need, e.g. 'chat input with model picker' or 'onboarding checklist'.
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | What the UI should do or look like | |
| section | No | Limit to one section | |
| free_only | No | Only free items |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden. It never states that this is a read-only operation, whether results are ranked by relevance, how many are returned, or whether pagination exists. Beyond enumerating content types, no behavioral trait is 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?
A single front-loaded sentence with the verb and resource first, then illustrative examples. Every clause earns its place and nothing is padded.
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 three fully documented parameters and no output schema, the definition is close to viable, but it stops short of describing what a result looks like or how results are ordered. For a search tool with no output schema, that return-shape gap is a real completeness hole.
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%, so the baseline is 3. The query examples in the description do add a little meaning beyond the schema's 'What the UI should do or look like', but nothing is said about how 'section' or 'free_only' interact with the query, so no credit above baseline.
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 gives a specific verb ('Find') and enumerates the resource types it covers (components, screens, blocks, illustrations, motion effects), which maps cleanly onto the section enum. It separates itself from get_component/list_components by virtue of being query-driven, though it never names those siblings to draw the line explicitly.
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?
Two concrete query examples ('chat input with model picker', 'onboarding checklist') imply the intended usage pattern well. However, there is no guidance on when to prefer this over list_components or get_component, and no exclusions or prerequisites stated.
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.
2 tool updates
- Changed
get_component1 field changed- changed
Input schema / properties / slug / descriptionPrevious value: -"The item's slug, e.g. reaction-bar"New value: +"The item's slug, e.g. reaction-bar – add -clean for the clean style, e.g. ai-answer-clean"
- Changed
get_source1 field changed- changed
Input schema / properties / slug / descriptionPrevious value: -"The item's slug, e.g. reaction-bar"New value: +"The item's slug, e.g. reaction-bar – add -clean for the clean style, e.g. ai-answer-clean"
4 tool updates
- First observed
get_component - First observed
get_source - First observed
list_components - First observed
search_components
Related MCP Connectors
Search, install and compose AI agent skills, loops and bundles from the LoopSkill marketplace.
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
React + Tailwind UI components and recipes your AI coding tool can search and install.
Search and fetch curated AI agent skills, prompts and MCP servers.
Related MCP Servers
- AlicenseNot gradedqualityBmaintenanceEnables AI coding agents to search across 340+ React UI registries, inspect component code and quality scores, compare options, detect a project's stack, and generate or execute safe transactional install plans. It provides read and write safeguards with dry-run planning and rollback.1MIT
- AlicenseNot gradedqualityAmaintenanceEnables coding agents to search, inspect, and retrieve real UI components from existing component libraries, with ranked results, score explanations, licence and provenance details, and safe installation plans. It also surfaces similar components and higher-level UI patterns so agents can reuse existing interface code instead of generating it from scratch.44 npmMIT
- AlicenseAqualityDmaintenanceProvides coding agents live access to shadcn-style component registries, enabling them to search, compare, and fetch real component source code for UI composition.533 npm5MIT
- AlicenseAqualityDmaintenanceEnables AI assistants to retrieve React, Svelte, Vue, and React Native component source code, demos, blocks, and metadata for building UIs in AI-powered development workflows.108,219 npmMIT
Glama MCP Gateway
Add one secure layer between your agents and this server.