Agent Chat Demo
Overview
Headline, pill button and a row of agent marks on the left; on the right a light gray panel loops a conversation: after the user asks, two blinking statuses for picking and organizing appear, then a result with a row of app icons.
Taken from the page template Banshi Design Reference Library Website. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Agent Chat Demo to your project in your colors.
Where to use it
Notifications, hints, loading and status feedback, so people know whether an action worked.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add agent-chat-demo
mcp › Use 8pt MCP to call get_component("agent-chat-demo")
Code
Source for Agent Chat Demo. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-bac"><section class="bs-ag" id="agent"><div class="bs-wrap bs-ag__in"> <div class="bs-ag__l"><h2 class="bs-ag__h">让你的智能体，<br>也能翻这座库。</h2> <div class="bs-ag__cta"><a class="bs-btn bs-btn--gray" href="#end">连接智能体</a><small>专业版与团队版可用</small></div> <div class="bs-ag__marks" aria-hidden="true"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/></svg></i><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16"/></svg></i><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg></i><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="14" height="14" rx="4"/><circle cx="12" cy="12" r="3"/></svg></i><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19 19 5M8 5h11v11"/></svg></i></div></div> <div class="bs-ag__panel" data-chat><div class="bs-ag__chat"> <div class="bs-ag__msg me">帮我看看头部 App 怎么设计<b>付费墙</b>，让升级显得值得</div> <div class="bs-ag__msg st s1"><span class="bs-ag__dot"><svg viewBox="0 0 34 20" aria-hidden="true"><path d="M2 18 8 2h6L8 18z M12 18 18 2h6l-6 16z M22 18 28 2h4l-6 16z" fill="currentColor"/></svg></span><span class="bs-ag__shim">正在挑选 App…</span></div> <div class="bs-ag__msg st s2"><span class="bs-ag__dot"><svg viewBox="0 0 34 20" aria-hidden="true"><path d="M2 18 8 2h6L8 18z M12 18 18 2h6l-6 16z M22 18 28 2h4l-6 16z" fill="currentColor"/></svg></span><span class="bs-ag__shim">正在整理要点…</span></div> <div class="bs-ag__msg st s3"><span class="bs-ag__dot"><svg viewBox="0 0 34 20" aria-hidden="true"><path d="M2 18 8 2h6L8 18z M12 18 18 2h6l-6 16z M22 18 28 2h4l-6 16z" fill="currentColor"/></svg></span><span>找到 5 个 App</span></div> <div class="bs-ag__found s4"><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#c084fc,#7c3aed)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2.5"/></svg></span><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#fde047,#f59e0b)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 14h6l-1 7 8-11h-6z"/></svg></span><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#4ade80,#16a34a)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19C5 10 11 5 19 5c0 8-5 14-14 14z M5 19l8-8"/></svg></span><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#fb7185,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg></span><span class="bs-ic " style="width:30px;height:30px;background:linear-gradient(145deg,#38bdf8,#0284c7)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14c3-4 6-4 9 0s6 4 9 0M3 9c3-4 6-4 9 0s6 4 9 0"/></svg></span></div> </div></div> </div></section></div>
.x-bac{--ink:#111113;--mut:#6b6b70;--soft:#f3f3f4;--line:#e7e7ea;--card:#fff;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}.x-bac *{box-sizing:border-box;margin:0;padding:0}.x-bac{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-bac a{color:inherit;text-decoration:none}.x-bac button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-bac .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-bac .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-bac .bs-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s}.x-bac .bs-btn:active{transform:translateY(1px) scale(.98)}.x-bac .bs-btn--dark{background:var(--ink);color:#fff}.x-bac .bs-btn--dark:hover{background:#2a2a2e}.x-bac .bs-btn--gray{background:#ececee;color:var(--ink)}.x-bac .bs-btn--gray:hover{background:#e2e2e5}.x-bac .bs-btn svg{width:16px;height:16px}.x-bac .bs-ic{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:24%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.35);overflow:hidden}.x-bac .bs-ic svg{width:56%;height:56%}.x-bac .bs-ag{padding:110px 0}.x-bac .bs-ag__in{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}.x-bac .bs-ag__h{font-size:clamp(28px,3.2vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.2}.x-bac .bs-ag__cta{display:flex;align-items:center;gap:14px;margin-top:32px}.x-bac .bs-ag__cta small{font-size:12px;color:var(--mut)}.x-bac .bs-ag__marks{display:flex;gap:22px;margin-top:64px}.x-bac .bs-ag__marks i{width:30px;height:30px;display:block}.x-bac .bs-ag__marks svg{width:100%;height:100%}.x-bac .bs-ag__panel{background:var(--soft) radial-gradient(#d9d9de 1px,transparent 1.3px) 0 0/16px 16px;border-radius:28px;min-height:400px;display:flex;align-items:center;justify-content:center;padding:40px 36px}.x-bac .bs-ag__chat{width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px}.x-bac .bs-ag__msg{font-size:13.5px;line-height:1.55}.x-bac .bs-ag__msg.me{align-self:flex-end;max-width:78%;background:#e6e6e9;padding:12px 16px;border-radius:14px}.x-bac .bs-ag__msg.st{display:flex;align-items:center;gap:10px;color:#77777d}.x-bac .bs-ag__msg.s3{color:#111;font-weight:600}.x-bac .bs-ag__dot{width:20px;height:20px;border-radius:6px;background:#111;color:#fff;display:grid;place-items:center;flex:none}.x-bac .bs-ag__dot svg{width:13px;height:8px}.x-bac .bs-ag__shim{animation:xbacShim 1.6s ease-in-out infinite}@keyframes xbacShim{50%{opacity:.4}}.x-bac .bs-ag__found{display:flex;gap:8px;padding-left:30px}.x-bac .bs-ag__panel .s1,.x-bac .bs-ag__panel .s2,.x-bac .bs-ag__panel .s3,.x-bac .bs-ag__panel .s4{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}.x-bac .bs-ag__panel.p1 .s1,.x-bac .bs-ag__panel.p2 .s2,.x-bac .bs-ag__panel.p3 .s3,.x-bac .bs-ag__panel.p4 .s4{opacity:1;transform:none}@media (max-width:820px){.x-bac .bs-ag{padding:80px 0}.x-bac .bs-ag__in{grid-template-columns:1fr;gap:36px}.x-bac .bs-ag__marks{margin-top:36px}.x-bac .bs-ag__panel{min-height:320px;padding:28px 20px;border-radius:22px}}@media (prefers-reduced-motion:reduce){.x-bac .bs-ag__panel .s1,.x-bac .bs-ag__panel .s2,.x-bac .bs-ag__panel .s3,.x-bac .bs-ag__panel .s4{opacity:1;transform:none;transition:none}.x-bac .bs-ag__shim{animation:none}}.x-bac .bs-ag{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;padding:56px 0}(root) => {
const el = (root.classList && root.classList.contains('x-bac')) ? root : (root.querySelector('.x-bac') || root);
const panel = el.querySelector('[data-chat]');
const RM = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
let st = 0, tm = 0;
const set = (n) => { for (let i = 1; i <= 4; i++) panel.classList.toggle('p' + i, i <= n); };
const tick = () => { st = st >= 4 ? 0 : st + 1; set(st); tm = setTimeout(tick, st === 4 ? 3600 : st === 0 ? 700 : 1100); };
if (RM) set(4); else { set(1); st = 1; tm = setTimeout(tick, 1100); }
return () => { clearTimeout(tm); };
}Subscribe to Builder to see the full source.See pricing