Skip to content

As part of the ArcGIS Maps SDK for JavaScript‘s 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:

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 by importing the AI components package directly from the CDN. The CDN may only be used for building applications that make use of pre-built agents.

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.0/"></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. If you would like to build your own agents, you must use this method to build your application.

Run the following command to install the package:

npm install @arcgis/ai-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.