ngx-json-render MCP App

An MCP server with one tool, render-ui. When you ask your AI assistant for a dashboard, a form, a status summary or a comparison, it describes the UI as a json-render spec and the tool renders it inline in the chat as interactive Angular Material components: tables, cards, metrics, forms with validation, tabs, lists and buttons.

It works in any client that supports MCP Apps: Claude, ChatGPT, VS Code, Cursor, Goose and others. No account and no authentication are needed, and the server stores nothing (see the privacy policy).

Connect

Server URL (Streamable HTTP, no authentication):

https://ngx-json-render.vercel.app/mcp

Claude: Settings → Connectors → Add custom connector, paste the URL.
Claude Code: add the server from a terminal. Without -s user it is added to the current project only.
```
claude mcp add -s user --transport http ngx-json-render-ui https://ngx-json-render.vercel.app/mcp
```
claude mcp get ngx-json-render-ui should report Connected; the render-ui tool is available in sessions started after that. Claude Code shows the spec as JSON text; the interactive view renders in Claude chat.
ChatGPT: turn on Settings → Security and login → Developer mode, then Plugins → + → Add custom MCP server → Create MCP App, with the URL and No Auth. Pick it with @ in the message box: without it ChatGPT tends to answer with its own charts.

VS Code, Cursor: add it to your MCP configuration:

{
  "mcpServers": {
    "ngx-json-render": { "url": "https://ngx-json-render.vercel.app/mcp" }
  }
}

Examples

A Q3 sales dashboard with four metrics and a table by region — "Show me a dashboard of our Q3 sales by region"

A release status page with a success callout, progress bars and a list of blockers — "Summarize the status of the mobile app release"

Three hosting plans compared side by side in cards — "Compare the three hosting plans side by side"

The `render-ui` tool

Input: spec, a json-render spec: a root element key, a flat map of elements (each a component type, its props and its children), and an optional state object that props bind to. The input schema lists the 28 available components with their props and allowed values, and the actions with their params.
Output: the same spec, which the app's view renders. A spec that names an unknown component or action, passes invalid props or refers to a missing child is rejected with an error describing what is wrong, so the model can fix it.
Read-only: the tool reads and changes nothing outside the chat. Form fields change the view's own state.
Actions: besides the built-in state and form actions, a button can run sendMessage, which puts a message in the chat as yours, such as "Approve the release" or a submitted form as JSON, so the assistant carries on from what you clicked. In Claude the message lands in the message box for you to review and send; ChatGPT posts it to the chat at once. A form is sent only once it validates. The message goes to your AI client, not to the server, and only in clients that accept messages from apps.

Limitations

The UI shows data the model already has in the conversation; the server does not connect to your systems or fetch data.
Buttons either act inside the rendered view (update fields, validate a form) or post a message to the chat. They cannot call other tools or send data anywhere else.

Support