Live Code AI is an upgrade app. Reach out to the Sales Team to inquire.
Live Code AI adds a coding canvas to Giraffe so you can build micro-apps in real-time.
Prompt the AI to help you build custom agents in real time.
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 AI app from the appstore.
The app icon is the initials LC. Click the app icon to open.
Navigate Live Code AI
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.
Add Gemini
Click Settings
Input your Gemini APi Key and select a model.
Click Save Settings.
All Gemini charges will be via your Gemini plan
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!





