Documentation / The IDE

Web Studio

The front-end workspace. Design in Design Studio, see the app without running it, mock APIs and bring up the whole system with Compound.

Web Studio is the front-end workspace. The engine provides the intelligence and the agent operates it end to end. Open it from the left rail (Alt+Shift+W) or with Design a screen on the start screen.

Front-end index

Yuli indexes your project's front end:

  • React, Vue, Angular, HTML and JSP components.
  • CSS, SCSS and LESS styles.
  • Routes, HTTP calls and microfrontends.
  • The link to the back end.

Architecture and impact

  • Graphs of components, files, routes, APIs and styles, plus a unified view of pages, components, services, APIs, back end and data.
  • Impact analysis: what breaks when you change a file, a component, a selector, a style variable or a route.
  • Accessibility: a static audit based on WCAG.

Design Studio

Design before you write code.

  • Pages and frames per device.
  • Annotations and a status flow: draft → review → approved → implemented.
  • Versions with diff, undo and redo.
  • A built-in AI bar.

Design System

Color, typography, spacing, radius, shadow, breakpoint and motion tokens. They're imported from the code and contrast is checked.

From design to code

Action What it does
Implement with the AI Hands the generated files to the main chat so you can review them in the changes window.
Create files Writes them directly.

New components reuse the project's existing ones, with accessible and responsive markup. Yuli can also rebuild designs from existing code and compare the design with the code.

Two chats, two contexts

  • The main chat works on the code.
  • The Web Studio chat works on the design, live on the canvas.

They never share a thread. If you write something in the main chat that sounds like interface design, “Design in Web Studio” appears and sends that request to the canvas. If a design is open, the main chat offers “Go to the design's chat”.

Preview without running

Shows a component, a page, a design or freshly written code without starting the application or the dev server.

  • Compiles only that component with the project's own tools (including SCSS and LESS) and mounts it with sample props.
  • With no dependencies installed, it draws an approximate sketch from the markup.
  • Refreshes on its own when you save the code or change the design.

JSP applications

It also works with JSP web applications (Maven or Gradle, with Struts 1 or 2, Spring MVC or plain servlets): it finds the web root, the welcome page from web.xml and the action routes, and resolves includes, messages and taglibs.

Full project without running

The entire application, with no dev server, no back end and no windows opened:

  • Uses the entry point, the HTML page, the base path and the .env profile the bundler would use (Vite, webpack, CRA and microfrontends), without exposing secrets.
  • If the project uses another tool, it uses the esbuild bundled with Yuli.
  • Dependencies in node_modules are compiled once and reused as long as the lockfile doesn't change.

API mocking

Every request from the app is answered from:

  • The project's OpenAPI or Swagger contracts.
  • Responses saved in the REST Client.
  • Your own rules: status, body and delay.

You see every call live, and changes reach the page without reloading it.

Saved routes

Save named routes with parameters per project. Mark one as the start route so the app opens straight into a useful state.

Split views

  • Design + Code: you edit and the view recompiles on its own.
  • Design + AI: the request carries the route, the element, its code and the failed calls.

Embedded preview

Always inside the IDE, never in an external browser:

  • The project's dev server, a component or any URL.
  • A switch toggles the same component between “without running” and “running”.
  • Element ↔ component ↔ line of code inspector.
  • Console, network, screenshots and visual comparison.

Compound

Compound brings up the complete full-stack application:

  • In dependency order, with health checks.
  • Unified logs and cascading restarts.
  • Ports ready for debugging.
  • Secrets are always shown masked.

The definition lives in .ai/compound.yaml.

With the agent

The agent operates Web Studio with the yuli_front_*, yuli_design_*, yuli_preview_* and yuli_compound_* tools: it can inspect the view, capture it and iterate on it without creating or running an app. Web Studio tools are only sent to the model if the project has a front end.