Skip to Content
SdkEmbed Widget

Embed Widget

Embeddable components for integrating Curate-Me AI governance into any website. Monitor costs, view agent status, and manage approvals from a lightweight widget — no backend required.

Not yet available. embed.curate-me.ai does not resolve, and @curate-me/embed is not published to npm, so neither the script tag nor the package install on this page works today. The API below is the shape they will ship with. Ask us for early access.

Quick Start

Add one line before </body> to get a floating governance dashboard:

<script src="https://embed.curate-me.ai/v1.js" data-key="YOUR_API_KEY"></script>

Integration Methods

Script Tag (Easiest)

<script src="https://embed.curate-me.ai/v1.js" data-key="YOUR_API_KEY"></script>

Adds a floating widget to the bottom-right corner. No coding required.

Inline Widget

Embed inside a specific container:

<div id="curateme-widget"></div>
<script src="https://embed.curate-me.ai/v1.js"
        data-key="YOUR_API_KEY"
        data-target="#curateme-widget"
        data-mode="inline">
</script>

Web Components

Use individual components for specific features:

<script src="https://embed.curate-me.ai/v1.js" data-key="YOUR_API_KEY"></script>
 
<!-- Cost Dashboard Widget -->
<curateme-costs theme="light"></curateme-costs>
 
<!-- Agent Status Monitor -->
<curateme-agents-status></curateme-agents-status>
 
<!-- Approval Queue -->
<curateme-approvals position="bottom-right"></curateme-approvals>

React / Vue Components

npm install @curate-me/embed
import { CostDashboard, GatewayStatus } from '@curate-me/embed/react';
 
function App() {
  return (
    <CostDashboard
      apiKey="YOUR_API_KEY"
      onThresholdReached={(data) => console.log('Budget alert:', data)}
    />
  );
}

Headless Mode

Full programmatic control without any UI:

import { CurateMeClient } from '@curate-me/embed';
 
const client = new CurateMeClient({ apiKey: 'YOUR_API_KEY' });
 
const status = await client.gateway.status();
const costs = await client.costs.summary({ period: 'today' });
const approvals = await client.approvals.list({ status: 'pending' });

Configuration

All options can be set via the dashboard (recommended), HTML attributes (data-*), or JavaScript API (CurateMe.configure({...})).

OptionTypeDefaultDescription
mode'floating' | 'inline' | 'modal''floating'Widget display mode
theme'light' | 'dark' | 'auto''auto'Color theme
position'bottom-right' | 'bottom-left''bottom-right'Floating widget position
primaryColorstring'#0D9488'Brand color
featuresstring[]['costs', 'status']Enabled feature panels
languagestring'en'UI language

Events and Callbacks

Listen for governance events from the widget:

CurateMe.on('cost:threshold', (data) => {
  console.log('Cost threshold reached:', data);
});
 
CurateMe.on('approval:required', (request) => {
  console.log('Approval needed:', request);
});
 
CurateMe.on('runner:status-change', (runner) => {
  console.log('Runner status:', runner);
});

Server-Side Webhooks

Configure webhooks in the dashboard to receive events on your backend:

POST https://your-site.com/webhooks/curateme
{
  "event": "cost.threshold_reached",
  "data": { ... },
  "timestamp": "2026-03-26T..."
}

Platform Integrations

PlatformHow to Install
ShopifyInstall from Shopify App Store, click “Enable” in admin
WordPressInstall “Curate-Me AI Gateway” plugin, add API key in Settings
WixAdd from Wix App Market, drag widget onto page
SquarespaceAdd Code Block, paste embed code from dashboard

Security

  • API keys are domain-restricted (configure allowed domains in dashboard)
  • All communication over HTTPS
  • No PII stored without explicit consent
  • GDPR/CCPA compliant

Next Steps

Cost TrackingMCP Server