Skip to main content
Start free

Send feedback

Tell us what works and what could be better. We read every submission.

Send feedback

Tell us what works and what could be better. We read every submission.

VizHub AI Studio: Quick Start Guide

Explore your data, review AI ideas, and export visualization code

This nine-step walkthrough covers creating a project, reviewing AI-generated drafts, prototyping ideas, and exporting code. Check the generated visualization and data before reusing or publishing it.

Start building freeWatch the demo
Create
Analyze Data
Generate Ideas
Prototype Ideas
Review
Pin
Export
1
Create a project with your data and project brief
Start a new project, upload your dataset, and write a short brief describing the question you want to answer.
  • Upload CSV, TSV, or JSON — or start without data.
  • Write a short project brief: the goal and the audience.
  • Add any context the AI should know about the data.
Create a project
2
Run the "Analyze Data" AI Workflow
Analyze Data inspects your dataset, creates an interactive scatter plot, and documents the dataset and its columns in README.md.
  • Open your project — the AI workflows section is on the project page.
  • Run Analyze Data.
  • Review the generated AI edit when it is ready.
3
Review the results and approve the AI edit
Inspect the proposed scatter plot and README, then approve the edit to apply it.
  • Compare the generated code and README.
  • Approve, or ask for changes.
  • Confirm the data loads correctly.
4
Run the "Generate Ideas" AI workflow
Generate Ideas reads your dataset and current visualization and writes 20 numbered visualization ideas to your README.
  • Run Generate Ideas.
  • Review the 20 ideas.
  • Re-run to generate alternative idea sets.
5
Review the results and approve the AI edit
Choose the idea set that best matches your goal and approve the edit.
  • Read each idea critically.
  • Approve the strongest set.
  • Keep the README as your working brief.
6
Run the "Prototype Ideas" AI workflow
Prototype Ideas forks your visualization once per idea and applies an AI edit to each fork, producing 20 prototypes.
  • Run Prototype Ideas.
  • Let the forks and edits complete.
  • Browse the prototypes.
7
Review all AI edits
Work through every prototype's pending AI edit, approving the ones worth keeping.
  • Open the Visualizations tab.
  • Approve or reject each pending edit.
  • Compare prototypes side by side.
8
Pin your favorites
Mark the prototypes worth shipping as pinned deliverables with a client-ready label so they are easy to find later.
  • Use Pin as Deliverable on a viz card.
  • Add a label and description.
  • Find them under Pinned Deliverables.
9
Export your code as a ZIP
Download the winning visualization's code as a ZIP and drop it into your own project. This is the end of the core workflow.
  • Open the visualization you want to ship.
  • If it relies on project datasets, use Fork → My Visualizations first to create an independent copy.
  • Open the personal fork and use Export ZIP to include its referenced text datasets.
  • Unzip and reuse the code in your own app.
Open your projects
Example project descriptions
Your description can be informal. Tell VizHub what you're trying to understand, communicate, or build.
Create a bar chart that shows revenue by region, animated with a smooth entrance effect.
Build a scatter plot with interactive filtering to explore the relationship between these two variables.
Which should I pin?
  • Does this visualization clearly communicate the insight?
  • Is the code clean enough that I'd be comfortable shipping it?
  • Does it match my data schema and handle edge cases?
AI Edit prompt ideas
  • Add a title and axis labels.
  • Make the design mobile-friendly.
  • Add useful hover interactions and tooltips.
  • Use color to highlight the most important trend.
  • Improve performance with proper data aggregation.
Reference existing visualizations in AI prompts
Use a visualization as inspiration for your next AI edit.
  1. Find a visualization and choose Copy @-mention from its preview menu.
  2. Paste the copied mention into an AI edit prompt.

Example prompt

Use @viz-5652bf94829b45708fa4beb8c15db0f2 as inspiration for the layout and interactions, but use the dataset in my project.

You can also paste a VizHub visualization URL, including an older link such as https://vizhub.com/alice/simple-bar-chart or https://old.vizhub.com/alice/simple-bar-chart. The visualization must have been imported into AI Studio; links are not fetched from the old site.

Missing or inaccessible references are skipped, so your AI edit can continue. If you mention the same visualization multiple ways, its source is loaded only once. You can use up to five distinct available references per edit.

Optional: the advanced workflow
Prefer to have a coding agent pull your pinned deliverables straight into a repo? That's the advanced workflow: VizHub MCP → your Vite app → GitHub Pages.

It's entirely optional. The ZIP export above is the fastest way to reuse your code. Reach for MCP when you want an agent to integrate many pinned deliverables into a live project for you.

Explore the advanced workflow

Forking a visualization: project or personal?

Open any visualization and choose Fork. If you can edit its project, Same Project creates another visualization sharing the project's live datasets. Choose My Visualizations to make a standalone personal copy with its referenced CSV, TSV, JSON, or GeoJSON files.

A personal fork snapshots datasets at fork time; subsequent project uploads or deletion of the original project do not change its copies. Dynamic dataset filenames require manual dataset selection. Missing references, Excel files, and datasets beyond the copy limits must be resolved before forking. For a self-contained ZIP, export the standalone fork, not the original project visualization.

Open My Visualizations

Your first-session goal

Build something real in your first session

Create a project, bring in data, generate at least one visualization, refine it with AI until you would genuinely consider using it, and export the code as a ZIP. You don't need to polish it — the goal is to see the full workflow end to end.

Reaching that point completes the core VizHub AI Studio workflow. Ready to wire it into your own app? The optional advanced workflow takes it further.

Create your first projectExplore the advanced workflow