How to Use AI Builder to Customize Interfaces
The AI Builder allows you to build and customize interfaces for your AI-powered assistants by simply chatting with it. Whether you're a developer or non-technical user, AI Builder makes the process simple, intuitive, and flexible.
In this guide, we’ll walk you through the steps to create, modify, preview, and deploy a custom interface using AI Builder.
Step 1: Access AI Builder
Navigate to AI Builder in the Superinterface Dashboard.
To get started, navigate to the Interfaces tab in Superinterface, then select AI Builder.
AI Builder is currently in beta, so keep an eye out for updates as we improve the feature.
Ensure you’ve already created and published an assistant before starting with AI Builder.
Step 2: Build an Interface by Chatting
Example: Add a thread reset button using AI Builder.
Once inside AI Builder, you can interact with the assistant on the left to design and customize your interface on the right. Simply describe your desired changes or features in plain language.
Example Use Cases:
Changing the Theme: Ask the assistant to switch your interface to a midnight-themed dark mode.
Adding Features: For instance, say, “Add a thread reset button to the chat,” and the assistant will update the interface accordingly.
Fixing Errors: If the assistant encounters code errors while updating the interface, it will automatically detect and correct them.
Watch a detailed demo for how to use the AI Builder.
The assistant edits code in the background while linting and building it in real time. You’ll see these changes reflected immediately in the preview window. You can manually adjust the automatically generated React TypeScript code directly in the editor if you want to refine or extend it further.
Reset the template
If you’re unhappy with your design, use the Reset Template option in the top-right corner to revert to the original layout. This gives you a clean slate without losing your progress.
Step 3: Deploy Your Interface
Once you’re satisfied with the interface created in AI Builder, click the Publish button in the top-right corner to make it live. The Publish button ensures your latest design is either instantly live or ready to integrate, depending on your setup.
Depending on your setup, this will result in one of two outcomes:
If your assistant is already published on your domain/system:
If you’re using a script tag or iframe, the interface code will automatically update, and your users will see the new version immediately.
For React integrations, retrieve the updated React code by navigating to the Publish tab in the top navbar and selecting React. Copy the code into your project to apply the changes.
If your assistant + interface is not yet published: You’ll be prompted to choose a publishing method. Refer to the Publish Interface for details on selecting between options like subdomain, custom domain, or embedding via script tag.
At any point, you can return to AI Builder to make edits or updates. If you need to revert, use the Unpublish option to switch back to Superinterface’s default interface layout.
Unpublishing your AI builder generated code.
With AI Builder, creating and customizing interfaces for your AI agents has never been easier. Experiment, refine, and publish your interfaces—all with just a conversation.