My VSCode Copilot Bubble Plugin Instructions

Plugin builders
1

Context

I am on a roll to update some of my plugins for better functionality and fixes. I have a handful to go through and as always, I’m working on a tight leash. AI speeds things up.

Disclaimer: All of my plugins are free but be warned, I only make updates and fixes to my plugins as and when I need to.

Sharing my AI Instructions for Bubble Plugin

AI is my junior dev who slaves away writing all the code while I look over its shoulder checking every line. I went through the Bubble docs, the plugin editor docs and whatever pieces of ChatGPT memory regarding building Bubble Plugins and came up with an instruction doc for my VSCode Copilot.

I just wanted to share it with the community.
Updated version 25-07-22: https://drive.google.com/file/d/1s9B5QsTMDO4nZgTWiLdTSbmT9ZQjjKtv/view?usp=drive_link

Test

I got Claude Sonnet 4 in VSCode Agent mode, to build a plugin from scratch and came away extremely impressed.

The plugin’s purpose is to integrate the DocXTemplater library for one of the modules in my apps. In brief - the library will take a .docx file URL with placeholders and then generate a new .docx with the values filled in.

One prompt and it got me all the plugin function code and setup instructions (even though I never asked for instructions). Amazingly it did it almost perfectly! There were 2 major problems:

  1. I did not tell it to read through the library’s docs. It double curly encased the placeholders when the library required single curly encasements.
  2. It forgot to store helper functions in Initialize(). Though it did correctly store the helper in instance.data. I updated the instructions to correct the behaviour.

Other than a failure to store the new doc into the plugin’s state (which is more because of my lack of understanding Bubble’s handling of ‘file’ types in plugins), plugin worked great!

There are still some things I want to add but I’m just happy with it dishing out working functions with just 1 prompt.

It requires copy and pasting function code for now. I’m planning to feed it instructions on the Git project structure that Bubble Plugins create when you link to Github.

The instructions do not cover everything as my plugin building experience is very focused on what I need to do at any point of time.

Feel free to give me feedback or share yours!

12 Likes
2

Nice, thanks for sharing!

3

Amazing, thanks for sharing this!

4

Awesome, is there a chance you can make a YouTube video showing everything step by step?

5

I updated the doc:

  1. Corrected the difference between a plugin element’s actions and plugin’s actions. Includes reorganizing sections to better reflect reading sequence.
  2. Added a sample server-side action code. I used code from @keith List Popper & Friends (SSA). Nicely commented by the legend himself.
  3. Added some relevant limitations from the Bubble docs.
2 Likes
6

There are a few ways to use the instructions:

  1. Attach the file to your preferred AI chat.
  2. If using VS Code: Add it as a Copilot instructions file.

Just take note of your token context when using the file. It’s around 8k - 9k tokens. Okay for most paid models. Alternatively you can just copy paste parts of the doc that are relevant to your question.

I haven’t made videos for my YouTube channel in a decade and don’t see myself restarting anytime soon :sweat_smile:

2 Likes
7

I’ve updated the instructions.

Version 0.65: https://drive.google.com/file/d/10MyMNICbOiqtOL3yLC2TPp1AxWK8XyQf/view?usp=drive_link

I recently found an issue with nesting any bubble object (any list fields that expects an app type) method calls in a try-catch block. Specifically .get() and .length(). It disrupts the methods’ own error and retry mechanisms.

The update includes this warning.

UPDATE: I revised the warning to cover broader scenarios since it’s not just try-catch blocks. You must ensure that they are called in sync, inside clean scopes.

2 Likes