Live Code adds a coding canvas to Giraffe so you can build micro-apps in real-time.
Think of them agents that can see you Giraffe model in real time, and can write back to it.
It's React and JavaScript, the stuff of the internet, so it does calculations, graphics and analysis beautifully. (with THREE, Recharts, Turf and Giraffe SDK already installed and available).
Add App
To get started, add the Live Code app from the appstore.
The app icon is the initials LC. Click the app icon to open.
Navigate Live Code
The first time you open the Live Code app, it displays a pre-coded set of instructions, as a sample project.
Click "Show Code" to edit.
An editable code block appears.
Here, you have a React component to edit. The Turf.js, Recharts.js, Three.js, and Giraffe SDK are already loaded.
Controls:
Code block - You can type directly into the code block, or paste code from an LLM. Start creating!
Do NOT paste code you do not understand or trust here. It has access to your project data!
Run - Click to run the current version of the code immediately. Or, use
ctrl+enterSave - Once you make edits to the Live Code app in your project, click Save to commit your changes. This means you can return to your project and re-use your custom app over and over!
Hide Code - Click to hide he code editor and just display the app UI.
Publish Live Code
When you publish a project with the Live Code app in it, a display only version of the app is included. This lets you publish custom interfaces for our Giraffe projects with ease!