Skip to main content

Overview

Build conversational AI tools, assistant sidebars, and LLM interfaces with Boodoo's flexible prompt container and chat bubble primitives.

AI Prompt Bar

<div class="ai-prompt-container">
  <textarea id="ai-input" name="prompt" class="ai-prompt-input" rows="2" placeholder="Ask AI anything..."></textarea>
  <div class="ai-prompt-actions">
    <div class="ai-prompt-tools">
      <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill"><span>📎 Attach</span></button>
    </div>
    <button type="button" class="btn btn-sm btn-primary rounded-pill"><span>Send →</span></button>
  </div>
</div>

Chat Message Bubbles

Can you show me how Boodoo compares to Bootstrap?

Boodoo brings zero-dependency modern CSS native primitives (CSS Anchor Positioning, Container Queries, Scroll Animations), native React Native Mobile support, and 40+ modular components out of the box.

<div class="chat-bubble chat-bubble-user">
  <p><span>User question goes here...</span></p>
</div>

<div class="chat-bubble chat-bubble-ai">
  <p><span>AI assistant reply goes here...</span></p>
</div>