Agent Assist

A two-panel support tool that combines AI-powered product search with real-time order tracking, built to replace the tab-switching chaos of answering customer questions across multiple systems.

The Problem

Our customer support team was answering product questions manually across a catalog of 4,342 products. Every order status query meant logging into a separate system, cross-referencing tracking numbers, checking fulfillment states. There was no single tool that brought product knowledge and order data together. Agents were copy-pasting between browser tabs, and the context switching was eating into response times.

The Approach

I built a two-panel application. The left panel is an Order Tracker that queries our production database through the Metabase API (read-only, which matters). You type in an order number or customer email, and it pulls the full order lifecycle: payment status, fulfillment state, shipping updates, line items. The right panel is a Product Assistant powered by Claude AI with 7 custom tool definitions: product search, SKU lookup, category browse, dietary filter, order lookup, product recommendation, and shipping estimate.

The product search uses custom fuzzy matching that runs entirely in-memory. It handles multi-word queries with a scoring system that weights exact matches, partial matches, and word-order relevance. So a customer asking about “vegan magnesium citrate” gets sensible results even if the product name is structured differently in our catalog.

Then there’s the alerts dashboard, which monitors the fulfillment pipeline with 9 distinct alert types. Things like stuck orders, payment mismatches, unfulfilled items past SLA. This part wasn’t in the original brief.

The whole thing is 2,549 lines of TypeScript spread across 7 React components, running on Next.js 15 with React 19 and deployed on Vercel.

Key Decisions

• Metabase API over direct PostgreSQL. This was a security call. Metabase gives us read-only access through pre-defined queries. Direct database connections to production are one wrong query away from an accidental write. For a tool that support agents use daily, I wanted zero risk of corrupting order data.

• In-memory fuzzy search over Elasticsearch. Our catalog is 4,342 products. That’s large enough to need proper search, but small enough to hold entirely in memory. Elasticsearch would have been the “correct” engineering choice, but it would have meant spinning up a separate service and leaving Vercel’s free tier. The fuzzy matcher handles multi-word scoring well enough for our needs, and deployment stays simple.

• Claude tool-use with 7 tools over a single RAG pipeline. RAG would have dumped product descriptions into context and hoped for the best. Tool-use lets Claude compose multi-step queries. An agent can ask “find vegan magnesium and check if order #2491 included any” and Claude will call the dietary filter tool, get results, then call the order lookup tool, and synthesize. That kind of workflow is hard to get right with retrieval alone.

Under the Hood

Here’s a simplified version of how the Claude AI tool definitions work. Each tool gives the AI a specific capability:

const tools: Tool[] = [
  {
    name: "product_search",
    description: "Fuzzy search across the product catalog",
    input_schema: {
      type: "object",
      properties: {
        query: { type: "string", description: "Search terms" },
        limit: { type: "number", description: "Max results" }
      }
    }
  },
  {
    name: "dietary_filter",
    description: "Filter products by dietary requirements",
    input_schema: {
      type: "object",
      properties: {
        diet: {
          type: "string",
          enum: ["vegan", "vegetarian", "gluten_free", "dairy_free"]
        }
      }
    }
  },
  // ... 5 more tools: SKU lookup, category browse,
  //     order lookup, recommendation, shipping estimate
];

The fuzzy search scores multi-word queries across product names, categories, and ingredients:

function fuzzyScore(query: string, product: Product): number {
  const words = query.toLowerCase().split(/\s+/);
  const target = [
    product.title, product.category, product.ingredients
  ].join(" ").toLowerCase();

  return words.reduce((score, word) => {
    if (target.includes(word)) return score + 10;
    // Partial match scoring for typos and abbreviations
    const partial = target.split(/\s+/)
      .some(t => t.startsWith(word) || word.startsWith(t));
    return partial ? score + 5 : score;
  }, 0);
}

Scale

• 4,342 products indexed across 11 markets
• 9 alert types monitoring the fulfillment pipeline
• 2,549 lines across 7 React components

What I Learned

The tool itself was the easy part. The real work was understanding our own fulfillment pipeline well enough to model it. Which statuses actually mean “stuck”? What’s the normal lag between payment capture and fulfillment? When does a shipping delay become an exception worth alerting on?

Building the tool forced me to learn our infrastructure at a level most marketing leaders never need to. I spent more time reading Metabase query results and tracing order state machines than I did writing React components.

The alerts dashboard wasn’t in the original plan. It emerged because once you can query production data, you start seeing problems nobody was monitoring. Orders sitting in a weird state for three days. Payments captured but never fulfilled. These were invisible before because no one had a reason to look. The tool made them visible, and that turned out to be more valuable than the AI chat feature I’d set out to build.

---

Built for Hewyn, a DTC wellness brand. Architecture and tech stack shown. Internal metrics anonymized.