"}],"short_description":"How I used agentic AI and the ArcGIS Maps SDK for JavaScript to build a custom 3D explorer for Malbork Castle.","flexible_content":[{"acf_fc_layout":"content","content":"A few weeks ago, I came across publicly available data of Malbork Castle, a medieval stronghold in northern Poland. I had visited the castle a couple of times before, and seeing the model brought back memories. It sparked the idea for a simple cultural heritage app: an immersive 3D experience that would let people explore Malbork Castle virtually and discover the stories connected to it.<\/p>\n
I wanted the app to feel designed around the castle, with styling, navigation, and interactions that worked together as one experience. That need for creative control made the ArcGIS Maps SDK for JavaScript the right choice.<\/p>\n
At the same time, as a GIS professional rather than a software developer, I have limited experience building full web applications. For me, creating a custom web app would normally mean either involving software developers or investing significant time in learning development skills myself. Instead, I used this project to explore whether AI could help turn the idea into a working prototype.<\/p>\n"},{"acf_fc_layout":"content","content":"
In this blog post, I share how I built the Malbork Castle Explorer with agentic AI and the ArcGIS Maps SDK for JavaScript. This is not a step-by-step tutorial for building the same application, but a practical walkthrough of the process: how I planned the app, gave AI useful context, reviewed its output, recovered from mistakes, and eventually shared the app. Along the way, I also highlight practical approaches and reusable patterns that can be applied to other projects.<\/p>\n
If you are a GIS professional curious about building your own app with AI, this post is for you!<\/p>\n"},{"acf_fc_layout":"content","content":"
The final application is a lightweight 3D explorer for Malbork Castle. It opens with a full-screen web scene and a small set of navigation tabs for key areas of the castle. Each tab moves the camera to a predefined viewpoint and shows a short description based on the scene content.<\/p>\n
The app also includes a guided tour mode. When started, the tour moves calmly between selected viewpoints, allowing users to experience the castle as a sequence of places rather than as a static 3D model. The interaction is intentionally simple: users can explore manually, read more when they want additional context, or let the guided tour move them through the experience.<\/p>\n"},{"acf_fc_layout":"content","content":"
Before working with the AI agent, I spent some time thinking about the data and user experience. You might be surprised how much smoother the process becomes when you take some time to plan first! In that sense, working with AI is not so different from working with developers: the clearer the requirements, the better the result.<\/p>\n
I started by preparing the data as a web scene<\/a>, combining the Malbork Castle mesh layer with a basemap. I then selected a few locations to highlight and prepared the related story content.<\/p>\n Next, I thought about the application itself: what functionality it should provide, how users would interact with it, and what kind of experience I wanted to create. To organize these ideas, I sketched a few rough concepts on paper and later used AI to turn them into more polished illustrations.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2980104,"id":2980104,"title":"UX_mixed","filename":"UX_mixed-scaled.png","filesize":2113065,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/UX_mixed-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/geoai\/building-my-first-js-web-app-with-ai\/ux_mixed","alt":"","author":"312132","description":"","caption":"AI-generated UX\/UI illustrations that later served as input during implementation.","name":"ux_mixed","status":"inherit","uploaded_to":2980089,"date":"2026-08-13 14:58:44","modified":"2026-08-13 14:59:44","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":785,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/UX_mixed-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/UX_mixed-scaled.png","medium-width":464,"medium-height":142,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/UX_mixed-scaled.png","medium_large-width":768,"medium_large-height":236,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/UX_mixed-scaled.png","large-width":1920,"large-height":589,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/UX_mixed-1536x471.png","1536x1536-width":1536,"1536x1536-height":471,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/UX_mixed-2048x628.png","2048x2048-width":2048,"2048x2048-height":628,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/UX_mixed-826x253.png","card_image-width":826,"card_image-height":253,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/UX_mixed-1920x588.png","wide_image-width":1920,"wide_image-height":588}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" I invested quite a bit of time in the UX design for this project, but that’s largely because I enjoy that part of the process. In practice, AI can work just as well from a simple description, sketch, or wireframe. The important thing is communicating the idea clearly.<\/p>\n"},{"acf_fc_layout":"sidebar","content":" <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2980199,"id":2980199,"title":"tools_table_2","filename":"tools_table_2-scaled.png","filesize":97964,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/tools_table_2-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/geoai\/building-my-first-js-web-app-with-ai\/tools_table_2","alt":"","author":"312132","description":"","caption":"","name":"tools_table_2","status":"inherit","uploaded_to":2980089,"date":"2026-08-14 10:42:20","modified":"2026-08-14 12:30:27","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1138,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/tools_table_2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/tools_table_2-scaled.png","medium-width":464,"medium-height":206,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/tools_table_2-scaled.png","medium_large-width":768,"medium_large-height":341,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/tools_table_2-scaled.png","large-width":1920,"large-height":854,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/tools_table_2-1536x683.png","1536x1536-width":1536,"1536x1536-height":683,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/tools_table_2-2048x910.png","2048x2048-width":2048,"2048x2048-height":910,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/tools_table_2-826x367.png","card_image-width":826,"card_image-height":367,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/tools_table_2-1920x853.png","wide_image-width":1920,"wide_image-height":853}},"image_position":"right","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" For this project, I kept the toolset simple: VS Code, GitHub Copilot (using GPT-5.4 model), and GitHub. GitHub handled both version control and deployment for the finished application.<\/p>\n Similar alternatives can be used for each part of the setup, but I chose to stick with tools I already knew and had available.<\/p>\n"},{"acf_fc_layout":"content","content":" <\/p>\n If you’re interested in the tools I used, setup instructions are available in the official documentation:<\/p>\n With the basic setup in place, I was ready to start engaging with AI. Before asking AI to write any code, I shared the project context it would need to make good decisions. That included:<\/p>\n See the initial setup prompt<\/a><\/p>\n Let me highlight a few decisions that shaped the project.<\/p>\n"},{"acf_fc_layout":"content","content":" Instead of reinventing the wheel, I wanted to make sure AI uses established patterns.<\/p>\n First, I asked it to initialize the project using the official @arcgis\/create<\/a>\u00a0CLI tool. It creates a new project from a predefined template, giving AI a solid starting point.<\/p>\n I also provided links to the official documentation, sample code, and showcases. I specified that the latest version of the Maps SDK for JavaScript should be used and that Map Components should be preferred where possible, with @arcgis\/core used only when needed.<\/p>\n In my initial prompt, I also asked AI to use Calcite components<\/a>. Calcite provides ready-made, purpose-built web components for web applications, so it was a sensible starting point. However, I later realized that custom components were a better fit because they gave me more control over layout, behavior, and visual style.<\/p>\n I decided not to implement authentication, as all data used in the application is public and the app is intended for a public audience. Adding sign-in functionality would only introduce unnecessary complexity.<\/p>\n I also asked AI to leave the @arcgis\/create template unchanged at first. My goal was to get the basic setup working first and add functionality incrementally from there.<\/p>\n Finally, I asked AI to create and maintain project documentation. This includes technical constraints, project decisions, and a list of all prompts used. Having that documentation made it easier to work across multiple sessions and keep the implementation aligned with the original goals.<\/p>\n<\/div>\n"},{"acf_fc_layout":"blockquote","content":" Looking back, giving AI context was one of the most important parts of the workflow. The most helpful prompt was not simply \"build an app.\" It was the information around the app: what I wanted to create, which technologies to use, what to avoid, where the data came from, and how I wanted AI to collaborate with me.<\/p>\n"},{"acf_fc_layout":"sidebar","content":" From there, the project evolved through cycles of building, testing, and refining the app. The next sections highlight a few examples from that process.<\/p>\n First, I tailored the template to the project, replacing the default 2D map with a full-screen 3D scene and removing unnecessary functionality.<\/p>\n Next, I provided AI with the materials needed for the implementation: the web scene, the UX description, and the UI mockups. I asked AI to propose an implementation plan before making any changes. This gave me a chance to review the approach and make adjustments before any code was generated.<\/p>\n See the initial app idea prompt<\/a><\/p>\n The implementation plan consisted of three phases. Phase 1 connected the app to the public ArcGIS web scene and used its slides as the source of truth for locations, viewpoints, and descriptions. Phase 2 implemented the main user experience with minimal tab-based navigation and expandable descriptions. Phase 3 added the guided tour, including play\/pause controls, camera animation, and automatic transitions between locations.<\/p>\n This was the result after the first implementation of Phase 2. While it captured much of the intended experience, some details differed from the original design. For example, the descriptive text was placed in a different location and included too many UI elements, while the navigation tabs were split across multiple lines. I worked through these differences one by one until the implementation better matched the design I had in mind. The complete phase 2 feedback prompts<\/a> are available in the project repository.<\/p>\n Not every AI-generated change was an improvement. Sometimes the implementation didn\u2019t work or didn\u2019t follow the design or my intentions. Often, the simplest solution was to undo the changes, adjust the prompt, and try again.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2980203,"id":2980203,"title":"undo_changes_button_shadow","filename":"undo_changes_button_shadow.png","filesize":31337,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/undo_changes_button_shadow.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/geoai\/building-my-first-js-web-app-with-ai\/undo_changes_button_shadow","alt":"","author":"312132","description":"","caption":"Use the Undo button in VS Code to revert changes introduced by your latest prompt.","name":"undo_changes_button_shadow","status":"inherit","uploaded_to":2980089,"date":"2026-08-14 12:49:28","modified":"2026-08-14 12:49:36","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1891,"height":161,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/undo_changes_button_shadow-213x161.png","thumbnail-width":213,"thumbnail-height":161,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/undo_changes_button_shadow.png","medium-width":464,"medium-height":40,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/undo_changes_button_shadow.png","medium_large-width":768,"medium_large-height":65,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/undo_changes_button_shadow.png","large-width":1891,"large-height":161,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/undo_changes_button_shadow-1536x131.png","1536x1536-width":1536,"1536x1536-height":131,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/undo_changes_button_shadow.png","2048x2048-width":1891,"2048x2048-height":161,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/undo_changes_button_shadow-826x70.png","card_image-width":826,"card_image-height":70,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/undo_changes_button_shadow.png","wide_image-width":1891,"wide_image-height":161}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" When an issue appeared to stem from a misunderstanding, I would often ask AI to review the original prompts and identify potential ambiguities<\/span>. This often helped me spot gaps in my thinking and rephrase the requests more clearly.<\/p>\n Regular commits to GitHub provided an additional safety net and made it easy to return to earlier versions when needed.<\/p>\n Once the application was working and looking as intended, I moved on to testing and refinement. I started with manual testing to identify bugs and usability issues. After fixing these, I used AI for additional rounds of review.<\/p>\n For example, I asked AI to compare the implementation against the project’s original technical constraints and point out anything that didn’t match the documented approach.<\/p>\n See the technical constraints review prompt<\/a><\/p>\n I also asked AI to review the code as a senior software developer would, focusing on technical risks or performance concerns. <\/span><\/p>\n See the technical review prompt<\/a><\/p>\n In both cases, AI produced reports that were saved alongside the rest of the project documentation: technical constraints compliance report<\/a> and engineering review report<\/a>. I reviewed the recommendations and used AI to help plan the changes I decided to implement.<\/p>\n"},{"acf_fc_layout":"sidebar","content":" As a final step, I deployed the application with GitHub Pages<\/a>. I asked AI to prepare the relevant deployment files and configuration in the repository, so the app could be built and published from GitHub. After that, the actual publishing step was straightforward: I enabled GitHub Pages in the repository settings, and a few seconds later the custom app was online and ready to share.<\/p>\n The biggest lesson from this project was that AI worked best when I treated it as a collaborator, not as an autopilot. It could generate code, suggest implementation plans, and help debug issues, but I still needed to define the goal, test the result, and decide which recommendations to accept.<\/p>\n I also found that asking AI to propose a plan before changing code helped me stay in control of the implementation. When something went wrong, the most effective approach was often to undo the change, clarify the request, and try again.<\/p>\n For future projects, I would commit early and often, keep the project documentation up to date, and explicitly ask AI to review accessibility, performance, maintainability, and technical constraints before considering the prototype complete.<\/p>\n As GIS professionals, we can solve many problems using existing ArcGIS solutions. But sometimes we have a specific vision or workflow that calls for a custom application. For many of us, that usually means relying on software developers or spending significant time learning new development skills. Agentic AI is beginning to lower that barrier.<\/p>\n My goal with the Malbork Castle Explorer was to see whether agentic AI could help turn an idea, available data, and an initial UX concept into a functional prototype. In my experience, the answer is yes.<\/p>\n AI can accelerate the journey from idea to app, but clear thinking, careful review, and human judgment still matter. I hope this encourages you to experiment and try bringing your own ideas to life.<\/p>\n"},{"acf_fc_layout":"sidebar","content":"\n
2. Setting up<\/h1>\n
\n
\n
3. Giving AI context<\/h1>\n
\n
Using official tools and references<\/h2>\n
Keeping things simple<\/h2>\n
Documenting decisions<\/h2>\n
\n
4. Building the app<\/h1>\n
Initial version of the app<\/h2>\n
Iterating on the AI outcome<\/h2>\n"},{"acf_fc_layout":"image","image":{"ID":2980202,"id":2980202,"title":"initial_app_version","filename":"initial_app_version-scaled.png","filesize":5487889,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/initial_app_version-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/geoai\/building-my-first-js-web-app-with-ai\/initial_app_version","alt":"","author":"312132","description":"","caption":"Application state after initial AI implementation.","name":"initial_app_version","status":"inherit","uploaded_to":2980089,"date":"2026-08-14 12:44:47","modified":"2026-08-14 12:45:25","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1329,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/initial_app_version-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/initial_app_version-scaled.png","medium-width":464,"medium-height":241,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/initial_app_version-scaled.png","medium_large-width":768,"medium_large-height":399,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/initial_app_version-scaled.png","large-width":1920,"large-height":997,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/initial_app_version-1536x797.png","1536x1536-width":1536,"1536x1536-height":797,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/initial_app_version-2048x1063.png","2048x2048-width":2048,"2048x2048-height":1063,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/initial_app_version-826x429.png","card_image-width":826,"card_image-height":429,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/10\/initial_app_version-1920x997.png","wide_image-width":1920,"wide_image-height":997}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
When things go south<\/h2>\n
Review and fix<\/h2>\n
\n
5. Deploying and sharing the application<\/h1>\n
What I learned<\/h1>\n
Conclusion<\/h1>\n
Resources<\/h3>\n
\n