Disclaimer: this code was 100% generated by AI. It may be good, it may be bad, but it works. It achieved the prototype goal I had: checking whether something like this could be built.
This is a personal prototype, not an Esri project. It will probably not move much further than this experiment.
Tiny Assistant is a weekend AI experiment about making something like Clippy for ArcGIS: a tiny movable assistant character for an ArcGIS web map.
Prototype question: can a Codex/ChatGPT-style "pet" become a tiny assistant that replaces the standard ArcGIS AI Assistant panel?
- Esri ArcGIS Maps SDK for JavaScript 5.0
- Esri AI Assistant component sample
- Esri
arcgis-assistantcomponent reference - Codex/ChatGPT-style pets via Codex settings, the Codex app, and OpenAI Devs on X
- Pet sprites from Petdex
Tiny Assistant keeps the map and AI chat as ArcGIS web components, then wraps them with a movable assistant character and compact chat panel.
Bundled sprites:
globby: my sprite for this prototype.globby-may-4th: an alternate Globby sprite style.clippy: pet sprite from Petdex.boba: pet sprite from Boba on Petdex.
Open the live demo:
https://ceddc.github.io/tiny-assistant/
You can explore the map and UI without signing in, but the assistant chat only works with an eligible ArcGIS Online organization account where AI assistants are enabled and your role can use them. See ArcGIS Account Requirement before trying the chat.
Or run it locally:
npm install
npm run devOpen the Vite URL printed in your terminal.
Tiny Assistant starts visible by default.
For GitHub Pages, build the project and publish dist:
npm run buildThe built demo is designed to work under a project page such as:
https://ceddc.github.io/tiny-assistant/
You can use Tiny Assistant directly from the GitHub Pages CDN. The hosted files are:
- module:
https://ceddc.github.io/tiny-assistant/tiny-assistant.js - Globby sprite:
https://ceddc.github.io/tiny-assistant/assets/globby-spritesheet.webp - Globby May 4th sprite:
https://ceddc.github.io/tiny-assistant/assets/globbymay4-spritesheet.webp - Clippy sprite:
https://ceddc.github.io/tiny-assistant/assets/clippy-spritesheet.webp - Boba sprite:
https://ceddc.github.io/tiny-assistant/assets/boba-spritesheet.webp
The simplest external page loads Esri's ArcGIS CDN plus the hosted Tiny Assistant module:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="https://js.arcgis.com/5.0/"></script>
<script type="module" src="https://ceddc.github.io/tiny-assistant/tiny-assistant.js"></script>
<style>
html, body, arcgis-map { block-size: 100%; inline-size: 100%; margin: 0; }
body { overflow: hidden; }
</style>
</head>
<body>
<arcgis-map id="map" item-id="YOUR_WEB_MAP_ITEM_ID"></arcgis-map>
<tiny-arcgis-assistant
reference-element="#map"
sprites='{
"globby": "https://ceddc.github.io/tiny-assistant/assets/globby-spritesheet.webp",
"globby-may-4th": "https://ceddc.github.io/tiny-assistant/assets/globbymay4-spritesheet.webp",
"clippy": "https://ceddc.github.io/tiny-assistant/assets/clippy-spritesheet.webp",
"boba": "https://ceddc.github.io/tiny-assistant/assets/boba-spritesheet.webp"
}'
heading="My map assistant"
description="Ask questions about this map"
suggested-prompts='["Summarize this map.", "Zoom to the most important feature."]'>
<arcgis-assistant-navigation-agent></arcgis-assistant-navigation-agent>
<arcgis-assistant-data-exploration-agent></arcgis-assistant-data-exploration-agent>
<arcgis-assistant-help-agent></arcgis-assistant-help-agent>
</tiny-arcgis-assistant>
</body>
</html>This repo also includes test.html, a tiny smoke-test page that imports the
hosted GitHub Pages module directly. external-user.html is similar, but uses
the local built module from dist.
GitHub Pages hosts your built tiny-assistant.js and sprite assets;
https://js.arcgis.com/5.0/ remains Esri's ArcGIS CDN. The public custom element
is tiny-arcgis-assistant. It accepts reference-element, sprites,
heading, description, optional start-hidden, optional
suggested-prompts, and optional sprite. When multiple sprites are
configured, the right-click menu includes a Style section for switching between
them.
Tiny Assistant can use one sprite or several named sprite styles.
For one character, pass one named sprite:
<tiny-arcgis-assistant
reference-element="#map"
sprites='{
"globby": "https://ceddc.github.io/tiny-assistant/assets/globby-spritesheet.webp"
}'>
</tiny-arcgis-assistant>For multiple characters, pass a sprites object and optionally choose the
initial style with sprite:
<tiny-arcgis-assistant
reference-element="#map"
sprite="boba"
sprites='{
"globby": "https://ceddc.github.io/tiny-assistant/assets/globby-spritesheet.webp",
"globby-may-4th": "https://ceddc.github.io/tiny-assistant/assets/globbymay4-spritesheet.webp",
"clippy": "https://ceddc.github.io/tiny-assistant/assets/clippy-spritesheet.webp",
"boba": "https://ceddc.github.io/tiny-assistant/assets/boba-spritesheet.webp"
}'>
</tiny-arcgis-assistant>When more than one sprite is configured, right-click the assistant character and use the Style section to switch between them at runtime. The menu is clamped to the viewport so it stays visible near screen edges.
Sprites need to follow the same Codex-style atlas contract used by Globby: 8 columns, 9 rows, and the same row meanings for idle, movement, wave, waiting, review, and related states. A different atlas layout would need extra metadata before Tiny Assistant could animate it correctly.
You can load and inspect Tiny Assistant without signing in. To use AI assistant chat, you need the same kind of ArcGIS access required by Esri's AI Assistant sample:
- a signed-in named user in an ArcGIS Online organization; public accounts, trial accounts, and developer subscriptions are not supported;
- access to the web map and layers;
- AI assistants enabled in the ArcGIS Online organization settings;
- beta apps and capabilities allowed by the organization;
- the role privilege to use AI assistants.
If chat does not work after sign-in, check the ArcGIS AI components FAQ or ask your ArcGIS Online administrator.
Do not commit real ArcGIS usernames, passwords, OAuth secrets, or tokens.
Tiny Assistant is a prototype, not a replacement for the ArcGIS Maps SDK AI components. The scope is intentionally narrow:
- keep Esri's
arcgis-mapandarcgis-assistantcomponents as the real map and AI assistant implementation; - test whether the assistant can feel more approachable when it is represented by a small movable character;
- package the wrapper as one reusable custom element that can be loaded from a GitHub Pages CDN;
- make the demo easy to inspect, copy, and adapt.
The project does not implement its own LLM, map reasoning, authentication system, or ArcGIS data access. Those stay with the ArcGIS Maps SDK and the ArcGIS AI Assistant components.
The main design choice was to wrap, not rewrite. Tiny Assistant passes ArcGIS
assistant agents through to an internal arcgis-assistant, then adds the Globby
character, sign-in gating, panel positioning, compact styling, and animation
states around it.
The chat is gated on sign-in because the ArcGIS AI Assistant only works for eligible ArcGIS Online organization accounts. Signed-out users can see the map and the character, but opening the chat starts ArcGIS sign-in instead of showing an apparently ready assistant.
The character is visible by default so the page immediately communicates the experiment. The panel stays compact and follows the character, but it clamps to the viewport so map controls and chat content remain usable.
The CDN module is a plain browser custom element. There is no framework runtime
and no new production dependency; the demo relies on the ArcGIS Maps SDK CDN and
the built tiny-assistant.js file published by GitHub Pages.
src/components/tiny-arcgis-assistant.jsdefines the public<tiny-arcgis-assistant>element.src/components/tiny-assistant-character.jsrenders and animates Globby from Codex-style spritesheets.src/lib/tiny-assistant-controller.jswires sign-in, chat open/close, positioning, ArcGIS assistant styling patches, and animation states.index.htmlis the main demo page.test.htmlis the smallest CDN smoke test using the hosted GitHub Pages module.external-user.htmlis a built-output style example that uses the local module fromdist.
This is meant to answer "can this be built?" rather than "is this a polished product?" The implementation patches some ArcGIS assistant shadow DOM styling to fit a much smaller panel, which is useful for a prototype but should be reviewed carefully before production use. The custom element is structured to avoid obvious single-instance assumptions, but the demo page itself is designed around one map and one assistant.
Expect the ArcGIS AI Assistant behavior, account access, and component internals to change as Esri evolves the SDK. If that happens, the wrapper may need small updates.