@tangle-network/agent-embed

Drop-in <tangle-agent> web component for embedding any Tangle marketplace agent into any webpage.

Quick start — script tag (no build step)

<script src="https://unpkg.com/@tangle-network/agent-embed/dist/embed.js"></script>

<tangle-agent slug="tax-freelancer"></tangle-agent>

Quick start — npm

npm install @tangle-network/agent-embed

import '@tangle-network/agent-embed'

<tangle-agent slug="tax-freelancer"></tangle-agent>

Or call defineTangleAgent() explicitly with a custom tag name.

Attributes

Attribute	Required	Default	Purpose
slug	yes	—	Agent's marketplace slug
host	no	https://<slug>.tangle.app	Override base host (BYO custom domain)
api-key	no	—	sk-tan-* key; pass or let UI prompt
model	no	anthropic/claude-sonnet-4-6	Override default model
theme	no	auto	dark / light / auto
height	no	560px	CSS height
welcome	no	agent-specific	Override the welcome banner

Events

• tangle-agent:ready — { slug, host } after the /health check passes
• tangle-agent:message — { role, content } on each user / assistant message
• tangle-agent:error — { error, status? } on any failure

Methods

• el.send(text) — send a message programmatically
• el.clear() — reset the conversation
• el.setApiKey(key) — update the sk-tan-* key at runtime

Auth

The component validates the user's sk-tan-* key against the deployed agent's /v1/chat/completions endpoint, which in turn validates against id.tangle.tools. Keys are stored in localStorage per slug for convenience — pass api-key="..." instead if you don't want that.

Shadow DOM parts

Style from the outside via CSS ::part():

tangle-agent::part(header) { background: black; }
tangle-agent::part(send) { background: magenta; }

Parts available: root, header, title, status, key-input, messages, composer, input, send.