Skip to main content

Live Code AI

Use your Gemini Key in the Live Code app

Written by Holly Conrad Smith
Updated today

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 + enter

  • Save - 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!

Did this answer your question?