v1.0 · Zero dependencies · 13 kB gzip

Your ops console,
embedded anywhere

Drop five components into any internal tool. Get task approvals, data tables, document uploads, agent orchestration, and real-time workflow status — no UI engineering required.

See it live Integration guide

          
          index.html
        
          <!-- 1. Load the SDK -->

          <script src="https://cdn.tryhyphen.com/sdk/v1.js"></script>

          <!-- 2. Initialize -->

          <script>

            const sdk = await HyphenSDK.init({ publishableKey: 'pk_live_...' });

          </script>

          <!-- 3. Drop in components -->

          <hyphen-task-sidebar auto-refresh></hyphen-task-sidebar>

          <hyphen-data-grid table="invoices"></hyphen-data-grid>

          <hyphen-doc-feed workflow-id="wf_processing"></hyphen-doc-feed>

          <hyphen-agent-console show-trace></hyphen-agent-console>

Live Demo

What your team sees

This is a working simulation of the Hyphen SDK embedded in a customer's internal operations portal. Every component connects to real gateway endpoints.

Select tools

Max steps: 10

Running Step 0 of 10

✓ Completed

Final Answer

Confidence

Reasoning Trace

Invoices

Documents

Invoice # ↑	Customer ↑	Amount ↑	Status ↑	Due Date ↑	Modified

Double-click any cell to edit

Documents

6 documents

+ Upload document · PDF, CSV, XLSX up to 50 MB

Capabilities

Everything your ops team needs

Five components that cover the full operational surface — approvals, data, documents, agents, and identity.

<hyphen-task-sidebar>

Pending human-in-the-loop tasks from your workflows. Approve or reject inline. Real-time updates via SSE. Urgency badges, optimistic UI, and linked-row navigation.

<hyphen-data-grid>

Sortable, paginated data table with inline editing. Double-click any cell to edit. Agent-modified rows are highlighted. Connects to any table in your workflow scope.

<hyphen-doc-feed>

Document list with workflow trigger status. Upload via drag-and-drop, track processing in real-time (queued → processing → completed/failed). Linked run IDs for audit. PDF, CSV, XLSX.

<hyphen-auth-modal>

Email + 8-digit OTP login for pre-registered team members. User-scoped session tokens with audit trails. No passwords, no SSO configuration required.

<hyphen-agent-console>

Launch ReAct agents with an objective and tool selection. Watch the reasoning trace animate in real time. Resume paused agents with human input. Scoped to user permissions.

Real-time events

Server-Sent Events with auto-reconnect and polling fallback. Components update automatically when tasks are created, runs complete, or data changes.

Origin-bound security

Publishable keys are scoped by domain, workflow, table, and action. The SDK never sends org identity — the gateway resolves it server-side. Shadow DOM isolation.

Integration

Live in 10 minutes

Create a publishable key

Your admin creates a key scoped to the workflows, tables, and origins your ops tool needs. One API call or management console click.

Add the script tag

Load the SDK from CDN. 13 kB gzipped, zero dependencies, no build step required. Works in any HTML page or framework.

Initialize with your key

One line: HyphenSDK.init({ publishableKey: 'pk_live_...' }). The SDK handles session management automatically.

Drop in components

Add Web Components as HTML tags. They auto-connect to your workflows, render data, and handle user interactions. Theme with CSS custom properties.

            
            ops-portal.html
          
            <script src="https://cdn.tryhyphen.com/sdk/v1.js"></script>

            <script>

              const sdk = await HyphenSDK.init({

                publishableKey: 'pk_live_abc123...',

                onSessionExpired: () => sdk.login()

              });

              // Enable real-time updates

              sdk.startEventStream();

              // Listen for task decisions

              sdk.on('task:decided', (e) => {

                console.log('Decision:', e.data);

              });

            </script>

            <!-- That's it. Components auto-connect. -->

            <hyphen-task-sidebar auto-refresh/>

            <hyphen-data-grid table="invoices" editable/>

            <hyphen-doc-feed workflow-id="wf_inv"/>

            <hyphen-agent-console show-trace/>

Your ops console,
embedded anywhere

What your team sees

Pending Tasks

Agent Console

Documents

Everything your ops team needs

<hyphen-task-sidebar>

<hyphen-data-grid>

<hyphen-doc-feed>

<hyphen-auth-modal>

<hyphen-agent-console>

Real-time events

Origin-bound security

Live in 10 minutes

Create a publishable key

Add the script tag

Initialize with your key

Drop in components

Ready to embed?

Your ops console,embedded anywhere

What your team sees

Pending Tasks

Agent Console

Documents

Sign in

Check your email

Authenticated

Everything your ops team needs

<hyphen-task-sidebar>

<hyphen-data-grid>

<hyphen-doc-feed>

<hyphen-auth-modal>

<hyphen-agent-console>

Real-time events

Origin-bound security

Live in 10 minutes

Create a publishable key

Add the script tag

Initialize with your key

Drop in components

Ready to embed?

Your ops console,
embedded anywhere