Embedded

Integrate the agent directly into your UI for a seamless user experience.

Prerequisite

This page assumes you’ve already installed Eucera SDK.

Installation

JavaScript

// using the api name of your agent
const AGENT_API_NAME = "playground";

eucera("when", "ready", () => {
  eucera.agent({
    apiName: AGENT_API_NAME, 
    mode: "EMBEDDED", 
    configuration: {
      embeddedConfiguration: {
        container: document.body,
      }
    }
  });
});

Configuration

The embedded agent supports both common and mode-specific settings. All attributes go under configuration.embeddedConfiguration:

Attribute	Type	Default	Required	Description
container	HTMLElement	null	Yes	The DOM element into which the agent will mount.
horizontalMargin	string	24px	No	Horizontal spacing on either side of the embedded agent (e.g. "20%").
isMenuOpenByDefault	boolean	false	No	Whether the menu/history panel should be expanded on initial load.
isRightSideMenu	boolean	false	No	If true, positions the menu/history panel on the right side, otherwise on the left.

JavaScript

eucera("when", "ready", () => {
  eucera.agent({
    apiName: AGENT_API_NAME, 
    mode: "EMBEDDED", 
    configuration: {
      embeddedConfiguration: {
        container: document.body,
        horizontalMargin: "20%",
        isMenuOpenByDefault: true,
        isRightSideMenu: false
      }
    }
  });
});

For the full list of shared options across all modes, see Common Configuration.

Programmatic Agent APIs

After you’ve initialized your embedded agent, you can call these methods on the returned instance (they all return this, so you can chain them).

---

Send a Message as the User

Use .message() to programmatically send text as if the user typed it. This is handy for injecting prompts, simulating user input, or responding to external events.

JavaScript

eucera("when", "ready", () => {
  eucera.agent({ /* …common setup… */ })
    .message("Hello, agent! Can you give me today’s summary?");
});

AI Actions

Empower your agent with custom, AI-powered actions that automate workflows and deliver smarter, context-aware responses.

Knowledge Base

Enhance your agent’s expertise by integrating a tailored knowledge base for accurate, authoritative, and context-rich answers.

Live Playground

Try it out in our interactive demo: