3D AR Studio MCP server

3D AR Studio

Drop a full augmented-reality studio into any web page.

Place as many 3D models as you like in your real room through the camera, describe a new one and watch it appear, arrange everything by hand, then share the whole scene as a link, a QR code, or a live room someone else can build in with you.

Live demo · npm · MCP server

<script type="module" src="https://unpkg.com/3d-ar-studio/dist/ar-studio.min.js"></script>
<ar-studio></ar-studio>

That is a working AR studio. No build step, no API key, no account. It comes wired to a free library of a few hundred public-domain models and a free, keyless text-to-3D lane; point it at your own catalogue with one option when you are ready.

Why this exists

Every web-AR drop-in places exactly one model and then hands off to a native viewer, which ends the session. This one keeps the whole scene in your page:

models as you want in a single live camera view.

• Many models, one room. Place, drag, pinch-resize, twist-rotate and duplicate as many

generation runs behind the live view and the finished model drops into the room.

• Generate without leaving the camera. Type "a brass desk lamp" into the dock. The

model, real-world light estimation, and depth occlusion so models hide behind your furniture.

• Real WebXR where it exists. An always-armed hit-test reticle, one XRAnchor per placed

space** opens Apple's AR Quick Look for real: true plane detection, true scale, true occlusion, the system's own "View in AR" sheet. The model is converted to USDZ on the device (a real conversion via three.js's USDZExporter, no server involved) and, because it is exported from the copy already standing in your scene, it arrives at the size you pinched it to and in the pose it was in, stood on the floor rather than hanging at the height it happened to be modelled at. Android without WebXR gets Scene Viewer. Desktop gets a grid preview and a QR hand-off to a phone.

• Real ARKit and ARCore everywhere else. iPhones have no WebXR, so tapping **Place in your

Compose on a laptop, scan the QR, it reopens exactly on your phone.

• Scenes are links. Models, positions, rotations and scales round-trip through the URL.

syncs to everyone in it.

• Build together, live. Open a room, share a six-character code, and every add and move

retargeted onto its own skeleton. No rig allow-list, no T-poses.

• Characters actually move. Any humanoid GLB with no baked animation gets an idle clip

generate a model, compose an arrangement, and hand a person one link that opens it in their room.

• Agents can drive it. A bundled MCP server lets Claude, ChatGPT or your own agent

The rendering ladder, anchor lifecycle, retargeting pipeline, scene format and shared-room protocol are extracted from the AR surfaces running in production on three.ws, and generalized so they work on your site with your models.

Install

npm i 3d-ar-studio three

three is a peer dependency, so you keep one copy of it and pick the version. The CDN bundle (dist/ar-studio.min.js) has three.js inside it and needs nothing else.

import { createArStudio } from '3d-ar-studio'

const studio = createArStudio('#stage', {
  branding: { title: 'Acme AR', accent: '#00b894' },
})

studio.on('add', ({ placement }) => console.log('placed', placement.title))

The studio fills its host element absolutely, so give the host a height (any positioned box with a real height works; a with no height gets a sensible 70vh default rather than rendering invisibly).

Scaffold a deployable page

Shortened. The full README is on GitHub.