Recipe: Notion AI-like sidebar
Build a collapsible AI assistant panel that lives alongside your content — just like Notion AI. Persistent chat history, streaming responses, and workspace-aware context.
Overview
This recipe walks through building a sidebar AI assistant that mirrors the Notion AI experience. Users press Cmd+J to toggle a resizable panel. The panel maintains conversation history scoped to the current workspace page, streams responses token-by-token, and supports markdown rendering.
Prerequisites
- Next.js 14 App Router project with Tailwind CSS
- Vercel AI SDK installed (
aiand@ai-sdk/openai) - OpenAI API key set as
OPENAI_API_KEYenvironment variable
Steps
Create the sidebar layout
Add a resizable sidebar container to your root layout. Use CSS grid with a collapsible column. The sidebar width is stored in a cookie or local state so it persists across navigations. Apply a subtle border and backdrop blur to separate it from the main content area.
Wire up the chat hook
Use the Vercel AI SDK useChat hook with a custom API route. Pass the current page path as the workspaceId so the AI has context about what the user is viewing. Enable streaming by default — the SDK handles token-by-token rendering.
Add keyboard shortcut
Listen for Cmd+J (or Ctrl+J on Windows) to toggle the sidebar. Focus the input automatically when the panel opens. Use a global event listener in a client component mounted at the layout level.
Persist chat history
Store conversations keyed by workspace ID. Use localStorage for simplicity or a lightweight database for multi-device sync. Each message object includes role, content, and timestamp. Restore history when the sidebar opens.
Style the chat UI
Match the Notion aesthetic: rounded message bubbles, subtle dividers, a sticky input bar at the bottom. Use Tailwind's prose plugin for markdown rendering. Add a “New chat” button and a history dropdown. Keep the design minimal — let the content breathe.
What you'll have
A production-ready AI sidebar that slides in from the right, understands the current page context, streams responses, and remembers conversations. Users can ask questions, summarize content, or generate drafts without leaving their workspace.