AI Assistant Chat Screen

AI assistant chat screen for mobile apps with suggestion cards, a streaming chatbot answer typed in word by word, copy and regenerate actions and voice input.

Also known as: ai chatbot ui, chatgpt style chat interface, ai assistant app template, chatbot screen mobile, llm chat ui html

Bootstrap 6 Mobile Chat & Messaging Responsive #ai #app #chat #chatbot #mobile #responsive

AI Assistant Chat Screen live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

An AI assistant chat screen built with Bootstrap 6: an HTML mobile template with a greeting and suggestion cards on the empty state, answers that stream in word by word, copy and regenerate buttons, a stop button and a voice input button. Use this AI chatbot UI for support assistants, writing helpers and in-app copilots, as a PWA or packaged with Capacitor.

How it works

The root .aac-app is a 430 px app column with a sticky top bar (.aac-bar) and a sticky composer (.aac-compose).

Empty state: .aac-empty shows a gradient orb, a greeting that changes with the time of day (.aac-daypart) and four .aac-card suggestions. Tapping a card sends its prompt from the ANSWERS object.
Conversation: messages go into .aac-log (role="log"). The user bubble is .aac-msg-user; the assistant reply (.aac-msg-bot) first shows thinking dots, then streamAnswer() types paragraphs and list items in word by word with a blinking caret.
While streaming, the send button turns into a stop button (.is-stop); after it ends, .aac-actions shows Copy (Clipboard API with a textarea fallback and a Bootstrap 6 Toast) and Regenerate.
Composer: the textarea grows with its content, Enter sends and Shift+Enter adds a new line. The send button stays disabled while the field is empty.
Voice: .aac-mic toggles a listening state with an animated wave and then fills in a sample transcript. Escape cancels it.
Model menu: the title is a Bootstrap 6 Menu (data-bs-toggle="menu") for the response style; the choice updates .aac-model-mode.

Customization

--aac-grad and --aac-violet on .aac-app: the gradient for the send button, assistant avatar and voice wave, and the accent color.
ANSWERS in script.js: the prompt and answer blocks for each data-key suggestion card; add cards with new keys.
answerFor(): replace it with a streaming fetch() to your AI endpoint and pass the chunks to streamAnswer().
The 30 ms delay in step(): the typing speed of streamed answers.
stopListening() and the mic handler: swap the demo transcript for the Web Speech API or a native speech plugin.
.aac-tone-1 to .aac-tone-4: the icon tile colors of the suggestion cards.

Use cases

Customer support apps: an assistant that answers order and account questions.
Productivity and writing apps: drafting emails, summaries and plans.
Learning apps: a tutor that explains concepts step by step.

Accessibility

The conversation is a role="log" region with aria-live="polite" and aria-busy while an answer streams, so screen readers read finished answers instead of every word. The composer has a visually hidden label, icon buttons have aria-labels, the mic button uses aria-pressed, and the listening text has role="status". With prefers-reduced-motion the answer appears at once and the caret, dots and wave stop animating.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). The response style picker uses the new Menu (.menu, .menu-item, .menu-item-description) instead of dropdown-menu, toasts are shown with Toast.getOrCreateInstance, and icon buttons use btn-icon.

AI Assistant Chat Screen at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons, fonts.googleapis.com
Layout: Mobile-first app screen, centred on wider screens
Category: Mobile Chat & Messaging
License: Free for personal and commercial use

Questions about this template

Can I use the AI Assistant Chat Screen code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.