---
title: "Harbor: Stripe’s AI-assisted prototyping tool"
description: "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."
---

# Harbor: Stripe’s AI-assisted prototyping tool

[Stripe](https://yomu.fyi/company/stripe) · Cristian Rivera · Sep 14, 2026

**Type:** Explainer

## 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.

**Tags:** [AI](https://yomu.fyi/topic/ai), [MCP](https://yomu.fyi/topic/mcp), [React](https://yomu.fyi/topic/react), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Stripe](https://stripe.dev/blog/harbor-stripes-ai-assisted-prototyping-tool)
- Source URL: https://stripe.dev/blog/harbor-stripes-ai-assisted-prototyping-tool
- Ingested by Yomu: 2026-09-14T20:00:59.971Z

[Read original post](https://stripe.dev/blog/harbor-stripes-ai-assisted-prototyping-tool)