VizHub AI Studio: Quick Start Guide
Go from a raw dataset to visualization code you can ship
VizHub AI Studio is built for rapid exploration: let AI generate many directions, use your judgment to select the strongest ones, then export the code into your own project. Nine steps, start to finish.
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.
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.
- Wait for the agent job to finish.
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.
- Use Export ZIP on the visualization.
- Unzip and reuse the code in your own app.
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.
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 workflowYour 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.