Icon Devdocs Guide - Devdocs X Webflow Template

Get Started

Overview

Introduction

UI9000 helps you generate and display interactive charts through the Model Context Protocol (MCP). An LLM (or your app) sends a chart spec + data to the UI9000 MCP, which returns a UIResource containing a secure iframe URL. You render that iframe in your app using the UI9000 Client while the chart is drawn by Charts UI (Renderer).

Pro Tip: Lorem ipsum dolor sit amet, consectetur adipiscing elit tempus habitant a amet aliquet semper mauris risus pulvinar eget ipsum in rhoncus vestibulum orci bibendum viverra lorem cursus mi id nulla volutpat tortor turpis fusce donec et.

Copy Snippet Code



Components at a Glance

UI9000 MCP — receives chart specs/data, stores payloads under an id, and issues signed render links (dataUrl).
Charts UI (Renderer) — a web app (Docker image available) that reads dataUrl and renders charts.
UI9000 Client (NPM) — a lightweight client that mounts the returned UIResource in your app using a sandboxed iframe.

Prerequisites

Familiarity with HTTP APIs and JSON.
Access to an LLM or an MCP‑capable host (for tool invocation).
Modern browser for previewing charts.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Copy Snippet Code



How the Flow Works

Your LLM/app calls a UI9000 MCP tool (e.g., ui9000.chart.create) with chart spec + data.
MCP saves the payload and builds a signed dataUrl for Charts UI.
MCP returns a UIResource with an iframe uri.
UI9000 Client embeds the iframe in your app.
Charts UI fetches JSON from MCP Data API and renders the chart.

Expected Outcomes

You understand the moving parts and the request/response flow.
You know which path to follow next: Playground (fast), Hosted MCP (no ops), or Self‑Hosted (full control).

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Copy Snippet Code



Next Steps

Try Playground if you want to see results in minutes.
Skip to Use UI9000 MCP (Hosted) to connect from your own LLM/host.
Jump to Local Setup & Self‑Hosted to run everything yourself.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Updated on: Oct 6, 2025

Playground

Introduction

Use the UI9000 Playground to try the system without installing anything. You’ll chat with a preconfigured environment backed by the cloud‑hosted UI9000 MCP, preview generated charts, and optionally attach your own MCP servers.

Copy Snippet Code



Prerequisites

A modern web browser.
Optional: credentials/tokens needed by any third‑party MCP servers you want to attach.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Step 1 — Open the Playground

Visit: https://playground.ui9000.com/

Step 2 — Enable the Demo MCP

In the left sidebar, click MCP Servers.
Find MCP‑UI Demo and click Enable.
The connection is saved to your browser storage and persists for future sessions.

Step 3 — Generate a Chart

Ask the chat to “create a world population choropleth” (or paste your own spec/data).
The MCP returns a UIResource; a preview panel displays the chart via iframe.
Click the preview link to open the chart in a new tab for debugging.

Step 4 — Understand Data Retention

Playground (hosted MCP) keeps payloads for 24 hours. Expired links won’t render.
For persistent charts, switch to Self‑Hosted.

Verification

You should see a rendered chart with a legend and tooltips (depending on your spec).
The preview link should contain ?dataUrl=... pointing back to an MCP data-links/<id> endpoint.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Copy Snippet Code



Troubleshooting

Blank iframe: confirm the link hasn’t expired; regenerate the chart.
Mixed content errors: ensure the preview runs over HTTPS if embedded in an HTTPS site.
No map tiles: provide a valid MAPBOX_TOKEN when using map layers (self‑hosted renderer).

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Copy Snippet Code



Next steps

Connect from your own LLM/host with the Hosted MCP.
Or set up Self‑Hosted for production and long‑lived charts.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Updated on: Oct 6, 2025

Use UI9000 MCP (Hosted)

Introduction

Use the cloud‑hosted UI9000 MCP if you don’t want to manage infrastructure. You connect via SSE and call UI9000 tools; rendering happens in the hosted environment.

Copy Snippet Code



Prerequisites

An LLM/host that supports MCP over SSE.
Ability to edit your host’s MCP client configuration.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Step 1 — Add the Hosted MCP

Add this to your host’s MCP configuration:

{ "mcpServers": { "ui9000": { "transport": "sse", "url": "https://mcp.ui9000.com/see" } } }

Base URL: https://mcp.ui9000.com/

Step 2 — Call a UI9000 Tool

From your LLM/host, invoke ui9000.chart.create with a chart spec and dataset. The MCP will return a UIResource containing an iframe uri.

Step 3 — Render in Your App

Install the UI client and mount the returned resource:

pnpm add @fuselabcreative/ui9000-client

import { UIResourceRenderer } from '@fuselabcreative/ui9000-client';

export function ChartPane({ mcpResource }) { if (mcpResource?.type === 'resource' && mcpResource.resource?.uri?.startsWith('ui://')) { return <UIResourceRenderer resource={mcpResource.resource} />; } return <p>No chart.</p>; }

Verification

The iframe renders the chart without any local renderer.
Network logs show a request to a data-links/<id> endpoint when the iframe loads.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Copy Snippet Code



Troubleshooting

403/CORS when embedding in your own site: hosted mode is designed for quick trials; for strict CORS control, use Self‑Hosted Charts UI.
Expired links: hosted links are time‑limited; regenerate the chart.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Copy Snippet Code



Next steps

Move to Local Setup & Self‑Hosted to control CORS, signing, and persistence.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Updated on: Oct 6, 2025

Local Setup & Self‑Hosted

Introduction

Self‑hosting gives you full control over security, performance, data persistence, and custom domains. You’ll run Charts UI (Renderer) and optionally UI9000 MCP on your own infrastructure, then render charts with the UI9000 Client.

Copy Snippet Code



Architecture Notes

Charts UI is a stateless web renderer that fetches payload JSON via a signed dataUrl pointing to MCP Data API.
UI9000 MCP persists payloads (filesystem or your backing store) and signs dataUrl tokens (HMAC) with TTL and issuer data.
UI9000 Client embeds a sandboxed iframe and forwards UI events back to your app.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Prerequisites

Node.js 18+ and pnpm or npm.
Docker for running Charts UI.
A domain and TLS if exposing the services publicly.

Lorem ipsum dolor sit amet consectetur adipiscing elit adipiscing nec tristique vitae purus eleifend faucibus nunc quis lorem nec tellus ultrices at sed molestie nunc.

Step 1 — Deploy Charts UI (Renderer)

Run the official Docker image:

Docker image

docker run -d \
--name ui9000-charts \
-p 8080:80 \
-e MAPBOX_TOKEN="pk.eyJ1Ijoi..." \
-e MAX_PAYLOAD_MB="10" \
-e CORS_ALLOWED_ORIGINS="https://your-app.com,https://admin.your-app.com" \
-e SIGNING_SECRET="change-me-long-random" \
ui9000/charts:latest

Key environment variables

MAPBOX_TOKEN

required if you use map layers.

MAX_PAYLOAD_MB

upper bound for inline payload size accepted by the renderer.

CORS_ALLOWED_ORIGINS

comma‑separated allowlist of origins permitted to embed the iframe.

SIGNING_SECRET

HMAC secret to validate signed dataUrl tokens (prevents tampering, enables TTL).

Production hardening

Put Charts UI behind a reverse proxy (Nginx, Traefik) with TLS.
Set HTTP security headers (e.g., Content-Security-Policy: frame-ancestors https://your-app.com and X-Frame-Options: DENY or SAMEORIGIN as appropriate for your embedding model).
Restrict CORS_ALLOWED_ORIGINS to exact origins; avoid wildcards.
Configure access logs and rate limits at the proxy layer.

Step 2 — Run UI9000 MCP Locally

Clone and configure the MCP server:

MCP server

git clone git@github.com:fuselab-creative/ui9000-mcp.git
cd ui9000-mcp
pnpm i
export CHARTS_BASE_URL="https://charts.your-domain.com" # public Charts UI URL
export STORAGE_DIR=".data" # or a mounted volume/path
export PORT=7331
pnpm start

Notes

CHARTS_BASE_URL must be reachable by end‑users’ browsers.
Use a persistent volume for STORAGE_DIR in containers/VMs.
Consider using systemd or a process manager (PM2) for uptime.

Step 3 — (Optional) Containerize the MCP

For a containerized MCP, define a simple service:

# ui9000-mcp/Dockerfile

# ui9000-mcp/Dockerfile
FROM node:20-alpine
WORKDIR /app
COPY . .
RUN corepack enable && corepack prepare pnpm@latest --activate && pnpm i --frozen-lockfileE
ENV PORT=7331 STORAGE_DIR=/data
CHARTS_BASE_URL=https://charts.your-domain.com
VOLUME ["/data"]
EXPOSE 7331
CMD ["pnpm", "start"]

Run it alongside Charts UI:

ChartsUI

docker network create ui9000-net || true
docker run -d --name ui9000-charts --network ui9000-net \
-p 8080:80 -e SIGNING_SECRET=change-me ui9000/charts:latest
docker build -t yourorg/ui9000-mcp:latest
docker run -d --name ui9000-mcp --network ui9000-net \
-p 7331:7331 -e CHARTS_BASE_URL="http://ui9000-charts" \
-e STORAGE_DIR="/data" -v $(pwd)/.data:/data yourorg/ui9000-mcp:latest

Step 4 — Verify End‑to‑End

Call ui9000.chart.create with the sample payload below.
Confirm the MCP returns a UIResource with an iframe uri.
Open the iframe URL and ensure Charts UI can fetch dataUrl and render the chart.

Sample payload

{ "name": "Demo Map Chart", "layers": [ { "geospatialData": ["Country"], "arrangeByMetric": ["Population"], "data": [ { "Country": "United States", "Population": "331000000" }, { "Country": "Brazil", "Population": "213000000" }, { "Country": "India", "Population": "1393000000" } ], "visualisationType": "choropleth", "aggregationFunction": "sum", "legend": true, "tooltip": true } ] }

Step 5 — Render in Your App

Install and use the UI client:

UI client

pnpm add @fuselabcreative/ui9000-client
import { UIResourceRenderer } from '@fuselabcreative/ui9000-client';
export function ChartPane({ mcpResource }) {
  if (mcpResource?.type === 'resource' && mcpResource.resource?.uri?.startsWith('ui://')) {
    return (
      <UIResourceRenderer
        resource={mcpResource.resource}
        onUIAction={(e) => console.log('UI action', e)}
      />
    );
  }
  return <p>No chart.</p>;
}

Troubleshooting

CORS errors: ensure CORS_ALLOWED_ORIGINS includes the exact origin where the iframe is embedded.
Signature/TTL errors: rotate SIGNING_SECRET carefully and confirm system clocks; regenerate links if they expire.
Tiles not loading: verify MAPBOX_TOKEN and network access to Mapbox endpoints.
Storage not persisted: mount a volume for STORAGE_DIR in production.

Performance Tips

Enable HTTP compression at the proxy.
Use a CDN in front of Charts UI for static assets.
Prefer smaller datasets or server‑side aggregation to reduce payload size.

Security Checklist

Sandboxed iframes only; no remote code execution in renderer.
Strict frame-ancestors CSP; avoid wildcard *.
Signed dataUrl links with reasonable TTL
Limit MAX_PAYLOAD_MB to your needs.

Next Steps

Add observability (access logs, dashboards).
Stand up staging and prod environments.
Document your chart spec presets for re‑use across teams.



Go back to docs

Updated on: Oct 6, 2025