fast-html-mcp
Início rápido: npx -y @aimino/fast-html-mcp-server
Documentação
Servidor MCP OpenTalk2HTML-NotMD
A IA fala com você por meio de páginas bonitas — não despejos de markdown avassaladores.
OpenTalk2HTML-NotMD é um servidor MCP que transforma a forma como agentes de IA se comunicam com você. Em vez de afogar em arquivos markdown brutos que ninguém consegue ler, a IA cria páginas HTML limpas e organizadas — relatórios, dashboards, landing pages, faturas, qualquer coisa — entregues instantaneamente, sem necessidade de navegador.
A Visão
A IA deveria se comunicar com humanos da mesma forma que humanos se comunicam entre si: por meio de páginas bem projetadas, não arquivos de texto bruto.
Toda vez que um agente de IA despeja markdown em você, ele está escolhendo o caminho mais fácil para a máquina — não o melhor caminho para você. OpenTalk2HTML-NotMD muda isso. Ele dá aos agentes de IA uma ferramenta para criar páginas HTML adequadas, estruturadas e bonitas que você pode realmente ler, escanear e compartilhar.
Um comando. Qualquer plataforma de IA. Páginas reais.
npx -y @aimino/fast-html-mcp-server
O Problema → A Solução
| 🚫 Você fica preso com isso | ✅ Você recebe isso em vez disso |
|---|---|
| Paredes de markdown bruto que você não consegue escanear | Páginas HTML limpas com navegação e seções |
## Headings e - bullets por toda parte | Relatórios estilizados, dashboards e tabelas de dados |
| Role por 20 minutos para encontrar um número | Navegue entre seções, leia o que importa |
| Um arquivo enorme que você nunca mais abrirá | Páginas bonitas que você realmente compartilhará |
| IA escolhendo o que é fácil para ela | IA construindo o que é bom para você |
Veja em Ação
A IA constrói uma página de dashboard real em segundos — sem navegador, sem Playwright, sem Docker.
Início Rápido
npx -y @aimino/fast-html-mcp-server
Adicione ao Claude Desktop, Cursor, VS Code ou qualquer cliente MCP:
{
"mcpServers": {
"open-talk-2-html-not-md": {
"command": "npx",
"args": ["-y", "@aimino/fast-html-mcp-server"]
}
}
}
É isso. Seu agente de IA agora fala com você por meio de páginas.
Como Isso Se Parece?
Um agente de IA usando OpenTalk2HTML-NotMD pode construir para você:
| Você pede... | Em vez de markdown | IA cria |
|---|---|---|
| "Mostre os números do Q3" | ## Q3\n- Revenue: $1.2M\n- Users: 45K | Um relatório estilizado com tabelas e badges |
| "Faça uma fatura" | # Invoice\n**Client:** Acme Corp | Uma página de fatura adequada |
| "Dashboard, por favor" | ## Metrics\n**ARR:** $10M | Dashboard analítico com visuais |
| "Pitch deck para investidores" | Texto bruto com --- slides | Deck de slides com design real |
| "Documentação de API" | Markdown com blocos ``` | Página de documentação de API adequada |
Veja todos os 22+ casos de uso no showcase interativo.
Como Funciona
OpenTalk2HTML-NotMD é um servidor MCP de cinco camadas projetado especificamente para comunicação IA-para-humano:
OpenTalk2HTML-NotMD MCP Server
├── Assembly → render_page (compose pages from components)
├── Patch → patch_html, set_attribute, edit_html_range (make surgical edits)
├── Read → read_html (inspect with 97% token savings)
├── Raw → write_raw_html, format_html, preview_html
├── Email → render_email, html_to_email (send to inbox)
└── Consistency→ propagate_edit, check_consistency (keep data in sync)
A IA constrói, edita, lê e refina páginas HTML — da mesma forma que você trabalharia com um documento, exceto que acontece em milissegundos e custa centavos.
Por Que Isso Existe
A Armadilha do Markdown
Agentes de IA usam markdown por padrão porque é o formato de saída mais fácil. Mas o markdown foi projetado para formatação leve de texto, não para comunicar saídas complexas de IA para humanos. O resultado:
- Usuários se afogam em paredes de texto bruto
- Sem estrutura — tudo é plano, nada é escaneável
- Sem visuais — tabelas, gráficos e badges são ASCII na melhor das hipóteses
- Sem compartilhamento — você não pode enviar um arquivo markdown para um colega
A Alternativa HTML
O HTML resolve tudo isso: estrutura, navegação, estilo, visuais, compartilhamento — embutidos, sem necessidade de navegador no lado do servidor. A IA cria páginas reais que os humanos podem realmente consumir.
OpenTalk2HTML-NotMD preenche a lacuna: a IA escreve HTML em vez de markdown, e você recebe páginas que pode ler, escanear e compartilhar.
Ferramentas
| Camada | Ferramenta | O Que Faz |
|---|---|---|
| Montagem | render_page | Compor uma página a partir de componentes e template |
| Montagem | register_template | Adicionar seu próprio template em tempo de execução |
| Patch | patch_html | Substituir conteúdo por seletor CSS |
| Patch | set_attribute | Alterar um atributo por seletor CSS |
| Patch | edit_html_range | Substituir linhas (edição mais eficiente em tokens) |
| Leitura | read_html | Inspecionar HTML em 4 modos (economia de 97% em tokens) |
| Bruto | write_raw_html | Escrever HTML bruto em arquivo |
| Bruto | format_html | Embelezar HTML |
| Bruto | preview_html | Pré-visualizar sem gravar em disco |
render_email | Construir HTML seguro para email | |
html_to_email | Converter HTML web para seguro para email | |
| Consistência | propagate_edit | Atualizar todas as referências cruzadas |
| Consistência | check_consistency | Auditar referências desatualizadas |
| Utilitário | list_components | Navegar pelos componentes disponíveis |
| Utilitário | list_templates | Navegar pelos templates disponíveis |
| Utilitário | get_template_schema | Ver variáveis de template |
| Utilitário | get_component_schema | Ver props de componentes |
Componentes e Templates
22 Componentes
Layout: header, footer, sidebar, card-deck, grid
Dados: data-table, stats-grid, timeline, financial-table, evidence-grid
Visual: risk-matrix, valuation-chart, prisma-flow
Mídia: figure, image-gallery
Interativo: tabs, accordion
Utilitário: hero, callout, code-block, citation-block
25+ Templates
Relatórios: report, exploration, research, code-review, equity-research, lit-review, research-briefing, scientific-paper, journal-club, earnings-summary, industry-overview
Negócios: invoice, budget, financial-summary, data-sheet, dashboard, financial-dashboard
Comunicação: newsletter, changelog, faq, meeting-notes, comparison, landing-page, error-page
Apresentação: pitch-deck, deck, design, prototyping, illustrations
Desenvolvedor: api-doc, custom-editor, minimal, documentation
Benchmarks de Desempenho
| Operação | OpenTalk2HTML-NotMD | Alternativas |
|---|---|---|
| Início frio → primeira renderização | ~1,5s | Playwright/Puppeteer: 5-15s |
| Renderização de página | ~900ms | Handlebars: semelhante |
| Patch por #id | ~200ms | Cheerio: 2-5s |
| Patch por seletor CSS | ~800ms | Regex: 1-3s |
| 5 patches sequenciais | ~2s no total | Re-análise: 10s+ |
| Taxa de compressão | 40-70% | html-minifier: 10-30% |
| Leitura comprimida por IA (página de 106KB) | ~1.000 tokens (97% economizados) | Bruto: 30.553 tokens |
Por que é tão rápido?
- Caminho rápido #id — substituição direta de texto em vez de análise completa de AST (~10x mais rápido)
- doT.js pré-compilado — templates compilados na inicialização, não no momento da renderização
- Sem runtime de navegador — opera em strings e AST, zero overhead headless
Arquitetura
O Loop Ping-Pong
1. Discover → list templates & components
2. Build → render a page
3. Inspect → read it back (97% token savings)
4. Refine → patch, edit, set attributes
5. Consistency→ propagate edits across sections
Decisões-Chave de Design
- doT.js — tempo de compilação 10x mais rápido que Handlebars/EJS
- Caminho rápido #id — substituição direta de string para edições direcionadas por id
- parse5 — patch de HTML seguro baseado em AST (não regex)
- DOMPurify — prevenção de XSS em toda saída
- Escritas atômicas — arquivo temporário + renomeação para evitar corrupção
- ESM — Node.js 20+, TypeScript, módulos ES
Eficiência de Tokens (Por Que Agentes de IA Amam Isso)
Projetado desde o início para orçamentos de tokens de IA:
Lendo uma Página HTML de 106KB
| Modo | Tokens | Economia | Uso |
|---|---|---|---|
| Texto | 1.000 | 97% | Leitura com mínimo de tokens |
| Comprimido | 3.909 | 87% | Resumo + estatísticas |
| Conteúdo | 7.991 | 74% | Blocos tipados |
| Estrutura | 9.163 | 70% | Visão geral da árvore |
Editando (página de 500 linhas, alteração de um valor)
| Abordagem | Tokens | Quando usar |
|---|---|---|
patch_html por id | ~2.396 | Alvos pequenos |
edit_html_range | ~48 | Containers grandes, alterações cirúrgicas |
Desenvolvimento
git clone https://github.com/Aimino-Tech/OpenTalk2HTML-NotMD.git
cd OpenTalk2HTML-NotMD
npm install
npm run build
npm run dev # hot reload
npm test # vitest
Licença
GNU General Public License v3.0 — veja LICENSE.
Construído por Aimino Tech — tornando a IA comunicativa como um humano.