Prodular UI

Copilot panel

Pro

An AI assistant docked to the right of a normal app screen. It knows what is on screen, offers suggestions for that view, answers with citations that highlight the rows they point to, proposes actions through an approval, and minimizes to a rail.

Open full screen
Copilot panel screen from Prodular UI

Install

The screen lands in app/copilot-panel/ with every component it uses. Change it like any other code in your app. It is part of Prodular UI Pro, so run npx prodular-ui login first. See pricing.

npx prodular-ui add copilot-panel

States

The screen ships with 5 states. Pick one with the tabs above the preview, with ?state= in the URL, or with the state prop from your app.

  • Answer
  • Fresh panel
  • Thinking
  • Collapsed
  • Error

Files

  • app/copilot-panel/page.tsx
  • app/copilot-panel/copilot.tsx
  • app/copilot-panel/app-shell.tsx
  • app/copilot-panel/data.ts