关于 ngx-json-render UI
ngx-json-render UI 是一款 MCP App 原型，可将模型提供的界面规范渲染为聊天内的 Angular Material 组件。它为上游服务添加 Angular 视图，支持部分输入渲染、跟随宿主主题及向模型发送消息的操作。
主要功能
- 01Angular Material 界面目录
- 02聊天内渲染仪表板、表单和表格
- 03根据部分工具输入渲染
- 04支持宿主主题
- 05将界面操作作为聊天消息发送
适用场景
- 01在 MCP 宿主聊天中渲染仪表板
- 02根据界面规范展示表单和表格
- 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 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。