Create a new app with AI

You can create a new app with the ArcGIS Maps SDK for JavaScript 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 by starting with a basic template, and then using an AI coding assistant to add features.

For a practical example using an authored web scene, see Building my first JS web app with AI.

Set up the app

Start from a current @arcgis/create template, which provides supported files and patterns. You need:

• A current long-term support (LTS) version of Node.js and a current version of Git.
• Licensing through an ArcGIS Online organization, ArcGIS Enterprise, or an ArcGIS Location Platform account. See Licensing requirements.
• An AI coding assistant that can edit files and run your project commands.

Choose a template for your framework and build tool. The @arcgis/create walkthrough explains the options.

Ask the assistant to generate the app:

Create a new ArcGIS Maps SDK for JavaScript app with @arcgis/create. Use the <template> template for <app requirements>. Run npm init @arcgis and keep the generated structure rather than replacing it with a custom setup.

After the app starts, list the generated files and local development command in your response. Verify the installed SDK version from the lockfile, and identify the integration style, UI architecture, framework, language, source locations, and validation commands from the generated files. Include these facts in your response and update the Project facts section if a project instruction file exists.

Or generate it yourself. This example uses Vite:

npx @arcgis/create -n my-arcgis-app -t vite

If you generated the app yourself, install dependencies and start it with the commands below. If the assistant generated it, first review its report and run only the steps it has not completed:

cd my-arcgis-app
npm install
npm run dev

Follow the generated README for your template and package manager. Open the app in your browser and confirm the map renders. Check the installed SDK version and validation commands in the assistant’s response against the lockfile and project scripts. If you generated the app manually, find these details yourself. Add them to your project instruction file if you use one, or include them in your next prompt.

Configure access only for resources that need credentials or user sign-in. Follow the Authentication guide. If the template includes src/auth/configureOAuth.ts, use that helper.

Add app functionality

Describe the feature you want to add:

This generated ArcGIS Maps SDK for JavaScript app already runs. Use the project facts from setup and any shared project instructions.

- Keep the SDK version installed by the generated project and use map components rather than deprecated widgets.
- Create a <2D or 3D> experience with this UI and Calcite styling: <styling requirements>.
- Use this service, WebMap, or WebScene URL: <URL>. Preserve saved environment and basemap settings, applying only these overrides: <settings or none>.
- Implement this behavior: <behavior list>.
- Check access requirements for the resources and referenced services. If none require credentials, do not add authentication.

Before editing, summarize the requirements and ask me to resolve open questions. Implement the agreed behavior and follow the shared validation checklist:
https://developers.arcgis.com/javascript/latest/ai-assisted-development/setup-and-validation/#validate-a-change

Start from an authored map or scene

Load an existing WebMap or WebScene instead of recreating its configuration. See Display a web map or Display a web scene.

This prompt adds controls to a web map:

Use the generated app and project facts from setup to create a viewer for this WebMap: <item URL>.

Inspect the item and its layers. Summarize layer IDs, initial order and visibility, renderers, popup configuration, basemap, and initial view. Confirm access requirements for the item and referenced services. Report anything you cannot inspect.

Load the WebMap with map components. Add layer-visibility controls and a control to return to the initial view. Prefer Calcite for additional UI. Preserve the saved initial state. Do not rebuild it or add duplicate layers. Keep remote items unchanged and ask before adding unrequested startup overrides.

In the browser, verify the initial view and popups, toggle a layer, navigate away, and return to the initial view. Report checks you could not perform.

For a WebScene, include its ground, environment, and saved slides where relevant. For charts, identify their source layers and saved configuration separately. Map changes do not necessarily update charts.

Test the results

Ask the assistant to follow the shared validation checklist and the checks below. Review its report and the app yourself, and complete checks it could not run. For a new app, include:

• Check the requested 2D or 3D experience, data URL, basemap, and environment settings.
• Compare authored map or scene settings with the source item and agreed overrides. Test added controls without changing remote items.
• Confirm the generated SDK version and agreed component, styling, and access patterns are unchanged.