Creating custom web components for your mobile app has never been easier. By combining the power of Cursor AI, Bravo Studio, and Xano, you can build dynamic and feature-rich components that enhance your app's functionality. In this guide, we’ll walk you through:
Let’s dive in!
Cursor AI is an excellent tool for developing custom web components with minimal coding effort, in fact you don't need to know anything about code at all! Here’s how to create your web component:
The web component will be composed of three different files: HTML, CSS, and JavaScript. For the web component to work with Bravo Studio, these three files must be compiled into one single code therefore you must ask Cursor AI in your prompt to do so. If you realize you have forgotten this in your prompt, don't worry. You can ask again to compile it into one full piece of code.
(If you missed our first blog post about creating web components, you can read it now before continuing or watch the video tutorial here.
Once you have your web component code generated, you can test it in Bravo Studio and visualise it in our web component previewer.
Important: Although most AI platforms are great at coding, they are often not providing exactly what we are looking for so expect to have to ask Cursor AI to make changes after you have tested the web component in Bravo Studio web component previewer.
Important note: When asking for changes to your web component, make sure to remind Cursor to return an updated full code version. Otherwise, it might just return the pieces of code that you have asked to change. If you have code experience then you should be able to know where to update the code inside Bravo Studio code editor.
Bravo Studio enables you to build no-code mobile apps with ease. To integrate your custom web component:
Note: If you update the code of your web component inside Bravo Studio code editor, always click save and copy the link again to update the URL of your webview Tag in your Figma design.
Xano offers a powerful backend-as-a-service solution that integrates seamlessly with your web component.
Once our web component looks and feels exactly how we want it, we can now connect it to our backend of choice (in this case we have used Xano). Our web component example is a subscription tracker which stores subscriptions we sign up to. We have added a few advanced actions that require setting up two API end points. To connect your component to Xano:
Id AND Created at columns you will find them automatically added. In our case we have added exactly what we need. You can always ask Cursor AI what you need to add in your database too if you are not sure. It's important that they match exactly what we have in our code. In our case we have added:
(Make sure to go to each column settings and specify the type of record)
First, you will need to create an API group. This isn't strictly necessary but keeps your project clean and organized.
In your new API Group, you can add the necessary end points:
In our case we needed to create two end points:
Once you have created both end points, we can ask Cursor AI to update our code with the end points we have created. You can do this by asking Cursor to simply update the code with both end points. Inside each API end point you can click to copy the end points:
Below example how we asked Cursor to update our code with our GET request:
Test the API Integration:
Watch the tutorial here.
By combining Cursor AI, Bravo Studio, and Xano, you can create, integrate, and connect custom web components seamlessly. This workflow empowers you to build robust mobile apps with dynamic features and backend support.
Start building your next innovative app today and unlock the potential of no-code and custom development!
.svg){kind=logo}
