A Live AI Agent
Inside Your Own Page
Hire an agent, mount it, and it holds a real streaming conversation on your domain. It renders in your own DOM rather than an iframe. No API key in your markup, no framework requirement, and no build step if you do not want one.
It lives in your page, not in a box on top of it
Every chat widget you can paste onto a site is an iframe. An iframe is a sealed box: your CSS stops at its border, your JavaScript cannot reach in, and it cannot see the page around it. This mounts as a web component in your own DOM, using open shadow DOM. Your design system wins, your stylesheet restyles it, and your code can drive it.
<!-- one element, one script, no build step -->
<div data-spiderflow-flow="your-flow-id"
data-spiderflow-kind="agent"></div>
<script src="https://embed.spideriq.ai/v1/loader.js" async></script>The reply arrives while it is being written
Two calls do the work. A session call returns a short-lived token and the agent's persona. Each turn then comes back as a stream of frames rather than one lump, so the answer appears as it is composed. The whole protocol is documented, so you can drive it from a native app or a proxy if the SDK does not fit.
POST /v1/embed/session → token, expires_in 900, persona
POST /v1/embed/turn → text/event-stream
start → text-start → text-delta × N → text-end → finishNothing you paste holds a secret
This matters most when the page belongs to a client. The snippet you hand over carries a flow id and nothing else, and the agent will only run where you said it could.
The token stays in a closure
The session token lives in the component's JavaScript closure. Never in the DOM, never in a prop, never in your bundle. Tests fail if it leaks.
Your origin, allow-listed
Register the domains an agent may run on. An unregistered origin is refused by the server, not by the widget. It is also the usual reason an agent mounts and stays quiet.
Four shapes, one agent behind them
On a site we host, the agent is a marketplace component you drop onto a page. Pick the shape that suits the moment rather than bolting the same bubble onto everything.
Section & widget
A band in the flow of the page, or a card inside a column. Good for a "talk to sales" moment where the reader already is.
Concierge
A full-screen conversation on its own address. Useful when the agent is the destination rather than an accessory to a page.
Headless
You render every pixel of the chat yourself and take only the transport. For teams whose design system does not negotiate.
One component in a React app
For a React, Next or Vite app there is a package. It is safe to server-side render, so you do not need a dynamic import in Next. One thing catches everyone: the package comes from our registry, so the scope line goes in before the install.
# .npmrc, before you install
@spideriq:registry=https://npm.spideriq.ai
import { SpiderAgent } from "@spideriq/agent-react";
<SpiderAgent flowId="your-flow-id" mode="inline" />What the agent can read, and where
An agent embedded on a site you host yourself can read the page it is on, so it answers about what the visitor is actually looking at. You opt in, and you choose the region: name a selector and it reads that subtree and nothing else. Anything marked private, every password field and every form value is stripped before anything leaves the browser, and the stripping happens on a copy so your live page is untouched.
On a page we host for you, this does not run today. The agent mounts and talks normally, but it does not read the page around it. We would rather write that sentence than have you demo it to a client and find out there.
Agent flows are created by an agent
There is no "new agent flow" screen in the dashboard. You hire from the catalog and mount from the terminal or an MCP-capable assistant, which is how this was built and tested. If you were looking for a button, it is not there.
spideriq agent roster
spideriq agent hire <id> --roster --origin https://your-site.com
spideriq agent embed-snippet <flow_id> --mode inline