AI Chat Interfaces

Axiom01 provides a comprehensive suite of structural layouts designed specifically for AI integrations, chatbots, and generative UI. By leveraging the `.card.chat` variant alongside standard ordered lists, you can build accessible and beautiful chat experiences without any custom CSS.

Live Examples

Assistant

Always ready to help

  1. Welcome! I'm here to help with any questions you have. What can I do for you today?

  2. How do I use the Axiom01 framework?

  3. Axiom01 is a comprehensive semantic web framework. You can:

    • Explore the 74 pre-built components
    • Customize using CSS variables
    • Use semantic HTML5 throughout
    • Access full accessibility support

  4. That's helpful! Can you show me an example?

AI Features Showcase

Natural Language Processing

Understands context and maintains conversation history for better responses.

Real-Time Response

Instant message delivery with typing indicators for natural interaction.

Secure Messaging

End-to-end encryption and secure communication protocols.

Configurable AI

Customize AI personality, response style, and behavior settings.

HTML Structure

<article class="card chat">
  <header>...</header>
  
  <div class="history">
    <ol class="chat">
      <li data-author="ai">
        <div class="avatar small">🤖</div>
		<div class="avatar small">🤖</div>
          <p>AI message content</p>
        </div>
      </li>
      
      <li data-author="user">
        <div class="avatar small">👤</div>
        <div>
          <p>User message content</p>
        </div>
      </li>
    </ol>
  </div>

  <footer>...</footer>
</article>

Features

  • Real-Time Messaging - Instant message delivery and updates
  • Typing Indicators - Shows when AI is composing response
  • Conversation History - Full message history with context
  • AI Avatars - Distinct visual identity for AI vs user
  • Multi-line Input - Support for longer messages
  • Rich Formatting - Support for formatted responses

Modifiers

  • `.chat` - Applied to `.card` to transform it into a chat interface layout.

Use Cases

  • Customer Support - AI-powered help desk and FAQ
  • Virtual Assistant - Personal AI helper for tasks
  • Chatbot - Conversational user interaction
  • Learning Assistant - Educational AI tutoring
  • Code Helper - Programming assistance and debugging
  • Creative Writing - Writing prompts and suggestions

Accessibility

  • Use semantic HTML for message structure
  • Include aria-label on input and send button
  • Announce typing indicators to screen readers
  • Support keyboard navigation (Tab, Enter to send)
  • Use role="region" for message area
  • Provide clear distinction between user and AI messages

Responsive Behavior

This component automatically adapts to different screen sizes:

Mobile (< 768px)

On mobile devices:

  • Optimized for small screens
  • Touch-friendly spacing maintained (44px minimum)
  • Text wraps naturally without overflow
  • Content density optimized for readability

Desktop (1024px+)

On desktop displays:
  • Enhanced visual features
  • Hover states and transitions
  • Full keyboard navigation support
  • Optimal spacing and sizing

Framework Integration

Responsive behavior is automatic:

  • Framework handles media queries
  • No custom CSS required
  • Mobile-first approach applied
  • Accessibility maintained at all sizes

Best Practices

  • Clear Identity - Always show AI vs user distinction
  • Typing Feedback - Use typing indicators for better UX
  • Error Handling - Show errors gracefully
  • Message Limits - Validate input length
  • Scrolling - Auto-scroll to latest message
  • Accessibility - Full keyboard and screen reader support