Skip to main content
Glama
wanbnn
by wanbnn

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-research

O 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 finais

Fluxo recomendado ao agente

  1. Chame research_niche(niche, project_id) antes de desenhar a página.

  2. Escolha apenas os padrões coerentes com público, marca e objetivo.

  3. Adapte os componentes devolvidos; não trate o código como página completa.

  4. Chame remember_delivery ao implementar.

  5. 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 tools
inspect_referenceA

Inspect one public page for metadata and aggregate visual/UI patterns.

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYes

Output Schema

ParametersJSON Schema
NameRequiredDescription
urlYes
fontsNo
titleNo
colorsNo
landmarksNo
ui_labelsNo
css_metricsNo
descriptionNo

TDQS

A3.8/5.0
Behavior3/5

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.

Conciseness5/5

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.

Completeness4/5

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.

Parameters3/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
kindNo
limitNo
project_idYes

Output Schema

ParametersJSON Schema
NameRequiredDescription
resultYes

TDQS

B3.1/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters1/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
filesNo
summaryYes
project_idYes
research_idNo

Output Schema

ParametersJSON Schema
NameRequiredDescription

No output parameters

TDQS

B3.1/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters1/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
nicheYes
languageNopt-BR
project_idYes
max_referencesNo

Output Schema

ParametersJSON Schema
NameRequiredDescription
avoidYes
nicheYes
profilesYes
componentsYes
referencesYes
research_idYes
recommendationsYes

TDQS

B3.4/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters2/5

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.

Purpose5/5

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.

Usage Guidelines3/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
htmlYes
project_idYes

Output Schema

ParametersJSON Schema
NameRequiredDescription
scoreYes
issuesYes
verdictYes
strengthsYes
next_actionsYes

TDQS

B3.1/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness3/5

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.

Parameters2/5

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.

Purpose4/5

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.

Usage Guidelines3/5

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.

  1. 5 tool updatesv0.1.0
    • First observedinspect_reference
    • First observedrecall_project
    • First observedremember_delivery
    • First observedresearch_niche
    • First observedreview_implementation

TDQS

A3.7/5.0

Scored across 5 tools

Disambiguation5/5

Each tool targets a distinct phase: research, inspection, memory, recall, and review. There is no overlap or ambiguity between them.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern (research_niche, inspect_reference, remember_delivery, recall_project, review_implementation).

Tool Count5/5

Five tools perfectly cover the core workflow without unnecessary extras, fitting well within the ideal range.

Completeness5/5

The tool surface covers the full research-to-review lifecycle: gather info, store delivery, recall past work, and assess implementation. No obvious gaps.

Maintenance

ActivitySlowing
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    D
    maintenance
    A 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.
    11
    3 npm
    3
    MIT
  • F
    license
    A
    quality
    D
    maintenance
    MCP 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
    -
  • F
    license
    A
    quality
    C
    maintenance
    MCP 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
    -