Overview

v0 is an AI tool that allows anyone to build, iterate on, and ship their ideas. It was created by Vercel in 2023, and has evolved a lot since then.

The v0 team is pretty small and talent-dense, which let me take on many projects with lots of ownership and agency. We shipped features and iterated super fast.

Integrations

At the time, v0 was widely known as excellent for UI generation and frontend development, but not capable of building full-stack apps with meaningful backend logic.

The goal of the integrations project was creating a first-class user experience for intuitively building full-stack apps and connecting third-party services.

Marketplace Integration

The Vercel Marketplace is an extensive collection of third-party products for AI, storage, authentication, and more. The existing adapter gave v0 a path to support many external providers without one-off setup flows.

This work involved collaborating with the Marketplace team on connections through the v0 UI, with internal API changes across both v0 and Vercel systems.

Chat UX

The setup experience began as generative UI flows for discovery and connection. Integrations management was added to project settings, the header, and chat suggestions.

Inline SQL execution paired naturally with database providers, giving v0 a continuation step after setup for schema migrations, seed scripts, and query outputs.

Launch

After company demo days, internal feedback, and many iterations, the team shipped the feature. The launch contributed to a long streak of v0 growth records.

Inline Editing

Making edits through chat was powerful but sometimes slow for targeted changes. Inline AI editing makes it possible to prompt edits directly in selected regions of code.

The editor UI used Monaco view zones, content widgets, and a ResizeObserver for dynamic textarea height.

As code streamed from the LLM, generated changes were animated with line decorations and a real-time diff. The implementation also handled intelligent auto-selections for cases like triggering inline edit from a function signature.

• Partially streamed code may be a subset of the original code.
• Generated code can be shorter, longer, or structurally different.
• Line decorations need to update efficiently while streaming.

Other Features

I built a ton of other features as well. While some big projects were internal, a few public features focused on everyday development ergonomics.

Console Panel

The console panel moved from a separate tab into a collapsible, resizable panel below the preview window, closer to the way developers view logs alongside the browser.

Project Settings

The project settings sheet evolved into a tab-separated design that exposed key project details and features without overwhelming the user.

The Experience

Vercel is a unique company, with incredible developers building tools many of us use every day. Working directly in that environment was a full-circle experience.

I'm grateful for the experience and proud of the ownership, initiative, and impact I had on v0's growth and trajectory.