QuasarUI MCP Server
OfficialProvides tools for searching QuasarUI's catalogue of Quasar Framework (Vue) Components, listing Blocks and their Components, retrieving a Component's source code to paste into a project, and getting setup guides for building a Quasar project and integrating Components.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@QuasarUI MCP ServerFind a pricing table with a monthly and yearly toggle and paste its code"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
QuasarUI MCP Server
Let your AI assistant find QuasarUI Components for Quasar Framework (Vue) and paste their source into your project.
Ask for "a pricing table with a monthly and yearly toggle" and your assistant searches the catalogue, picks a matching Component and pastes its code.
Without a key: every Free Component. No account needed.
With an Access Key: every Paid Component too, if your account holds All Access or Blocks Pro. Create a key.
The server is hosted at https://www.quasarui.com/mcp. New Components appear there as soon as they are published; nothing here needs updating.
Connect your client
Replace YOUR_ACCESS_KEY with your key, or leave the key out for Free Components only.
Claude Code
claude mcp add --transport http quasarui https://www.quasarui.com/mcp --header "Authorization: Bearer YOUR_ACCESS_KEY"Cursor
Add to ~/.cursor/mcp.json, or .cursor/mcp.json in a project:
{
"mcpServers": {
"quasarui": {
"url": "https://www.quasarui.com/mcp",
"headers": { "Authorization": "Bearer YOUR_ACCESS_KEY" }
}
}
}Claude Desktop and other stdio clients
Clients that only start local servers can use this package, which forwards to the hosted server:
{
"mcpServers": {
"quasarui": {
"command": "npx",
"args": ["-y", "quasarui-mcp"],
"env": { "QUASARUI_ACCESS_KEY": "YOUR_ACCESS_KEY" }
}
}
}Docker
docker build -t quasarui-mcp .
docker run -i --rm -e QUASARUI_ACCESS_KEY=YOUR_ACCESS_KEY quasarui-mcpRelated MCP server: ui-layouts-mcp
Tools
Tool | What it does |
| Lists every Block with its Component counts |
| Lists the Components in a Block, each marked free or paid |
| Finds Components by what they are, such as "login form" or "sidebar" |
| Returns a Component's source |
| Explains how to set up a project and paste a Component |
Without access, asking for a Paid Component returns its preview link and how to unlock it, never its code.
Limits and errors
Each IP address can make 60 requests a minute, and so can each Access Key. Past that the server answers 429 for a short while.
A wrong, revoked or malformed key gets 401. The server never falls back to Free Components for a bad key.
License
The code in this repository is MIT. Components returned by the server are covered by the QuasarUI license.
Available Tools
5 toolsget_componentGet ComponentARead-onlyInspect
Get a Component's full Vue SFC source by slug. Free Components return their source to anyone; a Paid Component without access returns an upgrade message with the pricing URL instead.
| Name | Required | Description | Default |
|---|---|---|---|
| slug | Yes | Component slug from list_components or search_components, e.g. buttons-01 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, and the description adds genuinely non-obvious behavior: a paid component without access returns an upgrade message with a pricing URL rather than an error or source. That access-gating detail is the key thing an agent could misread as failure. It stops short of saying how access is determined (account/subscription context) or what the upgrade payload looks like.
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, with the primary action front-loaded and the access-gating caveat immediately after. Every clause carries information the agent needs.
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 does the necessary work of describing the two possible return shapes (source vs. upgrade message with pricing URL). It does not cover error cases such as an unknown slug, which is a minor gap for a single-parameter read 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?
The single parameter is fully documented in the schema, including its provenance ('slug from list_components or search_components, e.g. buttons-01'), so the schema does the heavy lifting. The description repeats the notion of 'by slug' without adding format or validation meaning beyond the schema; baseline 3 is appropriate at 100% coverage.
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 plus the exact artifact returned ('full Vue SFC source by slug'), which is far more informative than the title 'Get Component'. It implies but never explicitly contrasts itself with list_components or search_components, so the sibling 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?
Usage is only implied: the slug-based lookup suggests it is called after discovering a slug, and that hint lives in the schema rather than the description. There is no explicit 'use this when you already have a slug, use search_components otherwise' statement or exclusion of alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_setup_guideGet Setup GuideARead-onlyInspect
How to set up Quasar (Quasar CLI, Nuxt or Vite) and paste a QuasarUI Component into a project, including the icon sets the Components need.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The readOnlyHint annotation already establishes this as a safe read, so the description's job is lighter. It adds useful content scope—the three framework flavors and the icon sets—which tells the agent what the guide covers, though it omits the response format (prose/markdown, length) and whether it is a static doc.
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 'How to set up Quasar,' and every clause adds scope (framework options, component pasting, icon sets). The phrasing around 'paste a QuasarUI Component' is slightly awkward but not wasteful.
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 parameters and no output schema, the description only needs to convey what the guide contains and that it is read-only, which it does. The main remaining gap is the expected return shape, which an agent would have to discover by calling.
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?
The tool takes zero parameters, which is the baseline-4 case; there is nothing for the description to disambiguate. The absence of any input is consistent with a static documentation fetch.
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 resource—a setup guide for Quasar (Quasar CLI, Nuxt or Vite) covering component pasting and icon sets—which is clearly distinct from the sibling component-lookup tools. It does not literally say 'returns a guide,' relying on the title to supply the retrieval verb, so it falls just short of a perfect 5.
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?
Usage is only implied: an agent can infer this is the tool for initial project setup rather than component lookup, but the description never states when to call it or points to siblings like get_component once setup is done. No explicit when/when-not guidance is given.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_blocksList BlocksARead-onlyInspect
List every QuasarUI Block (a group of related Components, e.g. pricing-sections) with its tags, how many Components it has, how many are Free, and its page URL.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already covers the safety profile, so the description's added value is the payload shape: tags, component count, free-tier count, and page URL are disclosed. The word 'every' also signals an unpaginated full enumeration, which is genuinely useful 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.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single front-loaded sentence with no filler; every clause (definition, returned fields) earns its place and there is no redundant restatement of the title.
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 parameters, no output schema, and read-only annotations, the description carries exactly the missing information — what a Block is and what fields come back. Nothing an agent needs in order to call it correctly is absent.
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?
The tool takes zero parameters, so there is nothing for the description to disambiguate — baseline 4 applies. No misleading hints about filtering or paging parameters are introduced.
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 (List) and resource (QuasarUI Block), and defines the domain term inline as 'a group of related Components, e.g. pricing-sections'. That parenthetical implicitly separates it from the sibling list_components, so an agent can choose between them without opening a schema.
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?
Usage is only implied: an agent infers this is the enumeration tool for blocks, but the description never states when to prefer it over search_components or list_components, nor any exclusions. For a no-param list tool the inference is easy, which keeps this above a 2.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsList ComponentsARead-onlyInspect
List the Components of one Block, each with "access": "free" (source available to anyone) or "paid" (needs All Access or Blocks Pro).
| Name | Required | Description | Default |
|---|---|---|---|
| block | Yes | Block slug from list_blocks, e.g. pricing-sections |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint already declares this is a safe read, so the description doesn't need to. It does add genuine value by explaining the returned 'access' values ('free' = source available to anyone, 'paid' = needs All Access or Blocks Pro), which tells the agent about licensing constraints. It says nothing about result size or pagination.
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, front-loaded with the action, and every clause carries meaning (scope plus the access-value glossary). Slightly dense with quoted literals, but no wasted text.
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-param read tool with no output schema, the definition covers scope, required input source, and the meaning of the main returned field. Missing only volume/pagination behavior and a clear pointer to sibling alternatives.
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 documents the 'block' slug with an example. The description's phrase 'of one Block' reinforces the single-block scoping but adds no format or syntax beyond the schema; baseline 3 is appropriate.
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 ('List the Components of one Block') and even names the returned field and its two values. It doesn't explicitly contrast with search_components or get_component, so an agent must infer that this is the per-block enumeration path.
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?
Usage is implied by 'of one Block' and the schema note that the block slug comes from list_blocks, giving a reasonable workflow hint. There is no explicit when-to-use/when-not or mention of when search_components instead of this listing is preferable.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_componentsSearch ComponentsARead-onlyInspect
Search Components by a plain-language query, e.g. "pricing table with a monthly/yearly toggle" or a slug. Returns up to 20 matches, best first, each with its Free or Paid access.
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | What you are looking for |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations only cover readOnlyHint, so the description carries the return-behavior burden — and it does disclose result cap (up to 20), ordering (best first), and per-result payload (Free or Paid access). What's missing is what happens when the corpus exceeds 20 matches (truncation vs. pagination), which matters for a capped search.
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 verb and resource, then query forms, then return shape. No filler and nothing repeated from the schema.
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-param, read-only search with no output schema, the description covers input formats, result count, ranking, and result fields — essentially everything needed to call it. The remaining gap is sibling routing and behavior beyond the 20-result cap.
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 single param is documented as 'What you are looking for', so baseline is 3. The description earns the extra point by supplying concrete query forms — natural-language descriptions like 'pricing table with a monthly/yearly toggle' and slug input — which tells the agent the accepted syntax beyond the schema.
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 ('Search') and resource ('Components') plus the query form accepted (plain-language or slug). It doesn't name the sibling tools, so the distinction from list_components (enumerate all) and get_component (fetch one by id) is left implicit rather than explicit.
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 example query illustrates usage, so the agent can infer 'use this when you have a descriptive need rather than an id'. But there is no explicit when-to-use/when-not and no pointer to list_components for browsing or get_component for full detail, which is the main routing decision an agent faces here.
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.
5 tool updates
v1.0.0- First observed
get_component - First observed
get_setup_guide - First observed
list_blocks - First observed
list_components - First observed
search_components
TDQS
Scored across 5 tools
Each tool has a clearly distinct role: browsing blocks, browsing components within a block, searching components, retrieving source, and setup guidance. There is no meaningful overlap between list_components and search_components because one is hierarchy-based and the other is query-based.
All tool names use snake_case and follow a predictable verb_noun pattern: get_*, list_*, and search_*. The convention is consistent across the entire small set.
Five tools is well scoped for a component catalog server. Each tool provides a distinct browsing or retrieval capability without redundant operations.
The surface covers the core workflow: discover blocks, list components, search, fetch source, and get setup instructions. Minor gaps could include a direct list-all-components operation or richer block detail retrieval, but agents can work around these via search and list_components.
Maintenance
Related MCP Connectors
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Licence-cleared, quality-scored code components for coding agents. Free search, metered pulls.
Search, read and install agent-ready React components, screens and blocks for AI products.
React + Tailwind UI components and recipes your AI coding tool can search and install.
101
Related MCP Servers
- FlicenseNot gradedqualityDmaintenanceExposes SigmaUI Design System components to AI assistants, providing tools for component documentation, search, usage examples, and design tokens to accelerate Vue 3 and Nuxt 3 UI development.-
- AlicenseBqualityCmaintenanceEnables AI assistants to search, understand, and retrieve UI components from ui-layouts.com through tools like search, documentation, metadata, and source code access.461 npm34MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to access documentation of Vue UI components, including props, events, and slots, for generating correct usage code.7MIT
- FlicenseNot gradedqualityBmaintenanceEnables AI coding assistants to search, discover, and retrieve UI HUB components, source code, dependencies, templates, and animations via MCP.-