For Those Using ChatGPT to Generate Wappler Extensions…

Title: Seeking Advice on Creating Node.js Custom Extensions in Wappler with ChatGPT – Specifically for HJSON Files and Dynamic Picker Properties

Hello Wappler Community,

I'm currently experimenting with ChatGPT to assist in creating custom extensions for Node.js in Wappler. While ChatGPT has been helpful in many ways, I'm encountering a recurring challenge: when generating an .hjson file, I haven't been able to configure it correctly so that the dynamic picker fields appear in the properties panel as expected.

If any of you are using ChatGPT to streamline the process of writing HJSON files, especially to make dynamic pickers functional, I would greatly appreciate any specific prompt examples or strategies you've found effective.

I’d like to understand:

  • Are there particular prompts or instructions you give to ChatGPT to ensure the .hjson file is configured with all necessary fields for dynamic picker compatibility?
  • Have you found certain prompt structures more successful in specifying the output and data attributes for visibility in Wappler's properties panel?

Thank you in advance for any tips, sample prompts, or examples. Your insights would be invaluable for those of us navigating this process with ChatGPT!

Looking forward to hearing from you.

I have not found that ChatGPT is any use with HJSON however the HJSON is not difficult, just a bit repetitive.
I keep tweaking George's docs and of course have YouTube tutorials.

HOWEVER with regard to the coding side (.js , .php etc) ChatGPT is really good.

I use it to both generate code and and extra functionality to sample code offered by providers such as API providers

Specific questions, just post the question

ChatGPT is terrible for code in my opinion (the basics, well thats the basics and hard to mess it up, no issue, but anything complex Claude all the way). Claude seems to at least be consistent with its output. ChatGPT decides on its own if it wants to truncate half your code that works and replace it with code that doesn't (had script go from 400+ lines to under 200 using it, and man it really does butcher some code), at least Claude leaves your code as it was intended... ChatGPT just keeps apologising and acknowledging it made a mistake and then five minutes later does the same thing again... Also Claude allows for Projects! ChatGPT can lick my hairy....

1 Like

For data pickers you need two controls

In the "header" part of the hjson you need

dataPickObject: true,

something like this

 module : 'onesignal_create_push_notification',
 action : 'onesignal_create_push_notification',
 groupTitle : 'Notification Modules',
 groupIcon : 'fas fa-solid fa-satellite-dish comp_general',
 title : 'Onesignal Web Push',
 icon : 'fas fa-solid fa-bullhorn comp_general',
serverModel : ['node'],
dataPickObject: true,

In the "name" definitions you need to have

serverDataBindings: true,

for each element using the picker like this

{name: 'target_channel', 
optionName: 'target_channel', 
title: 'Target Channel', 
type: 'text', 
required: false, 
serverDataBindings: true,
defaultValue: 'push'
},
1 Like

Hi, thank you for your reply.
This is an example of a hjson generated with chatgpt

{
  type: 'module',
  module: 'resizeVideo',
  action: 'resizeVideo',
  groupTitle: 'Video Actions',
  groupIcon: 'fas fa-lg fa-video',
  title: 'Resize Video',
  icon: 'fas fa-lg fa-video',
  version: '1.0.0',
  dataScheme: [
    { name: 'progress', type: 'number' },
    { name: 'outputPath', type: 'string' },
    { name: 'status', type: 'string' },
    { name: 'message', type: 'string' }
  ],
  dataPickObject: true,
  properties: [
    {
      group: 'Resize Video Properties',
      variables: [
        { name: 'inputPath', optionName: 'inputPath', title: 'Percorso Video Input', type: 'text', dynamic: true, required: true, defaultValue: '' },
        { name: 'outputPath', optionName: 'outputPath', title: 'Percorso Video Output', type: 'text', dynamic: true, required: true, defaultValue: '' },
        { name: 'id', optionName: 'id', title: 'Record ID', type: 'text', dynamic: true, defaultValue: '' },
        { name: 'output', optionName: 'output', title: 'Output', type: 'boolean', defaultValue: false }
      ]
    }
  ]
}

But, but... people expect this from AI tools:

3 Likes

If you have ChatGPT Plus subscription, you can create a custom gpt, feed it all the extensions docs and it should know how to create one :slight_smile:

Then you can publish this custom gpt for others to use

2 Likes

I want to see PatGPT in production! @patrick

:smiley:

6 Likes

Never seen that switch documented, could you indicate what it does @George ?

definitely what I was trying to do ... :sweat_smile:

I used chatGPT 4o with internet access, I feed him with the pages concerning the creating docs...

but still need some works to get results.

For sure @Hyperbytes will be super help for me !

try changing

dynamic:true

to

serverDataBindings: true,

it worked !! thank you !!

1 Like

Onlyfans, not Airbnb. This guy is a beginner!!

3 Likes

Which documents to you feed chatgpt to train it for extensions? You could literally create a wapplerGPT, and then we could download it and be ready to rock. I am currently a huge chatGPT fan. But am still kind of new at it.

I just told ChatGPT to read the community pages concerning custom extension for server connect.
Some help from @Hyperbytes (which I need more for sure)...

and a lot of trying and re-trying

To be more detailed: hjson still have some problems because it doesn't pass values to the component. But I will focus later. Now trying to do an extension that given a MP4 video, resize it at 200px width (to make like thumbnail for video). And after some hours playing ... it works.

You have to supply example JSON and HJSON files of existing, well-made extensions, directly in the prompt, not as a file attachment. Rule of thumb anything made by @ JonL works

1 Like

No I just based on community page. I will do it now and let you know

EDIT: @Apple It worked !!

I combined all of the Wappler docs about custom extensions into a word doc. I copy and paste it when discussing with chat. o1-preview is the best at coding in my opinion. There's still some back and forth required, but it greatly speeds up my development.

Writing Custom App Connect Components.zip (57.2 KB)

3 Likes

Nice @kfawcett thanks for sharing that

1 Like

Great for sharing @kfawcett !!
Yes 4o mini is superb for coding!!