Skip to main content
Elizabeth Stein
DevTools ArsenalOpen to workHomeWorkAboutContact

Case study

devtools2025

ComponentCompass

AI design system navigator for shadcn/ui with GPT-4 Vision screenshot analysis, multi-index search (components, code, accessibility), and streaming responses. 24 passing tests.

Building the tools that build the tools

Field notes

Role

Creator

Read order

Evidence first, then constraint → build → proof. Use the chapter rail to jump sections; orbit to adjacent work from the bottom of the case study.

DevTools Arsenal·✦I-Class Giant
●LIVE
24 tests passing
View Live Site

Evidence

Interface & evidence

A real surface area—not a mock. Scroll the story below for constraint, build, and outcome.

Signature viewcomponentcompass.vercel.app
ComponentCompass application interface
Open Live Site
componentcompass.vercel.app

Story arc

How this shipped

Building the tools that build the toolsThree beats: what pressed against the work, how the stack answered, and what changed once it was live.

I · Constraint

The brief

Helping developers find the right shadcn/ui components without reading through extensive documentation.

II · Build

The craft

Built GPT-4 Vision screenshot analysis for visual component matching. Multi-index Algolia search across components, code samples, and accessibility patterns.

III · Proof

What moved after launch

24 automated tests ensure accuracy. Screenshot-to-component matching in <2 seconds. Multi-index search covers 40+ component patterns.

Signals

◆Signals & scale

0
Tests
0<2s
Match Speed
0GPT-4 Vision
AI
0
Patterns

Engine room

At a glance

0
Tests

Inventory

Stack & signals

React 19Algolia Agent StudioGPT-4 VisionAI SDK
← Project archive

Tell me what you're building

If you need someone who can own UI, systems, and AI integration without losing the plot—I'm listening. Contract, advisory, or full-time: we'll find the right shape.

Start a ConversationSee More Projects

Related work

Nearby systemsignal 1
Signal: Low
React 19

Chronicle

Local-first AI agent observability platform built in Rust. Timeline view, DAG visualization, cost tracking, OpenAI proxy with semantic caching, and MCP integration. Privacy-focused alternative to LangSmith.

Nearby systemsignal 1
Signal: Low
React 19

StanceStream

Enterprise-grade AI policy debate platform built for the Redis AI Challenge 2025. GPT-4 agents with persistent personalities, emotional states, and coalition analysis. All 4 Redis data models (JSON/Streams/TimeSeries/Vector), Redis Vector-powered semantic caching, multi-source fact-checking, and business intelligence dashboard with ROI tracking.

Nearby systemsignal 1
Signal: Low
React 19

Finance Quest

Advanced financial literacy platform with 17 chapters, 30+ professional calculators, spaced-repetition learning (SM-2 algorithm), AI coaching, and WCAG 2.1 AA compliance. Major refactor removed 43K lines of dead code for a lean, maintainable codebase.

Keep exploring

Previous Project

CodeMemory

Master web development through spaced repetition using FSRS algorithm with flashcards and coding challenges.

Next Project

gif-my-code

The only free CLI tool that creates animated code GIFs with line highlighting. 250+ language support via Chroma auto-detection, laser-reveal and typing animations, customisable speed, and full scriptability for CI/CD pipelines. Competes with paid tools like Snappify ($5–30/mo) at zero cost.

© 2026 Elizabeth Stein

·Contact·Privacy
Let's work together → GitHubLinkedIn

Built with Next.js, Three.js, and obsessive attention to detail.