AI agent in the editor

What shipped

An AI agent lives in the right sidebar of the editor. It has full access to your file tree, build config, and dependencies. It reads your code before making changes, shows diffs before writing anything, and can deploy to staging without leaving the conversation.

This is a major addition to Odyn. Here is everything it can do.

Webflow component generation

Ask the agent to build a section, hero, card grid, or any layout. It generates the HTML and CSS, then converts the output to Webflow's clipboard format. A copy button appears inline. Paste directly into the Webflow Designer and the elements appear with their styling intact.

This works for full page sections, individual components, or small UI patterns. The agent understands Webflow's element model and produces clean, pasteable output.

Diffs, checkpoints, and revert

Diff previews on every edit. The agent never writes directly to your files. Each change produces a red/green diff. You accept or reject per file.

Gutter marks. After a change is accepted, green, orange, and red markers appear in the editor gutter showing exactly which lines were added, modified, or deleted. The marks stay visible until you edit those lines yourself.

Checkpoints. Each agent turn snapshots every file it touches. One click reverts all affected files to their previous state. Checkpoints are stored for 24 hours.

Three modes

Edit is the default. The agent reads and writes files, adds dependencies, and deploys to staging. Every write action requires your approval before it executes.

Chat is read-only. The agent can read your code and answer questions but cannot modify anything. Use it when you want to understand existing code without risk.

Plan produces a structured implementation plan: the goal, which files to touch, ordered steps, and potential risks. No files are changed. Use it before a large refactor to align on approach.

Auto-approve

By default, every write action shows a confirmation dialog. You can switch to Auto mode, where the agent executes approved tool types without waiting. Useful when you trust the direction and want the agent to work uninterrupted.

Staging deploys from chat

The agent can trigger a build and push to your staging CDN URL directly from the conversation. No need to switch to the deploy panel. Ask it to deploy, approve the action, and the staging URL updates.

@ context

Type @ in the prompt to attach specific files or folders. The agent receives their full contents as context. Useful for scoped refactors ("refactor @utils/animation.js to use GSAP timeline") or targeted questions about a specific file.

Dependency management

Tell the agent to add GSAP, Lenis, Swiper, or any library available on a CDN. It adds the script tag as a project dependency. The agent knows which scripts are already loaded and will not try to import something that should be a global.

Custom skills

Drop .md files in .odyn/skills/ to define reusable prompts the agent can run. Type / in the chat input to open the skill picker.

Skills support YAML frontmatter for configuration: name, description, allowed tools, model override, and file pattern targeting. The markdown body becomes the prompt. Arguments are supported with $1, $2, or $ARG substitution.

For example, a "convert to Webflow attributes" skill that runs the same structured prompt every time, scoped to .js files only.

Tabs and history

Session history. Every conversation saves automatically. Click the history icon in the panel header to browse and reload previous sessions. Delete old ones from the same list.

Edit previous messages. Hover any message you sent and click Edit. The conversation rewinds to that point. Modify the text and resend.

Models and cost

The default model (Odyn Auto) is free. Zero deduction from your monthly quota. Use it as much as you want.

Premium models are available for more complex tasks:

Each message shows its cost before you send. A usage indicator in the panel footer tracks your current month against your plan limit.

Bring your own key. Add an OpenRouter API key in Settings > API Keys. Your key is stored encrypted server-side. When using your own key, all usage bypasses your plan quota entirely. Unlimited messages on any model.

How it works

The agent understands your project setup. It detects your build mode (bundle, per-file, folder bundle), reads which scripts are loaded as CDN globals, and picks up your code conventions: semicolons, quote style, DOM selector patterns. It writes code that fits your project without you having to explain the setup.

Read operations (listing files, reading code, searching) execute immediately. Write operations always require approval in Review mode. The agent reads files before editing them. No blind rewrites.

Long conversations compact older turns automatically to stay within the model's context window.