ngx-json-render UI について
ngx-json-render UIは、モデルが生成したUI仕様をチャット内でAngular Materialコンポーネントとして表示するMCP Appのプロトタイプです。上流サーバーにAngularビューを追加し、入力途中の描画、ホストテーマへの対応、モデルへのメッセージ送信をサポートします。
主な機能
- 01Angular MaterialのUIカタログ
- 02チャット内のダッシュボード、フォーム、テーブル表示
- 03ツール入力途中からの描画
- 04ホストテーマへの対応
- 05UI操作をチャットメッセージとして送信
活用シーン
- 01MCPホストのチャットにダッシュボードを表示
- 02UI仕様からフォームやテーブルを表示
- 03ツール入力のストリーミング中にビューを更新
- 04フォーム送信内容を会話に渡す
MCP 対応
MCPサーバーは`@json-render/mcp`を通じて、読み取り専用の`render-ui`ツールと`ui://`ビューを提供します。stdioとStreamable HTTPに対応し、ホストのメッセージ機能を使ってビューからメッセージを送信できます。
設定
リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。
エンドポイント
https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcpインストールコマンドをコピー
Claude CodeTerminal
claude mcp add --transport http shteynu-ngx-json-render-ui https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcpCursor.cursor/mcp.json
{"mcpServers":{"shteynu-ngx-json-render-ui":{"type":"http","url":"https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcp"}}}Cursor で開くVS Code.vscode/mcp.json
{"servers":{"shteynu-ngx-json-render-ui":{"type":"http","url":"https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcp"}}}VS Code で開くClaude Desktopclaude_desktop_config.json
{"mcpServers":{"shteynu-ngx-json-render-ui":{"type":"http","url":"https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcp"}}}Windsurf~/.codeium/windsurf/mcp_config.json
{"mcpServers":{"shteynu-ngx-json-render-ui":{"serverUrl":"https://ngx-json-render.angular-generative-ui-chat.workers.dev/mcp"}}}コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。
ツール
詳細
メンテナーはまだ詳細を追加していません。リポジトリの README をご覧ください。
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。