fast-html-mcp
Inicio rápido: npx -y @aimino/fast-html-mcp-server
Documentación
OpenTalk2HTML-NotMD MCP Server
La IA te habla a través de páginas hermosas, no de volcados de markdown abrumadores.
OpenTalk2HTML-NotMD es un servidor MCP que transforma la forma en que los agentes de IA se comunican contigo. En lugar de ahogarte en archivos markdown crudos que nadie puede leer, la IA construye páginas HTML limpias y organizadas — informes, paneles, páginas de aterrizaje, facturas, lo que sea — entregadas al instante, sin necesidad de navegador.
La Visión
La IA debería comunicarse con los humanos de la misma manera en que los humanos se comunican entre sí: a través de páginas bien diseñadas, no de archivos de texto crudos.
Cada vez que un agente de IA te arroja markdown, está eligiendo el camino más fácil para la máquina, no el mejor para ti. OpenTalk2HTML-NotMD cambia eso. Les da a los agentes de IA una herramienta para crear páginas HTML adecuadas, estructuradas y hermosas que realmente puedas leer, escanear y compartir.
Un solo comando. Cualquier plataforma de IA. Páginas reales.
npx -y @aimino/fast-html-mcp-server
El Problema → La Solución
| 🚫 Te quedas con esto | ✅ En su lugar obtienes esto |
|---|---|
| Muros de markdown crudo que no puedes escanear | Páginas HTML limpias con navegación y secciones |
## Headings y - bullets por todas partes | Informes con estilo, paneles y tablas de datos |
| Desplázate durante 20 minutos para encontrar un número | Salta entre secciones, lee lo que importa |
| Un archivo masivo que nunca volverás a abrir | Páginas hermosas que realmente compartirás |
| IA eligiendo lo que es fácil para ella | IA construyendo lo que es bueno para ti |
Míralo en Acción
La IA construye una página de panel real en segundos — sin navegador, sin Playwright, sin Docker.
Inicio Rápido
npx -y @aimino/fast-html-mcp-server
Añádelo a Claude Desktop, Cursor, VS Code o cualquier cliente MCP:
{
"mcpServers": {
"open-talk-2-html-not-md": {
"command": "npx",
"args": ["-y", "@aimino/fast-html-mcp-server"]
}
}
}
Eso es todo. Tu agente de IA ahora te habla a través de páginas.
¿Cómo Se Ve Esto?
Un agente de IA que use OpenTalk2HTML-NotMD puede construirte:
| Pides... | En lugar de markdown | La IA crea |
|---|---|---|
| "Muéstrame los números del Q3" | ## Q3\n- Revenue: $1.2M\n- Users: 45K | Un informe con estilo con tablas e insignias |
| "Haz una factura" | # Invoice\n**Client:** Acme Corp | Una página de factura adecuada |
| "Panel, por favor" | ## Metrics\n**ARR:** $10M | Panel de análisis con visuales |
| "Presentación para inversores" | Texto crudo con --- diapositivas | Presentación con diseño real |
| "Documentación de API" | Markdown con bloques ``` | Página de documentación de API adecuada |
Consulta los más de 22 casos de uso en la demostración interactiva.
Cómo Funciona
OpenTalk2HTML-NotMD es un servidor MCP de cinco niveles diseñado específicamente para la comunicación de IA a 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)
La IA construye, edita, lee y refina páginas HTML — de la misma manera en que trabajarías con un documento, excepto que ocurre en milisegundos y cuesta centavos.
Por Qué Existe Esto
La Trampa del Markdown
Los agentes de IA usan markdown por defecto porque es el formato de salida más fácil. Pero el markdown fue diseñado para formato de texto ligero, no para comunicar salidas complejas de IA a humanos. El resultado:
- Los usuarios se ahogan en muros de texto crudo
- Sin estructura — todo es plano, nada es escaneable
- Sin visuales — tablas, gráficos e insignias son ASCII en el mejor de los casos
- Sin compartir — no puedes enviar un archivo markdown a un colega
La Alternativa HTML
HTML arregla todo esto: estructura, navegación, estilo, visuales, compartir — integrado, sin necesidad de navegador en el lado del servidor. La IA crea páginas reales que los humanos pueden consumir de verdad.
OpenTalk2HTML-NotMD cierra la brecha: la IA escribe HTML en lugar de markdown, y obtienes páginas que puedes leer, escanear y compartir.
Herramientas
| Nivel | Herramienta | Qué Hace |
|---|---|---|
| Ensamblaje | render_page | Componer una página a partir de componentes y plantilla |
| Ensamblaje | register_template | Añadir tu propia plantilla en tiempo de ejecución |
| Parche | patch_html | Reemplazar contenido por selector CSS |
| Parche | set_attribute | Cambiar un atributo por selector CSS |
| Parche | edit_html_range | Reemplazar líneas (la edición más eficiente en tokens) |
| Lectura | read_html | Inspeccionar HTML en 4 modos (97% de ahorro de tokens) |
| Crudo | write_raw_html | Escribir HTML crudo a un archivo |
| Crudo | format_html | Embellecer HTML |
| Crudo | preview_html | Vista previa sin escribir en disco |
| Correo | render_email | Construir HTML seguro para correo |
| Correo | html_to_email | Convertir HTML web a seguro para correo |
| Consistencia | propagate_edit | Actualizar todas las referencias cruzadas |
| Consistencia | check_consistency | Auditar referencias obsoletas |
| Utilidad | list_components | Explorar componentes disponibles |
| Utilidad | list_templates | Explorar plantillas disponibles |
| Utilidad | get_template_schema | Ver variables de plantilla |
| Utilidad | get_component_schema | Ver propiedades de componentes |
Componentes y Plantillas
22 Componentes
Diseño: header, footer, sidebar, card-deck, grid
Datos: data-table, stats-grid, timeline, financial-table, evidence-grid
Visual: risk-matrix, valuation-chart, prisma-flow
Medios: figure, image-gallery
Interactivo: tabs, accordion
Utilidad: hero, callout, code-block, citation-block
25+ Plantillas
Informes: report, exploration, research, code-review, equity-research, lit-review, research-briefing, scientific-paper, journal-club, earnings-summary, industry-overview
Negocios: invoice, budget, financial-summary, data-sheet, dashboard, financial-dashboard
Comunicación: newsletter, changelog, faq, meeting-notes, comparison, landing-page, error-page
Presentación: pitch-deck, deck, design, prototyping, illustrations
Desarrollador: api-doc, custom-editor, minimal, documentation
Puntos de Referencia de Rendimiento
| Operación | OpenTalk2HTML-NotMD | Alternativas |
|---|---|---|
| Inicio en frío → primer render | ~1.5s | Playwright/Puppeteer: 5-15s |
| render de página | ~900ms | Handlebars: similar |
| Parche por #id | ~200ms | Cheerio: 2-5s |
| Parche por selector CSS | ~800ms | Regex: 1-3s |
| 5 parches secuenciales | ~2s total | Re-análisis: 10s+ |
| Ratio de compresión | 40-70% | html-minifier: 10-30% |
| Lectura comprimida por IA (página de 106KB) | ~1,000 tokens (97% ahorrado) | Crudo: 30,553 tokens |
¿Por qué es tan rápido?
- #id fast-path — sustitución directa de texto en lugar de análisis completo del AST (~10x más rápido)
- doT.js precompilado — plantillas compiladas al inicio, no en tiempo de render
- Sin runtime de navegador — opera sobre cadenas y AST, cero sobrecarga headless
Arquitectura
El Bucle 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
Decisiones Clave de Diseño
- doT.js — tiempo de compilación 10x más rápido que Handlebars/EJS
- #id fast-path — sustitución directa de cadenas para ediciones dirigidas por id
- parse5 — parcheo seguro de HTML basado en AST (no regex)
- DOMPurify — prevención de XSS en toda la salida
- Escrituras atómicas — archivo temporal + renombrado para prevenir corrupción
- ESM — Node.js 20+, TypeScript, módulos ES
Eficiencia de Tokens (Por Qué los Agentes de IA Aman Esto)
Diseñado desde cero para presupuestos de tokens de IA:
Leyendo una Página HTML de 106KB
| Modo | Tokens | Ahorro | Uso |
|---|---|---|---|
| Texto | 1,000 | 97% | Lectura mínima en tokens |
| Comprimido | 3,909 | 87% | Resumen + estadísticas |
| Contenido | 7,991 | 74% | Bloques tipados |
| Estructura | 9,163 | 70% | Vista de árbol |
Edición (página de 500 líneas, un cambio de valor)
| Enfoque | Tokens | Cuándo usar |
|---|---|---|
patch_html por id | ~2,396 | Objetivos pequeños |
edit_html_range | ~48 | Contenedores grandes, cambios quirúrgicos |
Desarrollo
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
Licencia
GNU General Public License v3.0 — ver LICENSE.
Construido por Aimino Tech — haciendo que la IA se comunique como un humano.