Skip to main content
Glama

AI Canvas

A growing collection of animated React components and composed page blocks, installed as real source code in your project rather than as a dependency.

Install

Add any component to your project with one command:

npx shadcn@latest add @aicanvas/task-cards

Starting a new project? Initialize first, then add:

npx shadcn@latest init        # new projects only
npx shadcn@latest add @aicanvas/task-cards

Installs are tied to a free AI Canvas account. Signed out, the CLI writes a small placeholder file instead of the component, so authenticate once first:

  1. Sign up free and copy your token from account settings.

  2. Put it in .env.local as AICANVAS_TOKEN.

  3. Add the registry to your project's components.json, once:

{ "registries": { "@aicanvas": { "url": "https://aicanvas.me/r/{name}.json", "params": { "token": "${AICANVAS_TOKEN}" } } } }

Every npx shadcn@latest add @aicanvas/<slug> is authenticated after that. Each component page also shows a ready tokenized command when you are signed in.

No account is needed to read the code: every component page shows its full source, free to read and copy.

Requirements

Tailwind CSS v4, React 19 and Framer Motion. Components are written against Tailwind v4 tokens and will not render correctly on v3. The Next.js App Router is the default target, not a requirement.

Three ways to use it

Path

Command or action

Best for

shadcn CLI

npx shadcn@latest add @aicanvas/<slug>

Dropping finished, open-source code straight into your repo

AI Canvas MCP

npx -y @aicanvas/mcp

Letting your AI editor search and install components for you

Remix with AI

Copy the full prompt from any free component page

Rebuilding a component your way in any AI coding tool

Browse the full catalog and copy the exact command for any component at aicanvas.me. pnpm dlx, yarn dlx, and bunx work too.

Related MCP server: MCP Magic UI

Why AI Canvas

  • MIT licensed. The free library is MIT, so you can use it in personal and commercial projects, modify it freely, and ship it without attribution. Premium components, design systems, and templates are proprietary.

  • Full source, yours to keep. Every component arrives as real React and TypeScript code in your codebase, not a black-box dependency. Restyle it, extend it, or ship it as is. It is yours.

  • Built for AI workflows. Install with the shadcn CLI, connect the MCP so your agent installs for you, or hand it a remix prompt that works in any AI coding tool.

  • Animated by default. Built with Framer Motion and Tailwind CSS, ready for the Next.js App Router or any modern React setup. 3D pieces use Three.js.

Components

Blocks

Composed, multi-component page sections: card decks, task boards, galleries. Same install, same MIT license, just a larger unit of work than a single component.

Use it with your AI editor (MCP)

Connect AI Canvas to your AI editor and let your agent search, inspect, and install components for you. Save tokens. Do not start from scratch.

claude mcp add aicanvas -- npx -y @aicanvas/mcp

Or add it to your MCP config:

{
  "mcpServers": {
    "aicanvas": {
      "command": "npx",
      "args": ["-y", "@aicanvas/mcp"]
    }
  }
}

Works with Claude Code, Codex, Cursor, and other MCP-compatible editors. The server is read-only and fetches the live registry at runtime, so new components reach your agent shortly after they ship. It returns published component metadata and source.

Repository layout

This repo holds the AI Canvas source: the website and the free component library. The component source lives here, not just the site.

Path

What's there

components-workspace/<slug>/

Each free component: index.tsx source and its prompts.ts remix prompt, plus a spec.md on many

design-systems/andromeda/

The free Andromeda design system source: tokens, components, utilities

app/

The aicanvas.me website (Next.js App Router)

scripts/generate-registry.mjs

Builds the shadcn registry JSON from the sources above

The @aicanvas registry files served at /r/*.json are generated at build time from components-workspace/ and design-systems/, so there is no checked-in registry/ folder. Run node scripts/generate-registry.mjs to produce them locally.

Tech stack

React and TypeScript, Tailwind CSS, and Framer Motion. Built for the Next.js App Router and works in any modern React setup. 3D components use Three.js.

Common Questions

Do I need an account? Not to read the code. Every component page shows its full source, free to read and copy. Most of the free library also lives right here in this repo. A free account is only needed for the one-command npx shadcn add install, which writes a placeholder file when you are signed out.

Does it work outside Next.js? Yes. Components are plain React and TypeScript with Tailwind and Framer Motion. The App Router is the default target, not a requirement. A few components load their display font through next/font/google; outside Next.js, swap that import for your own font loader.

Do I get a dependency or real code? Real code. Installing copies the source into your project, so you own it and can change anything. There is no AI Canvas package to keep in sync.

Can I use it commercially? Yes, the free library is MIT. Use it in commercial projects, modify it, and ship it without attribution. Premium is licensed separately, see License.

What is the remix prompt? Every component ships with one comprehensive, platform-agnostic prompt. Paste it into any AI coding tool to rebuild that component your way instead of copying it as is.

How do I keep components up to date? You do not have to. Once installed, the code is yours and never changes under you. Re-run the install command if you want the latest version of a component.

Contributing

AI Canvas is actively maintained and new components ship regularly. Issues, ideas, and pull requests are welcome: open an issue to suggest a component or report a bug.

If AI Canvas saves you time, a star helps more builders find it.

License

The free library is MIT licensed. Use it in personal and commercial projects, modify it freely, and ship it without attribution. See LICENSE. Premium components, design systems, and templates are proprietary under the AI Canvas Premium License.

Available Tools

9 tools
get_componentGet an AI Canvas component (full metadata + source code)A
Read-onlyIdempotent

Return the complete record for a single component: metadata + the entire .tsx source code as a string. Use after the user picks one from a search/list result and wants to see the implementation, or before installing if they want to inspect first. The source is the exact file the CLI install would write into a project.

ParametersJSON Schema
NameRequiredDescriptionDefault
slugYesThe component slug, e.g. "ai-job-cards", "wave-lines", "halo-type". Use exact slugs from list/search results.

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already include readOnlyHint, openWorldHint, and idempotentHint. The description adds valuable context by stating the return includes metadata and the entire source code as a string, and emphasizes that 'The source is the exact file the CLI install would write into a project.' This goes beyond the annotations and clarifies the output nature.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is three sentences with the primary action front-loaded. The second sentence provides usage context and the third adds a clarifying detail about source exactness. Every sentence serves a purpose with no redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple one-parameter tool with no output schema, the description sufficiently explains what is returned (metadata + source code string), when to use it (after selection or before install), and the meaningful detail that it is the exact file the CLI would write. This is complete for the tool's complexity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% with a descriptive slug parameter that includes examples and instruction to use exact slugs from list/search results. The tool description adds no additional parameter-specific information beyond what the schema already provides, so baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool returns 'the complete record for a single component: metadata + the entire .tsx source code as a string.' It differentiates from list/search tools by specifying 'a single component' and 'Use after the user picks one from a search/list result.' This is a specific verb+resource+output with clear differentiation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicit usage guidance is provided: 'Use after the user picks one from a search/list result and wants to see the implementation, or before installing if they want to inspect first.' This tells the agent exactly when to invoke this tool and implies the alternative (using search/list) for finding components.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_install_commandGet the AI Canvas install command for a componentA
Read-onlyIdempotent

Return the shadcn CLI command to install a single component into the user's project. After calling this, suggest the user run the command (or run it yourself if you have shell access). Requires shadcn-aware setup (Tailwind v4, components.json) — for projects without that, fall back to get_component and write the file manually.

ParametersJSON Schema
NameRequiredDescriptionDefault
slugYesThe component slug, e.g. "ai-job-cards".

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare read-only and idempotent hints. The description adds valuable context by mentioning the prerequisite setup and the recommended post-call action. However, it does not detail the exact return format (e.g., plain string vs. JSON), which would be helpful without an output schema. No contradiction with annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise, using two sentences to convey purpose, usage instructions, prerequisites, and a fallback. It is front-loaded with the core function and every sentence earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with a single parameter, clear annotations, and no output schema, the description covers the essential aspects: what it does, when to use it, prerequisites, and what to do after calling. It is complete enough for an agent to invoke correctly without needing extra context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% coverage, with slug described and an example provided. The description adds minimal parameter-specific meaning beyond that, but it reinforces that the command is for a single component. This is baseline-appropriate since the schema already handles parameter semantics.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool returns a shadcn CLI command to install a single component, using a specific verb (return) and resource. It distinguishes itself from sibling tools like get_component by focusing on the install command rather than the component code itself.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicit guidance is provided: it requires shadcn-aware setup (Tailwind v4, components.json) and specifies a fallback to get_component for projects without that setup. It also instructs to suggest running the command or run it yourself if shell access is available, giving clear when-to-use and alternative guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_systemGet a complete AI Canvas design system (every file)A
Read-onlyIdempotent

Return all files for a design system in a single response — every component, plus shared tokens and utilities — ready to write into the user's project. Use when the user wants to adopt a whole system rather than pick individual components.

ParametersJSON Schema
NameRequiredDescriptionDefault
slugYesDesign system slug, e.g. "andromeda". Use `list_systems` to discover.

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already provide readOnly, openWorld, and idempotent hints. The description adds useful behavioral context by noting the response contains every file and shared tokens/utilities, which implies a comprehensive bulk retrieval. No contradictions and no missing critical behavior for a read-only operation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, front-loaded with the action and scope, no repetition of schema details, and every sentence serves a purpose. Very concise and well structured.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a single-parameter read-only tool with strong annotations, the description fully covers what it returns and when to use it. The absence of an output schema is acceptable since the description clarifies the content type (files, components, tokens).

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, and the schema already describes the slug parameter with an example and a pointer to list_systems for discovery. The tool description adds no additional parameter context, matching the baseline expectation.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool returns all files for a design system, including components, tokens, and utilities. It distinguishes itself from sibling tools that retrieve individual components (get_component) or templates (get_template) by emphasizing the whole-system scope.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly says to use this tool when the user wants to adopt a whole system rather than pick individual components. It clearly implies the alternative use case for component-level retrieval, though it does not name the specific sibling tool.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_templateGet a complete AI Canvas design-system template (every file)A
Read-onlyIdempotent

Return all files for a single template — the example composition plus every component it uses plus shared tokens. Use for "I want exactly this dashboard" / "give me the entire mission-control screen". One CLI command installs all files.

ParametersJSON Schema
NameRequiredDescriptionDefault
slugYesTemplate slug, e.g. "andromeda-mission-control", "andromeda-exchange-terminal". Use `list_templates` to discover.

TDQS

A4.2/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already indicate read-only, open-world, and idempotent behavior. The description adds valuable context that it aggregates all files (composition + components + tokens) and mentions a CLI command for installation. This complements the annotations without contradiction.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences long, front-loaded with the core action and resource, and every clause adds meaningful information (scope, usage examples, installation hint). There is no filler or unnecessary repetition.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple single-parameter tool with good annotations, the description explains what it does and when to use it well. However, since there is no output schema, it would benefit from stating the return format (e.g., files as URLs or inline content), which is a minor gap.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% and the slug parameter is already described with examples and a pointer to list_templates. The description does not add additional parameter meaning beyond re-stating that a 'single template' is fetched, which is already present in the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description leads with 'Return all files for a single template' and specifies that it includes 'the example composition plus every component it uses plus shared tokens'. This clearly articulates the verb, resource, and scope, distinguishing it from sibling tools like get_component or list_templates.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It explicitly states user intents: 'Use for "I want exactly this dashboard" / "give me the entire mission-control screen"'. This provides clear context for when to use the tool, though it does not explicitly mention when not to use it or name alternatives.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_categoriesList AI Canvas categoriesA
Read-onlyIdempotent

Return every category in the AI Canvas standalone component library, with the number of components in each. Use to orient before listing or searching — e.g. "what kinds of components are available?"

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With annotations already declaring readOnlyHint, openWorldHint, and idempotentHint, the safety profile is covered. The description adds useful behavioral detail: it returns every category and includes component counts, which goes beyond what annotations provide. No contradiction with annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is concise and front-loaded, with two sentences: the first states exactly what the tool returns, the second gives a practical usage example. No redundant or filler content.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple, parameterless tool with no output schema, the description sufficiently explains the return value (categories with counts) and provides usage context. It is complete enough for an AI agent to understand the tool's purpose and when to use it, especially given the rich annotations.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool has zero parameters, so there is nothing for the description to explain. Baseline of 4 is appropriate for a parameterless tool; the description correctly focuses on the return value and usage rather than parameter details.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('Return') and resource ('every category in the AI Canvas standalone component library'), and specifies the output includes the number of components per category. This clearly distinguishes it from sibling tools like list_components or search_components, which operate on components rather than categories.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly advises using this tool to 'orient before listing or searching,' which gives clear context and a specific use case. It does not name alternative sibling tools directly, but the guidance is unambiguous and helpful for an AI agent deciding when to invoke this tool.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_componentsList AI Canvas componentsA
Read-onlyIdempotent

Return AI Canvas components, optionally filtered by category. Use after list_categories to drill into one, or pass no filter to browse everything. Each result includes slug, name, description, categories, screenshot URL, install command, and homepage URL — enough to evaluate without a separate get_component call. Pagination via limit and offset.

ParametersJSON Schema
NameRequiredDescriptionDefault
limitNoMax number of components to return. Default 25.
offsetNoNumber of components to skip (for pagination). Default 0.
categoryNoOptional category label, e.g. "Cards & Modals", "Backgrounds", "Typography". Case-insensitive. Omit to list all components.

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already provide readOnlyHint, openWorldHint, and idempotentHint. The description adds useful behavioral context by listing the exact fields included in results and disclosing pagination behavior via `limit` and `offset`. No contradictions with annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three concise sentences, front-loaded with the core purpose, followed by usage guidance and return-value details. Every sentence adds value with no redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no output schema, the description compensates by explaining what each result contains. It covers usage context, filtering, and pagination, making the tool fully understandable and appropriately complete for its simplicity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the schema already fully documents all three parameters. The description reinforces the optional filter and pagination but adds little beyond the schema's own descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Return AI Canvas components') and the optional filter by category. It distinguishes from siblings by indicating this is a listing tool and even references `list_categories` and `get_component`, making the tool's scope obvious.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly instructs when to use: 'Use after `list_categories` to drill into one, or pass no filter to browse everything.' It also tells the agent it can avoid a separate `get_component` call because results include enough fields, effectively guiding tool selection.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_systemsList AI Canvas design systemsA
Read-onlyIdempotent

Return every design system available on AI Canvas. A design system is a coordinated set of components plus shared tokens and utilities — installable in one CLI command. Use when the user asks about "themes", "design systems", or wants more than a single component.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.2/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

The annotations already declare readOnlyHint, openWorldHint, and idempotentHint, covering safety and behavior. The description adds conceptual context (that design systems are installable in one CLI command) but does not disclose additional behavioral traits such as pagination, ordering, or output format. This is adequate but not rich, so a 3 is appropriate.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences, with the core purpose front-loaded in the first sentence ('Return every design system available on AI Canvas'). The second sentence adds a definition and usage guidance without waste. Every sentence earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's simplicity (0 params, no output schema, strong annotations), the description is nearly complete. It states what the tool returns and when to use it. It could mention what fields the output includes (e.g., IDs for use with get_system), but this is not necessary for a simple list tool, so a 4 is justified.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has zero parameters, and the baseline for 0 params is 4. The description adds conceptual clarity about design systems but does not need to explain parameter details since there are none. The description's definition of a design system adds some semantic value beyond the empty schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool returns every design system available on AI Canvas, with a specific verb ('Return') and resource ('design systems'). It also defines what a design system is, distinguishing it from sibling tools like get_system (which retrieves a specific system) and list_components (which lists single components).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit usage context: 'Use when the user asks about themes, design systems, or wants more than a single component.' It clearly implies when to use this tool over alternatives but does not formally name exclusions or alternative tools, making it a 4 rather than a 5.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_templatesList AI Canvas design-system templatesA
Read-onlyIdempotent

Return every ready-made template on AI Canvas. A template is a complete example screen built from one design system — a dashboard, a console, a control room — installable in one CLI command. Use to discover what full screens exist before fetching one with get_template, or when the user asks for "a dashboard" / "an admin screen" rather than a single component.

ParametersJSON Schema
NameRequiredDescriptionDefault
systemNoOptional design system slug to filter by, e.g. "andromeda". Omit to list templates from every system.

TDQS

A4.2/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint, openWorldHint, and idempotentHint, covering safety and mutability. The description adds contextual detail about templates being installable via CLI and being complete screens, but does not disclose further behavioral aspects like pagination, sorting, or response structure. Since annotations carry the safety profile, this adds some value but not rich behavioral context.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three sentences: state action, define key term, give usage guidance. Zero fluff, front-loaded with the core purpose, and every sentence earns its place. Highly concise while retaining all essential information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple list tool with one optional parameter, strong annotations, and no output schema, the description covers purpose, definition, and usage. It does not describe the return format, but that is not required given the lack of an output schema and the simplicity of the operation. The only minor gap is not explicitly mentioning the 'system' filter in prose, but the schema covers it, so the description is sufficiently complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% for the single optional 'system' parameter, which already explains its purpose and example value. The description does not mention the parameter, but the schema fully documents it, so the baseline of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description opens with a specific verb+resource: 'Return every ready-made template on AI Canvas' and further defines what a template is (complete example screen built from one design system). It explicitly distinguishes itself from get_template ('before fetching one with get_template') and from single-component tools, making its purpose unmistakable.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description gives explicit when-to-use guidance: 'Use to discover what full screens exist before fetching one with get_template' and 'when the user asks for "a dashboard" / "an admin screen" rather than a single component.' It also names get_template as the alternative to use after discovery, providing a clear decision path.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

search_componentsSearch AI Canvas componentsA
Read-onlyIdempotent

Fuzzy keyword search across component slug, name, description, categories, and tags. Returns best matches ranked by relevance. Use when the user describes what they want in their own words, e.g. "an animated card stack", "background with waves", "typography that reveals on scroll". Results include screenshot URLs and install commands for immediate evaluation.

ParametersJSON Schema
NameRequiredDescriptionDefault
limitNoMax number of matches to return. Default 10.
queryYesFree-text search query. Multiple words are tokenized and matched independently.

TDQS

A4.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Beyond the read-only/open-world/idempotent annotations, the description discloses fuzzy matching behavior, the specific fields searched, relevance ranking, and that results include screenshot URLs and install commands. This adds meaningful behavioral context without contradicting annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences: the first states the core function, and the second adds usage examples and result contents. Every sentence earns its place with no redundancy, and it is front-loaded with the essential action.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple search tool with two parameters and no output schema, the description covers what is searched, how results are ordered, and what results contain (screenshots and install commands). Combined with schema and annotations, it provides enough context for an agent to select and invoke the tool correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already fully documents both parameters (query and limit), so baseline is 3. The description adds value by specifying the fields searched (slug, name, description, categories, tags) and noting the fuzzy, relevance-ranked nature of the search, going beyond the schema's generic description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it is a fuzzy keyword search across component slug, name, description, categories, and tags, returning ranked matches. This distinguishes it from sibling tools like list_components (listing) and get_component (retrieval by ID).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly says 'Use when the user describes what they want in their own words' with concrete examples, providing clear context for when to use the tool. It doesn't name alternatives, but the guidance is strong enough to differentiate it from listing or retrieval tools.

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.

  1. 2 tool updatesv0.1.1
    • Changedget_template1 field changed
      • changedInput schema / properties / slug / description
        Previous value: -"Template slug, e.g. \"andromeda-mission-control\", \"andromeda-exchange-terminal\". Use `list_systems` then inspect templateSlugs to discover."New value: +"Template slug, e.g. \"andromeda-mission-control\", \"andromeda-exchange-terminal\". Use `list_templates` to discover."
    • Addedlist_templates
  2. 8 tool updatesv0.1.0
    • First observedget_component
    • First observedget_install_command
    • First observedget_system
    • First observedget_template
    • First observedlist_categories
    • First observedlist_components
    • First observedlist_systems
    • First observedsearch_components

TDQS

A4.4/5.0

Scored across 9 tools

Disambiguation5/5

Each tool targets a distinct resource or action: categories, components, systems, and templates are clearly separated, and list/search/get/install roles are easy to tell apart. The descriptions reinforce the intended workflow without meaningful overlap.

Naming Consistency5/5

Tool names follow a consistent verb_noun pattern: list_* for plural collections, get_* for single resources, and search_components for the one search entry point. This makes the API predictable and easy to navigate.

Tool Count5/5

Nine tools is well-scoped for a component/design-system registry. Each tool covers a clear part of the discovery-to-install workflow, and none feel redundant or unnecessary.

Completeness4/5

The main workflows are covered: browse categories, list/search components, inspect source, get install commands, and retrieve full systems or templates. Minor gaps exist around searching systems/templates by keyword and obtaining install commands for full systems, but these are not blocking.

Maintenance

ActivityActive
ResponsivenessWithin a week

Related MCP Connectors

Related MCP Servers

  • F
    license
    D
    quality
    D
    maintenance
    A Model Context Protocol server that provides access to Magic UI components, allowing AI assistants and other MCP clients to discover and use UI components from the Magic UI design system.
    2
    14
    -
  • A
    license
    Not graded
    quality
    A
    maintenance
    A Model Context Protocol server that enhances AI agents by providing deep semantic understanding of codebases, enabling more intelligent interactions through advanced code search and contextual awareness.
    89
    MIT
  • A
    license
    A
    quality
    C
    maintenance
    A Model Context Protocol server that provides AI assistants with access to ReactBits.dev components - a collection of 135+ animated React components for creative developers.
    5
    176
    63
    MIT