lens-inspector 0.1.0 → 0.1.2

package/README.md

@@ -1,6 +1,8 @@
 # lens-inspector
 
-A browser-based scene graph inspector for Lens Studio. It shows you the full hierarchy of your scene while your effect runs, including objects that scripts create at runtime, so you can see what's actually happening instead of reconstructing state from log statements.
+When you create objects from a Script at runtime (`instantiatePrefab`, `createSceneObject`), they aren't visible in the Scene Hierarchy. This means you can't know what components are attached, or where things ended up spatially, so you end up doing lots of print-debugging.
+
+Lens Inspector fixes this by streaming the full live scene graph to a browser panel over WebSocket while the lens runs in editor. This captures all the objects that are invisible to the Scene Hierarchy such as: runtime-spawned prefabs, dynamically created SceneObjects, all their components (physics, scripts, audio, VFX, interactions, tracking), with transforms updating in real time.
 
 ![Live scene with node selected](media/02-selected.png)
 
@@ -8,6 +10,12 @@ A browser-based scene graph inspector for Lens Studio. It shows you the full hie
 
 You need [Node.js](https://nodejs.org/) installed (any recent version works).
 
+```bash
+npx lens-inspector
+```
+
+Or clone the repo if you want to modify things:
+
 ```bash
 git clone https://github.com/a-sumo/lens-inspector.git
 cd lens-inspector
@@ -21,7 +29,7 @@ The server starts and opens the viewer in your browser automatically. You'll see
 
 From there:
 
-1. Copy `SceneInspector.ts` into your Lens Studio project's `Assets/` folder
+1. Download `SceneInspector.ts` from the running server at [localhost:8200/SceneInspector.ts](http://localhost:8200/SceneInspector.ts) and drop it into your Lens Studio project's `Assets/` folder
 2. Attach the SceneInspector component to any SceneObject in your scene
 3. In Lens Studio, go to **Project Settings > General** and enable **Experimental APIs** (required for `ws://localhost` connections)
 4. Hit Play in Lens Studio
@@ -32,19 +40,33 @@ Once Lens Studio connects, the welcome screen disappears and your scene tree app
 
 If you want to see it working right away, open the included `LSProject/` folder in Lens Studio. It has SceneInspector and a RuntimeSpawner script already set up. Hit Play, and blocks will start appearing in both Lens Studio and the browser viewer.
 
-https://github.com/a-sumo/lens-inspector/raw/main/media/demo.mp4
+![Demo](media/demo.gif)
 
 ## Two modes
 
-**Runtime**: A component inside your effect walks the full scene graph using the SceneObject API, serializes the hierarchy into JSON, and sends it over WebSocket to the browser. This captures everything, both the objects you placed in the editor and anything created by scripts at runtime.
+**Runtime**: A Script component inside your lens walks the full scene graph using the SceneObject API, serializes the hierarchy into JSON, and sends it over WebSocket to the browser. This captures everything: both the objects you placed in the Scene Hierarchy and anything created by Scripts at runtime.
 
 ![Runtime-spawned objects appearing live](media/04-runtime.png)
 
-**Design-time**: When your effect isn't running, the viewer can fetch the static scene structure through Lens Studio's MCP server. This is useful for inspecting your hierarchy without entering preview mode.
+**Design-time**: When your lens isn't running, the viewer can fetch the static scene structure through Lens Studio's MCP server. This is useful for inspecting your Scene Hierarchy without entering preview mode.
+
+To use design-time mode:
+
+1. In Lens Studio, go to **AI Assistant > MCP > Configure Server** and set a port
+2. Click **Copy MCP Config** to get the server URL and token
+3. In the inspector viewer, paste the token into the MCP field in the top bar and click **Design-Time**
+
+If your MCP server runs on a non-default port, pass it when starting the inspector:
+
+```bash
+npx lens-inspector --mcp http://localhost:8733/mcp
+```
+
+The MCP config from Lens Studio also works with AI coding assistants like Claude. Paste it into your assistant's MCP server config to let it read and modify your scene programmatically.
 
 ## The viewer
 
-The browser shows three synchronized panels. A collapsible tree that matches the scene hierarchy, where you can search and click to select nodes. A 2D spatial canvas with switchable projection planes (TOP/FRONT/SIDE) that plots object positions with pan and zoom, so you can see how things are laid out relative to each other. And a properties panel that shows transform data, component details, text content, and colors for whatever node you've selected.
+The browser shows three synchronized panels. A collapsible tree that matches the Scene Hierarchy, where you can search and click to select nodes. A 2D spatial canvas with switchable projection planes (TOP/FRONT/SIDE) that plots object positions with pan and zoom, so you can see how things are laid out relative to each other. And an inspector panel that shows transform data, component details, text content, and colors for whatever node you've selected.
 
 ![Front view showing spatial layout](media/03-front.png)
 
@@ -59,7 +81,7 @@ node server.js          # terminal 1
 node example.js         # terminal 2
 ```
 
-The browser opens automatically. The example streams a scene with blocks, columns, and new objects spawning over time, so you can see how the tree, canvas, and properties panel respond to live changes.
+The browser opens automatically. The example streams a scene with blocks, columns, and new SceneObjects spawning over time, so you can see how the tree, canvas, and inspector panel respond to live changes.
 
 ## Configuration
 

package/index.html

@@ -219,7 +219,7 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
     <div class="step">
       <span class="step-num">2</span>
       <span class="step-text">
-        In your Lens Studio project, add <code>SceneInspector.ts</code> to Assets and attach it to any object.
+        Download <a href="/SceneInspector.ts" style="color: var(--accent);">SceneInspector.ts</a>, add it to your Lens Studio project's Assets, and attach it to any object.
         Then go to <strong>Project Settings &gt; General</strong> and enable <strong>Experimental APIs</strong>.
       </span>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lens-inspector",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Browser-based scene graph inspector for Lens Studio. See every object in your scene, live.",
   "type": "module",
   "bin": {

package/server.js

@@ -81,6 +81,14 @@ const http = createServer(async (req, res) => {
     return;
   }
 
+  // Serve SceneInspector.ts for download
+  if (req.method === "GET" && req.url === "/SceneInspector.ts") {
+    const ts = readFileSync(join(__dirname, "SceneInspector.ts"));
+    res.writeHead(200, { "Content-Type": "text/plain", "Content-Disposition": "attachment; filename=SceneInspector.ts" });
+    res.end(ts);
+    return;
+  }
+
   // Health
   if (req.method === "GET" && req.url === "/health") {
     res.writeHead(200, { "Content-Type": "application/json" });