agentbuttons

agentbuttons

One package. Every AI coding agent.

Drop-in “Run on …” buttons for Claude Code, Cowork, Hermes, OpenClaw, and the rest of the harness ecosystem. Framework-agnostic Web Components, optional React and Vue integrations, and a single entry point for your site or app.

Shared preferences: claudebuttons, hermesbuttons, and clawbuttons each set an agentpreferences cookie (same origin) when a visitor copies a command. agentbuttons exposes <preferred-button> and PreferredButton (React) to render one button for your command, picking the agent the user has used most recently when that agent is listed in your agents attribute; if the cookie is missing, order falls back to your list.

Supported Agents

Agent	Element	Events prefix
Claude Code	<claude-code-button>	cb-
Cowork	<cowork-button>	cb-
Hermes Agent	<hermes-button>	hb-
Hermes Skills	<hermes-skill-button>	hb-
OpenClaw	<openclaw-button>	cb-
IronClaw	<ironclaw-button>	cb-
NanoClaw	<nanoclaw-button>	cb-
ZeroClaw	<zeroclaw-button>	cb-
OpenHarness	<openharness-button>	cb-
ClaudeClaw	<claudeclaw-button>	cb-
Preferred (smart CTA)	<preferred-button>	(delegates to the chosen agent’s events)

When you import the full package, <hermes-button> is the Hermes Agent control (hb-* events). The OpenClaw-style harness that also targets Hermes is available in React as ClawHermesButton (see Framework integration).

Preferred agent (agentpreferences cookie)

On the same origin, any copy action from a family button updates the agentpreferences cookie ({ "order": ["hermes", "claude-code", ...] }, most recent first). Use preferred-button (or PreferredButton in React) to show a single CTA:

• Set agents to a comma-separated list of agent ids in your default priority order, e.g. claude-code,hermes,openclaw.
• The component picks the first id in the cookie’s order that also appears in agents; if none match, it uses the first id in agents.
• Forward the usual attributes (command, skill-url, theme, variant, size, shape, popup, …) from preferred-button onto the rendered child.

<script type="module">
  import 'agentbuttons';
</script>

<preferred-button
  agents="claude-code,hermes,openclaw"
  command="/ship the analytics dashboard"
  skill-url="https://example.com/skill.zip"
  theme="branded"
  variant="filled"
></preferred-button>

The host exposes data-resolved-agent with the winning id (for styling or analytics). You can read or adjust preferences in JS with readAgentPreferences, writeAgentPreferences, and pickPreferredAgentId from agentbuttons.

Install

npm install agentbuttons

CDN (global IIFE):

<script src="https://unpkg.com/agentbuttons@latest/dist/index.global.js"></script>

Note: The single global bundle includes every agent implementation. It is larger than any one agent alone. For production CDN usage without a bundler, you can instead load claudebuttons, hermesbuttons, and clawbuttons as separate <script> tags. Prefer npm install agentbuttons and ESM/CJS imports when you want tree-shaking and one coherent version line.

Quick Start

<script type="module">
  import 'agentbuttons';
</script>

<claude-code-button command="/deploy --prod" theme="branded"></claude-code-button>
<cowork-button command="/review" skill-url="https://example.com/skill.zip"></cowork-button>

<hermes-button command="/research deep-dive on your API" theme="branded"></hermes-button>
<hermes-skill-button
  command="/competitive-analysis"
  skill-url="https://example.com/skills/analysis.zip"
></hermes-skill-button>

<openclaw-button command="Ship the dashboard" theme="branded"></openclaw-button>
<ironclaw-button command="Audit dependencies" variant="outline"></ironclaw-button>

document.querySelector('claude-code-button')
  ?.addEventListener('cb-copy', (e) => console.log('Copied:', e.detail.command));

document.querySelector('hermes-button')
  ?.addEventListener('hb-copy', (e) => console.log('Copied:', e.detail.command));

Framework integration

React / Next.js

Dedicated wrappers handle SSR, hydration, and prop forwarding ('use client' where needed):

import {
  ClaudeCodeButton,
  CoworkButton,
  HermesButton,
  HermesSkillButton,
  OpenClawButton,
  ClawHermesButton,
  IronClawButton,
  NanoClawButton,
  ZeroClawButton,
  OpenHarnessButton,
  ClaudeClawButton,
  PreferredButton,
} from 'agentbuttons/react';

function App() {
  return (
    <>
      <PreferredButton
        agents="claude-code,hermes,openclaw"
        command="/my-skill"
        skillUrl="https://example.com/skill.zip"
        theme="branded"
      />
      <ClaudeCodeButton command="/my-skill" theme="branded" onCopy={(cmd) => console.log(cmd)} />
      <HermesButton command="/weekly-standup" theme="branded" onHbCopy={(e) => console.log(e.detail.command)} />
      <OpenClawButton command="Deploy the app" theme="branded" />
    </>
  );
}

Use ClawHermesButton when you need the OpenClaw-harness Hermes variant alongside HermesButton (Hermes Agent).

Vue / Nuxt

import { createApp } from 'vue';
import { AgentButtonsPlugin } from 'agentbuttons/vue';
import App from './App.vue';

const app = createApp(App);
app.use(AgentButtonsPlugin);
app.mount('#app');

<template>
  <preferred-button
    agents="claude-code,hermes,openclaw"
    command="/my-skill"
    skill-url="https://example.com/skill.zip"
    theme="branded"
  />
  <claude-code-button command="/my-skill" theme="branded" @cb-copy="onCopy" />
  <hermes-button command="/standup" theme="branded" @hb-copy="onHermesCopy" />
  <openclaw-button command="/deploy" theme="branded" @cb-copy="onCopy" />
</template>

The package also re-exports ClaudeButtonsPlugin, HermesButtonsPlugin, and ClawButtonsPlugin if you only need a subset.

Svelte / Angular / Solid / Astro

Use standard custom element patterns: import 'agentbuttons' (or the scoped package you need), declare unknown tags in your compiler config where required, and listen for cb-* / hb-* events on the host elements.

Themes

Theme	Role
branded	Primary brand look (default) — exact colors depend on the agent (e.g. Claude terracotta, Hermes violet, OpenClaw red).
branded-alt	Secondary accent palette where supported.
dark	Dark surface, light text, agent-colored accents.
light	Light surface, dark text, agent-colored accents.
system	Follows prefers-color-scheme between light and dark.

Sizes

Size	Typical height
sm	2rem (~32px at default root font size)
md	2.5rem (~40px) (default)
lg	3rem (~48px)

Sizes use rem and respect user font preferences.

Variants

Variant	Description
filled	Solid fill (default)
outline	Border emphasis, transparent fill
ghost	Minimal chrome

Shapes

Shape	Description
rounded	Default corner radius (default)
pill	Fully rounded ends
square	Sharper corners

Events

All buttons dispatch native CustomEvents with bubbles: true and composed: true (they cross Shadow DOM).

cb-* (Claude Code, Cowork, OpenClaw-style harnesses)

Event	Detail	Fired when
cb-copy	{ command: string } on Claude Code / Cowork; { command: string, harness: string } on harness buttons	Command copied to clipboard
cb-open	{ command: string } or { command, fullCommand?, harness }	Primary action / popup opens
cb-close	— on Claude Code / Cowork; { harness: string } on harness buttons	Popup closed
cb-download	{ url: string }	Skill package downloaded (Cowork; Hermes Skills uses hb-download below)

hb-* (Hermes Agent & Hermes Skills)

Event	Detail	Fired when
hb-copy	{ command: string }	Command copied to clipboard
hb-open	{ command: string }	Button clicked / popup opens
hb-close	—	Popup closed
hb-download	{ url: string }	Skill package downloaded (Hermes Skills only)

Programmatic API

import {
  createClaudeCodeButton,
  createCoworkButton,
  createHermesButton,
  createHermesSkillButton,
  createClawButton,
} from 'agentbuttons';

const claude = createClaudeCodeButton({
  command: '/deploy --prod',
  theme: 'branded',
  onCopy: (cmd) => console.log('Copied:', cmd),
});

const openClaw = createClawButton('openclaw', {
  command: 'Run the migration',
  theme: 'branded',
});

document.getElementById('host')?.append(claude, openClaw);

createClawButton accepts a harness id: 'openclaw' | 'hermes' | 'ironclaw' | 'nanoclaw' | 'zeroclaw' | 'openharness' | 'claudeclaw'.

Structured data

import { injectAllStructuredData } from 'agentbuttons';

injectAllStructuredData();

Scans the document for agent buttons and injects appropriate structured data helpers for discovery and rich results.

Explicit registration

Registration normally runs when you import the package. For apps that need controlled timing:

import { register } from 'agentbuttons';

register();

Browser support

Works wherever Custom Elements v1 is available:

Browser	Minimum version
Chrome	67+
Firefox	63+
Safari	10.1+
Edge	79+

Built on

agentbuttons bundles and re-exports claudebuttons, hermesbuttons, and clawbuttons. Each npm page lists the canonical source repository when published.

License

MIT