How to Create an Interface for Your Assistant

Once you've built and customized your assistant, the next step is to create an interface that will allow users to interact with it. In this guide, we’ll walk you through setting up an interface, theming it, and ensuring it blends seamlessly with your website or application.

Step 1: Choosing the Interface Type

To get started, navigate to the Interfaces tab within Superinterface. Here, you can select between two types of interfaces:

Single Assistant: Use this option if you’re deploying just one assistant, such as an FAQ bot or customer support assistant.

Group of Assistants: Choose this if you plan to use multiple assistants for different purposes, like having separate bots for sales, customer service, and tech support.

Choose the type of interface you want to create.

For this example, we'll use Single Assistant to keep it simple.

Step 2: Configuring Chat Modality

Once you’ve selected the interface type, you can configure how users will interact with your assistant. Superinterface gives you two primary options:

Text-based chat: This allows users to type their queries and receive responses in text form.

Voice-based chat: If your assistant is voice-enabled, you can allow users to speak to it directly and receive voice responses.

Configure chat options.

For most use cases, text-based chat is sufficient, but if your audience prefers voice interactions, you can enable that feature as well.

Step 3: Customizing the Interface

You’ll now have the option to theme and style your assistant’s interface. This step is crucial for making sure the assistant aligns with your brand and the overall look and feel of your website or application.

Option A: Using AI Builder

Finding the AI builder.

If you want to streamline the customization process, you can use AI Builder to create and modify your interface with simple natural language commands.

To access AI Builder, go to Interfaces > AI Builder. Then, interact with the assistant to:

Change the interface theme (e.g., “Switch to dark mode”).

Add or remove features like buttons (e.g., “Add a thread reset button”).

Adjust layout or design elements (e.g., “Make the interface full-screen”).

Example:
You can say, “Make the interface midnight-themed,” and the assistant will automatically update the interface’s code and preview the changes in real-time.

AI Builder generates clean, production-ready React TypeScript code behind the scenes, so you can manually refine it if needed.

Learn more about the AI builder here.

Option B: Manual Customization

Configure the appearance of your assistant.

If you prefer to configure your interface manually, you can adjust:

Bubble or Full-Page Interface: Choose between a chat bubble or a full-screen chat window.

Borders and Elements: Customize the borders and non-interactive elements to align with your design aesthetic. You can opt for softer tones like gray or more vibrant colors to match your overall design.

Primary Color: Set a color that matches your website’s theme.

Light or Dark Mode: Select a theme that best fits your design.

Manual customization is ideal for users who want full control without relying on AI.

Step 4: Publishing your Interface

Once your interface is fully customized and ready to go, it’s time to publish it. Superinterface provides a few different methods to make this process as smooth as possible:

Get the script tag for your assistant.

Choose Your Publishing Method

Script Tag: The simplest method is using a script tag. Superinterface generates the code, and all you need to do is copy the script tag and paste it into the HTML of your website. This method works well for static websites and is quick to implement.

Modern Frameworks: If you’re using a modern JavaScript framework such as React or Vue, Superinterface provides options to integrate the assistant directly into your project. You'll be given a snippet that you can add to your codebase.

iFrame Embed: If you prefer using an iFrame, Superinterface allows you to embed the assistant through this method as well. It’s useful for CMS platforms where inserting code directly may be more limited.

Copy the script tag for your assistant.

With these steps, you can successfully publish your assistant on your website, ensuring a smooth and interactive experience for your visitors.