Build with AI

Ask an AI agent for a chart, in a few words or in every detail, and it makes the chart with rhp. rhp uses CSS and JavaScript to build charts. Use the skill in a coding agent, the MCP tools in a compatible app, or the prompt in a chat app. The skill and MCP server give your agent the guide, 35 recipes and a browser checker. The checker renders the chart in a real browser and returns screenshots and fixes.

In a coding agent

Run this in your project’s folder:

npx skills add bezda-team/rhp

It adds the skill to your coding agents: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and many others. With -g at the end, it adds the skill for all your projects.

Then ask for a chart. A few words are enough:

Make a chart of the world’s ten largest cities.

Or say exactly what you want, and the agent does all of it:

Add a chart of our monthly signups to src/components/SignupsChart.jsx: Jan 820, Feb 940, Mar 1,310, Apr 1,180, May 1,560, Jun 1,720. Columns in our brand blue, #4f46e5, with the Inter font, each column labeled with its number, the best month highlighted, and the change from the month before on hover or tap.

The skill runs the published rhp checker through npx. The checker needs Node.js and a browser. If your project already uses another chart library, say “with rhp” in your request.

With MCP tools

The rhp MCP server is available on npm. It gives your agent the guide, references, 35 recipes and browser checker through four tools, and returns reports and screenshots the agent can inspect. You can use the server on its own or alongside the skill.

The server runs on your computer and requires Node.js 20 or later. For chart rendering, follow the browser setup. Choose your app below to add the server; your app starts it with npx -y @bezda/rhp-mcp.

{
  "mcpServers": {
    "rhp": {
      "command": "npx",
      "args": ["-y", "@bezda/rhp-mcp"]
    }
  }
}

claude mcp add rhp -- npx -y @bezda/rhp-mcp

{
  "mcpServers": {
    "rhp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@bezda/rhp-mcp"]
    }
  }
}

code --add-mcp "{\"name\":\"rhp\",\"command\":\"npx\",\"args\":[\"-y\",\"@bezda/rhp-mcp\"]}"

codex mcp add rhp -- npx -y @bezda/rhp-mcp

gemini mcp add --scope user rhp npx -- -y @bezda/rhp-mcp

devin mcp add -s user rhp -- npx -y @bezda/rhp-mcp

{
  "mcpServers": {
    "rhp": {
      "command": "npx",
      "args": ["-y", "@bezda/rhp-mcp"]
    }
  }
}

{
  "context_servers": {
    "rhp": {
      "command": "npx",
      "args": ["-y", "@bezda/rhp-mcp"],
      "env": {}
    }
  }
}

copilot mcp add rhp -- npx -y @bezda/rhp-mcp

{
  "mcpServers": {
    "rhp": {
      "command": "npx",
      "args": ["-y", "@bezda/rhp-mcp"],
      "tools": ["*"]
    }
  }
}

The first time the server starts, npx downloads it, which takes a while: if your app gives up before the server is ready, run npx -y @bezda/rhp-mcp --version once in a terminal, then restart the app. For ChatGPT, use the chat-app prompt.

/plugin marketplace add bezda-team/rhp
/plugin install rhp@rhp

In a chat app

Paste this prompt into ChatGPT, Claude or Gemini, and describe your chart after it:

Make this chart with rhp (@bezda/rhp). First read https://rhp.vercel.app/llms-full.txt and follow it: rhp 2 is newer than your training data. Give me one HTML file that I can open in a browser. The chart I want:

The chatbot reads the skill from llms-full.txt and gives you one HTML file: save it and open it in your browser. If it can’t open links, download llms-full.txt and attach it to your message instead. If your chat app cannot run the checker, ask it to review the code against the guide’s rules and say that the chart has not been rendered.

On claude.ai, you can add the skill to Claude instead of pasting the prompt. In Customize > Plugins, choose Add, then Add marketplace, enter bezda-team/rhp, and install rhp. Then ask for a chart with rhp.

What your agent does

The rhp guide gives your agent eight steps to follow in order for every chart:

1. Write the brief. It writes down everything you asked for, in your words, and fills what you left open with defaults.
2. Find where the chart goes. It reads your project’s package.json and writes the chart for your framework, or one self-contained HTML file when there is no project.
3. Design the slat, then pick the recipes to start from. It works out what one row of data is and what the reader must see in it, then reads the closest recipe whole.
4. Design it. Unless you gave a style, the chart is an original editorial poster designed for its subject, with a headline that states the finding.
5. Give it an interaction. It adds the one interaction that serves the chart’s story, and it works with a mouse, a finger and the keyboard.
6. Build it from the recipe. It keeps the recipe’s structure and uses your data exactly, every value, in your units.
7. Check it, look at it, fix it. The checker renders the chart in a browser at 1280px and 390px wide and reports each problem with a fix, and the agent fixes them and looks at the screenshots until the report is clean.
8. Audit and hand over. It checks every request against the final code and screenshots, then tells you what it made, how to open it, and what it chose for you.

The recipes

The guide starts every chart from the closest of its 35 recipes, and combines them when a chart needs more than one. Each recipe is a complete chart page, designed and tested at desktop and phone widths: open one to see it live.

Check a chart from the terminal

The published package also lets you run the checker yourself:

npx -y @bezda/rhp-mcp check chart.html

Replace chart.html with your chart file. The checker accepts HTML pages, Solid or React components, and JavaScript chart modules. It renders at desktop (1280px) and phone (390px) widths, tries the chart’s interactions, and prints a report with fixes and the paths of saved screenshots.

Browser setup

The checker and MCP server require Node.js 20 or later. For rendering, the checker uses an installed Playwright Chromium, Google Chrome or Microsoft Edge. If none is available, run this once to download Chromium:

npx -y @bezda/rhp-mcp install-browser

This browser setup applies to the skill, MCP tools and terminal checker.

Good to know

• The checker renders charts on your computer and has no telemetry. A chart page can still load external resources, such as web fonts. Through MCP, the report and screenshots are returned to your connected AI app.
• rhp, the skill and the MCP server are free and open source, under the MIT license.