App-Structure-MCP-Server

aradnom/App-Structure-MCP-Server

3.1

If you are the rightful owner of App-Structure-MCP-Server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.

Style Oracle is a tool that parses React and Sass files, extracts symbols, and makes them searchable via an MCP server for AI agents like Claude.

Style Oracle

Parses React and Sass files, extracts all the symbols, and makes them searchable via an MCP server for Claude/AI agents.

What it does

  • Extracts React components (props, state, hooks, etc.)
  • Extracts Sass/CSS stuff (selectors, variables, mixins, etc.)
  • Stores everything in SQLite with full-text search
  • Creates vector embeddings for semantic search
  • Runs an MCP server so Claude can search your codebase

Search combines keyword matching + vector similarity + AI reranking to actually find what you're looking for.

Why this is useful

Ever been working in a large codebase and spent 20 minutes hunting for "that button component that has the loading state" or "the mixin that handles the card shadows"?

Traditional search tools just grep for text, so you end up with 47 results for "button" and have to manually check each one. This thing actually understands what the code does - so you can ask "button with loading spinner" and it'll find the LoadingButton component even if the word "loading" never appears in the filename.

Same with styles - ask for "card shadow styles" and it'll find the relevant mixins, variables, and selectors that create card drop shadows, even if they're scattered across different files with names like _elevations.sass and $shadow-depth-2.

Basically turns your codebase into something you can have a conversation with instead of playing text-matching whack-a-mole.

How it works

Parse files → Store in SQLite + FAISS → Search via MCP server

Components

  • extractor/ - Parses React/Sass files, handles weird syntax edge cases
  • docker/ - SQLite setup with optional web UI
  • embeddings/ - Creates OpenAI embeddings and FAISS index
  • server/ - MCP server + BGE reranking server

Requirements

  • Python 3.12
  • Node.js 20+
  • Docker (for SQLite web UI, optional)
  • Hugging Face CLI (for BGE models)
  • OpenAI API key

Setup

# Install stuff
pip install -r requirements.txt
cd extractor && npm install

# Set up Hugging Face (for reranking models)
huggingface-cli login

# Extract symbols from your project  
node extractor/extract-symbols.js /path/to/your/src

# Create embeddings (needs OPENAI_API_KEY)
python embeddings/create_embeddings.py

# Start servers
./start-servers.sh

What you get

After extraction, you'll have:

  • symbols.jsonl - All the extracted symbols
  • components.json - React component info
  • families.json - BEM pattern relationships
  • breakpoints.json - Your responsive breakpoints
  • SQLite database with full-text search
  • FAISS vector index for semantic search

Then Claude (or other MCP-compatible tools) can search through your codebase and actually understand what's in there.

Notes

  • The extractor has multiple fallback strategies so it won't choke on weird Sass syntax
  • BEM pattern detection works pretty well for identifying component families
  • The hybrid search (keyword + vector + reranking) usually finds what you're looking for
  • Built this because existing code search tools suck at understanding context