Fast Html Mcp

OpenTalk2HTML-NotMD MCP サーバー

AI が美しいページを通じてあなたに語りかけます。大量の Markdown を押しつけるのではありません。

OpenTalk2HTML-NotMD は、AI エージェントとのコミュニケーション方法を変える MCP サーバーです。誰にも読めない生の Markdown ファイルに埋もれる代わりに、AI がレポート、ダッシュボード、ランディングページ、請求書など、あらゆるものを、すっきり整理された HTML ページにして、ブラウザーなしですぐに届けます。

---

ビジョン

AI は、人間同士がコミュニケーションするのと同じように、プレーンなテキストファイルではなく、適切にデザインされたページを通じて人間とコミュニケーションすべきです。

AI エージェントが Markdown を出力するたびに、それはあなたにとって最善の方法ではなく、機械にとって最も簡単な方法を選んでいます。OpenTalk2HTML-NotMD はそれを変えます。AI エージェントが、実際に読んだり、ざっと目を通したり、共有したりできる、適切に構成された美しい HTML ページを作成するためのツールを提供します。

コマンドひとつ。あらゆる AI プラットフォーム。実際のページ。

npx -y @aimino/fast-html-mcp-server

---

問題 → 解決策

🚫 これまで困っていたこと	✅ 代わりに得られるもの
ざっと目を通せない、生の Markdown の羅列	ナビゲーションとセクションを備えた、見やすい HTML ページ
あちこちにある ## Headings や - bullets	スタイル付きのレポート、ダッシュボード、データテーブル
数字をひとつ探すために20分スクロールする	セクション間を移動して、必要な情報を読む
二度と開かない巨大なファイルひとつ	実際に共有したくなる美しいページ
AI が自分にとって楽な方法を選ぶ	AI があなたにとって役立つものを作る

---

実際の動作を見る

AI が数秒で本物のダッシュボードページを作成します。ブラウザーも、Playwright も、Docker も不要です。

---

クイックスタート

npx -y @aimino/fast-html-mcp-server

Claude Desktop、Cursor、VS Code、または任意の MCP クライアントに追加します：

{
  "mcpServers": {
    "open-talk-2-html-not-md": {
      "command": "npx",
      "args": ["-y", "@aimino/fast-html-mcp-server"]
    }
  }
}

これで完了です。 AI エージェントがページを通じてあなたに語りかけるようになります。

---

どのような見た目ですか？

OpenTalk2HTML-NotMD を使う AI エージェントは、次のようなものを作成できます：

あなたの依頼...	Markdown の代わりに	AI が作成するもの
「第3四半期の数値を見せて」	## Q3\n- Revenue: $1.2M\n- Users: 45K	テーブルとバッジ付きのスタイルされたレポート
「請求書を作って」	# Invoice\n**Client:** Acme Corp	きちんとした請求書ページ
「ダッシュボードをお願い」	## Metrics\n**ARR:** $10M	視覚的な分析ダッシュボード
「投資家向けのピッチデッキ」	--- スライドを並べた生テキスト	本格的にデザインされたスライドデッキ
「API ドキュメント」	``` ブロックを含む Markdown	きちんとした API ドキュメントページ

インタラクティブなショーケースで22以上のユースケースをご覧ください。

---

仕組み

OpenTalk2HTML-NotMD は、AI から人へのコミュニケーションに特化した5 層の MCP サーバーです。

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)

AI が HTML ページを作成、編集、読み取り、改善します。ドキュメントを扱うのと同じ感覚で操作できますが、処理は数ミリ秒で完了し、費用はわずかです。

---

開発の背景

Markdown の落とし穴

AI エージェントは、最も手軽な出力形式であるため、Markdown をデフォルトで使用します。しかし、Markdown は複雑な AI の出力を人間に伝えるためのものではなく、簡易的なテキスト書式として設計されています。その結果、次のような問題が起こります。

• ユーザーは生のテキストの長い羅列に圧倒されます
• 構造がありません — すべてが平坦で、ざっと目を通せる部分がありません
• 視覚要素がありません — 表、グラフ、バッジは、あっても ASCII で表現されます
• 共有できません — Markdown ファイルを同僚に送ることはできません

HTML という選択肢

HTML なら、構造、ナビゲーション、スタイル、視覚要素、共有のすべてに対応できます。これらの機能は組み込み済みで、サーバー側にブラウザーは必要ありません。AI が、人間が実際に読めるページを作成します。

OpenTalk2HTML-NotMD はこのギャップを埋めます。 AI が Markdown の代わりに HTML を作成することで、読みやすく、ざっと目を通せて、共有できるページが得られます。

---

ツール

Tier	Tool	What It Does
Assembly	render_page	コンポーネントとテンプレートからページを組み立てます
Assembly	register_template	実行時に独自のテンプレートを追加します
Patch	patch_html	CSS セレクターでコンテンツを置き換えます
Patch	set_attribute	CSS セレクターで属性を変更します
Patch	edit_html_range	行を置き換えます（最もトークン効率の高い編集方法）
Read	read_html	4 つのモードで HTML を調べます（トークンを 97% 節約）
Raw	write_raw_html	生の HTML をファイルに書き込みます
Raw	format_html	HTML を整形します
Raw	preview_html	ディスクに書き込まずにプレビューします
Email	render_email	メールに適した HTML を作成します
Email	html_to_email	Web 用 HTML をメールに適した形式に変換します
Consistency	propagate_edit	すべての相互参照を更新します
Consistency	check_consistency	古い参照がないか監査します
Utility	list_components	利用可能なコンポーネントを一覧表示します
Utility	list_templates	利用可能なテンプレートを一覧表示します
Utility	get_template_schema	テンプレートの変数を確認します
Utility	get_component_schema	コンポーネントのプロパティを確認します

---

コンポーネントとテンプレート

22 個のコンポーネント

レイアウト：header、footer、sidebar、card-deck、grid データ：data-table、stats-grid、timeline、financial-table、evidence-grid ビジュアル：risk-matrix、valuation-chart、prisma-flow メディア：figure、image-gallery インタラクティブ：tabs、accordion ユーティリティ：hero、callout、code-block、citation-block

25 個以上のテンプレート

レポート：report、exploration、research、code-review、equity-research、lit-review、research-briefing、scientific-paper、journal-club、earnings-summary、industry-overview

ビジネス：invoice、budget、financial-summary、data-sheet、dashboard、financial-dashboard

コミュニケーション：newsletter、changelog、faq、meeting-notes、comparison、landing-page、error-page

プレゼンテーション：pitch-deck、deck、design、prototyping、illustrations

開発者向け：api-doc、custom-editor、minimal、documentation

---

パフォーマンスベンチマーク

操作	OpenTalk2HTML-NotMD	代替手段
コールドスタートから初回レンダリングまで	約1.5秒	Playwright/Puppeteer：5〜15秒
ページのレンダリング	約900ms	Handlebars：同程度
#id によるパッチ適用	約200ms	Cheerio：2〜5秒
CSS セレクターによるパッチ適用	約800ms	正規表現：1〜3秒
5回の連続パッチ適用	合計約2秒	再解析：10秒以上
圧縮率	40〜70%	html-minifier：10〜30%
AI 圧縮読み取り（106KB のページ）	約1,000トークン（97%削減）	生データ：30,553トークン

なぜこれほど高速なのでしょうか？

1. #id の高速パス — AST 全体を解析する代わりに、テキストを直接置換します（約10倍高速）。
2. doT.js の事前コンパイル — テンプレートはレンダリング時ではなく、起動時にコンパイルされます。
3. ブラウザーランタイム不要 — 文字列と AST を操作するため、ヘッドレス処理のオーバーヘッドがありません。

---

アーキテクチャ

ピンポンループ

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

主な設計上の決定事項

• doT.js — Handlebars/EJS よりコンパイル時間が10倍高速
• #id の高速パス — id を対象とする編集で文字列を直接置換
• parse5 — 安全な AST ベースの HTML パッチ適用（正規表現ではありません）
• DOMPurify — すべての出力で XSS を防止
• アトミック書き込み — tmp ファイルとリネームを使用して破損を防止
• ESM — Node.js 20 以降、TypeScript、ES モジュール

---

トークン効率（AI エージェントに選ばれる理由）

AI のトークン予算を考慮して、一から設計されています。

106KB の HTML ページを読み取る場合

モード	トークン数	削減率	用途
テキスト	1,000	97%	トークンを最小限に抑えた読み取り
圧縮	3,909	87%	要約と統計情報
コンテンツ	7,991	74%	型付きブロック
構造	9,163	70%	ツリーの概要

編集（500行のページで値を1つ変更）

方法	トークン数	使用する場面
id による patch_html	約2,396	小さな対象
edit_html_range	約48	大きなコンテナー、ピンポイントな変更

---

開発

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

---

ライセンス

GNU General Public License v3.0 — LICENSE を参照してください。

---

Aimino Tech が開発 — AI が人間のようにコミュニケーションできるようにします。