Looking for Ionic kit for you platform?
Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.
The AI Chatbot Screen is a key feature in customer support, virtual assistants, and automation-driven applications. It provides users with a conversational interface, enabling them to interact with an AI-powered chatbot for inquiries, task automation, and real-time assistance. A well-designed chatbot screen ensures a seamless experience by integrating message bubbles, quick reply options, voice input, and typing indicators, creating a natural and intuitive interaction.
This guide will walk you through the steps to design and implement an AI Chatbot Screen using the Ionic Design Kit. By leveraging its design elements and the Ionic Framework, you can create a clean, responsive, and intelligent chatbot interface that enhances user engagement and automation efficiency.
1. Install Ionic CLI with the command
Creating a project with the Ionic CLI
npm i -g @ionic/cli
2. Create a new project
To create a new project, run the following command.
ionic start ai blank --type=react
3. Get inside the project directory
cd ai
4. Create the Ai page
Create page Ai.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Ai: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Ai;
Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.
5. Select the layout structure
For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.
<IonPage>
<IonHeader>
...
</IonHeader>
<IonContent>
...
</IonContent>
</IonPage>
6. Add a top bar
The IonPage component serves as the root wrapper for the entire view. Inside it, IonHeader contains a top app bar using IonToolbar. The navigation menu button is placed inside an IonButtons component with slot='start', which aligns the button to the left. The IonButton contains an IonIcon with the slot='icon-only' attribute to display only the icon (no text), and the icon itself is passed via the icon prop (in this case, menu). IonTitle sets the centered title text of the page.
...
<IonHeader>
<IonToolbar>
<IonButtons slot='start'>
<IonButton>
<IonIcon slot='icon-only' icon={menu} />
</IonButton>
</IonButtons>
<IonTitle>
Your smart assistant
</IonTitle>
</IonToolbar>
</IonHeader>
7. Show conversation flow
The main content of the page is wrapped in IonContent, which enables scrolling and responsive behavior. Inside it, an IonList is used to group multiple IonItem components. Each IonItem is a container for individual items in the list.
A question is visually represented using the IonChip component, which highlights short text elements like tags or prompts. Responses are wrapped in IonText to apply Ionic text styling. Inside, a regular <ol> HTML element is used to render an ordered list, and <li> items represent bullet points for easy readability. The lines='none' attribute removes the default dividers between items for a cleaner layout.
<IonContent>
<IonList lines='none'>
<IonItem>
<IonChip>
What are the must-haves to take with you on a bike trip?
</IonChip>
</IonItem>
<IonItem>
<IonText>
Here's a list of must-haves for a bike trip:
<ol>
<li>Bike and repair tools (pump, spare tubes, keys).</li>
<li>Helmet for safety.</li>
<li>Map or GPS.</li>
<li>
Weather-appropriate clothing (water-repellent jacket,
sunglasses).
</li>
<li>A supply of water and snacks.</li>
<li>Flashlight for nighttime travel.</li>
<li>First aid kit (plasters, antiseptics).</li>
<li>Documents (passport, insurance).</li>
</ol>
This is a basic set for a comfortable trip.
</IonText>
</IonItem>
<IonItem>
<IonChip>
What should be in your travel first-aid kit?
</IonChip>
</IonItem>
<IonItem>
<IonText>
The following important items should be in your first aid kit for
a bike trip:
<ol>
<li>Band-aids (for cuts and abrasions).</li>
<li>Antiseptic (for treating wounds).</li>
<li>Painkiller (paracetamol or ibuprofen).</li>
<li>Antipyretic (if you are sick).</li>
<li>Anti-allergy medicine (if you have allergies).</li>
<li>Bandages and gauze (for dressings).</li>
<li>
Medication for an upset stomach (such as activated charcoal).
</li>
<li>Sunscreen (if traveling in the summer).</li>
</ol>
</IonText>
</IonItem>
</IonList>
</IonContent>
8. Add quick replies
Below the response list, a div with the class chip-box wraps two IonChip elements. These serve as quick-suggestion buttons for follow-up queries. These chips are not part of an IonItem or IonList because they are placed outside the context of the list and styled freely. This structure allows you to lay them out in a row or grid using custom CSS.
...
<IonContent>
...
<div className='chip-box'>
<IonChip>
How to choose a helmet?
</IonChip>
<IonChip>
How to choose the right clothes?
</IonChip>
</div>
</IonContent>
9. Build the input bar
At the bottom of the page, an IonItem is used again, but with lines='none' to maintain the clean appearance. Inside it, there are three main components:
On the left, an IonButton with fill='outline' (for a bordered button look), slot='start' (to align it left), and color='dark'. It contains an IonIcon with the add icon, used for adding new messages or inputs.
In the center, an IonTextarea is used for text input. It has a rows={1} prop to make it appear as a single-line input and a placeholder to guide the user. The value is initially empty.
On the right, another IonButton styled like the first, with slot='end' and an IonIcon containing the micOutline icon to represent voice input.
<IonContent>
...
<IonItem lines='none'>
<IonButton fill='outline' slot='start' className='plus' color='dark'>
<IonIcon icon={add} />
</IonButton>
<IonTextarea rows={1} value='' placeholder='Write your request...' />
<IonButton fill='outline' slot='end' className='mic'>
<IonIcon icon={micOutline} />
</IonButton>
</IonItem>
</IonContent>
Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.
Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!