The Lovable AI chatbot
We just published a new release. The most important feature in this release is the ability to create "widgets". A widget is basically a micro app, that you can host inside your AI chatbot, that does things.
Such widgets can be simple forms collecting data from the user, or complete applications with a backend and everything required to render your app.
The most important feature however isn't the ability to display such widgets, it's the ability to use "vibe coding" to create them, allowing you to "vibe code" a complex AI chatbot, with as many forms as you wish, gathering data, or presenting data to the user.
Below are a couple of examples of such widgets, coupled with the prompt that created them.
Collecting data
Such widgets can be used to collect data from users when required, such as the following example illistrates.
The prompt to create the above was the following.
Create a widget that collects names, emails, and phones. I'll need to save the data it gathers, so create a database and an API for me.
Magic then creates a database, and API, and the frontend code required to collect the data. It will even allow you to preview the widget directly inside of the Magic Dashboard such as illustrated below for a similar prompt.
The Magic Dashboard allows you to vibe code rich forms, with backend code, such as illustrated above.
Interacting with other APIs
A widget can also interact with other APIs, such as for instance Calendly, HubSpot, SalesForce, NetSuite, etc. In the screenshot below we're using the "Chuck Norris" API that returns a Chuck Norris joke when the button is clicked.
The above was created with a prompt such as the follows.
Create a Chuck Norris widget interacting with the Chuck Norris API, that once a button is clicked, displays a joke. I don't need my own API for this, use the existing Chuck Norris API from the frontend
AI "apps"
You can also create fairly sofisticated and complex apps you inject into the chatbot. In the following example we're displaying records from our chinook database, with paging and sorting on the Artist table.
The above allows for sorting and paging items from our database. The following prompt was used.
Create a widget that reads items from my chinook database and its Artist table. I'll need paging and sorting, and I'll need you to create an API for me. Get the schema for my database by connecting to the chinook database and retrieve it.
Use cases
With an AINIRO AI chatbot you can display any forms, HTML, or widget, at any point in the chat conversation. Such as for instance if the user is angry because he wants to be contacted by a human being, you can prompt engineer the system instruction to display a "Contact me" form, escalating the conversation to a human being by sending an email for instance.
You can also create complex and rich UI apps, that are connected to your database, using the AI chatbot as a "host" for your app, triggering the widget when some specific sentence is spoken for instance.
You can create HTML widgets where you've got 100% complete control over the layout, to show data in a specific way, creating a much richer chatbot experience.
If you want to play with this yourselves, you can either download the open source version of Magic, or purchase a cloudlet from us. You can find the links to both options below.
