Uxxu MCP for LLMs

Teach your LLM how to create architecture diagrams in Uxxu

Uxxu exposes an MCP server so your model can read project context, create C4 diagrams, and push the result straight into your Uxxu workspace. Instead of generating throwaway pictures, your LLM creates real diagrams with layout, relationships, and technologies already wired in.

Install from npm Get a Uxxu API Key

1. Connect

Install `uxxu-mcp`, add `UXXU_API_KEY`, and register the MCP server in your preferred coding agent.

2. Teach

Add a skill or instruction layer so the model understands how to map specs into system context, container, and component diagrams.

3. Generate

Ask for a diagram in plain English. Uxxu handles layout, connectors, technology matching, and stores the final result in your project.

Example Prompt

Use the uxxu MCP. In my Uxxu project "Architecture Demo", create a C4 system context diagram for a food delivery platform with consumers, couriers, restaurant managers, a dispatching platform, real-time status updates, Stripe Connect, Twilio, and Google Maps.

What Uxxu adds

project and diagram context tools for the LLM
automatic ELK layout and connector selection
technology matching against the Uxxu catalog
viewer links to the created diagram

Install once

The easiest setup starts with the npm package. Once the MCP is installed and your API key is available, the same Uxxu backend can be used from multiple LLM clients.

npm install -g uxxu-mcp
export UXXU_API_KEY=YOUR_API_KEY

`UXXU_API_KEY` is the preferred credential for automation and MCP usage. `UXXU_API_URL` is optional and defaults to `https://app.uxxu.io`.

Claude Code

Claude Code works well when you want a coding-focused agent that can inspect your repo and call Uxxu in the same flow. You can register the MCP directly or use a project-level configuration file.

claude mcp add --transport stdio uxxu --scope local \
  --env UXXU_API_URL=https://app.uxxu.io \
  --env UXXU_API_KEY=YOUR_API_KEY \
  -- uxxu-mcp

If you keep a project-scoped .mcp.json, Claude Code can discover the server automatically when you open the repo.

Codex

Codex works best when it has both the MCP and a skill. The MCP gives it the tools. The skill teaches it how to map specifications into Uxxu-friendly diagram structures.

{
  "mcpServers": {
    "uxxu": {
      "command": "npx",
      "args": ["-y", "uxxu-mcp"],
      "env": {
        "UXXU_API_KEY": "YOUR_API_KEY"
      }
    }
  }
}

For a stronger setup, install the `uxxu-mcp-diagrams` skill so the model learns your preferred C4 mapping rules and prompt patterns.

OpenClaw

OpenClaw is the smoothest end-to-end setup today because the Uxxu package already includes an installer that registers the MCP and installs the bundled skill in one step.

npm install -g uxxu-mcp
export UXXU_API_KEY=YOUR_API_KEY
uxxu-install-openclaw

After that, your OpenClaw agents can inspect projects, create diagrams, and reuse the Uxxu skill without extra manual setup.

Teach the model, not just the tool

The MCP gives the model capabilities. A skill or instruction pack gives it judgment. That is how you get reliable results for system context, container, and component diagrams instead of generic box-and-arrow output.

What the skill should teach

how to distinguish actors, systems, containers, and stores
how to keep links at the right C4 level
how to name elements consistently
when to reuse an existing diagram vs create a new one

What Uxxu handles after that

diagram creation in your project
element placement and parent-child layout
relationship connectors
technology matching and viewer links