Skip to content

openhermit/openhermit-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OpenHermit

OpenHermit.js

Make any website discoverable and actionable by AI agents.

OpenHermit automatically injects WebMCP (W3C Web Model Context Protocol) attributes into your website's forms and actions, making them instantly discoverable by AI agents like ChatGPT, Claude, and custom AI tools.

Like a hermit crab finding the perfect shell — instant, automatic, perfect.

License: MIT npm version

Features

  • 🦀 Automatic WebMCP injection - Detects forms, calculators, booking widgets
  • 🤖 AI agent tracking - Know which agents visit and what they do
  • 🎯 Zero configuration - Works out of the box
  • 🔧 Customizable - Configure agent prompts and behavior
  • 📊 Real-time analytics - Dashboard at openhermit.com
  • 🚀 Lightweight - 19.7 KB vanilla JavaScript, zero dependencies

Quick Start

1. Get your API key

Sign up at openhermit.com to get your free API key.

2. Add the script to your website

<script
  src="https://cdn.openhermit.com/v1/openhermit.js"
  data-api-key="your-api-key-here"
  async
></script>

That's it! Your website is now agent-ready.

Installation Methods

CDN (Recommended)

<script
  src="https://cdn.openhermit.com/v1/openhermit.js"
  data-api-key="YOUR_API_KEY"
  async
></script>

NPM

npm install @openhermit/js
import OpenHermit from '@openhermit/js';

OpenHermit.init({
  apiKey: 'YOUR_API_KEY',
  apiBase: 'https://www.openhermit.com' // optional
});

Self-Hosted

Download src/openhermit.js and host it yourself:

<script
  src="/path/to/openhermit.js"
  data-api-key="YOUR_API_KEY"
  data-api-base="https://your-api.com" // optional
  async
></script>

Configuration

Script Attributes

Attribute Required Description
data-api-key Yes Your OpenHermit API key
data-api-base No Custom API endpoint (default: https://www.openhermit.com)

Custom API Base

If you're self-hosting the OpenHermit platform:

<script
  src="https://cdn.openhermit.com/v1/openhermit.js"
  data-api-key="YOUR_API_KEY"
  data-api-base="https://your-custom-api.com"
  async
></script>

What It Does

OpenHermit automatically:

  1. Detects forms - Contact forms, signups, newsletters, bookings, etc.
  2. Injects WebMCP attributes - Adds data-mcp-action, data-mcp-description, data-mcp-params
  3. Detects third-party widgets - Calendly, Typeform, HubSpot, Intercom
  4. Extracts business info - Phone, email, address from Schema.org or page content
  5. Tracks agent interactions - Knows when AI agents visit and what they do
  6. Serves manifest - Provides WebMCP-compliant manifest at /api/manifest

Supported AI Agents

OpenHermit detects and tracks:

  • ChatGPT (GPTBot, ChatGPT-User)
  • Claude (ClaudeBot, Claude-Web)
  • Perplexity (PerplexityBot)
  • Google Gemini (Google-Extended)
  • Microsoft Copilot
  • OpenAI Operator
  • Custom agents via user-agent detection

Examples

Basic HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <form action="/contact" method="POST">
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <button type="submit">Send</button>
  </form>

  <!-- OpenHermit will automatically detect this form and inject WebMCP attributes -->

  <script
    src="https://cdn.openhermit.com/v1/openhermit.js"
    data-api-key="YOUR_API_KEY"
    async
  ></script>
</body>
</html>

React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.openhermit.com/v1/openhermit.js';
    script.setAttribute('data-api-key', 'YOUR_API_KEY');
    script.async = true;
    document.head.appendChild(script);
  }, []);

  return (
    <form action="/contact" method="POST">
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
    </form>
  );
}

Next.js

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <script
          src="https://cdn.openhermit.com/v1/openhermit.js"
          data-api-key={process.env.NEXT_PUBLIC_OPENHERMIT_KEY}
          async
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

WordPress

Add to your theme's footer.php or use a plugin like "Insert Headers and Footers":

<script
  src="https://cdn.openhermit.com/v1/openhermit.js"
  data-api-key="YOUR_API_KEY"
  async
></script>

Browser Compatibility

OpenHermit uses vanilla ES5 JavaScript and works on:

  • ✅ Chrome/Edge (all versions)
  • ✅ Firefox (all versions)
  • ✅ Safari (all versions)
  • ✅ IE 11+ (yes, really)
  • ✅ Mobile browsers

Privacy & Security

  • No PII collected - Only tracks agent interactions, not user data
  • No cookies - Fully cookieless tracking
  • No external dependencies - Self-contained script
  • Open source - Inspect the code yourself
  • Fail-safe - Never breaks your website (wrapped in try/catch)

Development

Build from source

git clone https://github.com/openhermit/openhermit-js.git
cd openhermit-js
npm install
npm run build

Run tests

npm test

WebMCP Specification

OpenHermit implements the W3C Web Model Context Protocol (WebMCP) specification for AI agent discoverability. WebMCP is an emerging W3C standard that defines how websites expose actions and capabilities to AI agents through the navigator.modelContext browser API and HTML data attributes.

The script also registers detected forms as browser tools via navigator.modelContext.registerTool() when supported, making your site natively discoverable by WebMCP-compatible AI browsers.

Example injected attributes:

<form
  data-mcp-action="submit_contact_form"
  data-mcp-description="Submit a contact form inquiry to the business"
  data-mcp-params='[{"name":"email","type":"email","required":true},{"name":"message","type":"textarea","required":true}]'
  data-openhermit="true"
>
  ...
</form>

Dashboard & Analytics

Get real-time insights at openhermit.com:

  • Which AI agents visit your site
  • What forms/actions they interact with
  • Conversion rates and success metrics
  • Custom agent prompts and behavior controls

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Community & Support

License

MIT License - see LICENSE for details.

Links


Made with 🦀 by the OpenHermit team

Releases

No releases published

Packages

 
 
 

Contributors