@aylablumberg.ai · Prompt drop 001

Give your AI a 3D brain

A glowing hub-and-spoke map of every knowledge source your assistant is plugged into. One HTML file, no build step, runs in the browser.

Original prompt by @kevinfremon. Cleaned up and shared with credit.

Build a 3D "neural pathway" visualization for my AI assistant: a glowing hub-and-spoke graph showing its connected knowledge sources.

Use Three.js (version 0.174) as the 3D library, loaded via CDN import map, with these addons: OrbitControls, EffectComposer, RenderPass, UnrealBloomPass, and CSS2DRenderer. Single HTML file, no build step.

Data comes from one JSON endpoint returning {nodes, edges} where each node has {id, type, label, color, freshness, detail} and type is one of hub (1, at origin), category (first ring), or leaf (outer). Hub is locked center; categories orbit the hub; leaves cluster around their category with spherical jitter and gentle sin-wave drift.

Render every node as a shader-driven core sphere that breathes based on freshness, wrapped in a translucent halo. Connect them with thin lines and flowing edge particles colored by category. Add a starfield, a soft nebula backdrop, and ambient drifting particles for atmospheric depth. Run everything through UnrealBloomPass for the glow.

Use CSS2DRenderer for HTML labels on hub and categories, OrbitControls with auto-rotate, and a Raycaster for hover tooltips showing the node's label and detail. Pitch-black background, thin sans-serif labels, teal hub with distinct category colors.

Start with a mocked JSON payload so I can see it running before wiring real data.

How to run it

1. Paste it into ClaudeAny model works. Claude will hand you back a single HTML file.
2. Save the file and open itName it anything.html, double click, and it runs in your browser. No install, no terminal.
3. Swap in your own sourcesFind the mocked JSON near the top and replace the node labels with your real apps, docs, and databases. Ask Claude to point to a live endpoint when you are ready.