Mostra d'Arte: The Agent-Native Art Gallery

💡 Inspiration

Recently, I was filling out a questionnaire that asked me to name my favorite artist. I honestly didn't know what to answer, and spent a couple of hours figuring out which paintings I actually liked and which I didn't — watching videos about the lives of the artists and watching films about them.

When the email from Devpost about The WebMCP Challenge arrived, there were only a couple of days left before the deadline. The new technology intrigued me, and I registered right away. I spent the first day studying the resources tab to learn what WebMCP was, and then I needed to choose an idea. I chose one that would solve my own recent problem. I also believe the target audience of this application is not limited to everyday users — it is capable of being used in real-world art galleries to assist tour guides and docents.

Naming it was an adventure in itself — I chose Mostra d'Arte (Italian for "Art Exhibition").

✨ What it does

To be honest, when I saw the demo projects with WebMCP, I was amazed. I really liked this technology, I realized that this was impossible before, and I wanted to make my own contribution. Mostra d'Arte is an agent-native web application built so that people and their agents can use it together to explore art.

The idea of the application is to provide structured tools agents can use directly. When a person wants to study a painting, it becomes meaningfully better if you and your agent can interact, collaborate, and explore together.

In the app, you talk to your browser agent naturally:
"Exhibit the Mona Lisa, turn on the focused spotlight for dramatic atmosphere, and zoom in on her hands."
The agent then immediately switches the artwork on the wall, dims the room with a focused spotlight, and smoothly zooms in on the hands.

🛠️ How I built it

With very little time on the clock, I used Google AI Studio to rapidly prototype the visual aesthetics and curatorial concepts, and engineered the application in Antigravity IDE, and deployed it on Vercel. Along the way, I replaced traditional server-side function calling with direct client-side WebMCP tool actuation in the browser.

(A fun milestone: when I kicked off the project, my assistant was Gemini 3.7; by the time I finished, Gemini 3.8 had just been released!).

Thanks to the clear documentation (Resources tab), I implemented the WebMCP specification using document.modelContext.registerTool(), creating 12 client-side tools across 4 functional areas. All tools include strict JSON Schema definitions, Google character budgets, readOnlyHint security declarations, and AbortSignal cleanup tied to component lifecycles.

1. Spatial Navigation

• zoom_painting: Takes { x, y, zoom, detail_name } and animates the camera to specific percentage coordinates on the canvas.
• reset_view: Resets the camera back to 1.0x view and restores normal gallery lighting.
• switch_masterpiece: Switches the displayed painting between 7 available artworks.

2. Lighting & Audio

• toggle_spotlight: Turns on a spotlight on the canvas and dims the surrounding room.
• toggle_ambient_acoustics: Starts or mutes ambient background sound generated via the Web Audio API.
• toggle_composition_grid: Shows or hides a Golden Ratio and Rule of Thirds composition grid overlay.

3. Information & Guided Tours

• get_artwork_details: Returns artwork description, pigment information, and focal point coordinates.
• toggle_curatorial_dossier: Opens or closes the side drawer with historical background and pigment data.
• start_guided_tour: Starts an automated multi-stop tour with text-to-speech audio narration.
• docent_speak: Outputs agent commentary into the on-screen Virtual Docent dialogue and reads it aloud.
• open_salon_browser: Opens a full-screen gallery view displaying all 7 paintings.

4. Ticketing

• reserve_gallery_pass: Generates a modal with a VIP admission ticket and QR code for the visitor.

🧪 How to test

The application is deployed on Vercel at https://mostra-darte.vercel.app and can be tested via:

• Google Chrome with the testing flag enabled:
  1. Open chrome://flags/#enable-webmcp-testing and set to Enabled (relaunch Chrome).
  2. Inspect tools via Chrome DevTools (Application > WebMCP) or the official Model Context Tool Inspector extension.

Sample prompts to test with the agent:

• Multi-Tool Chaining & Spotlight:
  "Exhibit the Mona Lisa, zoom in on her hands, and turn on the focused spotlight for dramatic atmosphere."
• Camera Zoom & Details:
  "Show me the details of the moon in this painting."
• Reset View:
  "Show me the edge of the cliff with flowers, then reset the view."
• Switch Artwork:
  "Show me Michelangelo painting."
• Guided Audio Tour:
  "Start a guided tour of The Starry Night."
• Historical Dossier & Pigments:
  "Show me pearl. What pigments and colors did Vermeer use for this masterpiece? Show me the palette."
  (To close: "Close the dossier and return to full canvas.")
• Composition Grid:
  "Switch to Botticelli. Analyze the geometric balance of this painting and show the composition grid."
  (To hide: "Hide the composition grid.")
• Ambient Acoustics:
  "Turn on the gallery ambient music to set a contemplative mood." (To mute: "Mute the gallery ambient sound.")
• Salon Wall Collection:
  "Show me the entire gallery collection on the salon wall."
• VIP Ticketing:
  "Book 2 VIP passes for Jude on tomorrow's evening session."

🏆 Accomplishments that I'm proud of

I am proud that I studied the documentation for the new WebMCP technology and built a working MVP in just a few days. I managed to implement 12 tools that let the agent control the camera, museum lighting, audio, and guided tours.

The project is fully open source under the MIT license, so other developers can explore how WebMCP works in practice.

Built With

• chrome-ai
• gemini
• google-ai-studio
• lucide-react
• model-context-protocol
• motion
• react
• tailwindcss
• typescript
• vercel
• vite
• web-audio-api
• web-speech-api
• webmcp