One package. Every AI coding agent.
Drop-in “Run on …” buttons for Claude Code, Cowork, Hermes Agent, and the OpenClaw-style harness family (OpenClaw, IronClaw, NanoClaw, and more) — the same Web Component model as claudebuttons and hermesbuttons: branded themes, filled / outline / ghost variants, optional skill URLs, and copy-friendly dialogs. Use plain HTML or wire up React and Vue; one install covers every agent.
<a> in the light DOM — commands and skill URLs
are directly discoverable by scrapers, search engines, and AI agents. Call
injectAllStructuredData() from agentbuttons to emit Schema.org JSON‑LD for all
button types on the page (or use each package’s injectStructuredData() if you import them
separately).
Buttons below use the published packages from npm (via unpkg). Hermes styling matches
hermesbuttons (electric blue). Scripts load as
claudebuttons → hermesbuttons → clawbuttons so
<hermes-button> is always the official Hermes Agent component.
Live preview
Run in Claude Code or ship skills to Cowork — filled, outline, and ghost across branded, dark, and light.
claude-code-button — variants × themes
cowork-button — skill-url
Terminal-ready Hermes commands plus skill install flows.
hermes-button — variants × themes
hermes-skill-button — skill-url
Same six harnesses as the hero — here with mixed sizes and variants for reference.
claudebuttons, hermesbuttons, and clawbuttons set the
agentpreferences
cookie when someone copies a command (same site). Load the agentbuttons bundle below to register
<preferred-button>
— it picks one agent from your agents
list using that cookie, or falls back to your order if the cookie is absent. Reload the page after changing the cookie to re-run the demo.
Simulate cookie (then reload)
Developer default order here is Claude Code → Hermes → OpenClaw. Try each chip, reload, and watch which label
data-resolved-agent shows.
Live <preferred-button>
Everything below lives in one place — mix agents, compare themes, then tune size and shape.
Outline and ghost on a dark canvas — one install, different agents.
Shared command:
/optimize CI pipeline for monorepo builds
Dark
Light
Branded
sm · md · lg on Claude, Hermes, and a harness.
rounded · pill · square
Create buttons in JS with the global bundles, then listen for cb-* and hb-* events.
Programmatic
ClaudeButtons,
HermesButtons,
ClawButtons
Live event log
Copy, open, and close events bubble from any button.
Drop one script or one import — same components everywhere.
<script src="https://unpkg.com/agentbuttons@latest/dist/index.global.js"></script>
<claude-code-button
command="/audit OWASP top 10 in API routes"
theme="branded"
variant="filled"
></claude-code-button>
<hermes-button
command="/threat-model payment webhooks"
theme="dark"
variant="outline"
></hermes-button>
<openclaw-button
command="Harden secrets rotation for staging cluster"
theme="branded"
size="md"
></openclaw-button>import {
ClaudeCodeButton,
HermesButton,
OpenClawButton,
} from 'agentbuttons/react';
export function AgentBar() {
return (
<>
<ClaudeCodeButton
command="Profile slow database queries in /api/v2"
theme="branded"
variant="filled"
/>
<HermesButton
command="/generate load test plan for checkout"
theme="dark"
variant="ghost"
/>
<OpenClawButton
command="Roll out canary deploy with health gates"
theme="branded"
size="md"
/>
</>
);
}import { createApp } from 'vue';
import { AgentButtonsPlugin } from 'agentbuttons/vue';
const app = createApp(App);
app.use(AgentButtonsPlugin);
// Then in templates:
// <claude-code-button command="..." theme="dark" />
// <hermes-button command="/..." variant="outline" />
// <ironclaw-button command="..." theme="branded" /><script>
import 'agentbuttons';
</script>
<claude-code-button
command="Replace lodash with native utilities"
theme="light"
variant="outline"
/>
<hermes-skill-button
command="/onboard new service to observability stack"
skill-url="https://example.com/skill.zip"
theme="branded"
/>
<claudeclaw-button
command="Sync daemon state to Discord bot"
theme="dark"
shape="pill"
/>