Advanced Workflow

Take a pinned deliverable into your own Vite app

This is the optional next step after the quick start. Instead of exporting a ZIP by hand, connect a coding agent to the hosted VizHub MCP server and let it pull your pinned deliverables into a repository you own — then publish with GitHub Pages.

Start a project Back to Quick Start

Which path should I use?

Most people should start with the ZIP export. Reach for MCP when you want an agent to keep your repo in sync automatically.

ZIP export — start here

Download the visualization's code as a ZIP and paste it into your app. No agent and no MCP server — the fastest way to reuse a visualization.

MCP integration — advanced, optional

Connect a coding agent to the VizHub MCP server and let it pull pinned deliverables straight into a live repository, then deploy. Use this once you want an automated, repeatable pipeline.

Pin your deliverables in VizHub

Mark the visualizations worth shipping as pinned deliverables. Pinning is what tells your coding agent which outputs are client-ready.

Finish and approve the visualizations you want to ship (see the Quick Start).
Use Pin as Deliverable on a viz card.
Add a label and description your agent can use as context.

Scaffold a Vite React TypeScript app

Create the repository that will host your site and scaffold an empty Vite project.

npm create vite@latest my-viz -- --template react-ts
cd my-viz && npm install
Commit and push to a new GitHub repository.

Mint a VizHub MCP API key

Generate a project API key that your agent will use to talk to the hosted VizHub MCP server.

Open your project's MCP Setup tab (?view=mcp).
Create an API key and copy it once — it is only shown when created.
Keep the key secret: it acts on behalf of the project.

Connect your coding agent to the VizHub MCP server

Point your coding agent (Pi Agent, Claude Code, or OpenCode) at the hosted VizHub MCP server.

Paste the MCP configuration from the MCP Setup tab into your agent.
Authorization: Bearer <API_KEY> authenticates the request.
X-VizHub-Project-ID scopes the project tools to this project.

Ask the agent to integrate each pinned deliverable

Have the agent list your pinned deliverables and copy each one into your Vite app as a component.

The agent calls list_pinned_deliverables to see the project's pins.
It calls get_pinned_deliverable(id) to read the pinned commit's files.
Ask it to add each deliverable as a component in your Vite app.

Publish with GitHub Pages

Configure Vite for a project site and deploy it with GitHub Pages.

Set base: "/<repo-name>/" in vite.config.ts.
Add a GitHub Actions workflow that builds and deploys the dist/ folder.
Enable Pages (GitHub Actions source) in the repository settings, then push to publish.

Scaffold command

Start with an empty Vite React TypeScript project.

npm create vite@latest my-viz -- --template react-ts

cd my-viz && npm install

Before you start

A project with approved visualizations (see the Quick Start).
One or more pinned deliverables to integrate.
A coding agent that supports MCP (Pi Agent, Claude Code, OpenCode).
A GitHub repository you can push to.

Ready to go further?

Wire VizHub into your own repo

Pin your best visualizations, connect your agent to the VizHub MCP server, and let it integrate the deliverables into your Vite app. When you're ready, publish the result with GitHub Pages. Not sure yet? Start with the ZIP export on the quick start page.

Start a project Back to Quick Start