Snippet
AI Chat Sidebar
Right-docked copilot panel with suggestion chips, message flow, and a composer.
Last updated: October 2026
What this snippet does: A right-docked AI copilot panel. Collapsible, with suggestion chips, chat messages, and an input composer. Works alongside your main content — no modal takeover. Pure HTML, CSS, vanilla JS.
🎬 Live Demo
Click a suggestion chip or type a message.
📝
How It Works
The sidebar is absolutely positioned to the right of a relative container. It slides in/out via transform: translateX(). Suggestion chips dispatch messages; the composer accepts text. Hook up respond() to your AI API.
1
HTML Structure
<div class="ai-sidebar-wrap">
<div class="ai-sidebar-main">Your content</div>
<aside class="ai-sidebar">
<div class="ai-sidebar-head">AI Assistant</div>
<div class="ai-sidebar-body">Messages + chips</div>
<div class="ai-sidebar-composer">
<input placeholder="Ask anything...">
<button>↑</button>
</div>
</aside>
</div>
2
Core CSS
.ai-sidebar-wrap { position: relative; height: 480px; }
.ai-sidebar {
position: absolute; top: 0; right: 0; bottom: 0; width: 340px;
transition: transform 0.3s ease;
display: flex; flex-direction: column;
}
.ai-sidebar.collapsed { transform: translateX(300px); }
3
JavaScript — Hook to Real API
async function respond(q) {
appendMsg(q, 'user');
const res = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ prompt: q })
});
const data = await res.json();
appendMsg(data.reply, 'bot');
}🎨 Customization
| Property | Effect | Default |
|---|---|---|
| Sidebar width | Panel size | 340px |
| Animation duration | Slide speed | 0.3s ease |
| Accent color | Send button, user bubbles | #3b82f6 |
🎯 Use Cases
- Documentation sites — Ask about the current page
- IDE / code editors — Explains selected code inline
- Notion-style apps — AI writing assistant
- Customer support — Contextual help without modal takeover
⚠️ Common Mistakes
- Using position:fixed. Breaks on mobile. Use absolute positioning within a relative container.
- Not persisting state. Losing chat on close frustrates users. Save to localStorage.
- Blocking scroll on mobile. Allow the page to scroll behind the collapsed panel.
- Forgetting loading states. Show a "thinking" indicator while awaiting the API.
- No keyboard support. Enter to send, Shift+Enter for newline.