What is Flowrabbit AI?
Flowrabbit AI is an integrated AI Assistant that can help you create applications in Flowrabbit even more easily! Please note that Flowrabbit AI is not a help chatbot, meaning it cannot answer questions about how to use Flowrabbit, where to find certain settings, and so on. We are already working on adding a help chatbot, but for now, please consult this wiki for any questions on how to use Flowrabbit. (and of course, contact us if you have any open questions: add email)
How can I use Flowrabbit AI?
Click on the Robot-Icon in the top bar. This will open the Flowrabbit AI dialog.
Setting up Flowrabbit AI
If it's your first time using Flowrabbit AI, you have to enter your OpenAI API key.
- Click on the "Settings" Tab in the Flowrabbit AI Dialog.
- Copy your OpenAI API Key into the text field. You can find your OpenAI API Key in your OpenAI User Settings. Your OpenAI API will never be stored on any Flowrabbit servers; it is stored only in your browser.
- Now select the GPT Model you want to use. GPT-4 Boost is faster. GPT-4 Turbo is a little slower but can generate more creative results. We suggest starting with GPT-4 Boost to get to know Flowrabbit AI quickly.
- Click "Save" after entering your Key and choosing your preferred model.
Using Flowrabbit AI
Once you've set up Flowrabbit AI, you can get straight to using Flowrabbit AI:
- Enter your prompt. When describing your design, it can be helpful to try to think of all the different elements that should be part of your design. For example, it is better to describe your Login form like this: "Create a login form with an email, password input field, and a login button" instead of describing it like this "Create a complete login form".
- Click "Run AI".
- After waiting for your design to be completed, you can adjust the result using the options in the "Preview" Tab:
Create as wireframe
This changes all the styles of the components in the generated design to follow the standard component styles, making it look most similar to the premade un-customized components from the component library.
Use Prototype Styles
This removes styling (e.g., colors) from the components in the generated design and converts it to a simply prototypical design.
Minimize Elements
This removes any elements in the design that are not strictly necessary for the functionality you described in your prompt. In many cases, this means removing borders and other structural elements. This option can be helpful if you just want to use Flowrabbit AI to generate the rough structure for your design and add any visual elements yourself.
When you have finished selecting the options that work best for your design, click on "Import" to add your design to your application. Upon clicking import, the dialog will close; click on your canvas to place the screen with your generated design.