Adobe + Algolia Spectrum Design System Assistant
Proactive Demo →
Adobe Spectrum × Algolia

Ask anything about
Adobe Spectrum.

A grounded AI assistant trained on the full Adobe Spectrum design system — design tokens, React components, accessibility guidelines, and more. Every answer is cited and confidence-scored, powered by Algolia's multi-agent engine.

See how it works
3 indices
Design, React v3 & S2 docs
3-judge
Confidence panel per answer
1 <script>
Drop-in embed, isolated CSS
AI assistant grounded in
Design Tokens React Spectrum Accessibility Components Icons
Why multi-agent

Spectrum expertise, grounded and cited

Specialist AI agents own distinct parts of the Spectrum corpus — design tokens, component docs, React code — so every answer draws from the right source.

Intelligent routing

A lightweight classifier reads intent and routes the question to the agent — and the Spectrum index — best equipped to answer it.

Three Spectrum indices

Design docs, React Spectrum v3, and S2 each live in a separate Algolia index — synthesized into one grounded, unified answer.

Grounded & cited

Every claim links back to the Spectrum source it came from. No hallucinated APIs, no invented token names — just traceable answers.

Confidence judge

A three-judge panel — skeptic, referee, advocate — scores each answer for grounding and surfaces a live confidence badge your team can trust.

Shadow-DOM isolation

The widget renders inside its own Shadow DOM. Spectrum styles never conflict with the host page — pixel-perfect on any Spectrum site.

Deep-dive handoff

Start with a quick answer, then let users opt into a specialist deep dive on React Spectrum code — streamed live, on demand.

Federated by design

The full Spectrum corpus, intelligently federated

The Adobe Spectrum design system spans design guidelines, React Spectrum v3, and the new S2 library. All three live in one federated Algolia index, tagged by source. The multi-agent router filters to exactly the right source — so a single question can span all three.

  • ✓ Point each agent at one or many Spectrum indices
  • ✓ Scope answers with source facets and filters
  • ✓ Add or swap indices without touching the embed
  • ✓ Keep permissions per index with scoped API keys
How it works

From Spectrum question to verified answer

Every message flows through the same trustworthy four-step pipeline.

Classify

The classifier agent reads the question and picks the domain and Spectrum indices to search.

Retrieve

Specialist agents query the design, React v3, and S2 indices for the most relevant content.

Synthesize

The answer is streamed back with inline citations to each Spectrum source document.

Judge

A three-judge panel scores grounding and attaches a live confidence badge.

Under the hood

How the agents decide

Two independent pipelines work together — a chat pipeline that routes and retrieves, and a judge pipeline that scores and verifies.

Chat Pipeline

From question to grounded answer

💬
User question
e.g. "Which color token for a warning banner?"
↓
🧭
Classifier Agent
Reads intent → picks domain & indices
role: classifier Algolia Agent Studio
↓ routes to
🤖
Primary Agent
General Spectrum questions
or
⚙️
Code Specialist
React Spectrum / code questions
↓ queries
design_tokens
Colors, type, spacing
component_docs
Usage & guidelines
react_code
S2 & v3 code samples
support_kb
FAQs & troubleshooting
↓ streams
✅
Cited answer
Streamed with inline source citations → Judge pipeline triggered
Judge Pipeline

Blind, corroborated confidence scoring

📄
Answer artifact
The streamed answer + retrieved source snippets
↓ checked two ways, in parallel
🔒
Deterministic grounding gate
A rule-based check decides the served verdict — reproducible, same input gives the same answer every time, zero LLM tokens.
Skeptic
medium (Algolia inference)
Most critical — aggressively flags ungrounded claims.
Referee
medium (Algolia inference)
Neutral arbiter — balances grounding against helpfulness.
Advocate
medium (Algolia inference)
Steelmans the answer — surfaces correct, well-grounded claims before flagging gaps.
All three run the same model, scored independently with a blinded prompt (no judge sees another judge's output). Findings are advisory — they never override the deterministic gate above.
↓ ≥2-of-3 corroboration
🤝
Corroboration gate
A flagged claim only counts if at least 2 of the 3 judges agree — one judge alone can't flag something.
↓
🏅
Confidence badge
Binary chip displayed live in chat: Grounded, or N unverified claims — never a decimal or percentage.
Proactive chat

It offers help before they ask

Most visitors never open a chat window. A concierge agent watches the journey instead — and opens the conversation only when it has something specific and useful to say.

Proactive Pipeline

From browsing behaviour to an opened conversation

🧭
Visitor browses the docs
No question typed, no chat opened — just navigation the host page already sees
↓ collects
pages viewed
Path, title, dwell time
read & CTA events
What they engaged with
visit history
First-time or returning
persona
Chosen, or inferred
Signals live on the host page — this demo keeps them in localStorage, so nothing leaves the browser. Swap in your own CDP, analytics, or session store without touching the widget.
↓ persona narrows the corpus
🎭
Persona agent selected
Designer, Developer, or Product Manager — each a dedicated agent with its own voice and a filtered slice of the Spectrum corpus
🎨 design docs ⚙ React Spectrum code 📋 adoption & migration
↓ launcher starts thinking
✨
Concierge Agent
Searches the index once for the current page's topic, then decides whether it can genuinely help
Algolia Agent Studio { engage, greeting, suggestions }
↓ decides
💬
Opens with a greeting
A line about the page they're on, plus three grounded follow-up questions
or
🤫
Stays quiet
Nothing specific to add — the launcher goes idle and never interrupts
↓ visitor replies
✅
Handed to the chat pipeline
Their persona agent answers from the filtered corpus, with the same citations and confidence scoring as any other question
🎛️ The visitor can switch it off
A header toggle disables auto-opening for good. The choice persists across pages, and the widget enforces it — engage() returns false even if the host forgets to check.
⚡ No waiting on a spinner
If they navigate while the concierge is still thinking, the greeting is cached and replayed instantly on the next page instead of being lost.
🧩 One element, any host
Everything above is driven by <algolia-chat> attributes and four methods. Commands sent before it mounts are queued, not dropped.
Walk through the multi-page demo → — pick a persona, browse two pages, and watch the concierge decide.
Drop-in embed

Ship it with a single script tag

Declare your Spectrum indices and agents in plain HTML. No build step, no framework lock-in — the same web component powering this page today.

  • ✓ Framework-agnostic custom element
  • ✓ Configure agents & indices declaratively
  • ✓ Theme with CSS tokens — zero rebuild
index.html 
<!-- One assistant, many agents, many indices -->
<algolia-instant-search
  app-id="YOUR_APP_ID"
  api-key="SEARCH_KEY"
  index-name="docs_primary">

  <algolia-chat brand-name="Algolia">
    <algolia-agent role="primary"     agent-id="..."/>
    <algolia-agent role="specialist"  agent-id="..."/>
    <algolia-agent role="classifier"  agent-id="..."/>

    <!-- confidence judge panel -->
    <algolia-chat-confidence>
      <algolia-agent agent-id="..."/>
    </algolia-chat-confidence>
  </algolia-chat>
</algolia-instant-search>

<script src="algolia-chat.js"></script>

See it answer for yourself

The assistant on this page is live and grounded in the Adobe Spectrum design system across three Algolia indices. Ask about tokens, components, or React Spectrum — then watch the confidence badge.

Adobe
Spectrum AI assistant

Hello, how can I help you today?

Ask anything about Adobe Spectrum — design tokens, React components, or accessibility.

Spectrum Design Docs React Spectrum S2 React Spectrum v3