Vizion: Vibe-coding without leaving Notion. Write it in Notion. Click a button. Get a live React app — with two-way sync.

Miodrag Todorovic — Wed, 25 Mar 2026 15:43:41 +0000

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

Lotus015 / vizion

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…

View on GitHub

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.

Give vizion and Spektrum a star on GitHub if you enjoyed!

DEV Community: Miodrag Todorovic

My entry for Notion MCP Hackathon.