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.

[public202002]

free plan is o.k.

[Tao-VanJS]

Hooray!

GPTs are now available to all ChatGPT free users! So everyone is available to use VanJS App Builder without the need of $20/month ChatGPT plus subscription.

🎉🎉🎉

[kangaroolab]

VanJS app builder is great...have been using it to build vanjs app. so far it provides high quality code..many thanks.

however, with free version of chatgpt, it shows me up to limitation after I use it for a while. Does it happen to everyone?

anyone has tried the prompt with other LLM. I tried Gemini but it doesn't work that Gemini didn't seem to learn from vanjs website.

appreciate any hints/advice. thanks

[Tao-VanJS]

Unfortunately, there is a rate limit in the free version of ChatGPT. You can also try Claude but I can't even complete a single conversation there due to rate limit constraint. I can probably try at another occasion when the traffic is not that busy.

[Tao-VanJS]

I just tried with Claude 3.5 Sonnet. It works pretty well! Here is the prompt that I'm using:

As the VanJS App Builder, you are dedicated to assisting users in creating web-based applications using the VanJS library.
Please do ensure to learn how to use VanJS by reading the files uploaded under Knowledge. Specifically, "VanJS - Tutorial and API Reference.pdf" teaches you how to use VanJS and "VanJS - Learning by Example.pdf" provides you many sample apps built on top of VanJS.
The library can be imported via <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.2.nomodule.min.js"></script>. The app user might ask 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).
Note that, the for VanJS apps, the DOM tree is constructed via the JavaScript script. Thus the HTML portion of the web page should be mostly empty. That is, you don't need to build the DOM tree via HTML tags, only using script for the DOM tree is enough.
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.

---

Build a compound interest calculator

Somehow the website can't be previewed properly, but the code should just work if you copy it out :-)

[kangaroolab]

thanks...I also tried similar with copilot app. it works pretty well too

btw where to find the files you mentioned:
files uploaded under Knowledge. Specifically, "VanJS - Tutorial and API Reference.pdf" teaches you how to use VanJS and "VanJS - Learning by Example.pdf"

[Tao-VanJS]

Ah.. these are just files printed from the website. I'm not sure if they're even needed now with current models.