Docs Navigation

ABS Designer

Visual editor for ABS sessions โ€” drag, drop, and export.

The ABS Designer is a visual, no-code editor for building agent behavior specifications. You can use it standalone in the browser, or inside VSCode via the ABS extension.

Launch the designer

The designer is built into this website โ€” no install needed.

๐Ÿ‘‰ Open ABS Designer (opens in a new tab)

What you can do

  • Build sessions visually โ€” add behaviors by clicking palette items (User message, Tool call, Hand-offโ€ฆ)
  • Drag to reorder โ€” drag and drop behaviors in the flow to reorder steps
  • Property sheet โ€” click any behavior to edit its actor, action, target, content, and evaluations
  • Add evaluations โ€” contains, exact_match, regex, schema, llm_judge, tool_call, and all chain evaluators
  • YAML preview โ€” toggle between visual editor and generated YAML in the inspector panel
  • Export โ€” download your session as a .abs.yaml file ready to run with the CLI

VSCode Extension

The same designer is built into the ABS VSCode extension. Open any .abs.yaml file and the designer opens alongside it โ€” edit visually, save back to YAML automatically, and run against your agent with โ–ถ Run.

Install from the VSCode marketplace or build from source:

cd vscode
npm install
npm run build

Standalone vs VSCode

FeatureStandalone (browser)VSCode extension
Visual editorโœ…โœ…
Drag & dropโœ…โœ…
Property sheetโœ…โœ…
YAML previewโœ…โœ…
Export YAMLโœ… Download fileโœ… Auto-sync to editor
Import YAMLโœ… Upload fileโœ… Opens from active editor
Run against agentโ€”โœ… โ–ถ Run button
Chain evaluationsโœ…โœ