AI components (beta)

As part of the ArcGIS Maps SDK for JavaScript‘s ArcGIS Maps SDK for JavaScript, previously known as ArcGIS API for JavaScript, is a developer product for building mapping and spatial analysis applications for the web. Learn more AI components (beta), the Assistant component allows users to interact with a web map using natural language. The Assistant component provides the main interface for engaging with AI agents. The following ArcGIS agents available in the JavaScript Maps SDK enable users to explore web maps through natural language interactions:

• Navigation agent
• Data exploration agent
• Help agent
• Knowledge agent

Follow the steps below to get started with these agents in your web application.

Get started

You can build agentic web applications with ArcGIS agents using either the CDN or a package manager like npm or yarn.

CDN

You can build agentic web applications with pre-built or custom agents by importing the AI components package directly from the CDN.

To get started with the CDN, include the JavaScript Maps SDK library in the <head> section of your HTML:

<script type="module" src="https://js.arcgis.com/5.2/"></script>

See the AI Assistant component sample for a complete example demonstrating how to build agentic applications using the CDN.

npm

You can use a package manager like npm or yarn to install the AI components package and build applications that use both pre-built and custom agents. A package-manager setup is recommended for custom-agent development.

Run the following command to install the package and its dependencies:

npm install @arcgis/ai-components @arcgis/core @esri/calcite-components

yarn add @arcgis/ai-components @arcgis/core @esri/calcite-components

pnpm add @arcgis/ai-components @arcgis/core @esri/calcite-components

Afterwards, you’ll need to individually import each component you use.

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

Create the application

Once the components are loaded, you can build the application with an AI assistant using HTML as shown below:

<arcgis-map id="main-map" item-id="49ecd45c57e246c2afa63ca254c5b6c4"></arcgis-map>
<arcgis-assistant
  reference-element="#main-map"
  heading="My Assistant"
  description="Explore and navigate this map using natural language"
>
  <arcgis-assistant-navigation-agent></arcgis-assistant-navigation-agent>
  <arcgis-assistant-data-exploration-agent></arcgis-assistant-data-exploration-agent>
</arcgis-assistant>

For more information on building applications with AI components, see the Building agentic mapping applications conceptual guide.