VibeStudio

Problem

General-purpose AI can generate copy and images, but creators repeatedly have to explain who they are, what their brand sounds like, what they like, and how each format should be produced. The context becomes scattered across chats, the agent cannot reliably act inside the creative workspace, and creators lose control over what the system remembers.

Solution

VibeStudio gives the creator and Codex one visible, shared workspace. The creator curates multimodal inspiration, records explicit taste signals, edits a persistent Template of brand and production rules, and works in Sessions that retain their source, context receipt, version history, and status. Through page-contextual WebMCP tools, Codex can read only the context needed for the current task, create or revise a carousel inside the workspace, and leave every material change visible and reversible.

The challenge proof is one complete path: select an inspiration, state what is worth borrowing, retrieve a bounded creator context receipt, create an original seven-slide carousel, revise one slide, undo it, mark the piece Ready, and inspect the traceable learning that can shape the next piece.

Why This Matters

Content creation is not a single generation step. It is an ongoing collaboration among taste, brand memory, source material, format rules, iteration, and publishing state. VibeStudio makes that system durable and inspectable while letting creators keep the conversational agent they already trust.

WebMCP is central to this experience because the agent and human work on the same live artifact. The agent does not have to infer the whole interface from pixels or receive an unrestricted export of the creator's memory. The page exposes a small typed tool set for the current view, while the creator sees the resulting session, version, status, and undo trail immediately.

How We Used AI

• Codex transforms selected inspiration and a bounded creator-context receipt into an original seven-slide story.
• OpenAI image generation creates up to three text-free visual layers; VibeStudio's deterministic renderer owns typography, layout, and the final 1080 x 1350 slides.
• AI can propose focused revisions to a selected slide or Template slot without replacing the whole artifact.
• Accepted creator feedback can become source-linked learning, but one-off instructions do not silently become permanent rules.
• Existing optional Claude-backed routes remain in the broader local Studio, but the challenge's WebMCP collaboration path was tested with Codex.

How We Used Codex

Codex Desktop was the primary design, implementation, debugging, and testing partner. It helped research current WebMCP interaction patterns, turn the product thesis into a scoped PRD and technical specification, implement typed contextual tools, iterate on the UI with the creator, and run the end-to-end acceptance journey.

For the product demo, Codex is also the user's agent. In ChatGPT's in-app browser it discovers VibeStudio's current page tools, reads the selected inspiration and bounded Template context, connects to the current Session, and creates or revises the artifact. This is not a simulated chat panel inside VibeStudio; it is the creator's existing agent operating the real workspace through WebMCP.

Key Features

• Multimodal Inspire feed organized by YouTube, TikTok, Instagram, Facebook, news, and websites.
• One-field source intake that accepts a link, free text, or both.
• Explicit likes, dislikes, notes, saves, and source following that curate the creator's taste.
• Editable Template containing identity, audience, voice, visual taste, goals, examples, and production rules.
• Session-based work with Draft, Ready, Scheduled, and Live states.
• Page-contextual WebMCP tools rather than one large global tool catalog.
• Shared Attention: the creator can point, draw, and place multiple UI targets in a visible Talking about tray for the agent.
• Versioned agent changes, attribution, review state, and undo.
• Reusable carousel skill with exactly seven validated slides and deterministic final rendering.
• Bounded context receipts that show which creator memories and rules shaped an artifact.
• Safety boundary: no publishing, scheduling, permanent deletion, arbitrary URL fetch, filesystem path, shell, or unrestricted creator-memory tool is exposed through WebMCP.

Architecture

VibeStudio is a Next.js 16, React 18, and TypeScript application. Its WebMCP adapter detects document.modelContext, registers typed tools for the current page, and unregisters stale tools when the view changes. The current challenge tool surface includes Session, Inspire, Template-context, carousel, status, review, and undo operations.

Local records use append-friendly JSONL files for creators, inspiration, Template memory, context receipts, Sessions, and activity. Mutations use version checks and idempotency keys. External inspiration is marked as untrusted content, reads are annotated as read-only, responses are bounded, and the final carousel renderer deterministically composes text and generated image layers.

The public judge build runs in a sanitized demo mode with generic seed data and an isolated writable root. It does not read the creator's adjacent private project data, reports local integrations as disconnected, and blocks server-side fetch, scraping, upload, publishing, metrics-sync, and embedded-assistant routes.

Built With

• next.js
• openai-codex
• openai-image-generation
• react
• typescript
• vercel
• webmcp