Connecting Agents
Build and run pages with Claude Code or Codex from the editor chat, or with any MCP client from your IDE.
Claude or Codex designs graphics or Control Panels. Glider imports native components, then asks whether their live parts get logic, built as units.
Artifact mode is the cheap way to a first draft. Pick Claude or Codex, switch Tools to Artifact and describe the graphic. The selected agent runs without tools or user customizations. It is told that it is drawing a broadcast graphic and gets a broadcast design skill: ground the look in the subject, plan a palette and type first, build depth with layered plates, angled edges and shadows, keep text readable over video, and spend boldness on one element. It also gets the page size, the title-safe area, the fonts it may use, your message, your palette and your images. It replies with a short design plan and one HTML document, animated with CSS. The chat shows a preview that plays the entrance (Replay plays it again, Out plays the exit), and the editor measures the document and puts it on the open scene as rectangles, text, images and named groups, with its animations as one workflow's clips.
| Brief | What the agent gets |
|---|---|
| Palette | The colours you add with + Colour, for every turn of the conversation. |
| Images | Page images you pick in the brief (PNG, JPEG, GIF, WebP or SVG), for every turn. |
| Attach files | Files attached to one message (attach, drop or paste), for that turn. Images go in the design; the agent reads text files (CSV, JSON, TXT, up to 12,000 characters each) and knows other files only by name, since it has no tools. |
| In the HTML | On the page |
|---|---|
| A box with a fill, gradient, border, radius, shadow or opacity | A rectangle plate. |
| Text | A text component per run, keeping font, size, weight, colour, spacing, case and shadow. |
| An <img> of a page image | An image. |
| Inline SVG | An image, saved as a page file under artifacts/. |
| A named container | A group named after its data-name, up to four levels deep. |
| An animated box | A group that moves as one piece, when the box holds two or more pieces. |
| In the CSS | In the workflow |
|---|---|
| Animations that play on load | In clips. One root clip starts with the take; the others are chained to it with their delays, and elements with the same motion share a clip with staggered assignments. |
| infinite animations | Run clips (loops), started with the entrance. |
| Animations under #stage.out | Out clips. A component the exit leaves visible is held until the exit ends, then cut. |
| transform, opacity, filter: blur() and brightness(), clip-path: inset() | Position, scale, rotation, opacity, blur, brightness and wipe channels, relative to where the graphic rests on air. transform-origin becomes a move of Glider's pivot. |
| data-split="letters" or "words" on a text element | The text's clip plays on each letter or word (data-stagger sets the seconds between them). |
- A follow-up resumes the selected agent's session and revises the graphic. Its import replaces the previous one instead of stacking a copy, and refills the same workflow, so rundown rows that take it keep working.
- Import again re-applies a reply. On an older reply, Use this version puts it back on the page, and the next message revises that version.
- The first import saves a restore point, and Revert agent session returns the page to how it was before the conversation.
- Under each reply, the chat shows the turns, tokens and cost the agent reported. A lower third is usually one turn and a few thousand tokens.
Choosing myself, pick Graphic or Control Panel when starting an Artifact conversation; with the automatic workflow, your message decides. They are separate design targets. A Control Panel artifact designs only the appearance and control labels. Import creates native widgets in a separate Control Panel scene. Then the card asks whether to connect the controls to live logic and how they should work (optional); a graphic's card lists the parts its designer marked as changing on air, and each can stay as designed. Only on Connect logic does a tool-enabled agent pass connect data paths, graphic bindings, unit commands and animation actions, building the behaviour as units; Keep it static (Not now on a panel) leaves the design as it is. The design session and wiring session are separate. The card reports whether the logic is connected and verified, and Connect logic opens the question again to retry or change the answer, without regenerating the design. Interrupted wiring can be resumed from the saved conversation. Revisions retain control IDs, live values, wiring and manual style changes.
Redesigning a graphic the conversation did not design: the designer never sees the page, so Glider describes that graphic to it as text, as it airs: every group and component with its position, size, text, font, fill and image, and which parts are live and from what. The designer keeps the content and live parts and redoes the look; its live parts name what drives them now, so connecting the logic afterwards reuses the existing units. The original stays on the page.
Every design turn is kept in the design archive (MongoDB, artifact_designs), beyond what the chat shows: the request, brief and attached files, the graphic it redraws, each designer run with its exact prompts, reply, session and cost, the HTML, every import with the snapshot it was measured from, and how its logic was answered and connected. A revision points to the design it revises. GET /api/agentic/artifact/designs?pageId=… (or conversationId=…) lists them, newest first; GET /api/agentic/artifact/designs/{id} returns one in full. Saving to the archive never holds up or fails a design: a failed save shows as a step in the chat.
Animated graphic artifacts must include a finite exit triggered by #stage.out. Generation retries a missing exit once. Import verifies that the exit converts into valid native Out clips before changing the page. Static graphics do not need animations.