A template is the starting point of a project. You pick it once, when you create the project. Graspable copies it into your project folder and installs its packages. It also gives the agent instructions that fit the template.
Two templates ship with the app, and more are coming. Community templates are for everyone. Premium templates come with the Builder plan and higher; see Plans and billing.
| Template | Kind | Use it for |
|---|---|---|
| React XR | Community | 3D scenes, games, tools and AR or VR experiences built from objects |
| Splat World | Premium | Experiences set inside a captured real place (a Gaussian splat) |
React XR
The project starts with a single box you can tap, and an Enter AR button. It uses React Three Fiber for the 3D scene and @react-three/xr for headsets. The physics library @react-three/rapier and the helper library @react-three/drei are installed too.
Pick this template unless you have a splat to show.
Splat World
The project starts with a Gaussian splat of a room, rendered with @sparkjsdev/spark, and an Enter AR button. The default splat is the file assets/spaceship_bedroom.spz.
To use your own splat, give the agent a web address of a splat file in your request. The agent is told to use an address you give instead of the default file.
How a project is laid out
Both templates have the same layout. There is no src folder.
| File | What it is |
|---|---|
App.jsx |
The root of your app. Most changes start here |
App.css |
Styles |
components/ |
Where the agent puts additional parts of the scene |
index.jsx, index.html |
The entry point |
package.json, vite.config.js |
Packages and build settings |
tests/xr/ |
Your XR recordings. See XR tests |
xr-dev.js |
The emulated headset and the record and replay tools. Used only in the preview |
graspable-source.js |
Links objects in the scene to the code that made them. Used only in the preview |
xr-dev.js and graspable-source.js are not part of a built app. Leave both files as they are. The agent is told not to edit them.
What the agent is told about every project
These rules come with both templates. Knowing them helps you write requests.
- The app is the XR scene. The 3D canvas fills the window, with no web page around it.
- Inside a headset, web page elements are not visible. Scores, menus, buttons and labels belong in the scene.
- The only web page element is the small Enter AR or Enter VR button. It must stay, because your XR recordings are replayed by pressing it.
- The app must also work on a flat screen with a mouse or touch. That is what the preview shows first.
Good to know
- You cannot change a project's template later. Create a new project instead.
- A project is a normal Vite and React project. You can open the folder in another editor, or add packages by asking the agent.