AI side panelPro
An assistant docked beside a page that streams answers, pulls context chips from it, and applies changes with a highlight.
- An assistant next to a document or project page.
- AI suggestions that change structured data after approval.
- Copilot style help that can go full screen for longer work.
- A standalone chat app; use ai-chat.
- A single prompt box; use ai-composer.
- Showing an autonomous agent's steps; use agent-run.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this to add an assistant to a document, project or record page. Pass onAsk to call your model with the question, the selected context ids and the page, stream the text it returns, and apply the proposed changes through onPageChange; answers in the preview are scripted.
import { AiSidePanel } from "@/components/arc/blocks/ai-side-panel/ai-side-panel"; export function PlanPage({ plan }) { return ( <AiSidePanel defaultPage={plan} onAsk={async (question, context, page) => { const res = await fetch("/api/assistant", { method: "POST", body: JSON.stringify({ question, context, page }) }); return res.json(); // { text, actions: [{ id, label, detail, change }] } }} onPageChange={savePlan} /> );}AiSidePanel
An assistant docked beside a page. Context chips come from the page (select a milestone and its chip flies into the composer), answers stream word by word through TextStream, and suggested actions change the page with a highlight on exactly what changed. The panel expands into a focused full view with one continuous layout morph.
defaultPagePlanPagesample planThe page the assistant reads and edits: title, status, lead, target, intro, milestones and notes.onPageChange(page: PlanPage) => void–Called after every applied or undone action.onAsk(question: string, context: string[], page: PlanPage) => ScriptedAnswer | Promise<ScriptedAnswer>scripted sampleAnswers a question with text and suggested actions. context holds the selected milestone ids. The block streams the text.promptsstring[]three promptsSuggested prompts in an empty thread.defaultMode"closed" | "docked" | "full""docked"Panel state on mount.classNamestring–Extra class on the root.- Cmd/Ctrl+J
- Opens or closes the assistant while focus is inside the app.
- Enter
- Sends the message; Shift + Enter adds a line.
- Escape
- Returns from the focused view to the dock.
- The panel is a labelled complementary region; the expand button reports its state with aria-pressed.
- Streamed text keeps the full answer in the accessibility tree through TextStream and the thread is a polite live region.
- Each suggested action names the change in its label; applied actions become an undo button with a specific name.
- The page is hidden from assistive technology while the focused view covers it.
- The panel's box springs between dock and focus on the smooth spring, so the thread reflows continuously instead of jumping.
- Context chips travel from the table row into the composer with shared layout ids, and back when removed.
- Applying an action from the focused view docks the panel first, then washes the changed element and scrolls it into view.
- Reduced motion swaps travel for instant changes and shortens the highlight.
- Below 720px the dock covers the page like a sheet and the focused view is hidden.
- The milestones table compacts by container width, not viewport width.
- Only the panel box animates layout; the page reflows once per frame during open and close.
- Streaming updates one message; earlier messages do not re-render their words.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose this to add an assistant to a record, document or project page where answers should become edits.
- Return actions as data (PageChange) rather than prose so people approve each change; every action is undoable.
- Replace the scripted answers with streamed tokens from your model; keep the context ids so the model knows what the person selected.
The full library index for assistants is at /llms.txt.
