front-design-mcp
The front-design-mcp server is a local-first MCP server that gives AI agents frontend UI/UX intelligence by indexing and searching frontend component catalogs, design patterns, and motion libraries. You can:
Perform liveness and readiness checks (
front_design_ping,front_design_health) to see server status, retrieval mode, and index counts.Discover frontend resources (
discover_frontend_resources) with extensive filtering (kind, framework, license, etc.).Search documentation chunks (
search_frontend_knowledge) using BM25 or hybrid search, getting citations and provenance.Get detailed resource info (
get_resource_details) by ID, including related chunks and licensing.Compare options (
compare_frontend_options) side-by-side, separating facts from inferences.Get stack recommendations (
recommend_frontend_stack) based on requirements, constraints, and aesthetics.Find components/patterns (
find_components) from a plain-language intent (e.g., 'hero', 'navbar').Find animation patterns (
find_animation_patterns) with accessibility and performance notes.Build an implementation brief (
build_frontend_brief) from a product description, with stack, components, motion, design tokens, and acceptance criteria.
All outputs include provenance, licenses, and a clear split between facts and inferences.
Generates embeddings through an OpenAI-compatible API for vector and hybrid search of indexed frontend resources when PostgreSQL + pgvector is configured.
Provides an optional PostgreSQL + pgvector storage backend enabling full-text, vector, and hybrid (RRF) retrieval of frontend resources.
Provides the default local SQLite storage backend with BM25 lexical search for offline frontend resource discovery.
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., "@front-design-mcpfind a responsive navbar component with dropdown"
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.
🎨 front-design-mcp
Local-first FastMCP server that gives AI agents frontend UI/UX intelligence
front-design-mcp indexes offline frontend catalogs (components, patterns, motion libraries) and exposes discover / search / compare / recommend tools over stdio MCP — SQLite + BM25 by default, with optional PostgreSQL + pgvector hybrid search when you add an embedding provider.
✨ Key Features
📦 Offline by default — SQLite + BM25 needs no PostgreSQL, no API key, and no network
🧰 10 MCP tools — discover, search, details, compare, recommend, find components/animations, and build implementation briefs
📚 Measured corpus — 90 resources / 221 chunks from 6 sources (fixtures under
data/fixtures/)🐘 Optional PostgreSQL + pgvector — lexical (
tsvector), vector, and hybrid (RRF) when an embedding provider is configured🔐 Agent-safe outputs — provenance, licenses, and a clear split between facts and inferences
🔄 Incremental ingest — content-hash sync, optional prune, embedding reuse; exit codes
0/1/2(partial)🔌 stdio only — no HTTP transport and no authentication are implemented (not production ready)
Related MCP server: LocalNest MCP
🏗️ Architecture
flowchart LR
Client[MCP client] --> Server[FastMCP server]
Server --> Handlers[Tool handlers]
Handlers --> Search[SearchService]
Search --> BM25[BM25 in-process]
Search --> PGSearch[PostgreSQL tsvector + pgvector]
BM25 --> StoreIface[Store interface]
PGSearch --> StoreIface
StoreIface --> Sqlite[SqliteStore]
StoreIface --> Postgres[PostgresStore]
Ingest[front-design-ingest CLI] --> Adapters[Source adapters]
Adapters --> Fixtures[Fixtures]
Adapters --> StoreIface
Embed[Embedding provider] --> PGSearch🔀 Storage & Search Modes
SQLite + BM25 is the default and needs no PostgreSQL, no API key, and no network.
Vector and hybrid search require both PostgreSQL + pgvector and an embedding provider. SQLite mode has neither. Hybrid search only applies in that PostgreSQL + provider configuration — call front_design_health to see whether hybrid is actually active.
SQLite (default) | PostgreSQL + pgvector | |
External services | None | PostgreSQL 15+ with the pgvector extension (verified on 16.14 + pgvector 0.6.0) |
Extra dependencies | None beyond the base install |
|
Lexical strategy | In-process BM25 ( | PostgreSQL |
Vector search | No | Yes, when an embedding provider is configured |
Hybrid / RRF | No | Yes, when vector search is available ( |
Migrations | Automatic SQLite schema on open | Alembic ( |
Filters |
| Same filters, pushed into SQL |
Best for | Local / offline agents, zero infra | Semantic + hybrid retrieval with a chosen embedding model |
Measured retrieval quality
26 hand-labelled English+Spanish queries, corpus 90/221, rrf_k=60, fastembed / BAAI/bge-small-en-v1.5 / 384 dims:
config | Recall@10 | MRR@10 | nDCG@10 |
sqlite-bm25 | 0.696 | 0.826 | 0.701 |
postgres-lexical | 0.710 | 0.810 | 0.709 |
postgres-vector | 0.884 | 0.870 | 0.813 |
postgres-hybrid | 0.862 | 0.899 | 0.823 |
With sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2 (384 dims) instead: postgres-vector 0.870 / 0.822 / 0.770 and postgres-hybrid 0.899 / 0.920 / 0.846.
⚠️ Caveat: 26 hand-labelled queries on a 90-resource corpus is far too small for statistical significance. Latency figures are deliberately omitted here because they are single-machine, tiny-corpus numbers — see docs/evaluation.md.
📋 Requirements
Python 3.11 or 3.12 (
requires-python >= 3.11)Package
0.1.0, licence Apache-2.0Pinned core: FastMCP 3.4.5, mcp 1.29.0, pydantic 2.13.4, rank-bm25 0.2.2
Default path: no database server, no API key, no network
Optional PostgreSQL path: PostgreSQL 15+ with the pgvector extension (tested on 16.14 + pgvector 0.6.0)
Optional embeddings: OpenAI-compatible API (
--extra embeddings) or local fastembed (uv sync --group local)
🚀 Quick Start (SQLite, default)
uv sync --all-extras
uv run front-design-ingest --offline
uv run front-design-mcp
# equivalent:
# uv run python -m front_design_mcpThis writes a SQLite store under ./data/store/ (or FRONT_DESIGN_DATA_DIR) and starts the MCP server on stdio. No PostgreSQL, no API key, no network.
🐘 PostgreSQL + pgvector Setup
Opt-in path for lexical + vector + hybrid retrieval.
1. Start PostgreSQL (dev Compose)
docker-compose.yml ships a development-only pgvector/pgvector:pg16 service (user/password/db front_design / front_design / front_design, bound to 127.0.0.1:5432):
docker compose up -d
docker compose ps # wait until healthy💡 Those credentials are dev defaults only — do not use them in production.
2. Install extras and configure
uv sync --extra postgres
# For local embeddings also:
# uv sync --extra postgres --group local
# Or with everything:
# uv sync --all-extras --group localexport FRONT_DESIGN_STORE_BACKEND=postgres
export FRONT_DESIGN_DATABASE_URL=postgresql+psycopg://front_design:front_design@127.0.0.1:5432/front_design
# Choose an embedding provider BEFORE migrating (dimension is fixed at migration time).
export FRONT_DESIGN_EMBEDDING_PROVIDER=fastembed
export FRONT_DESIGN_EMBEDDING_MODEL=BAAI/bge-small-en-v1.5
# OpenAI alternative:
# export FRONT_DESIGN_EMBEDDING_PROVIDER=openai
# export FRONT_DESIGN_EMBEDDING_MODEL=text-embedding-3-small
# export FRONT_DESIGN_EMBEDDING_API_KEY=YOUR_OPENAI_API_KEY_HERE⚠️ The
embeddings.embeddingcolumn is created asvector(N)from the configured provider/model (or an explicitFRONT_DESIGN_EMBEDDING_DIMENSIONS). There is no default: if the dimension cannot be derived, the migration fails rather than guessing. Changing to a different dimension later requires a fresh schema and a full re-embed.
🛡️ Switching to a different model of the same dimension passes every dimension check but makes similarity scores meaningless. The server compares the configured model against the identities actually stored, and if they disagree it skips the vector branch, answers with lexical search, and reports the mismatch through
front_design_healthinstead of returning plausible-looking nonsense. Re-run ingest to re-embed.
3. Migrate and ingest
uv run alembic upgrade head
uv run front-design-ingest --offline
uv run front-design-mcpConfirm hybrid is live with the front_design_health tool (capabilities.hybrid_search / search.effective_mode).
⚙️ Configuration
All settings use the FRONT_DESIGN_ prefix (see .env.example and src/front_design_mcp/config.py). There are no connection-pool settings — pooling is not implemented.
Core
Variable | Default | Meaning |
|
| Root for fixtures, cache, and store artifacts |
|
| SQLite database path |
|
|
|
|
| HTTP timeout (seconds) for network ingest |
|
| Allow |
Storage
Variable | Default | Meaning |
|
|
|
|
| Required for postgres ( |
|
| Statement timeout; |
Embeddings
Variable | Default | Meaning |
|
|
|
|
| Provider default when unset |
|
| Optional override; must match the model |
|
| Required for |
|
| OpenAI-compatible base URL override |
|
| Embed batch size |
|
| Provider timeout (seconds) |
|
| Provider retry count |
|
| Bump to force re-embedding after chunking changes |
Providers
Provider | Install | Models (native dims) |
| (default) | Vector search disabled |
|
|
|
|
|
|
Search
Variable | Default | Meaning |
|
|
|
|
| Reciprocal Rank Fusion smoothing constant |
|
| Lexical branch weight (untuned) |
|
| Vector branch weight (untuned) |
|
| Per-branch candidate pool before fusion |
🧰 MCP Tools Available
Tool | Purpose |
| Liveness — version, backend, embedding provider, indexed resource count |
| Readiness — effective retrieval mode, hybrid/vector availability, counts |
| Browse/filter the catalog (kind, framework, tags, license, …) |
| Search documentation chunks (BM25 or hybrid depending on config) |
| Full resource + related chunks by |
| Compare options by id/name; separates facts from inferences |
| Stack suggestion from requirements + constraints |
| Intent → components/patterns |
| Motion patterns with a11y / cost notes when known |
| Implementation brief from a product description |
Also registered:
Kind | Name |
Resource |
|
Resource template |
|
Prompt |
|
🔌 Client configuration
Copy the examples under configs/ and replace /absolute/path/to/front-design-mcp with your clone path.
Cursor / Claude Desktop — SQLite (default)
{
"mcpServers": {
"front_design_mcp": {
"command": "uv",
"args": [
"run",
"--directory",
"/absolute/path/to/front-design-mcp",
"python",
"-m",
"front_design_mcp"
],
"env": {
"FRONT_DESIGN_LOG_LEVEL": "INFO",
"FRONT_DESIGN_ENABLE_NETWORK_INGEST": "false",
"FRONT_DESIGN_EMBEDDING_PROVIDER": "none"
}
}
}
}Cursor / Claude Desktop — PostgreSQL + embeddings
{
"mcpServers": {
"front_design_mcp": {
"command": "uv",
"args": [
"run",
"--directory",
"/absolute/path/to/front-design-mcp",
"python",
"-m",
"front_design_mcp"
],
"env": {
"FRONT_DESIGN_LOG_LEVEL": "INFO",
"FRONT_DESIGN_ENABLE_NETWORK_INGEST": "false",
"FRONT_DESIGN_STORE_BACKEND": "postgres",
"FRONT_DESIGN_DATABASE_URL": "postgresql+psycopg://USER:PASSWORD@127.0.0.1:5432/DBNAME",
"FRONT_DESIGN_EMBEDDING_PROVIDER": "fastembed",
"FRONT_DESIGN_EMBEDDING_MODEL": "BAAI/bge-small-en-v1.5"
}
}
}
}For OpenAI embeddings, set FRONT_DESIGN_EMBEDDING_PROVIDER to openai, pick a model, and set FRONT_DESIGN_EMBEDDING_API_KEY to YOUR_OPENAI_API_KEY_HERE (never commit a real key).
Example files: configs/cursor.mcp.json.example, configs/claude-desktop.mcp.json.example.
💻 CLI Quick Reference
# Server (stdio)
uv run front-design-mcp
uv run python -m front_design_mcp
# Ingest (exit 0=success, 1=failed, 2=partial)
uv run front-design-ingest --offline
uv run front-design-ingest --online # requires ENABLE_NETWORK_INGEST=true
uv run front-design-ingest --offline --source shadcn
uv run front-design-ingest --offline --prune
uv run front-design-ingest --offline --no-prune
uv run front-design-ingest --offline --embed
uv run front-design-ingest --offline --no-embed
uv run front-design-ingest --offline --backend sqlite
uv run front-design-ingest --offline --backend postgres
uv run front-design-ingest --offline --json
# Migrations (postgres)
uv run alembic upgrade head
uv run alembic current
uv run alembic history
uv run alembic downgrade base
# Evaluation
uv run python scripts/evaluate_rag.py
uv run python scripts/benchmark_retrieval.py --markdown
uv run python scripts/benchmark_retrieval.py --config sqlite-bm25 --json
uv run python scripts/mcp_smoke.py🔄 Ingestion & Sync
Offline fixtures are the default (
--offline). Network ingest is off untilFRONT_DESIGN_ENABLE_NETWORK_INGEST=true.Chunks are written incrementally when any persisted field changes (title, content, tags, URL, version, licence — not only
content_sha256). Adapter-stampedlast_indexed_atalone does not force a rewrite.--prune(default) deletes store rows that disappeared from a source. A source whose adapter errored, or that had any item-level normalization failure, is never pruned (a partial catalog is not authoritative); the report recordsprune_skipped_reasonand the run ispartial.With an embedding provider,
--embed(default) generates vectors for changed embedded text (title + content) and reuses embeddings when that fingerprint + model identity still match; tag/URL/licence-only edits do not force re-embedding.--no-embedskips that step.Exit codes: 0 success, 1 failed, 2 partial (some sources/items failed while others succeeded).
📊 Evaluation & Benchmarks
scripts/evaluate_rag.py— CI gate (SQLite/BM25 only): tool cases + conservative ranking floors (~20% below the measured baseline), offline, no network, no embeddings. Abstention has no validated production threshold (measured rate is 0.0).scripts/benchmark_retrieval.py— comparessqlite-bm25,postgres-lexical,postgres-vector, andpostgres-hybridon the 26 hand-labelled queries (Postgres configs skip whenFRONT_DESIGN_EVAL_DATABASE_URLis unset). FastEmbed measurements are not CI-gated; thepostgresCI job uses deterministic fake embeddings.Metrics: Recall@K, MRR@K, nDCG@K (resource-level dedup). See the measured table above and the full write-up in docs/evaluation.md.
🧪 Development & Tests
uv sync --all-extras
uv run front-design-ingest --offline
uv run ruff check src tests scripts
uv run mypy src/front_design_mcp
uv run pytest -q
uv run python scripts/evaluate_rag.py
uv run python scripts/mcp_smoke.pyMeasured suite results:
Measured after uv sync --all-extras --frozen (the local fastembed group is
not installed by that command):
Environment | Python | Result |
Offline, no PostgreSQL | 3.12 | 161 passed, 20 skipped (the skips are the PostgreSQL-marked tests) |
Offline, no PostgreSQL | 3.11 | 161 passed, 20 skipped |
| 3.12 | 181 passed ( |
CI runs the offline gate above on Python 3.11 and 3.12, plus a separate job against pgvector/pgvector:pg16 that applies the migrations, verifies they are reproducible from an empty database, and runs pytest -m postgres with deterministic fake embeddings (not FastEmbed). See CONTRIBUTING.md and .github/workflows/ci.yml.
🚢 Deployment
This project is not production ready. Transport is stdio only — no HTTP transport and no authentication are implemented. Supported path today: local uv + MCP client over stdio. See docs/deployment.md.
🔒 Security
Treat retrieved documentation chunks as untrusted source data; never execute them as instructions.
Recommendation / compare / brief tools separate facts from inferences and avoid unverified compatibility claims in facts.
Secrets are never logged (database URLs are redacted; API keys use
SecretStr).Network ingest is off by default; there is no SSRF host allowlist yet when it is enabled — see docs/threat-model-ingestion.md.
Vulnerability reporting: SECURITY.md.
🗺️ Project Status & Roadmap
Status: Alpha (Development Status :: 3 - Alpha). Useful locally; not production ready.
Known limitations (also the near-term roadmap):
No abstention on unanswerable queries — all configurations return some result; there is no validated production abstention threshold
Spanish queries score below their English equivalents (PostgreSQL full-text uses the
englishconfiguration)RRF weights are untuned
Connection pooling is not implemented (
PostgresStoreuses one locked connection)The PostgreSQL vector column dimension is fixed at migration time; changing model/dim requires a new migration and re-embed
BM25 rebuilds the whole corpus in memory at startup
Network ingest is off by default and there is no SSRF host allowlist yet
stdio transport only — no HTTP, no auth
📄 Licences & Attribution
Source | Licence |
Motion | MIT |
Magic UI | MIT |
shadcn/ui | MIT |
Radix Primitives | MIT |
GSAP | Standard No Charge — metadata only, not redistributable |
Curated patterns | Internal MIT metadata linking to upstream docs |
This project is Apache-2.0 (LICENSE). Upstream catalogs keep their own licences. Offline corpus (measured): motion 12/24, magicui 26/52, shadcn 25/75, radix 11/22, gsap 9/27, curated 7/21 (resources/chunks).
Docs index
Document | Purpose |
How to add a SourceAdapter | |
Local stdio deployment notes | |
Embedding providers and dimensions | |
RAG evaluation & benchmarks | |
Suggested GitHub description/topics | |
Package plan and acceptance notes | |
PostgreSQL + pgvector operator guide | |
Research notes & source facts | |
Ingestion threat model | |
ADR: FastMCP | |
ADR: local hybrid search | |
ADR: source selection | |
ADR: untrusted ingestion | |
ADR: storage backend | |
ADR: hybrid search / RRF | |
Setup notes and house rules for coding agents | |
Dev setup & PR guidelines | |
Vulnerability reporting | |
Release notes | |
Environment template |
Available Tools
10 toolsbuild_frontend_briefARead-onlyIdempotent
Build an implementation brief from product_description + constraints: stack, components, motion system, suggested design tokens, responsive behavior, and acceptance criteria. Inferences are marked clearly.
| Name | Required | Description | Default |
|---|---|---|---|
| aesthetics | No | ||
| constraints | No | ||
| performance | No | ||
| accessibility | No | ||
| target_framework | No | ||
| product_description | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and idempotentHint=true, so the safety profile is covered. The description adds value by noting that inferences are marked clearly, which is a behavioral trait about the output format. 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.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence, front-loaded with the primary verb, and conveys the essential information without redundancy. The list of output contents is slightly dense but does not include filler.
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?
The tool has an output schema, so return format is covered. However, the description does not explain the role of optional parameters or how they influence the brief, and it lacks differentiation from sibling tools. It is adequate but has clear gaps in parameter semantics and usage boundaries.
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 0%, so the description must compensate for parameter meanings. It only references product_description and constraints, leaving aesthetics, performance, accessibility, and target_framework unexplained. This provides little value beyond the schema's bare parameter names.
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 clearly states the tool's action ('Build an implementation brief') and resource, with a specific list of contents (stack, components, motion system, design tokens, etc.). This distinguishes it from sibling tools like search_frontend_knowledge or recommend_frontend_stack, which focus on discovery or recommendations rather than building a brief.
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 description implies a clear use case: generate a brief from product_description and constraints. It provides context but does not explicitly mention when not to use it or name alternatives. While no exclusions are stated, the clear input conditions are sufficient to guide usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
compare_frontend_optionsARead-onlyIdempotent
Compare frontend options by id or name. Primary parameter: options (list of ids/names). Deprecated alias: resources. Separates facts from inferences; never claims unverified compatibility.
| Name | Required | Description | Default |
|---|---|---|---|
| options | No | ||
| criteria | No | ||
| resources | No |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond the readOnlyHint and idempotentHint annotations, the description discloses behavioral traits: it separates facts from inferences and never claims unverified compatibility. It also notes the deprecated `resources` alias, adding context about backward compatibility. 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.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is only three sentences with the main purpose in the first sentence. Each subsequent sentence adds value without redundancy, making it efficient and well-structured.
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?
The description covers the core purpose and primary parameter, and the output schema likely handles return values. However, it omits the `criteria` parameter semantics and does not explicitly state when to use this tool versus alternatives, leaving some gaps for safe invocation.
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 description explains `options` as a list of ids/names and identifies `resources` as a deprecated alias. However, with 0% schema description coverage, the `criteria` parameter is not mentioned at all, leaving a significant gap in parameter understanding.
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 clearly states the tool compares frontend options using id or name, which is a specific verb+resource. This distinguishes it from sibling tools like discover_frontend_resources or recommend_frontend_stack, which have different actions. The mention of 'Separates facts from inferences' adds further specificity.
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 description provides clear context that the tool is used for comparing a list of options and explains the primary parameter and deprecated alias. However, it does not explicitly state when not to use it or name alternatives, leaving exclusion logic to the agent.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
discover_frontend_resourcesARead-onlyIdempotent
Browse and filter indexed frontend resources (components, patterns, libraries). Supports category/kind, framework, style/tags, license, accessibility, animation, maturity, source_id, limit, and offset. Returns paginated items with provenance.
| Name | Required | Description | Default |
|---|---|---|---|
| kind | No | ||
| tags | No | ||
| limit | No | ||
| style | No | ||
| offset | No | ||
| license | No | ||
| category | No | ||
| maturity | No | ||
| animation | No | ||
| framework | No | ||
| source_id | No | ||
| accessibility | No | ||
| accessibility_text | No |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations already establish read-only and idempotent behavior. The description adds useful behavioral context by stating that results are paginated and include provenance, which goes beyond the annotations and input schema. It does not contradict any annotations and provides a clear sense of what the tool returns.
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?
The description is two sentences with no filler. The first sentence defines the tool's purpose, and the second lists supported filters and return characteristics, efficiently packing information without unnecessary detail.
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 read-only tool with annotations and an output schema, the description provides a solid overview: what it browses, what filters are available, and that results are paginated with provenance. However, parameter semantics remain thin, and the description could briefly hint at how filters compose, though this is partly mitigated by the presence of an output schema.
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?
With 13 parameters and 0% schema description coverage, the description carries a heavy responsibility. However, it merely lists the parameter names (category/kind, framework, style/tags, etc.) without explaining their meanings, expected values, or how they interact. This adds minimal semantic value beyond the schema's type definitions.
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 clearly states the tool's function with specific verbs ('Browse and filter') and a well-defined resource type ('indexed frontend resources' with components, patterns, libraries). It also lists the supported filter dimensions, which distinguishes it from sibling tools that target narrower categories like find_components or find_animation_patterns.
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 description implies a general browsing/filtering use case but provides no explicit guidance on when to use this tool versus alternatives such as find_components or search_frontend_knowledge. It does not state when not to use it or mention any prerequisites, leaving the agent to infer the appropriate context without clear exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
find_animation_patternsARead-onlyIdempotent
Find animation patterns for a query/use-case. Includes cost notes, accessibility, and prefers-reduced-motion support when known from indexed notes; cites sources.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | ||
| query | Yes | ||
| use_case | No | ||
| framework | No |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already cover readOnlyHint and idempotentHint, so the description adds value by disclosing that results come from indexed notes ('when known from indexed notes') and that sources are cited. This clarifies the knowledge scope and output behavior beyond the structured annotations.
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?
The description is two concise sentences, front-loaded with the primary purpose. Each sentence adds meaningful information—what the tool does and what the results include—with no redundant wording or unnecessary detail.
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?
The presence of an output schema and annotations covers return values and safety, but the 0% parameter description coverage leaves gaps. The description does not explain the limit and framework parameters, making the tool's usage incomplete for an agent attempting to invoke it correctly.
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 0%, so the description must explain parameters. It only mentions 'query/use-case', which maps to query and use_case, but leaves 'limit' and 'framework' unexplained. The bare property names offer some hint, but the description fails to compensate for the lack of schema descriptions.
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 clearly states the tool finds animation patterns for a query/use-case, using a specific verb and resource. It further distinguishes from sibling tools by listing unique features like cost notes, accessibility, prefers-reduced-motion support, and source citations.
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 description provides clear context for when to use the tool: when one needs animation patterns, and what results will include. It does not explicitly name alternative tools or state exclusions, but the usage context is unambiguous and actionable.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
find_componentsARead-onlyIdempotent
Find components/patterns for an intent string (hero, pricing, navbar, dashboard, onboarding, microinteraction, scroll animation, …) with optional framework filter.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | ||
| intent | Yes | ||
| framework | No |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint and idempotentHint, so the agent knows this is a safe read operation. The description adds context about intent strings and framework filtering, but does not disclose search behavior, result size limits, or other operational details beyond the annotations.
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?
The description is a single concise sentence that front-loads the main purpose and includes parenthetical examples. Every word contributes, with no fluff 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?
The tool is simple with three parameters and an output schema. The description covers the key inputs (intent, framework) and provides a clear functional overview. The only missing piece is the limit parameter and any explicit usage context, but given the output schema and low complexity, the description is largely complete.
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?
With 0% schema description coverage, the description must compensate. It explains the intent and framework parameters (intent string, optional framework filter), but does not mention the limit parameter. Since limit likely controls the number of results, the agent may have to guess its meaning, leaving a partial gap.
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 clearly states the tool finds components/patterns for an intent string, with specific examples (hero, pricing, navbar) and an optional framework filter. This verb+resource+scope structure distinguishes it from sibling tools like find_animation_patterns and discover_frontend_resources.
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 description implies usage for intent-based component discovery and mentions an optional framework filter, but it does not explicitly state when to use this tool over alternatives like find_animation_patterns or search_frontend_knowledge. There is no exclusion or when-not-to-use guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
front_design_healthARead-onlyIdempotent
Readiness check — storage backend, effective retrieval mode, and index counts.
Reports what the server can actually do right now: which backend is open, whether vector and hybrid search are available, which embedding provider is configured, and how many resources, chunks, and embeddings are indexed. Never returns credentials; database URLs are redacted.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint and idempotentHint, so the safety profile is covered. The description adds valuable behavioral context beyond annotations: it never returns credentials and redacts database URLs. It also clarifies that it reports dynamic server state, which is useful but not heavily detailed.
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?
The description is concise and well-structured: a brief opening sentence summarizing the purpose, followed by a clear enumeration of what it reports and a safety note. Every sentence adds value without redundancy or fluff, making it easy to parse.
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-parameter tool with an output schema, the description covers the essential aspects: backend, retrieval modes, embedding provider, index counts, and security redaction. It is sufficiently complete for an agent to decide when to call it and what to expect.
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 has zero parameters, so the baseline is 4. The description doesn't need to add parameter semantics, and it appropriately focuses on the tool's behavior and output. There is nothing to compensate for.
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 clearly states it performs a 'Readiness check' covering storage backend, retrieval mode, and index counts. It uses a specific verb and resource, and the scope ('what the server can actually do right now') distinguishes it from sibling tools like front_design_ping (liveness) and discover_frontend_resources.
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 description provides clear context for when to use the tool: to check current backend availability, search modes, and embedding provider configuration. It implies usage for readiness assessment but does not explicitly mention alternatives or exclusions, so it lacks the highest level of guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
front_design_pingARead-onlyIdempotent
Liveness check — package version, runtime mode, and indexed resource count.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and idempotentHint=true, and the description adds the specific data fields returned. This is consistent with annotations and adds useful context beyond them, though it doesn't describe potential error behavior.
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?
The description is a single sentence that is front-loaded with the core purpose ('Liveness check') and includes only essential details. No wasted words.
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 simple, no-parameter ping tool with an output schema and clear annotations, the description is adequate. It could benefit from a note distinguishing it from the similarly named 'front_design_health' sibling, but overall it covers the essential information.
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 has zero parameters, and schema description coverage is 100%. The baseline for no-parameter tools is 4, and the description doesn't need to explain parameters.
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 clearly states the tool performs a liveness check and specifies what it reports (package version, runtime mode, indexed resource count). However, it does not explicitly distinguish itself from the sibling 'front_design_health' tool, so it lacks explicit sibling differentiation.
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 phrase 'Liveness check' implies a quick health verification, providing some usage context. However, there is no explicit guidance on when to use this tool versus alternatives such as 'front_design_health'.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_resource_detailsARead-onlyIdempotent
Fetch a normalized FrontendResource by id (resource id string, e.g. motion:motion-library), related sanitized documentation chunks, and license/attribution. Parameter name is id.
| Name | Required | Description | Default |
|---|---|---|---|
| id | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint and idempotentHint, so the description doesn't need to cover safety. It adds meaningful behavior beyond annotations: that the result is 'normalized', includes 'sanitized documentation chunks', and returns 'license/attribution'. This clarifies what the agent will receive. It does not mention not-found behavior, but for a simple fetch this is acceptable.
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?
The description is a single, tightly written sentence that front-loads the primary action and object. Every clause adds value: normalized resource, id example, related sanitized chunks, license/attribution, and parameter name. No wasted words.
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?
Given the tool's low complexity (1 parameter) and the presence of an output schema, the description covers all essential context: what is fetched, the id format, and additional returned data. It is sufficiently complete for an agent to select and invoke the tool correctly without further guidance.
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 schema only provides 'id' as a bare string. The description adds crucial semantics with the phrase 'resource id string, e.g. motion:motion-library', giving a concrete example of the expected format. It also explicitly names the parameter, making the relationship between description and schema crystal clear. This fully compensates for the 0% schema description 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?
The description uses a specific verb ('Fetch') and clearly identifies the resource ('normalized FrontendResource by id') plus additional related content (documentation chunks, license/attribution). It distinguishes itself from sibling search/discovery tools by emphasizing lookup by exact id rather than free-form search.
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 description clearly implies the use case: when you have a resource id. It provides an example id format to guide correct usage. However, it does not explicitly state that you should use this instead of search when you have an id, nor does it mention any exclusions. Still, the context is clear and the example anchors the intended usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
recommend_frontend_stackARead-onlyIdempotent
Recommend a frontend stack from requirements, target_framework, constraints, aesthetics, accessibility, and performance. Returns recommendation, trade-offs, incompatibilities, plan, sources, with facts vs inferences.
| Name | Required | Description | Default |
|---|---|---|---|
| limit | No | ||
| aesthetics | No | ||
| constraints | No | ||
| performance | No | ||
| requirements | Yes | ||
| accessibility | No | ||
| target_framework | No |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and idempotentHint=true, covering safety. The description adds behavioral context by specifying the return content (recommendation, trade-offs, incompatibilities, plan, sources) and the fact vs. inference distinction, which helps the agent set expectations. 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.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single long sentence that front-loads the core purpose and then enumerates inputs and outputs. It is efficient with no filler, though splitting into two sentences would improve readability slightly.
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?
Given the output schema exists and annotations are present, the description covers the essential purpose, inputs, and output structure well. It lacks explicit usage alternatives and deeper parameter explanations, but overall it provides sufficient context for correct invocation.
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 0%, so the description must compensate, but it only lists parameter names without explaining semantics or formats. For example, it does not say what 'requirements' should look like, how 'constraints' should be structured, what 'limit' does, or any parameter-specific guidance. The mention of parameters adds minimal value beyond the schema types.
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 clearly states a specific action with a clear target: 'Recommend a frontend stack' and lists all relevant input dimensions (requirements, target_framework, constraints, aesthetics, accessibility, performance). It distinguishes itself from siblings like compare_frontend_options (which compares) and build_frontend_brief (which builds brief) by focusing on recommendation and specifying outputs.
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 usage context is implied by the description (use when you have these inputs and need a recommendation), but it does not explicitly state when to use this tool versus alternatives such as compare_frontend_options or search_frontend_knowledge. There are no exclusions or 'when not to use' guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_frontend_knowledgeARead-onlyIdempotent
Search frontend knowledge chunks. Uses BM25 on the SQLite backend and hybrid full-text + pgvector retrieval when PostgreSQL and an embedding provider are configured. Pass query plus optional filters (kind, framework, tags, source_id), limit, and detail_level (brief|standard|full). Returns scores, per-branch ranks, the retrieval mode actually used, citations, and provenance.
| Name | Required | Description | Default |
|---|---|---|---|
| kind | No | ||
| tags | No | ||
| limit | No | ||
| query | Yes | ||
| framework | No | ||
| source_id | No | ||
| detail_level | No | standard |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true and idempotentHint=true, so the description adds valuable context beyond these by disclosing the underlying retrieval backends (SQLite BM25 and PostgreSQL hybrid with pgvector) and the return structure (scores, per-branch ranks, retrieval mode, citations, provenance). This gives the agent a richer understanding of the tool's behavior without contradicting the annotations.
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?
The description is three sentences long, front-loaded with the main purpose, and each sentence adds meaningful detail. There is no redundancy or filler; it achieves high information density in a compact form.
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?
Given the tool's complexity (7 parameters, conditional backend behavior, and a rich return payload), the description covers the essential aspects: retrieval modes, filters, detail_level options, and output contents. The presence of an output schema covers the exact return structure, so the description need not list every field. It does not mention the default limit or specific prerequisites for the hybrid backend, but these are minor gaps.
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?
With schema description coverage at 0%, the description carries the burden of parameter explanation. It lists all parameters (query, kind, framework, tags, source_id, limit, detail_level) and groups the optional ones as filters, and it defines the allowed values for detail_level (brief|standard|full). However, it does not elaborate on the meaning of each filter (e.g., what values 'kind' or 'framework' accept), so the semantics remain somewhat shallow beyond the parameter names.
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 clearly states the tool's function with a specific verb and resource: 'Search frontend knowledge chunks.' It further distinguishes the tool by detailing its retrieval mechanisms (BM25, hybrid pgvector) and return values (scores, citations, provenance), which sets it apart from sibling tools like find_components or discover_frontend_resources.
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 description provides clear context on how to use the tool: 'Pass query plus optional filters (kind, framework, tags, source_id), limit, and detail_level.' However, it does not explicitly state when to use this tool versus the alternatives, nor does it mention any exclusions or alternative tool recommendations. Usage guidance is implied but not explicitly differentiated.
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.
10 tool updates
v0.1.0- First observed
build_frontend_brief - First observed
compare_frontend_options - First observed
discover_frontend_resources - First observed
find_animation_patterns - First observed
find_components - First observed
front_design_health - First observed
front_design_ping - First observed
get_resource_details - First observed
recommend_frontend_stack - First observed
search_frontend_knowledge
TDQS
Scored across 10 tools
Most tools have distinct purposes: health checks separate liveness from readiness, and search vs browse vs find differ in mechanism. However, find_components overlaps somewhat with discover_frontend_resources, and compare/recommend/build are all advisory in nature, which could cause occasional misselection.
All tool names are snake_case and follow a verb_noun pattern. Minor inconsistency: front_design_ping and front_design_health use the front_design_ prefix, while others place 'frontend' in the middle or end (e.g., discover_frontend_resources). Overall still predictable.
10 tools is well-scoped for a frontend design knowledge and advisory server. Each tool covers a distinct part of the workflow: health, discovery, search, details, comparison, recommendation, and brief building. There's no bloat or thinness.
The server provides solid coverage for the core lifecycle of frontend design assistance: discover, search, retrieve details, compare, recommend, and build a brief. Minor gaps exist, such as missing an explicit way to list all available frameworks/categories or a dedicated 'list sources' endpoint, but these are not critical.
Maintenance
Related MCP Connectors
Nifty's MCP server — exposes tasks, projects, messages, and files as tools for AI agents.
Remote MCP server for supportsheep: run AI interviews and manage support content for your blog.
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
Search GitHub, npm, PyPI, StackOverflow, ArXiv from one MCP — built for coding agents.
Related MCP Servers
- FlicenseBqualityAmaintenanceA local-first, agent-agnostic MCP server that provides semantic search, persistent memory, and automated code review capabilities for development workflows. It leverages the Auggie SDK to offer advanced tools for codebase indexing, implementation planning, and deterministic static analysis.5248-
- AlicenseBqualityCmaintenanceA local-first MCP server that provides AI agents with safe codebase access through file discovery, hybrid lexical-semantic search, and project introspection. It features durable local memory and semantic indexing while keeping all data and processing entirely on your local machine.7414 npm6MIT
- AlicenseNot gradedqualityAmaintenanceLocal-first MCP server that provides project context, verification gates, and structured tools for coding agents to discover knowledge, run diagnostics, and execute allowlisted commands within a repository.35 npmMIT
- AlicenseNot gradedqualityCmaintenanceLocal MCP server to index your codebase once and search it across AI sessions with keyword, semantic, or hybrid search, keeping all data on disk.105 npm4MIT