Introducing VanJS App Builder: An AI-Powered Chatbot that Helps You Create Web Apps with VanJS

[Tao-VanJS]

Hi fellow VanJSers,

I created the VanJS project with the aim of reducing the entry barrier of UI programming. Now, with the recent exciting advancement generative AI technology, the entry barrier can be even lower. This is why I am introducing VanJS App Builder: an AI-powered chatbot that helps you bootstrap web apps with VanJS.

VanJS App Builder is a custom GPT chatbot that was instructed to learn how to build VanJS apps by browsing the https://vanjs.org/ website. The comprehensive tutorial and sample apps provide very valuable information for the GPT chatbot to write idiomatic VanJS code based on the description of the request. In addition, we instructed VanJS to talk to https://api.vanjs.org/ to generate a preview link of the app if the user wants to. Please note that we don't collect or store any information with https://api.vanjs.org/ and all preview links are set to expire after 24 hours. See https://api.vanjs.org/privacy for details.

Try it out here: https://chat.openai.com/g/g-7tcSHUu27-vanjs-app-builder

Like any exciting emerging technologies, the technology of generative AI takes time to mature and we acknowledge that the apps built with the GPT chatbot aren't always bug-free. Oftentimes, corrections or adjustments can be made by following up with the conversation. That said, I believe it's already a good start and the rapid development of the AI technology will only make the user experience better and better in the future.

❤️ Hope you can enjoy!

[SedWilliams]

Amazing! Perfect for those who don't want to go through the trouble of learning something like React just to build something simple.

[k-paxian]

Well, if we are talking about lowering barriers - adding another $20 bill to my monthly expenses doesn't sound exciting 😞

[Tao-VanJS]

Hmmm..., unfortunately it seems that ChatGPT Plus is a requirement imposed by OpenAI for using custom GPT instances. I'm hoping the requirement can be lifted some day.

[mikrobe]

Hi,
first of all many thanks for VanJS, it's a great framework!
Would it be possible for you to share the custom prompt so people without ChatGPT plus can use it with the free plan? I understand there are limitations (no function calls) but it would help anyway.

[Tao-VanJS]

Hi @mikrobe,

Here is the prompt used in VanJS App Builder:

As the VanJS App Builder, you are dedicated to assisting users in creating web-based applications using the VanJS library.

IMPORTANT: Please do ensure to learn how to use VanJS by browsing the web (DO NOT SKIP THIS STEP!). Use search keywords "VanJS tutorial" (need the exact words, don't add new words) for the tutorial, and use search keywords "VanJS Learning by Example" (need the exact words, don't add new words) for sample apps.

The library can be imported via <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.7.nomodule.min.js"></script>. The app user asks you to build might not appear in the sample apps of VanJS. If this is the case, you are expected to create the app on the fly based on what you have learned from the tutorial and other sample apps. When you build the app, make sure to make State objects reactive to input elements (usually this can be done with oninput event handlers).

When showing the app to the user, please do ensure to provide the full HTML code for the application, making sure it's executable in the browser. After presenting the app code, always ask if the user wants to preview the app. If affirmative, use the api.vanjs.org action to generate a preview link by uploading the JavaScript and CSS code of the app, with an optional inclusion of CSS for styling. Remember to inform the user that the preview link will expire after 24 hours and be ready to provide further assistance or examples in VanJS.

The prompt works pretty well with ChatGPT 4, but I'm not sure if the quality would degenerate if using ChatGPT 3.5.