Build an editable WebXR exhibit with your coding agent

Your coding agent can edit a WebXR project directly through Graspable. It supplies the code; Graspable creates the project, builds it, checks that it loads in a browser and opens a preview. You do not need to hand the request to a second AI agent.

Here is a small example you can reproduce: a fictional beacon on an inspection table. Separate its three parts, select one to read about it, rotate the parts, then put everything back. The source is one component in the free React XR template.

The picture above is a real desktop-browser capture. The beacon is made from editable geometry; it is not an engineering model.

Download the example component. It uses the dependencies already in the React XR template; there are no additional models, textures or generation services to buy.

Start with a connected coding agent

Download Graspable, then install its agent connection from Settings → Plugins and connectors → Use Graspable from other tools. Ask your coding agent to follow the MCP setup guide. Claude Code, Codex and other clients that can start an MCP server can use this connection. Their setup steps differ.

Once connected, give the agent this request:

Create a new free React XR project called Beacon inspection. Read https://graspable.dev/blog/build-webxr-with-an-external-agent/Workbench.jsx and the project's current components/Workbench.jsx. Replace only that component with the example. Keep the template's application, XR setup and other files unchanged. Use Graspable's MCP tools to check the project and open its preview. Do not start a delegated AI run, purchase anything or publish the project. Report the checks that passed and any interactions you could not test.

If you are applying the file yourself, create a new React XR project, open Code, and replace components/Workbench.jsx with the downloaded source. Use a new project so the example does not overwrite an exhibit you have already built.

Creating this free project, editing its files and checking it locally do not spend Graspable Credits or require another AI sign-in. Your coding agent's own subscription or API usage terms still apply. Publishing and paid services are separate choices.

What the agent does

The reproducible MCP sequence is:

1. list_templates, then create_project with react-xr-developer.
2. Wait until list_projects reports that installation is done.
3. read_file for components/Workbench.jsx, then write_file with the replacement. Read it back to check that the intended source was saved.
4. check_project. Correct build or browser errors before continuing.
5. start_preview, then inspect the running scene at the returned local address.

For this example we authored the component, refined it while viewing the scene, and applied the final file to a fresh project through Graspable 0.18.1's MCP tools. The file readback, build, browser check and preview passed on macOS. This was a direct-edit test with no delegated model run. It was not a test of every named client's connection or a claim that one prompt always produces this result.

A successful check proves less than a working exhibit. Our first build passed while its desktop controls were below the viewport. Looking at the actual preview caught that mistake. After correcting it, we tested the controls themselves.

Try the interactions

Select Separate parts. The optics, power core and radiator move apart. Choose a part in the control panel, or click its geometry. The sign and selection ring should agree with your choice.

Choose Rotate parts to inspect the shapes, then Face front to return them to their starting orientation. Reset assembles the parts, stops rotation and selects the optics. The Inspect the beacon heading hides or shows the desktop controls. Those controls also work with Tab and Enter.

In an immersive session, the HTML panel disappears. Buttons on the table provide separation, rotation, reset and Leave XR. We exercised selection, separation and exit using an emulated controller in IWER, as well as desktop mouse and keyboard controls. A narrow browser layout was also checked at 390 pixels wide.

This example has not had a physical-headset or phone performance test. Emulation does not establish hand tracking, readable text in a headset or sustained frame rate. It does not detect a real table on iPhone: this is a WebXR inspection exhibit, not a markerless phone-AR placement example. For that distinction, see AR on phones and headsets.

Make a change that you can check

Try a bounded follow-up:

Add a fourth part called Protective housing. Give it its own selectable geometry and description, include it in separation and reset, and keep all four parts visible in a narrow browser window. Preserve the desktop keyboard controls and the in-world exit button. Check the build, then verify selection and reset in the preview.

You retain the component and its state as ordinary source. An agent can change the geometry, spacing, materials, descriptions and behavior; you can edit the same file yourself. For an actual product, replace the fictional parts with models you own and write descriptions based on that product.

The useful handover is the editable project, the running preview and a clear record of what was tested. Use Graspable with your AI agent covers the connection, access limits and optional delegated workflow.