arcgis-assistant-agent | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/ai-components/components/arcgis-assistant-agent";

Inheritance: ArcgisAssistantAgent→HTMLElement

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

Use arcgis-assistant-agent to add a custom agent to the arcgis-assistant component. Assign the custom agent to the agent property of arcgis-assistant-agent and add that element as a child to arcgis-assistant. This component does not render a user interface.

Create the assistant and agent components, then assign your custom agent before adding them to the page, as shown below. For instructions on creating myCustomAgent, see the Custom agents guide.

const assistant = document.createElement("arcgis-assistant");
const agentElement = document.createElement("arcgis-assistant-agent");

agentElement.agent = new SkillAgent();  // properties specifying agent behavior should be defined in the constructor.
assistant.appendChild(agentElement);
document.body.appendChild(assistant);

See also

Properties

Property	Attribute	Type
agent		AssistantAgentDefinition
context		TContext \| (() => Promise<TContext \| undefined> \| TContext \| undefined) \| undefined

agent

Property

Type: AssistantAgentDefinition

Assign an agent created with an AI Components agent utility, such as LLMAgent, FunctionAgent, WorkflowAgent, or SkillAgent.

When defining an agent using LangGraph, then directly assign the AgentRegistration object to this property.

Example

import { LLMAgent } from "@arcgis/ai-components/agent-utils/LLMAgent.js";

const agentElement = document.querySelector("arcgis-assistant-agent");

agentElement.agent = new LLMAgent({
  name: "GIS terminology",
  description: "Explains GIS terms and concepts.",
  prompt: "Explain GIS terms in plain language, using short examples.",
});

context

Property

Type: TContext | (() => Promise<TContext | undefined> | TContext | undefined) | undefined

Application data made available to the custom agent during execution. Assign a context object, or a function that returns one. The function is called each time the assistant invokes the agent and can return a promise, allowing you to supply current data asynchronously.

Examples

Assign a context object:

agentElement.context = {
  layerId: "parcels",
};

Use a callback to read current application data:

agentElement.context = () => ({
  selectedFeatureIds: getSelectedFeatureIds(),
});

Use an asynchronous callback to fetch application data:

agentElement.context = async () => ({
  selectedFeatureIds: await fetchSelectedFeatureIds(),
});

Methods

Method	Signature
componentOnReady inherited	componentOnReady(): Promise<this>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisAssistantAgent = document.createElement("arcgis-assistant-agent");
document.body.append(arcgisAssistantAgent);
await arcgisAssistantAgent.componentOnReady();
console.log("arcgis-assistant-agent is ready to go!");