Launching AI-AppBuilder | Create and Edit P5JS Apps With ChatGPT

Strive Editor lets you create, run and edit p5js projects with a ChatGPT-like interface.


The chat keeps the context of the previous messages and the code generated so you can iteratively improve the project.

Here, I ask “Change the colour of the cubes with the position of my mouse.”

“When I click change the cubes to spheres”

Oh, and it works on mobile as well.

You can continue my chat by following this link: Strive Editor

We created AI-AppBuilder as an educational tool to teach students about prompt engineering and to inspire more students to learn coding by lowering the barrier of entry to creating cool animations/games.

With this tool, any 9-year-old with no coding experience can create pretty sophisticated apps just using natural language.

We recently ran a coding competition with 80+ students worldwide where they were tasked to create a game/animation using nothing but prompting on AI-AppBuilder. The things these students (younger than 16) made are breathtaking.

You can see all the submissions and students’ video presentations here: Airtable - AI Challenge Gallery

We’re looking to work with educators to improve this tool and reach & inspire as many students as possible. If you’re interested in giving feedback or helping, please reach out to us at or fill out this feedback form:


Feel free to leave feedback and questions here in the comments as well, looking forward to hearing from the community :raised_hands:

I did a quick run by just clicking at an already existing prompt for making a double-pendulum, then improved it a little w/ the 4 remaining prompts:

const R1 = 100, R2 = 100, M1 = 10, M2 = 10, G = 1;
let a1 = 0, a2 = 0;
let a1_v=0, a2_v=0;
let cx, cy;

function setup() {
  createCanvas(365, 365).mousePressed(reset);

function draw() {

  const num1 = -G * (2 * M1 + M2) * sin(a1);
  const num2 = -M2 * G * sin(a1 - 2 * a2);
  const num3 = -2 * sin(a1 - a2) * M2;
  const num4 = a2_v * a2_v * R2 + a1_v * a1_v * R1 * cos(a1 - a2);
  const den = R1 * (2 * M1 + M2 - M2 * cos(2 * a1 - 2 * a2));
  let a1_a = (num1 + num2 + num3 * num4) / den;

  const num1_2 = 2 * sin(a1 - a2);
  const num2_2 = a1_v * a1_v * R1 * (M1 + M2);
  const num3_2 = G * (M1 + M2) * cos(a1);
  const num4_2 = a2_v * a2_v * R2 * M2 * cos(a1 - a2);
  const den2 = R2 * (2 * M1 + M2 - M2 * cos(2 * a1 - 2 * a2));
  let a2_a = (num1_2 * (num2_2 + num3_2 + num4_2)) / den2;

  translate(cx, cy);
  const x1 = R1 * sin(a1);
  const y1 = R1 * cos(a1);

  const x2 = x1 + R2 * sin(a2);
  const y2 = y1 + R2 * cos(a2);
  line(0, 0, x1, y1);
  ellipse(x1, y1, M1, M1);

  line(x1, y1, x2, y2);
  ellipse(x2, y2, M2, M2);

  a1_v += a1_a;
  a2_v += a2_a;

  a1 += a1_v;
  a2 += a2_v;
  a1_v *= 0.99;
  a2_v *= 0.99;

function reset() {
  a1 = PI / 2;
  a2 = PI / 2;
  a1_v = 0;
  a2_v = 0;
  cx = width / 2;
  cy = 200;
1 Like

Awesome stuff :clap: any ideas on things we could do to improve it?

I didn’t check for it but I guess libraries aren’t allowed for the sketches?

Another important issue is that I had to spend all my remaining prompts attempting to “refine” the code.

For example, I wanted the AI chat to find all variables which were eligible to be declared using const.

But the bot has failed to recognize variables a1_a & a2_a could use const.

Then I decided to use the “Edit Code” feature and fix that myself.

However, for the PoV of the AI, the current code was still the 1 provided by the bot, w/o my manual fix!

It’d be very nice to allow manual editing of the generated code, so we could save our prompts.


Great Tool! One can now let the computer debug its own code and iterate before giving an output with a silly mistake.