AI agent command panel with thinking state

Shows a user prompt, a brief working state, then the agent's structured output. Timing is fixed at 1.4s here, tie it to a real async call if this pattern ships inside an actual product instead of a marketing page.

pattern · linear.app composite animation-hovervanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="lac-panel">
  <div class="lac-msg lac-msg-user">what are the top 3 customer requests about permissions? add them to the Access project</div>
  <div class="lac-msg lac-msg-agent">
    <div class="lac-agent-head"><span class="lac-avatar">A</span>Agent <span class="lac-working" id="lacWorking">Working&hellip;</span></div>
    <div class="lac-result" id="lacResult">
      <div class="lac-issue">Add granular project permissions</div>
      <div class="lac-issue">Let guests access multiple teams</div>
      <div class="lac-issue">Create custom roles with scoped access</div>
    </div>
  </div>
</div>

Block id: linear-agent-chat-panelvanilla · code-required

More composite blocks

2x2 benefit grid with embedded UI snippets

cal.com

Pricing feature comparison table with highlighted column

cal.com

Central-hub integration diagram

cal.com

Issue tracker card with live activity feed

linear

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call