This is a submission for the Notion MCP Challenge
What I Built
Notion is where ideas live. But ideas don't stay ideas — they become products, tools, dashboards, forms. And the moment that happens, you leave Notion and open a code editor.
I wanted to close that gap.
Vizion turns a Notion page into a deployed, interactive React app — without leaving Notion. You write what you want (a landing page spec, a dashboard description, a form brief), click a button, and get a working app embedded right back into your page. No setup. No code. No context switching.
It's a full loop:
- Vizion reads your page via Notion MCP — databases, text, block structure, everything
- It creates the databases you need (if they don't exist), wires them up, and generates the app
- The app writes data back to Notion in real time — form submissions, signups, updates
- Change a row in Notion → the app updates within seconds via SSE streaming
- Not happy with the result? Write a comment, click Refine — vizion iterates on the existing app
What you can build
Dashboard from databases — point vizion at 1-3 Notion databases, get a live dashboard with KPI cards, charts, and tables. Data polls every 10 seconds.
Landing page with email capture — write a spec like "Hero section, 3 feature cards, pricing table, CTA captures email for waitlist" — vizion creates the Waitlist database on your page and generates a working signup form.
Lead capture form — import a leads database, click Generate Form — get a Typeform-style multi-step form that writes directly to Notion.
Free-form apps — write anything: a game spec, a calculator description, an internal tool brief. Click Build. Get a deployed React app.
Video Demo
Show us the code
vizion
Turn Notion pages into live apps. No code, no setup, no leaving Notion.
What it does
Write what you want. Click a button. Get a working app.
Vizion reads your Notion page — databases, text, whatever you wrote — and generates a fully interactive React app, embedded right back into your page. It creates the databases you need, connects them, and keeps everything in sync.
Capabilities
Visualize your data → Point vizion at your Notion databases and get a live dashboard with KPIs, charts, and tables — auto-generated from your data relationships
Build anything from a description → Write a product spec on a Notion page, click Build — get a deployed React app. Landing pages, forms, tools, games
Two-way data sync → Collect data through your app's UI — signups, form submissions, feedback — automatically stored in a Notion database on the same page
Auto-create databases → Describe…
How I Used Notion MCP
Notion MCP is the foundation of the entire read layer. Every vizion workflow starts with a deep page read — and without MCP, that wouldn't be possible at the fidelity it needs.
When a webhook fires (user clicks a button), vizion's agent pipeline kicks off with an MCP-powered page scan:
Notion page
↓ webhook trigger
vizion (Express on Railway)
├── Notion MCP → reads full page: blocks, inline databases, text content, schema
├── Mozaik agents → analyze structure, plan databases, write app spec
├── Notion API → creates databases, writes rows, posts comments
└── Spektrum SDK → generates & deploys React app to *.apps.jigjoy.ai
What MCP unlocks specifically:
The critical thing MCP gives you is structured, traversable content — not just raw text. When an agent reads a Notion page through MCP, it gets the block tree: headings, paragraphs, inline databases, their schemas, their relationships. This means the agent can:
- Discover what databases already exist on the page and what their columns are
- Understand the intent from the surrounding text (the spec the user wrote)
- Figure out what databases need to be created vs. reused
- Reason about data relationships before writing a single line of app code
Without MCP, you'd get a flat text dump. With MCP, the agent gets enough structure to make real architectural decisions — "this page has a Customers DB and a Revenue DB, they share a Company ID, build a dashboard that joins them."
The Refine flow also leans on MCP heavily. When a user writes feedback as a Notion comment and clicks Refine, the agent re-reads the page through MCP to get the current state of the embed, the original spec, and the new comment — and generates a targeted diff, not a full rebuild.
The agent stack is built on Mozaik — a TypeScript multi-agent orchestration framework I'm building. Each vizion workflow is a Mozaik pipeline: a coordinator agent breaks down the task, spawns specialized sub-agents (page reader, DB planner, spec writer), collects structured outputs, and passes them to Spektrum for app generation and deployment.
The result is an end-to-end loop that starts and ends in Notion — MCP on the read side, Notion API on the write side, and a live deployed app in the middle.
Top comments (0)