Vibe Canvas: A Spatial AI-Themed Landing Page an Owner Can Reshape from Sanity Studio

Sundas Naeem — Sun, 04 Oct 2026 16:00:33 +0000

This is a submission for the Sanity Challenge, Path Two: Vibe-Code Something Strange

What I Built

Vibe Canvas is a landing page builder for a solo creator/small brand that
wants a distinctive, animated "spatial" hero page — floating nodes, custom
theme presets (Cyberpunk, Vaporwave, Zen Minimal, Aurora Glitch), and a
live-tunable color palette — without touching code. The owner edits
everything from Sanity Studio: theme, colors, layout (floating grid /
circular orbit / 3D card stack), heading copy, and up to several
interactive "nodes" with their own label, description and position.

It's built for someone who wants their landing page to feel alive and
on-brand, and who needs a lightweight editorial workflow (draft → review →
approved → live) before anything goes public — useful for a small team
where one person writes copy and another approves before it's published.

I built this to explore how far Sanity's Studio customization can go: a
genuinely useful custom input component (not just a demo), a real
multi-step editorial workflow modeled as document fields, and Visual
Editing wired end-to-end so clicking an empty field on the live page jumps
straight into Studio.

Demo

Live site: https://vibe-canvas-production.up.railway.app
Studio: https://vibe-canvas-production.up.railway.app/studio
video demo:https://drive.google.com/file/d/1ZKCCdWzNjrtkRFo0FXqKb09ZVV0ir4UF/view?usp=sharing

Code

https://github.com/sundanaeem-systems/vibe-canvas

My Build Process

I built this with an AI coding assistant on Next.js 15 + Sanity Studio v3,
deployed to Railway.

What worked well:

A custom Studio input component (ColorPalettePicker) that computes real WCAG 2.1 contrast ratios (relative luminance math) against black/white and shows AA/AAA/Fail badges live as the editor picks a color — this went well beyond a cosmetic color swatch.
A custom document action ("Deploy Vibe") that publishes and calls an external revalidate API in one click, with toast feedback at each step.
A full editorial workflow modeled as data next to the content: reviewStatus (draft/in-review/approved/live), an append-only reviewHistory audit trail (actor + timestamp per transition), and custom document actions (Submit for Review, Approve, Send Back to Draft, Go Live) that only appear for the document's current stage. "Deploy Vibe" itself is gated — disabled until a document reaches Approved/Live — and a custom Studio structure splits documents into Needs Review / Approved / Live / All Drafts sidebar views, so an approver's inbox is just a click away.
Presentation + Visual Editing: the public page highlights empty fields and lets an editor click straight into Studio from the live page.

Where I got stuck:

Deployment surfaced real issues a local dev server hides: a stray trailing space in an env variable broke Sanity client initialization with a cryptic "projectId can only contain a-z, 0-9 and dashes" error; a stale lockfile pinned Next.js to a version with known security advisories and Railway's build scanner blocked the build until I regenerated it; and NEXT_PUBLIC_* variables had to be present before the build step, not just at runtime, since Next.js inlines them at build time.
Sanity's Studio owns its own internal router, so a Next.js into /studio left the Studio shell blank — swapping it for a plain tag
(forcing a full page load) fixed it.

I didn't reach the App SDK or Workflows-as-a-plugin in this build; the
editorial workflow here is modeled directly as schema fields and document
actions rather than the dedicated Workflows feature, which is the next
thing I'd explore.

Sanity Project Details

Sanity Project ID: lvf6oqo1
Dataset: production

Schema: a single vibeCanvas document type with theme/color/layout
fields, an interactiveNodes array, and the editorial fields
(reviewStatus, reviewNotes, reviewHistory) described above.

Agent Session

ChronoGraph: An Autonomous Breaking-Change Sentinel Powered by Sanity Context

Sundas Naeem — Sun, 04 Oct 2026 11:52:15 +0000

This is a submission for the Sanity Challenge, Path One: Ship an Agent That Queries Real Content

What I Built

ChronoGraph is a breaking-change sentinel for microservice teams. You paste
an API diff, and it tells you — before merge — which downstream services and
squads it will break, using multi-hop dependency traversal over a live
Sanity dataset. On top of the deterministic AST analysis, a Gemini-powered
agent independently queries a Sanity Context MCP endpoint backed by a
Knowledge Base of OpenAPI specs, consumer changelogs and on-call runbooks.
When the dataset and the documentation disagree about a field's contract —
nullability, type, deprecation status — the agent surfaces both claims side
by side with their sources instead of picking one.

Demo

Live app: https://ai-agent-production-0558.up.railway.app/
Demo video:https://drive.google.com/file/d/1Cu4TBtItlFaiB4IAgMoAFFanlpAdlZwn/view?usp=sharing

Code

https://github.com/sundanaeem-systems/AI-agent

How I Used Sanity

I pointed Sanity Context at a Knowledge Base built from three documents I
wrote: an OpenAPI spec for the billing service, a consumer changelog from
the mobile client, and an on-call runbook — all intentionally containing
contract details that conflict with the live dataset (e.g. the dataset says
a field is optional, the OpenAPI spec says it became required). The agent
connects to two Sanity Context MCP endpoints: one serving the live dataset
(GROQ mode) and one serving the Knowledge Base, calling
docs_initial_context and docs_knowledge_base_search to retrieve real
content before reasoning. Every tool call is shown live in an "Agent Trace"
panel, and detected contradictions render as a card with both sourced
claims — a human can rule on the contradiction, and that ruling is written
back to Sanity as a contractDecision document so future runs don't re-ask.

Sanity Project Details

Sanity Project ID: d7ujf5vw
Dataset: production

The service/endpoint graph (services, apiEndpoint contracts with
fieldContracts and consumer bindings) lives in this dataset and is seeded
from lib/sanity/sanityData.ts via scripts/seed.ts. The Knowledge Base used
by the agent (billing-openapi-v3.md, consumer-changelog-mobile-bff.md,
runbook-billing-oncall.md) is built from the files in kb-content/ in the
repo, served through a separate Sanity Context Knowledge Base endpoint.

DEV Community: Sundas Naeem

Vibe Canvas: A Spatial AI-Themed Landing Page an Owner Can Reshape from Sanity Studio

What I Built

Demo

Code

My Build Process

Sanity Project Details

Agent Session

ChronoGraph: An Autonomous Breaking-Change Sentinel Powered by Sanity Context

What I Built

Demo

Code

How I Used Sanity

Sanity Project Details

Agent Session