概要

Generative-UI-MCPは、AIに対して「どう見えるか」を細かく指示する代わりに、視覚要素の構造と振る舞いを規定する軽量プロトコル（MCP）を提供するサーバー実装のプロトタイプです。モデルから返される出力をJSONやイベントストリームで標準化し、レンダラー側で安全かつ段階的に描画できる形に整えます。設計ガイドラインやデザイントークンをモデルに明示的に与えることで、一貫性のあるチャートやモックアップ生成を狙います。小規模なTypeScript実装で、拡張点はプラグインやカスタムレンダラーに委ねられる作りです。（約300字）

リポジトリの統計情報

スター数: 10
フォーク数: 0
ウォッチャー数: 10
コミット数: 2
ファイル数: 6
メインの言語: TypeScript

主な特徴

モデルに与える「設計ルール」を構造化して提供し、出力の一貫性を高める。
ストリーミング配信（段階的送出）を想定した安全な出力フォーマットをサポート。
見た目と挙動を分離し、レンダラーやUIライブラリ側で最終描画を行えるアーキテクチャ。
小規模・拡張可能なTypeScriptベースのプロトタイプで、実運用への移植が容易。

技術的なポイント

本プロジェクトは「AIに構造化されたUI仕様を返させる」ことを中核に据えています。具体的には、デザインルール（色、タイポグラフィ、間隔、コンポーネントのプロップスなど）を予め定義してモデルに渡し、モデルはそのルールに従う形でJSONライクなUI記述（ウィジェット種別、レイアウト情報、データバインディング、インタラクション定義）を生成します。サーバー側はその出力を検証・正規化し、ストリーミング（SSEやチャンク化レスポンス想定）でクライアントへ逐次送出することで、レンダラーが部分的に描画を開始できるようにします。

技術的留意点は以下の通りです：出力は「ストリーミング安全」である必要があり、トークン途中で不正な構造が混入しないようにスキーマバリデーションとフォールバックルールを用意する設計が想定されています。また、視覚仕様は抽象化されているため、最終描画はReact/Vue/Canvas/WebGLなど任意のレンダラーに委任可能です。これにより、同一仕様から静的な図やインタラクティブウィジェットの双方を生成できる柔軟性が得られます。TypeScriptで型安全にスキーマを扱うことで、モデル側とレンダラー側の契約（契約駆動開発）を明確にし、運用時の不整合を減らすのが狙いです。現状はプロトタイプ段階で、実際のモデル統合・安全対策・スケーリングは今後の拡張ポイントとして整理されています。（約700字）

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
README.md: file
package-lock.json: file
package.json: file
src: dir

…他 1 ファイル

src 配下にはサーバー起動やレスポンス整形、スキーマ定義、サンプルハンドラーなどの実装が想定される構成です（リポジトリは少数ファイルのためプロトタイプ実装に留まります）。

使いどころと応用例

データダッシュボードで、AIに自然言語で指示して一貫性のあるチャートを生成する。
プロトタイピングツールで、文脈からモックアップを逐次生成してUIデザイナーの試作を支援。
教育用途で、生成される図表の構造と視覚ルールを学習させるデータセット生成器として利用。

拡張と注意点

現状は初期プロトタイプなので、実運用には以下が必要です：堅牢なスキーマ・バリデーションの強化、モデル出力の安全性チェック、認証・レート制限・監査ログ、レンダラー側でのデグレード対応など。さらに、実際のLLMとの統合時には出力の整合性を守るためのリトライや整形レイヤーが重要になります。

まとめ

MCPによる構造化されたUI生成のプロトタイプ。拡張性が高く実用化の余地あり（約50字）。

リポジトリ情報：

名前: Generative-UI-MCP
説明: MCP server that teaches AI models to generate interactive visualizations — charts, diagrams, mockups, and more.
スター数: 10
言語: TypeScript
URL: https://github.com/op7418/Generative-UI-MCP
オーナー: op7418
アバター: https://avatars.githubusercontent.com/u/13505770?v=4

READMEの抜粋：

Generative UI MCP

An MCP server that teaches AI models to generate interactive visualizations — charts, diagrams, mockups, and more.

Inspired by Anthropic’s Artifacts and Vercel’s Generative UI. This server provides structured design guidelines so AI models produce consistent, streaming-safe, visually polished widgets.

What it does

Instead of stuffing thousands of tokens of design rules into …

Generative UI MCP — インタラクティブ可視化生成サーバー