Skip to content
4 min readProduct

Inside Poly Build: A Visual Full-Stack Platform

How Poly Build turns application development into a visual workflow — from Figma-like frontend design to node-based backends, data pipelines, and a browser IDE with AI agent swarms

Why We Built It

Most developer tools optimize for one layer of the stack. Frontend builders don't touch backend logic. Backend frameworks don't think about deployment. CI/CD tools don't know about your data pipelines.

Poly Build treats the full stack as a single design surface. Seven specialized studios — each purpose-built for one layer — share a common data model, talk to the same AI agents, and export to real production code.


Frontend Studio: Design Like Figma, Export Like React

The Frontend Studio is a constraint-based visual editor. You place elements, apply styles from a design token system, and build responsive layouts with 12 auto-layout modes. It feels like Figma — but the output is React, Vue 3, or Svelte.

Design tokens manage colors, typography, spacing, and effects globally. Change a token, and every component using it updates. Variant management lets you define component states — hover, active, disabled, error — and the code generator emits proper conditional styling.

The properties panel covers everything: fills, borders, shadows, opacity, blend modes, layout constraints, corner radius, and overflow behavior. No CSS hand-editing required, but you can drop into code when you want to.


Backend Studio: Wiring Services as Nodes

The Backend Studio is a node-based editor where routes, middleware, database connections, and service logic become visual blocks you wire together.

Define an Express route, connect it to authentication middleware, wire that to a database query, and branch on the result. The flow validates in real time — circular dependencies, missing handlers, and type mismatches surface as you build. When you're done, export to Express, Axum (Rust), or FastAPI (Python).

Test runs execute the flow with mock data without leaving the editor. You see the request travel through each node, watch the response build, and identify bottlenecks before writing a line of code.


Data Pipeline Studio: ETL with a DAG Editor

Build extract-transform-load pipelines visually. Source nodes pull from databases, APIs, S3, Kafka, and Google Sheets. Transform nodes apply SQL, Python, JavaScript, or built-in aggregation. Sink nodes write to databases, APIs, and webhooks.

Real-time streaming is a first-class citizen — WebSocket, MQTT, SSE, and Redis Streams are all available as source and sink nodes. The DAG validates before execution, simulates data flow with sample records, and estimates pipeline cost based on data volume.

Data lineage visualization traces every field from source to destination. When something breaks, you can see exactly which transform corrupted the data.


IDE Studio: A Full Development Environment in the Browser

The IDE Studio runs a complete development environment inside your browser tab.

Monaco editor with 17 configurable settings, multi-file split panes, diff view, breadcrumbs, and symbol navigation. A terminal powered by xterm.js with WebGL rendering and WebContainer for running Node.js. Git operations through isomorphic-git — status, staging, commits, branches, push, pull, merge, rebase, cherry-pick. Debug sessions with the Debug Adapter Protocol — breakpoints, call stack, variables, watch expressions, and a debug console.

LSP integration provides completions, hover documentation, go-to-definition, find references, formatting, rename, and diagnostics. AI inline completions use fill-in-the-middle templates tuned per language.

The extension system lets you register custom languages, themes, commands, and panels. Search works across all files with regex support.


12 AI Agents, 42 Studio Tools

Build includes an Agent Context Protocol (ACP) runtime with 12 specialized agents: frontend designer, backend architect, data engineer, DevOps engineer, code reviewer, debugger, documentation writer, refactorer, API designer, solutions architect, security analyst, and general assistant.

Each agent has access to 42 studio-specific tools that let it interact directly with every editor. An agent can create UI elements in the Frontend Studio, validate a flow in the Backend Studio, generate an OpenAPI schema in the API Design Studio, simulate a data pipeline, configure secrets in DevOps, and write code in the IDE — all through tool calls in a single conversation.

This isn't chat-with-code-generation. The agents manipulate the visual editors the same way you do — creating nodes, drawing connections, adjusting properties. You watch the changes happen in real time.


20+ Code Generation Targets

Every studio connects to a code generation pipeline. Visual designs become production code:

  • Frontend: React, Vue 3, Svelte
  • Backend: Axum (Rust), Express (Node.js), FastAPI (Python)
  • Data: SQL, Airflow, dbt, Django, Prisma
  • Infrastructure: Docker, Terraform, GitHub Actions
  • API: OpenAPI 3.0.3
  • Full-Stack: Next.js 14+
  • Tests: Generated alongside every target

Local-First, No Backend Required

Build runs entirely in your browser. IndexedDB with 16 object stores handles persistence. OPFS manages IDE files. Yjs CRDT enables real-time collaboration when you want it.

The core platform has 11,151 unit tests and 135+ end-to-end tests. No account required to start building.


Try It

Poly Build is available now at build.poly.inc. Start with a template or open a blank project. Everything runs locally — your code never leaves your browser unless you choose to deploy it.

Stay up to date with Poly

Get the latest engineering, product, and community updates delivered to your inbox.