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);

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

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
api		api
examples		examples
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
SKILL.md		SKILL.md
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tsup.config.ts		tsup.config.ts
vercel.json		vercel.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

agentbuttons

Supported Agents

Preferred agent (`agentpreferences` cookie)

Install

Quick Start

Framework integration

React / Next.js

Vue / Nuxt

Svelte / Angular / Solid / Astro

Themes

Sizes

Variants

Shapes

Events

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

`hb-*` (Hermes Agent & Hermes Skills)

Programmatic API

Structured data

Explicit registration

Browser support

Built on

License

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

agentbuttons

Supported Agents

Preferred agent (agentpreferences cookie)

Install

Quick Start

Framework integration

React / Next.js

Vue / Nuxt

Svelte / Angular / Solid / Astro

Themes

Sizes

Variants

Shapes

Events

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

hb-* (Hermes Agent & Hermes Skills)

Programmatic API

Structured data

Explicit registration

Browser support

Built on

License

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Preferred agent (`agentpreferences` cookie)

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

`hb-*` (Hermes Agent & Hermes Skills)

Packages