MCP UI Research
Allows searching the web via DuckDuckGo to gather visual references and patterns for UI research.
Provides persistent storage for project research, delivery records, and implementation reviews, enabling recall across sessions.
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., "@MCP UI ResearchResearch premium car dealership niche and generate original HTML/CSS components."
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.
MCP UI Research
Servidor MCP via stdio, em Python/FastMCP, que ajuda agentes a pesquisar referências de um nicho, extrair padrões visuais, sintetizar componentes HTML/CSS originais e lembrar o que foi pesquisado e entregue.
Ele deliberadamente não clona código de terceiros. O servidor coleta sinais agregados — cores, tipografia declarada, estrutura semântica, labels e métricas CSS — e gera componentes novos. Isso reduz riscos autorais, de segurança e de qualidade associados a copiar páginas arbitrárias.
Ferramentas
research_niche: pesquisa referências, inspeciona páginas, recomenda decisões e devolve componentes.inspect_reference: analisa uma URL pública específica.remember_delivery: registra o que o agente implementou.recall_project: recupera pesquisa, entregas e revisões do SQLite.review_implementation: avalia HTML com verificações de semântica, responsividade e acessibilidade.
Related MCP server: stitch-bridge
Instalação e execução
python -m venv .venv
. .venv/bin/activate
pip install -e '.[dev]'
mcp-ui-researchO protocolo MCP usa stdout; logs e mensagens de aplicação nunca devem ser impressos nele.
Configuração JSON em clientes MCP
Depois de instalar as dependências, clientes compatíveis com o formato mcpServers podem iniciar o servidor diretamente pelo executável criado no ambiente virtual:
{
"mcpServers": {
"ui-research": {
"command": "/caminho/absoluto/MCPUIResearch/.venv/bin/mcp-ui-research",
"args": [],
"env": {
"MCP_UI_DATA_DIR": "/caminho/absoluto/MCPUIResearch/.mcp-ui-research",
"MCP_UI_HTTP_TIMEOUT": "12"
}
}
}
}Também é possível executar o módulo Python explicitamente. Essa forma é útil quando o cliente exige command e args separados:
{
"mcpServers": {
"ui-research": {
"command": "/caminho/absoluto/MCPUIResearch/.venv/bin/python",
"args": ["-m", "mcp_ui_research.server"],
"env": {
"MCP_UI_DATA_DIR": "/caminho/absoluto/MCPUIResearch/.mcp-ui-research"
}
}
}
}Use sempre caminhos absolutos. No Windows, aponte command para .venv\\Scripts\\python.exe e utilize caminhos JSON escapados, como C:\\Projetos\\MCPUIResearch.
Configuração direta no LM Studio
No LM Studio, abra a aba Program na barra lateral direita e selecione Install > Edit mcp.json. O LM Studio utiliza o formato mcpServers compatível com servidores MCP locais via stdio.
Para este repositório, instalado no caminho atual, adicione ao mcp.json:
{
"mcpServers": {
"ui-research": {
"command": "/home/wanbnn/Projetos/MCPUIResearch/.venv/bin/python",
"args": ["-m", "mcp_ui_research.server"],
"env": {
"MCP_UI_DATA_DIR": "/home/wanbnn/Projetos/MCPUIResearch/.mcp-ui-research",
"MCP_UI_HTTP_TIMEOUT": "12"
}
}
}
}Salve o mcp.json, ative o servidor ui-research na tela de MCPs e selecione um modelo com suporte adequado a tool calling. Se o LM Studio já estava com uma conversa aberta, inicie uma nova conversa para garantir que a lista de ferramentas seja carregada.
Exemplo de solicitação no chat do LM Studio:
Crie uma landing page responsiva em HTML e CSS para uma loja de carros premium.
Antes de implementar, use ui-research para pesquisar o nicho com o project_id
"loja-carros-premium". Aplique os padrões relevantes, registre a entrega e revise
o HTML final usando as ferramentas do MCP.O fluxo esperado de chamadas é:
research_niche → implementação pelo agente → remember_delivery
→ review_implementation → correções finaisFluxo recomendado ao agente
Chame
research_niche(niche, project_id)antes de desenhar a página.Escolha apenas os padrões coerentes com público, marca e objetivo.
Adapte os componentes devolvidos; não trate o código como página completa.
Chame
remember_deliveryao implementar.Envie o HTML final para
review_implementation, corrija os pontos relevantes e registre novamente.
Limites e operação responsável
A busca padrão usa a página HTML do DuckDuckGo e pode sofrer rate limit ou mudança de markup.
O coletor limita tamanho, tempo e quantidade de conexões e bloqueia destinos locais/privados.
Sites muito dependentes de JavaScript podem expor poucos sinais sem um navegador headless.
Respeite termos de uso,
robots.txt, direitos autorais e marcas antes de uso comercial.Resultados da web são dados não confiáveis; o servidor não executa scripts encontrados.
Testes
pytest
ruff check .Available Tools
5 toolsinspect_referenceA
Inspect one public page for metadata and aggregate visual/UI patterns.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
| url | Yes | |
| fonts | No | |
| title | No | |
| colors | No | |
| landmarks | No | |
| ui_labels | No | |
| css_metrics | No | |
| description | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It implies a read-only inspection of a public page but does not clarify what 'aggregate visual/UI patterns' means, whether any network/fetch limits apply, or how errors are handled. The presence of an output schema mitigates but does not fully compensate for the lack of behavioral detail.
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, front-loaded sentence that directly states the tool's function without redundancy or filler. Every word earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with one parameter and an output schema, the description covers the essential purpose and scope. The vague phrase 'aggregate visual/UI patterns' and the lack of usage alternatives prevent a perfect score, but overall it is adequately 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?
Schema coverage for the url parameter is 0%, so the description must compensate. It does add the semantic constraint that the page must be 'public,' which goes beyond the parameter name. However, it does not specify URL format or validation rules, leaving some 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 verb 'inspect' with a specific resource ('one public page') and the intended outputs ('metadata and aggregate visual/UI patterns'). This distinguishes it from sibling tools like research_niche and review_implementation, which suggest different purposes.
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 inspecting a single public page but provides no explicit when-to-use versus alternatives, nor any exclusions. The scoping constraint 'one public page' gives some context, but no comparative guidance is offered.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
recall_projectB
Recall prior research, delivery summaries, and reviews for a project.
| Name | Required | Description | Default |
|---|---|---|---|
| kind | No | ||
| limit | No | ||
| project_id | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
| result | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the full burden of behavioral disclosure, but it only says 'recall' without detailing return format, sorting, filtering, authentication needs, or what kind of summaries are included. This is a minimal disclosure that leaves agents uncertain about operational 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, front-loaded sentence with no fluff. It efficiently communicates the core purpose, using only seven words while still distinguishing the tool's function.
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?
Although an output schema exists, the description does not explain how the kind or limit parameters affect results, what types of 'prior research' or 'reviews' are included, or how to filter by project. For a retrieval tool with three parameters, this is too incomplete for reliable selection and 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%, and the description does not mention any of the three parameters (project_id, kind, limit). The agent receives no guidance on how to set or interpret these parameters beyond the schema's basic types and constraints, so the description fails to compensate for the coverage 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 uses a specific verb ('recall') and names the resource type ('prior research, delivery summaries, and reviews for a project'), clearly distinguishing it from sibling tools like research_niche (which creates research) and remember_delivery (which stores delivery info). This gives the agent a precise idea of what the tool does.
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 retrieving historical project information but does not explicitly state when to use this tool versus alternatives like inspect_reference or review_implementation. It lacks explicit exclusions or alternative tool references, so guidance is only implied.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
remember_deliveryB
Persist what the agent implemented so later reviews can compare intent and delivery.
| Name | Required | Description | Default |
|---|---|---|---|
| files | No | ||
| summary | Yes | ||
| project_id | Yes | ||
| research_id | No |
Output Schema
| Name | Required | Description |
|---|---|---|
No output parameters | ||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It indicates a write operation ('persist') but does not mention whether it overwrites existing records, whether it is idempotent, if authorization is required, or any side effects. It adds only minimal context beyond the tool's name and purpose.
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 key verb ('Persist') and contains no filler or redundant information. Every word contributes to explaining the core functionality, making it highly concise 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?
Given the tool has 4 parameters and no schema-level descriptions, the description is too sparse to provide complete context. Even though an output schema exists, the description does not explain how the tool fits into the workflow, what constitutes 'delivery', or what data structures are involved. The minimal text leaves important gaps for an agent deciding when and how to use it.
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% for 4 parameters, and the description does not compensate. It makes no mention of project_id, summary, files, or research_id, nor explains their roles or relationships. This leaves the input schema as the only source of parameter information, which is insufficient for correct invocation.
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 ('persist') and identifies the resource ('what the agent implemented'). It also states the intended outcome ('so later reviews can compare intent and delivery'), which clearly distinguishes it from sibling tools like review_implementation (which likely performs the comparison) and recall_project (which likely retrieves prior records).
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 context: after implementing something, persist it for later reviews. However, it does not explicitly state when not to use the tool or mention alternatives. It lacks direct guidance on choosing between remember_delivery and its siblings, though the purpose is clear enough to infer the intended timing.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
research_nicheB
Research a niche and return references, design patterns, guidance, and original components.
| Name | Required | Description | Default |
|---|---|---|---|
| niche | Yes | ||
| language | No | pt-BR | |
| project_id | Yes | ||
| max_references | No |
Output Schema
| Name | Required | Description |
|---|---|---|
| avoid | Yes | |
| niche | Yes | |
| profiles | Yes | |
| components | Yes | |
| references | Yes | |
| research_id | Yes | |
| recommendations | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must convey behavior. It states the tool 'returns' specific outputs but does not disclose side effects, required permissions, persistence, or failure behavior, leaving significant behavioral ambiguity.
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 with no redundancy or irrelevant detail, effectively front-loaded with the action and deliverables.
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 4 parameters and no annotation context. The description states the high-level purpose but omits how project_id integration works, what 'original components' means, and whether research is persisted. However, the output schema likely covers return structure, so overall completeness is borderline adequate.
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%; the description only clarifies the 'niche' parameter by naming it, while leaving 'language', 'project_id', and 'max_references' unexplained beyond their names and schema constraints.
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 the specific verb 'Research' with the resource 'niche' and enumerates output types (references, design patterns, guidance, original components), which clearly distinguishes it from siblings like inspect_reference and recall_project.
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 when needing to research a niche, but provides no explicit guidance on when to use this tool over siblings or any exclusion criteria.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
review_implementationB
Run a deterministic HTML quality review and remember actionable feedback.
| Name | Required | Description | Default |
|---|---|---|---|
| html | Yes | ||
| project_id | Yes |
Output Schema
| Name | Required | Description |
|---|---|---|
| score | Yes | |
| issues | Yes | |
| verdict | Yes | |
| strengths | Yes | |
| next_actions | Yes |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description must fully disclose behavior. It introduces 'deterministic' and 'remember' but fails to explain what 'remember' means (e.g., side effects, storage, idempotency) or what the review output looks like. This is significant for a tool that implies state changes.
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, front-loaded sentence with no wasted words. Every phrase ('deterministic', 'quality review', 'remember actionable feedback') contributes to conveying the purpose. Structurally, it is concise and clear.
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 gives a two-part operation but is vague on the 'remember' side-effect and the scope of the review. Since an output schema exists, return-value details are not needed, but the lack of annotation and incomplete side-effect disclosure leave gaps in understanding the tool's complete behavior.
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. It does not mention project_id or html at all, leaving their semantics to be inferred from the tool name and the word 'HTML'. This is minimal compensation and falls short.
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 (run a quality review) on a specific resource (HTML) and adds the distinguishing trait 'deterministic' plus the outcome of remembering feedback. It stands apart from siblings like inspect_reference or research_niche, though it could be more explicit about what 'quality review' entails.
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: the tool is used when you need to run an HTML quality review and persist feedback. However, it does not explicitly state when not to use it or mention any alternatives among the sibling tools, so it only reaches the 'implied usage' level.
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
v0.1.0- First observed
inspect_reference - First observed
recall_project - First observed
remember_delivery - First observed
research_niche - First observed
review_implementation
TDQS
Scored across 5 tools
Each tool targets a distinct phase: research, inspection, memory, recall, and review. There is no overlap or ambiguity between them.
All tool names follow a consistent verb_noun pattern (research_niche, inspect_reference, remember_delivery, recall_project, review_implementation).
Five tools perfectly cover the core workflow without unnecessary extras, fitting well within the ideal range.
The tool surface covers the full research-to-review lifecycle: gather info, store delivery, recall past work, and assess implementation. No obvious gaps.
Maintenance
Related MCP Connectors
MCP server for building and testing AI agents with multi-model experimentation and insights.
MCP Server for an Agent Task Marketplace
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
The Figma MCP server brings Figma design context directly into your AI workflow.
Related MCP Servers
- AlicenseAqualityDmaintenanceA powerful MCP server for UI designers and developers to extract, analyze, and clone website front-end code (HTML, CSS) with pixel-perfect accuracy using browser automation.113 npm3MIT
- FlicenseAqualityDmaintenanceMCP server that gives AI coding agents the ability to design UIs through Google Stitch. It generates production-ready HTML and screenshots from natural language prompts.9-
- FlicenseAqualityNot gradedmaintenanceMCP server enabling AI agents to search, retrieve details, and compare UI components from 13 popular UI libraries.3-
- FlicenseAqualityCmaintenanceMCP server for image understanding that analyzes UI designs, HTML pages, and visual layouts using Agnes 2.0 Flash, returning structured descriptions with layout hierarchy, components, text, interactions, and accessibility notes.1-