Home/Design agent
Describe it.
Watch it animate.
The agent works in your project with the editor’s own tools: it draws shapes and SVG artwork, edits layers, applies presets, sets keyframes and morphs. Every step lands on the canvas and the timeline, where you can change it by hand.
The editor’s own tools, 23 of them.
The same functions you use, so whatever it makes is ordinary layers and keyframes. Easing names from CSS, Penner and GSAP all work.
Look
Read the scene, a layer, the presets and assets; take a snapshot of a frame.
get_sceneget_layerlist_presetslist_assetssnapshotseek
Draw
Shapes, SVG artwork that arrives as editable layers, vector from a model, pictures.
add_shapeimport_svggenerate_vectorgenerate_imageplace_image
Arrange
Select, change, group and order layers; delete only after asking.
selectupdate_layergroupungroupduplicatereorderdelete
Animate
Keyframes on any property, Morph keys as path data, presets, timing shifts.
set_keyframesapply_presetoffset_animationclear_animation
Project
Canvas size, background, length, repeat and direction.
set_documentAttach your own
Paperclip, paste or drop up to 4 PNG, JPG, WebP, GIF or SVG files, and type @ to point at one in your prompt.
Bring a key, or bring your assistant.
The first time you open the panel it asks which. Switch any time in Settings › How you connect.
| Your own API keyThe chat in the panel |
Your AI assistantIt edits through window.svgcinema
|
|
|---|---|---|
| You need | A key from OpenRouter (recommended), OpenAI, Anthropic, Gemini or Groq; or any OpenAI-compatible address, a local server too | An assistant that can run scripts in the page, such as Claude in Chrome |
| You chat in | The panel docked beside the inspector | Your assistant’s own chat; its steps show in the panel |
| Choosing a model | Click the model under the prompt: each one with its live price. Test checks tools and vision. | Whatever your assistant runs |
| Pictures | An image model you pick, after a confirm card with the price | Its own image tools, your image key, or vector shapes only |
| Undo | One step per request | One step per session, from start to done (or Stop, or 90 s idle) |
| Off switch | Settings › Privacy › Remove keys | Let assistants edit this project: off |
// in the editor’s tab, from your assistant
svgcinema.help() // the guide: rules and every tool
svgcinema.start({ task: 'Rocket launch', assistant: 'Claude' })
await svgcinema.batch([{ name: 'add_shape', args: { … } }, …])
svgcinema.done('Launches in 1.4 s')Vector when it moves. Pictures when you ask.
- Drawn by the agent, free. Or a vector model (Recraft via OpenRouter, or your own service), whose SVG comes in as editable layers.
- Prefer vector when parts move. When a request doesn’t say, this switch decides; off, the agent asks on a card.
- Confirm before generating. Edit the prompt, see the model, size and price. Turn it off and each image shows its cost instead.
- Transparent backgrounds, even from models that can’t make one: the background is removed in your browser.
It works in the open.
While it works, editing pauses, but play, scrub and zoom still do. Its cursor shows where it is.
One request, one undo
Undo, or “Undo this request” under its answer, rolls the whole request back.
Stop keeps what’s done
Stop at any moment; the steps already taken stay, as one undo step.
A step cap you set
20 steps by default, 1 to 100. At the cap it pauses with what’s done and what’s left; Continue gives it that plus two.
Asks before deleting
Layers are never removed without a yes, unless you turn the question off.
Checks its work
Models that can see look at a frame and fix what’s wrong, up to three times a request.
Plain errors
What happened, whether anything changed, and Try again.
No SVGcinema server in between.
The agent runs in your browser. Your key is kept there and goes straight to your provider. Chats are saved in the project file only if you tick Include AI agent chats when saving, and Settings › Privacy clears the chat or removes the keys.
Which model should I use?
One that can use tools. Test tells you, and whether it can see images, which lets it check its own frames.
What does it cost?
The agent is free. You pay your provider for what you use, and the model menu shows each price before you pick.
Can I use a model on my own computer?
Yes: choose Custom and give any OpenAI-compatible address. A local server may need no key; it must allow requests from the page.
Does OpenAI image generation need anything extra?
OpenAI may ask you to verify your organization before its image models work with your key.