Chatbox in an app

The Chatbox component drops a ready-made chat UI into your app. Point it at an agent and you have a full conversational interface with no custom UI work.

  1. In the App Designer, open the Component library, go to nep.ai, and drag Chatbox into your app.

  2. Set the agent property to the ID of your agent.

That is the minimum: you now have a working chat UI bound to your agent. The sections below cover optional extras: reacting to events and injecting context at runtime.

A few properties worth knowing upfront:

  • stream: set to true to receive the response token by token.

  • agentUseHistory: set to true to show past conversations and keep context across messages using threads. Without it, every message starts fresh.

  • triggeredFrom: an optional label that appears in the Agent Trace tool, useful for filtering logs by source.

For all configuration properties and methods see Chatbox component.

Listen to agent events

The Chatbox forwards the underlying nep.ai.Agent events. Use addEventDelegate to react to them during the agent’s processing life cycle:

chatbox.addEventDelegate({
    onChunk: ({ data }) => {
        console.log(data.getParameter("chunk"));
    },
});

To remove a delegate later, keep a reference to it and call removeEventDelegate:

const myDelegate = {
    onChunk: ({ data }) => {
        console.log(data.getParameter("chunk"));
    }
};

chatbox.addEventDelegate(myDelegate);

// Remove when no longer needed
chatbox.removeEventDelegate(myDelegate);

Inject context with agent variables

Use setAgentVariables to populate variables defined in the agent’s system prompt at runtime. For example, a {{mode}} variable to change conversational style:

chatbox.setAgentVariables([
    { key: "mode", value: "informal" },
]);

Retrieve the current variables with getAgentVariables().

Related topics