Web search

Queries that show up one by one and the sources that arrive next.

data-u="ai-search"Demo

Example

Ran 3 searches

AI plan pricing
component library comparison
how to measure a context window

example.com docs.example.com blog.example.org

Done in 2.9s

Web search

Agent queries and the sources it read, shown live with a timer.

<article class="u-ai-card">
  <div class="u-ai-card__panel" data-u="ai-search" role="group" aria-label="Demo: agent web search">
    <div class="u-ai-tile u-ai-search">
      <div class="u-ai-search__head"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>Ran 3 searches</div>
      <ul class="u-ai-search__qs">
        <li class="u-ai-search__q u-ai-x"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg><span>AI plan pricing</span></li>
        <li class="u-ai-search__q u-ai-x"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg><span>component library comparison</span></li>
        <li class="u-ai-search__q u-ai-x"><svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg><span>how to measure a context window</span></li>
      </ul>
      <div class="u-ai-search__srcs">
        <span class="u-ai-src u-ai-x"><i style="background:var(--c1)"></i>example.com</span>
        <span class="u-ai-src u-ai-x"><i style="background:var(--c2)"></i>docs.example.com</span>
        <span class="u-ai-src u-ai-x"><i style="background:var(--c3)"></i>blog.example.org</span>
      </div>
      <div class="u-ai-search__status" data-state="done">
        <span class="u-ai-dots" aria-hidden="true"><i></i><i></i><i></i></span>
        <svg class="u-ai-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>
        <span class="u-ai-search__label u-ai-mono">Done in 2.9s</span>
      </div>
    </div>
  </div>
  <div class="u-ai-card__text">
    <h3 class="u-ai-card__title">Web search</h3>
    <p class="u-ai-card__desc">Agent queries and the sources it read, shown live with a timer.</p>
  </div>
</article>

Installation

Web search ships in the full package, along with the skill:

curl -fsSL unslop.leallabs.dev/i | sh

The example HTML, to paste:

curl -fsSL unslop.leallabs.dev/i | sh -s add ai-search

Uses The block is just HTML. The CSS and JS come from the full package's unslop.css and unslop.js.

Classes and variants

Class	What it does
`.u-ai-search`	The block: __head, __qs with __q, __srcs with .`u-ai-src`.
`.u-ai-search__status[data-state]`	Status line.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
.`u-ai-`card__panel	`role="group"` and `aria-label`	Says it's a demo and of what.
status	`data-state`	Goes from searching to done.

Keyboard

Key	Does
Tab	enters the card and pauses the animation while focus is there

Motion

Plays on its own when it enters the viewport, for up to 3 cycles, and stops in its final state. Hovering or focusing inside pauses it. With reduced motion, it shows the final state right away.

Events and API

No public events. For a real chat, copy the markup and wire up your own state, without relying on data-u for logic.