Agent panel

Give AI agents your site's API as two tools that run in the visitor's browser with the visitor's session. Reference for @flamioai/agent-panel.

The agent panel turns your site's API into two tools for an AI agent that opens your site in a browser with WebMCP. Instead of reading and clicking through your pages, the agent finishes a task in one short program. The calls to your API run in the visitor's browser, with the visitor's session.

Not released yet

The agent panel ships with web SDK 0.11.0, and neither package is on npm yet. This page describes them as they will be released.

What agents get

The same two tools on every page of your site:

site_query finds and reads what the agent needs, and returns only the answer.
site_run does the same and can also act, such as placing an order or saving a form. The agent's app asks the person before it runs it.

Nothing loads for ordinary visitors. The tools appear only in a browser with WebMCP, and the code that runs them loads on the agent's first call. With the panel set up, the forms you tagged for agents are not offered as separate tools.

Install

Install both packages from the same release:

npm install @flamioai/web-sdk @flamioai/agent-panel

A panel built for another release of the web SDK does not start. With debug: true in Flamio.init, the browser console says why.

Set it up

Pass the panel to Flamio.init:

flamio.ts

import { Flamio } from '@flamioai/web-sdk';
import { agentPanel, AGENT_PANEL_AUTH } from '@flamioai/agent-panel';

Flamio.init({
  projectKey: 'YOUR_KEY_HERE',
  endpoint: 'https://api.flamio.org/api',
  agentPanel: agentPanel({
    api: {
      origins: ['https://api.example.com'],
      auth: {
        type: AGENT_PANEL_AUTH.bearer,
        token: () => localStorage.getItem('YOUR_TOKEN_KEY'),
      },
    },
    loginUrl: '/login',
  }),
});

YOUR_KEY_HERE is your project key from Flamio On-Live > Setup.
https://api.example.com is the origin of your own API.
YOUR_TOKEN_KEY stands for wherever your page keeps the signed-in user's token.

Import the panel in bundled code. The web SDK's <script> build has no panel.

Options

Prop

Type

Authentication

Choose how the panel's requests to your API carry the signed-in user.

Bearer token. token() runs before each request and returns the user's token, or null when signed out. The panel sends it only to your API, as Authorization: Bearer. While token() returns null, an action that needs sign-in is refused and the agent asks the person to sign in.

auth: { type: AGENT_PANEL_AUTH.bearer, token: () => getAccessToken() },

Cookies. The browser sends its cookies for your API. Add signedIn() to tell the panel whether the user is signed in. Without it, the panel makes the request, and a 401 from your API makes the agent ask the person to sign in.

auth: { type: AGENT_PANEL_AUTH.cookie, signedIn: () => Boolean(currentUser) },

Your API must allow cross-origin requests from your pages: with the Authorization header for a bearer token, or with credentials for cookies.

Data and failures

Requests to your API run in the visitor's browser. Flamio sees which calls an agent makes, but your token and what your API returns stay in the browser. The programs agents ran and the actions they took are counted on Activity; see See what AI agents did on your site.
A failure never breaks your page. If Flamio cannot be reached or answers with an error, the agent gets a tool error instead.
Flamio.stop() removes the tools and cancels the calls in flight.