Embedded mode

Open in ChatGPT Open in Claude

Embedded mode renders the agent as a web component directly inside your application, anchored to a DOM element you control. Use it when you want the chat to live inline in your layout rather than as a floating overlay.

Initialize the agent

The snippet below waits for the SDK to be ready, then mounts the agent into the container element you pass.

// Replace with the API name from Agent Studio → Setup
const AGENT_API_NAME = "Foo";

const agentContainer = document.getElementById('agentContainer');

foldspace('when', 'ready', () => {
  foldspace.agent({
    apiName: AGENT_API_NAME,
    mode: 'EMBEDDED',
    configuration: {
      embeddedConfiguration: {
        container: agentContainer
      }
    }
  });
});

Embedded configuration

The embeddedConfiguration object controls how the agent renders inside your application. The property relevant to initialization:

Property	Type	Required	Default	Description
container	`HTMLElement`	Yes	-	The DOM element where the embedded agent will be mounted. Must be an existing element reference.

Next steps

Actions: give the agent AI-Native actions that run workflows and return context-aware responses.
Knowledge Base: connect a Knowledge Base for grounded answers.