Website template
AI Chat
An AI chat application UI from TailGrids built in React and Tailwind CSS. Provides a conversation interface with message threads and a composer.
AI · Free
Pages
Screenshots of the live demo, page by page. Scroll inside a page to see all of it.
Design breakdown
An AI reading of this template's design: colors, type, spacing, sections and signature details. Ottermind starts from it when you use the template.
- Overall
web app, clean and minimal, low density, light
- Palette
background #f3f4f6; surfaces [#d1d5dc]; text #374151; muted text #6b7280; primary #3b82f6; accents []
- Type
headings DM Sans, 400, sentence-case; body DM Sans, 14px; scale h1 30px / h2 16px / h3 14px
- Shape & spacing
button radius 12px, card radius 24px, no borders, shadow rgba(17, 24, 39, 0.04) 0px 20px 32px 0px, section spacing 24px, content width 800px
- Sections (top to bottom)
- Header — horizontal layout, logo on left, menu toggle on right, white background
- Sidebar — vertical navigation, two-column layout with icons and labels, light gray background, projects grouped under "Projects" with folder icons and numbers, conversation history under "TODAY" and "YESTERDAY", user profile at bottom with avatar and upgrade button
- Main chat area — centered content, large greeting headline in blue, subtext in muted gray, input field with placeholder, tools icon, model selector dropdown, four action buttons below with icons and labels, all on white background with subtle shadow
- Signature details
- Rounded cards with 24px radius
- Floating action buttons with soft shadows
- Minimalist sidebar with project folders and timestamps
- Input field with integrated tool and model selector
- Blue accent color for primary text and interactive elements
- Clean spacing with consistent 24px gutters
- Other pages
- /chat: main chat interface with message threads and composer
Template details
- Category
- AI
- Author
- tailgrids
- Listed on
- 21st.dev
- Price
- Free
- Chat
- AI
Original design by tailgrids, listed on 21st.dev. Ottermind does not copy the template's code; it builds a new site from the brief.
The brief Ottermind starts from
It opens in Studio as a draft — add your brand, audience and pages before you send.
Build a ai website inspired by the "AI Chat" template. Reference brief: An AI chat application UI from TailGrids built in React and Tailwind CSS. Provides a conversation interface with message threads and a composer. Style and features to reflect: Chat. Use original copy and imagery for my brand rather than the reference's placeholder content.
How to use this template
- 1
Click “Use this template” to open it in Ottermind Studio with its brief filled in.
- 2
Add your brand, audience, pages and content to the brief.
- 3
Ottermind builds a new site inspired by this design — keep editing it in the chat.
