Webstudio AI UI Generation

I built a proof of concept for natural-language editing and interface generation as a client project for Webstudio, an open source visual website builder. It let users request changes to copy and styles, remove elements or generate new sections.

Working With Early Models

This was early in AI interface generation, around the Claude 3.5 era, before tool calls and structured outputs were established options for this work. Models were unreliable at producing structured responses and consistent designs, so I used schemas, defensive parsing and separate workflows to make their output usable in the editor.

From Model Output to Editor Changes

I built an AI package with a model interface, an OpenAI adapter and task-specific workflows. For edits, the server converted model output into validated operations that the client could apply to the editor tree. For new sections, it converted generated JSX into a Webstudio template using an allowed set of components.

I split planning and interface generation into two model calls. One decided what to do and where, and the other generated the interface. A single call had produced less reliable results.

The conversion step filtered invalid components and properties, then translated styles and icons into the editor's format. This gave the application a defined boundary between model output and deterministic editor changes.