Loading post…
StripeCristian RiveraExplainer
Harbor: Stripe’s AI-assisted prototyping tool
Summary
Harbor addresses a gap in Stripe’s AI-assisted workflows: designers needed dynamic information to assess stripe.com designs, but could not always justify a full engineering prototype. Built initially by one engineer in about 40 days, it lets designers describe an idea and use Stripe design systems and realistic mock data to generate shareable, browser-based prototypes without understanding code. Its agent writes a multi-file source tree, while Drydock compiles and renders React and TypeScript in the viewer’s browser; the agent can inspect pages, interact with elements, switch viewports, and iterate before publishing a single snapshot. Since May 2026, more than 3,000 Stripes have created 12,000 prototypes, and Harbor now integrates with other AI tools through MCP and Drydock’s standalone rendering contract, although live data and prototype-scoped state remain future goals.
Context
Harbor began as a focused response to the difficulty of evaluating stripe.com design ideas without investing in a full engineering prototype. Its use expanded across Stripe for design reviews, finance presentations, operational dashboards, pricing proposals, and workflows that connect research, prototyping, and production development.
Approach / What changed
Harbor provides a browser interface with a prototype view and chat panel. An agent generates a multi-file source tree from a prompt, selects from configured design systems and starting files, and uses Drydock to compile and render the result in the browser. The agent can inspect and interact with the page, change viewport sizes, take screenshots, and revise files. Published prototypes are shared as a single snapshot, while MCP exposes tools for other agents and Drydock is available as an independent rendering service.
Takeaways
Drydock compiles React and TypeScript file trees in the browser and returns both a running page and a report containing compile and runtime failures for agent inspection.
Harbor publishes one prototype version at a time; each viewer’s browser compiles that snapshot, and comments from an earlier version are marked stale after a new snapshot is published.
Since May 2026, more than 3,000 Stripes have created 12,000 prototypes, with 25% of Stripes creating at least one prototype in Harbor.
FAQ
How does Harbor let an agent test and refine a generated prototype?
The agent writes a multi-file source tree, then reads the rendered page and can list or inspect elements, click, type, scroll, switch among mobile, tablet, and desktop widths, and take screenshots. It can use those results to edit the files and iterate.
What happens when a new prototype version is published?
Harbor shares one published snapshot at a time, and each viewer’s browser compiles that copy fresh. Comments from earlier versions are marked stale so reviewers can identify which version the feedback concerns.
How can other AI tools access Harbor?
Harbor exposes tools through Stripe’s internal MCP infrastructure for creating, reading, updating, and publishing prototypes. Coding agents can transfer a prototype’s file tree to a real repository or send an idea to Harbor, while other tools can use Drydock’s standalone rendering contract.
Source and freshness
- Source
- stripe.dev
- Published
- Added to Yomu
Summaries are generated from the original by a language model. Check the original before relying on it.
Keep reading
Related reading
The Good Stuff
Paid picks we use ourselves. Links carry a referral code — a subscription through one earns us a commission at no extra cost to you.
The best engineering reads, once a week
One useful email. Unsubscribe anytime.