clawbuttons

clawbuttons

Drop-in buttons for the entire OpenClaw-style harness ecosystem — OpenClaw, Hermes, IronClaw, NanoClaw, ZeroClaw, OpenHarness, and ClaudeClaw. Built as framework-agnostic Web Components with zero dependencies.

Supported Harnesses

Harness	Tag Name	CLI Prefix	Brand Color	Description
OpenClaw	<openclaw-button>	openclaw -p	#E74C3C	The dominant open-source AI agent platform (200k+ stars)
Hermes	<hermes-button>	hermes -p	#9B59B6	Persistent personal agent with long-term memory
IronClaw	<ironclaw-button>	ironclaw agent	#5D6D7E	Rust-based privacy-first AI assistant with WASM sandboxes
NanoClaw	<nanoclaw-button>	claw	#1ABC9C	Minimalist container-based agent (~500 lines of TS)
ZeroClaw	<zeroclaw-button>	zeroclaw agent	#E67E22	Rust-based with WASM sandbox, 14x faster than OpenClaw
OpenHarness	<openharness-button>	oh	#27AE60	Lightweight Python harness (44x lighter than Claude Code)
ClaudeClaw	<claudeclaw-button>	claudeclaw	#D4795C	Lightweight Claude Code wrapper with daemon mode

Install

npm install clawbuttons

Or use the CDN (no build step):

<script src="https://unpkg.com/clawbuttons"></script>

Quick Start

<openclaw-button command="Deploy the full-stack app" theme="branded"></openclaw-button>
<hermes-button command="/research deep-dive" variant="outline"></hermes-button>
<ironclaw-button command="Audit security vulnerabilities" theme="dark"></ironclaw-button>
<nanoclaw-button command="Run isolated tests" skill-url="https://example.com/skill.zip"></nanoclaw-button>

Framework Integration

Vanilla HTML / CDN

<script src="https://unpkg.com/clawbuttons"></script>

<openclaw-button command="/deploy --prod" theme="branded"></openclaw-button>
<hermes-button command="/research" theme="dark"></hermes-button>

<script>
  document.querySelector('openclaw-button')
    .addEventListener('cb-copy', (e) => console.log('Copied:', e.detail.command));
</script>

React / Next.js

Use the dedicated React wrappers (handles SSR, hydration, and prop forwarding):

import {
  OpenClawButton,
  HermesButton,
  IronClawButton,
  NanoClawButton,
  ZeroClawButton,
  OpenHarnessButton,
  ClaudeClawButton,
} from 'clawbuttons/react';

function App() {
  return (
    <>
      <OpenClawButton
        command="Deploy the full-stack app"
        theme="branded"
        onCopy={(cmd) => console.log('Copied:', cmd)}
      />
      <HermesButton
        command="/research"
        skillUrl="https://example.com/skill.zip"
        variant="outline"
      />
      <IronClawButton
        command="Security audit"
        theme="dark"
      />
    </>
  );
}

The React wrappers:

• Include 'use client' for Next.js App Router
• Handle SSR/hydration with suppressHydrationWarning
• Lazy-load the Web Components to avoid SSR crashes
• Forward both property callbacks (onCopy) and CustomEvent listeners (onCbCopy)

Vue / Nuxt

Option A: Vue Plugin (recommended)

// main.ts
import { createApp } from 'vue';
import { ClawButtonsPlugin } from 'clawbuttons/vue';
import App from './App.vue';

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

<template>
  <openclaw-button
    command="/deploy"
    theme="branded"
    @cb-copy="onCopy"
  />
  <hermes-button
    command="/research"
    variant="outline"
  />
</template>

<script setup>
function onCopy(e) {
  console.log('Copied:', e.detail.command);
}
</script>

Option B: Manual setup

// vite.config.ts
import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) =>
            tag.endsWith('-button') && ['openclaw', 'hermes', 'ironclaw', 'nanoclaw', 'zeroclaw', 'openharness', 'claudeclaw'].some(h => tag.startsWith(h)),
        },
      },
    }),
  ],
};

Svelte / SvelteKit

<script>
  import 'clawbuttons';

  function handleCopy(e) {
    console.log('Copied:', e.detail.command);
  }
</script>

<openclaw-button
  command="/deploy"
  theme="branded"
  on:cb-copy={handleCopy}
/>
<hermes-button command="/research" variant="ghost" />

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import 'clawbuttons';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

<openclaw-button
  command="/deploy"
  theme="branded"
  (cb-copy)="onCopy($event)"
></openclaw-button>

<ironclaw-button
  command="Security audit"
  theme="dark"
></ironclaw-button>

Solid

import 'clawbuttons';

function App() {
  return (
    <>
      <openclaw-button
        command="/deploy"
        theme="branded"
        on:cb-copy={(e) => console.log(e.detail.command)}
      />
      <hermes-button command="/research" variant="outline" />
    </>
  );
}

Astro

---
---
<script>
  import 'clawbuttons';
</script>

<openclaw-button command="/deploy" theme="branded" />
<hermes-button command="/research" theme="dark" />

Programmatic JavaScript API

import { createButton } from 'clawbuttons';

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

document.getElementById('container').appendChild(btn);

Themes

Theme	Description
branded	Uses each harness's brand color (default)
branded-alt	Purple secondary (#6B5CE7) — great for mixing harnesses
dark	Dark surface, light text, harness-colored accents
light	White surface, dark text, harness-colored accents
system	Auto-switches between light/dark based on prefers-color-scheme

Sizes

Size	Height
sm	2rem (32px at default font size)
md	2.5rem (40px) (default)
lg	3rem (48px)

Events

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

Event	Detail	Fired when
cb-copy	{ command: string, harness: string }	Command copied to clipboard
cb-open	{ command: string, harness: string }	Button clicked / popup opens
cb-close	{ harness: string }	Popup closed

el.addEventListener('cb-copy', (e) => {
  console.log(`Copied ${e.detail.harness} command:`, e.detail.command);
});

API Reference

Common Attributes (all <*-button> elements)

Attribute	Type	Default	Description
command	string	—	The skill/command to run
skill-url	string	—	URL to downloadable skill package
theme	'branded' | 'branded-alt' | 'dark' | 'light' | 'system'	'branded'	Theme variant
size	'sm' | 'md' | 'lg'	'md'	Button size
variant	'filled' | 'outline' | 'ghost'	'filled'	Visual variant
shape	'rounded' | 'pill' | 'square'	'rounded'	Border radius shape
popup	'true' | 'false'	'true'	Show popup dialog on click
prompt-flag	'true' | 'false'	'true'	Prepend CLI prefix to command
popup-title	string	'Run on {Harness}'	Custom popup title
popup-description	string	—	Custom popup description

JavaScript Exports

import {
  createButton,           // Factory: createButton('openclaw', options)
  registerHarnessButton,  // Register one harness
  registerAllButtons,     // Register all harnesses
  register,               // Alias for registerAllButtons
  showPopup,              // Show popup programmatically
  HARNESSES,              // All harness configs
  HARNESS_IDS,            // ['openclaw', 'hermes', ...] 
  getHarness,             // Get config by ID
  getIcon,                // Get SVG icon by harness ID
  resolveTheme,           // Resolve theme tokens
} from 'clawbuttons';

// React wrappers (SSR-safe, includes 'use client')
import {
  OpenClawButton,
  HermesButton,
  IronClawButton,
  NanoClawButton,
  ZeroClawButton,
  OpenHarnessButton,
  ClaudeClawButton,
} from 'clawbuttons/react';

// Vue plugin
import { ClawButtonsPlugin } from 'clawbuttons/vue';

Explicit Registration

Registration happens automatically on import. For frameworks that need timing control:

import { register } from 'clawbuttons';
register();

Or register individual harnesses with custom tag names:

import { registerHarnessButton } from 'clawbuttons';

registerHarnessButton('openclaw');
registerHarnessButton('hermes', 'my-hermes-btn');

Browser Support

Works in all browsers that support Custom Elements v1:

• Chrome 67+
• Firefox 63+
• Safari 10.1+
• Edge 79+

License

MIT