Live code lets you design, iterate, and ship interactive spatial tools inside Giraffe with very little overhead. The pattern is simple: create a compact data model, wire up a small React component, and use the Giraffe SDK plus a few familiar libraries to instantiate geometry, 3D models, or other assets. The result is a prototype you can evolve quickly or turn into a full application.
Why live code is powerful
A lot of useful apps can be written in a few hundred lines. With the help of LLMs and the right scaffolding, 300 to 400 lines will get you a working interactive prototype. Complexity and maintenance pain usually show up around a couple thousand lines, so aim to keep prototypes compact and focused.
Live code shines for:
Fast iteration—change code and test immediately.
Data-first design—define a small, clear data model up front so the rest of the app follows.
LLM-assisted coding—prepare helper functions and clear prompts, then let the model fill in the implementation details.\
Core implementation steps
Get selected geometry with useGiraffeState or the appropriate RPC helper and ensure the feature is a closed polygon.
Read user parameters from an input form: density, min/max height, min/max scale, rotation.
Populate the polygon with points using Turf to generate random points according to the density factor.
Assign properties to each point: choose a glTF, compute a random scale between min and max, set a random height between floor and ceiling, and apply rotation.
Create raw sections for every point via the Giraffe SDK (RPC.invoke createRawSection), limiting the maximum count to prevent runaway instantiation.
Group and style the created sections on a locked "clouds" layer so they can be managed as a single visual layer later.
// Minimal pseudocode showing RPC usage const feature = await getSelectedFeature(); // async const points = turf.randomPoint(count, { bbox: bboxOf(feature) }); for (const p of points.features) { const props = { gltfUrl, scale, height, rotation }; await RPC.invoke("createRawSection", { feature: pointFeature(p, props) }); }How I prompt the LLM effectively
The single most important trick is to prepare the environment before asking the model for code. That means:
Define helper functions and import the libraries you will use (turf, three.js, useGiraffeState).
Paste example raw data structures for the LLM to use as prototypes, but trim unnecessary fields so the model focuses on the important properties.
Give a concise, numbered step list describing the algorithm and constraints (for example, "max density 25").
Ask for a drop-in replacement or to complete a specific component without changing exports or module structure.
This makes the model's job far easier and reduces prompt ambiguity. Keep prompts concrete and avoid asking the model to make up application architecture on the fly.
UI and state patterns
The interface is a small React component with a form to collect parameters and a button to trigger cloud creation. A few UX decisions that matter:
Reactive selection—use useGiraffeState to react to the selected feature and show or hide the form when nothing is selected.
Default parameters—set a sensible default cloud count (for example 10) so the app is useful immediately.
Styling—small visual touches like gradients, blue-white color palettes, and blur give the UI a dreamy cloudlike feeling and make the app friendly to non-technical users.
Debugging and iteration workflow
Iteration tends to be a write-and-overwrite flow. It is common to accept that code will be replaced several times during exploration. When a change breaks the app, use the advanced JSON editor to reset or prune problematic sections and continue.
"Code is going to become a one-way write operation where you don't really read it. You assume it works and you just delete it and overwrite it when you want to change it."
Keep these operational habits:
Lock layers for groups of instantiated assets to prevent accidental edits.
Limit the number of generated objects to a safe maximum to avoid performance problems.
Prefer small, testable commits rather than huge changes that are hard to revert.
Best practices checklist
Start with a clear data model so the LLM and future you understand the inputs and outputs.
Use existing libraries (turf, three.js) rather than reimplementing geometry functions.
Keep UI minimal for prototypes: a few inputs and a single action button will often do.
Enforce safety limits like a maximum number of created sections.
Make forms conditional so they only render when a valid selection exists.
Use the SDK for persistence—create raw sections with RPC.invoke so the generated objects are manageable within the platform.
Final notes
Live code is an excellent way to move from an idea to a tangible interactive prototype fast. Prepare your data, use a concise step-by-step prompt, and leverage the Giraffe SDK and familiar geometry libraries. Small, focused prototypes are surprisingly powerful and can be polished into full applications when the interaction model and data shape are stable.