<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: brian</title>
    <description>The latest articles on DEV Community by brian (@briian365).</description>
    <link>https://dev.to/briian365</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F206100%2F736c493d-80b2-4eef-b0f3-883fdb33ee9b.jpg</url>
      <title>DEV Community: brian</title>
      <link>https://dev.to/briian365</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/briian365"/>
    <language>en</language>
    <item>
      <title>How I Used Algolia to Build a 'Mind-Reading' Support Portal</title>
      <dc:creator>brian</dc:creator>
      <pubDate>Tue, 03 Feb 2026 07:14:46 +0000</pubDate>
      <link>https://dev.to/briian365/how-i-used-algolia-to-build-a-mind-reading-support-portal-25ei</link>
      <guid>https://dev.to/briian365/how-i-used-algolia-to-build-a-mind-reading-support-portal-25ei</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/algolia"&gt;Algolia Agent Studio Challenge&lt;/a&gt;: Consumer-Facing Non-Conversational Experiences&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;LiveAssist AI&lt;/strong&gt; transforms the mundane support ticket form into an intelligent, proactive assistant. Instead of waiting for users to submit a ticket and then searching for answers, the system anticipates their needs &lt;em&gt;as they type&lt;/em&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Multi-Agent Architecture
&lt;/h3&gt;

&lt;p&gt;The sidebar runs &lt;strong&gt;four specialized Nano-Agents&lt;/strong&gt; in parallel:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Agent&lt;/th&gt;
&lt;th&gt;Purpose&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;🔍 &lt;strong&gt;Retrieval Agent&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;Fetches relevant KB articles from Algolia in &amp;lt;50ms&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;📦 &lt;strong&gt;Context Agent&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;Extracts entities (e.g., Order IDs) and displays live widgets&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;❤️ &lt;strong&gt;Sentiment Agent&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;Detects frustration and escalates priority&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;🧠 &lt;strong&gt;Insights Agent&lt;/strong&gt;
&lt;/td&gt;
&lt;td&gt;Classifies intent and auto-routes to the correct category&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  How It Proactively Assists
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;User types&lt;/strong&gt;: "I want to return my ORD-12345"&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Instantly&lt;/strong&gt;: 

&lt;ul&gt;
&lt;li&gt;Category dropdown auto-selects "Returns &amp;amp; Refunds"&lt;/li&gt;
&lt;li&gt;Order tracking widget appears with live status&lt;/li&gt;
&lt;li&gt;"Refund Policy" article surfaces with a "Start a Return" action button&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;User never submits a ticket&lt;/strong&gt;... Problem solved!&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;🔗 &lt;strong&gt;Live Demo&lt;/strong&gt;: &lt;em&gt;&lt;a href="https://live-assist.netlify.app/" rel="noopener noreferrer"&gt;https://live-assist.netlify.app/&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;🔗 &lt;strong&gt;GitHub Repo&lt;/strong&gt;: &lt;em&gt;&lt;a href="https://github.com/briian365/liveassist-ai" rel="noopener noreferrer"&gt;https://github.com/briian365/liveassist-ai&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Screenshots
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Typing "refund" triggers instant KB retrieval
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fznzog5obaov4tiv45ek4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fznzog5obaov4tiv45ek4.png" alt="Algolia search in action" width="800" height="416"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Order ID detection shows live tracking widget
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnvxnr7bjt38tnrcvq5r8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnvxnr7bjt38tnrcvq5r8.png" alt="Order widget" width="800" height="413"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Sentiment detection escalates priority
&lt;/h4&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwcrjksssxbzeek1p104a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwcrjksssxbzeek1p104a.png" alt="Priority support" width="800" height="415"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  How I Used Algolia Agent Studio
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What Data I Indexed
&lt;/h3&gt;

&lt;p&gt;I indexed a Knowledge Base with &lt;strong&gt;6 support articles&lt;/strong&gt;, each containing:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"objectID"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"2"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"title"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Refund Policy"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"content"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"We offer a 30-day money-back guarantee..."&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"category"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Returns"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"tags"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"refund"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"return"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"money back"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"smartAction"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"link"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"url"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"/returns/start"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"label"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Start a Return"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;smartAction&lt;/code&gt; field is key, it transforms search results into &lt;strong&gt;actionable UI components&lt;/strong&gt;, not just text.&lt;/p&gt;

&lt;h3&gt;
  
  
  How Retrieval Enhances the Workflow
&lt;/h3&gt;

&lt;p&gt;Traditional support forms are reactive: user submits → agent searches → agent replies. &lt;/p&gt;

&lt;p&gt;LiveAssist AI flips this by making retrieval &lt;strong&gt;proactive and continuous&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;User keystroke → Debounce (300ms) → Algolia search → Render results
                                   ↓
                            Entity extraction (Order IDs)
                                   ↓
                            Sentiment analysis (frustration keywords)
                                   ↓
                            Intent classification (auto-routing)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Each layer adds intelligence without requiring the user to do anything.&lt;/p&gt;

&lt;h3&gt;
  
  
  Targeted Prompting Approach
&lt;/h3&gt;

&lt;p&gt;The "prompts" here are the &lt;strong&gt;search queries&lt;/strong&gt; themselves. I engineered them by:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Concatenating fields&lt;/strong&gt;: &lt;code&gt;query = subject + " " + description&lt;/code&gt; captures full context&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Multi-attribute matching&lt;/strong&gt;: Algolia searches across &lt;code&gt;title&lt;/code&gt;, &lt;code&gt;content&lt;/code&gt;, and &lt;code&gt;tags&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Instant feedback&lt;/strong&gt;: 3-hit limit keeps the sidebar focused, not overwhelming&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Why Fast Retrieval Matters
&lt;/h2&gt;

&lt;h3&gt;
  
  
  The 100ms UX Threshold
&lt;/h3&gt;

&lt;p&gt;Users perceive responses under 100ms as "instant." Algolia consistently delivers results in &lt;strong&gt;10-50ms&lt;/strong&gt;, which means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Suggestions appear &lt;em&gt;as the user is still forming their thought&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;The experience feels like the system is "reading their mind"&lt;/li&gt;
&lt;li&gt;No loading spinners, no waiting. Just flow&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Business Impact
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Metric&lt;/th&gt;
&lt;th&gt;Without LiveAssist&lt;/th&gt;
&lt;th&gt;With LiveAssist&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Tickets submitted&lt;/td&gt;
&lt;td&gt;100%&lt;/td&gt;
&lt;td&gt;~40% (est.)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Time to resolution&lt;/td&gt;
&lt;td&gt;Minutes/hours&lt;/td&gt;
&lt;td&gt;Seconds&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;User satisfaction&lt;/td&gt;
&lt;td&gt;Reactive&lt;/td&gt;
&lt;td&gt;Proactive&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;By surfacing solutions &lt;em&gt;before&lt;/em&gt; the ticket is submitted, we reduce support volume while making users happier. That's only possible because Algolia's retrieval is fast enough to be invisible.&lt;/p&gt;




&lt;h2&gt;
  
  
  Tech Stack
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Frontend&lt;/strong&gt;: React + Vite&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Search&lt;/strong&gt;: Algolia (&lt;code&gt;algoliasearch&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Styling&lt;/strong&gt;: Vanilla CSS with Glassmorphism design&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Architecture&lt;/strong&gt;: Multi-agent pattern with reactive state&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;em&gt;Built with ☕ and Algolia&lt;/em&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>algoliachallenge</category>
      <category>ai</category>
      <category>agents</category>
    </item>
  </channel>
</rss>
