This is a submission for the Algolia Agent Studio Challenge: Consumer-Facing Non-Conversational Experiences
What I Built
Spec-Logic is an AI-powered PC building assistant that eliminates the compatibility nightmare of assembling custom computers. It leverages Algolia Agent Studio combined with InstantSearch to provide intelligent, context-aware component recommendations while enforcing technical compatibility constraints—all without requiring extensive back-and-forth dialogue.
The Problem
Building a PC involves navigating a complex web of interdependencies:
- Socket Compatibility: AMD AM4 CPUs only work with AM4 motherboards
- Memory Standards: DDR4 and DDR5 are incompatible and motherboard-dependent
- Power Requirements: High-end GPUs like the RTX 4090 can spike to 2x their rated power
- Physical Constraints: GPU length and cooler height must fit within case clearances
Current solutions like PCPartPicker require manual navigation and don't explain why components are incompatible. Generic chatbots lack the structured data needed to enforce hard compatibility rules.
The Solution
Spec-Logic combines Algolia's lightning-fast structured search with AI-powered explanations to:
- Automatically filter incompatible options before showing them
- Display visual compatibility badges (✅ Compatible, ⚠️ Warning, ❌ Incompatible)
- Calculate power requirements with realistic safety margins for transient spikes
- Provide AI assistance through an embedded chat widget for questions and recommendations
Key Features
- Smart Compatibility Checking: When you select a CPU, only compatible motherboards appear
- Advanced Filtering & Sorting: Filter components by brand, price range, and type-specific attributes (CPU socket, GPU VRAM, motherboard form factor). Sort by price for budget optimization
- Visual Case Preview: Selected case displays with product imagery in the build summary sidebar
- Real-time PSU Calculator: Accurate power calculations with 1.5x safety margins and transient spike handling
- Physical Clearance Validation: GPU length and cooler height checks against case dimensions
- Intelligent Chat Input: Combobox-style input with suggested queries and natural language processing
- Export & Share: Export builds to PCPartPicker format, Reddit markdown, or shareable links
Demo
🔗 Live Demo: https://computer-spec-logic.vercel.app/
📦 GitHub Repository: https://github.com/prkshverma09/ComputerSpecLogic
🎥 Demo Video: Watch the demo
Screenshots
Build Configuration with Compatibility Checking

Compatibility Warnings (Tight Fit Alerts)

AI Chat Assistant with Combobox Input

Export Build (PCPartPicker, Reddit, JSON, Share Link)

How I Used Algolia Agent Studio
Data Indexed
I created a comprehensive PC components index containing 7 component types with rich structured data:
{
"objectID": "cpu-amd-ryzen5-5600x",
"component_type": "CPU",
"brand": "AMD",
"model": "Ryzen 5 5600X",
"socket": "AM4",
"tdp_watts": 65,
"cores": 6,
"threads": 12,
"memory_type": ["DDR4"],
"price_usd": 199,
"performance_tier": "mid-range",
"compatibility_tags": ["am4", "ddr4", "pcie4"]
}
The index includes:
- CPUs: Socket type, TDP, core count, memory support
- GPUs: Length (mm), TDP, VRAM, recommended PSU wattage
- Motherboards: Socket, form factor, memory type support
- RAM: DDR type, speed, capacity
- PSUs: Wattage, efficiency rating
- Cases: Max GPU length, max cooler height, form factor support, product images
- Coolers: Height, socket support, TDP rating
Retrieval-Enhanced Workflow
The magic happens through proactive filtering based on build context. Here's the flow:
- User selects a CPU (e.g., AMD Ryzen 5 5600X with AM4 socket)
-
Build state updates with active filters:
socket: "AM4",memory_type: "DDR4" - Search results automatically filter to show only compatible components
- Compatibility badges appear on every component showing fit status
This is "non-conversational intelligence" in action—the system guides users through contextual data retrieval without requiring dialogue.
Query Rules Configuration
I configured Algolia Query Rules to detect component patterns and apply automatic filtering:
{
"pattern": "Ryzen 5 5|Ryzen 7 5|Ryzen 9 5|5600X|5800X|5900X",
"consequence": {
"params": {
"filters": "socket:AM4",
"userData": { "detected_socket": "AM4", "compatibility_mode": true }
}
}
}
When a user searches for "Ryzen 5 5600X", the system automatically:
- Detects it's an AM4 CPU
- Filters subsequent motherboard searches to AM4 socket
- Passes compatibility context to the AI assistant
Targeted Prompting Approach
The Agent Studio system prompt enforces hard compatibility rules:
You are Spec-Logic, an expert PC building assistant.
## Core Rules (NEVER violate):
1. **CPU ↔ Motherboard**: socket MUST match exactly
- AM4 CPUs → AM4 motherboards only
- LGA1700 CPUs → LGA1700 motherboards only
2. **Memory ↔ Motherboard**: memory_type MUST match
- DDR4 motherboards → DDR4 RAM only
3. **GPU ↔ Case**: gpu_length_mm MUST be < case.max_gpu_length_mm
4. **PSU Calculation**:
- Calculate: (CPU TDP + GPU TDP + 100W base) × 1.5 safety margin
- For RTX 4090/4080: add additional 150W for transient spikes
## Behavior:
- When a user selects a component, IMMEDIATELY update filters
- Always explain WHY a recommendation fits or doesn't fit
- Track the "Current Build" state throughout the conversation
This ensures the AI never recommends incompatible components and always provides context-aware suggestions.
Why Fast Retrieval Matters
PC building requires instant feedback. When a user clicks "Add to Build" on a CPU, they expect:
- Immediate visual confirmation that it was added
- Instant filtering of search results to compatible options
- Real-time compatibility badges on all visible components
- Updated power calculations in milliseconds
Algolia's sub-200ms search latency makes this possible. Here's why speed is critical for this use case:
The "Lock-In" Moment
The core UX pattern is what I call the "Lock-In":
User selects AMD Ryzen 5 5600X
↓
System locks: socket=AM4, memory=DDR4
↓
Motherboard search instantly filters to compatible AM4 boards
↓
User sees only valid options with green badges
This happens in under 200ms. Any perceptible delay would break the flow and make users question whether the filtering worked.
Real-Time Power Calculations
As components are added, the PSU calculator updates instantly:
// Power calculation runs on every component change
const totalDraw = basePower + cpuPower + gpuPower + transientBuffer;
const recommendedPsu = Math.ceil(totalDraw * 1.5 / 50) * 50;
The power meter in the sidebar animates smoothly because Algolia's fast retrieval means we can fetch component specs and recalculate without any loading states.
Compatibility Badge Performance
Every component card displays a compatibility badge. For a search returning 20 results, we need to:
- Fetch component specs from the index
- Compare against current build state
- Determine compatibility status
- Render appropriate badge
With Algolia's speed, this happens before the user even finishes processing the search results visually—creating the perception that the system "just knows" what's compatible.
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | Next.js 14, React 18, Tailwind CSS, shadcn/ui |
| Search | Algolia InstantSearch, Agent Studio |
| State | Zustand with localStorage persistence |
| Backend | Python ETL pipeline for data ingestion |
| Testing | Vitest (unit), Playwright (E2E), pytest (backend) |
| Hosting | Vercel |
What's Next
- Image Enrichment for All Components: Extend product imagery to CPUs, GPUs, motherboards, and other component types
- Price Tracking: Alerts when build components drop in price
- Benchmark Integration: Show estimated FPS for popular games based on CPU/GPU combination
- Community Builds: Browse and fork popular configurations from other users
- Build Comparison: Side-by-side comparison of multiple saved builds
Built with ❤️ for the Algolia Agent Studio Challenge 2026





Top comments (1)
Saw the demo video and tried it out using the vercel app link, looks promising.