Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@tsx-query Find Button components with inline onClick handlers"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Semantic React/TSX analysis MCP server for AI coding assistants.
Save 70-90% tokens compared to grep + file reads.
LLMs waste tokens on grep + file reads. tsx-query uses semantic AST analysis to return precisely what you need.
Query | grep + read | tsx-query | Savings |
Find Button usages | ~15,000 tokens | ~800 tokens | 95% |
Trace prop flow (5 levels) | ~75,000 tokens | ~3,000 tokens | 96% |
Find all setState calls | ~30,000 tokens | ~1,500 tokens | 95% |
Analyze re-render triggers | ~40,000 tokens | ~2,000 tokens | 95% |
Related MCP server: Component Library MCP
npm install -g @paramhq/tsx-queryclaude mcp add tsx-query -- npx -y @paramhq/tsx-queryOr manually add to your MCP config (~/.claude/mcp.json or project .mcp.json):
{
"mcpServers": {
"tsx-query": {
"command": "npx",
"args": ["-y", "@paramhq/tsx-query"]
}
}
}{
"command": "npx",
"args": ["-y", "@paramhq/tsx-query"]
}git clone https://github.com/paramhq/tsx-query.git
cd tsx-query
npm install
npm run build
npm run mcpFind all JSX usages of a component with powerful filtering.
{
"projectPath": "/path/to/project",
"componentName": "Button",
"withProp": "onClick",
"hasInlineHandler": true
}Filters:
withProp / withoutProp - Filter by prop existence
withPropValue - Filter by prop value (exact or regex)
hasInlineHandler - Find inline arrow handlers
hasSpreadProps - Find spread props usage
onlyConditional - Only conditional renders
Returns: File locations, props with values, parent component, code snippets.
Trace a prop through the component hierarchy. Replaces reading 5-10 files manually.
{
"projectPath": "/path/to/project",
"propName": "userId",
"startFile": "src/components/UserDetails.tsx",
"direction": "up"
}Returns: Complete prop path through components with transformations (renamed, destructured, spread).
Find all locations that update a state variable. Understand state flow without reading handlers.
{
"projectPath": "/path/to/project",
"filePath": "src/components/UserForm.tsx",
"stateName": "formData"
}Returns: All setState calls with context (handler, useEffect, inline), trigger events, async/conditional flags.
Analyze what causes a component to re-render with optimization suggestions.
{
"projectPath": "/path/to/project",
"filePath": "src/components/UserProfile.tsx",
"componentName": "UserProfile"
}Returns: Props, state, context, hooks that trigger renders + memoization status + suggestions.
Analyze import/export relationships with cached import graph.
{
"projectPath": "/path/to/project",
"filePath": "src/components/Button/index.ts",
"direction": "importedBy"
}Returns: What imports this file, unused exports, circular dependencies.
Tool | Purpose |
| Find all usages of a hook across codebase |
| Find missing/unnecessary hook dependencies |
| Analyze single file structure |
| List all JSX in a file |
| Clear project cache after external changes |
trace_event_handler - Trace callback chains from event to side effects
trace_context_usage - Map Context providers to consumers
Grep Limitation | tsx-query Solution |
Finds "Button" in comments/strings | Only finds JSX |
Can't filter by prop values |
|
Can't detect aliased imports | Handles |
Can't trace prop flow | Full cross-file prop tracing |
Reads entire files | Returns only relevant data |
ts-morph - TypeScript AST manipulation
Model Context Protocol SDK - MCP server implementation
Zod - Schema validation
Sukhdev - @paramhq
See CONTRIBUTING.md for guidelines.
MIT - see LICENSE
Analyze a single React/TSX file. Returns components, hooks, imports, exports, and directive.
Inputs: filePath (required).
Analyze React hook dependencies in a file. Finds missing dependencies (bugs), unnecessary dependencies, async callbacks in useEffect, and cleanup functions. Essential for catching stale closure bugs.
Inputs: filePath (required), hookTypes, componentName.
Analyze import/export relationships for a file. Find what imports this file (importedBy), detect unused exports, and circular dependencies. Uses cached import graph for fast subsequent queries. Returns summary + limited results.
Inputs: filePath (required), projectPath (required), limit, exclude, +4 more.
Clear the project and import graph caches. Use this after making changes to files outside the MCP to ensure fresh analysis.
Inputs: projectPath.
Find all JSX usages of a component across the codebase. Returns summary (totalUsages, filesCount), distribution by path, and limited usages with detailed prop info. Supports filtering by props (withProp, withoutProp, withPropValue), patterns (hasInlineHandler, hasSpreadProps), and conditional rendering.
Inputs: projectPath (required), componentName (required), limit, exclude, +10 more.
Find all usages of a React hook across the codebase. Returns summary (totalUsages, filesCount), distribution by path, and limited usages (default: 10). Use filePath/component filters to drill down.
Inputs: hookName (required), projectPath (required), limit, exclude, +3 more.
Analyze what triggers a component to re-render: props, state, context, hooks. Includes memoization status and optimization suggestions. Helps understand re-render causes without reading component internals.
Inputs: filePath (required), projectPath (required), componentName (required), includeParentAnalysis.
List all JSX components in a file with their locations, props, and children info.
Inputs: filePath (required).
Trace a prop through the component hierarchy. Direction "up" finds where the value comes from, "down" finds where it propagates to children. Uses import graph for cross-file tracing.
Inputs: propName (required), direction (required), startFile (required), projectPath (required), +3 more.
Find all locations that update a state variable. Returns setter calls with context (handler, useEffect, inline), trigger events, and whether updates are async/conditional. Helps understand state flow without reading entire files.
Inputs: filePath (required), stateName (required), projectPath (required), limit, +1 more.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 10 tools
Most tools have clearly distinct purposes (state tracing, component usages, hook deps, imports, etc.). A minor overlap exists between analyze_file and list_components, as both can return component information, but the descriptions clarify the difference between broad file analysis and focused component listing.
All tool names follow a consistent verb_noun pattern with snake_case (trace_, find_, analyze_, list_, clear_). The verbs vary appropriately by action, and naming is predictable across the set.
With 10 tools, the set is well-scoped for a React/TSX analysis server. Each tool covers a distinct aspect of code analysis, and the count feels neither sparse nor bloated.
The surface covers major analysis needs: state updates, component/hook usage, hook dependencies, imports, render triggers, prop flow, and file-level component listing. Minor gaps exist, such as no dedicated context provider analysis or type-level queries, but agents can work around these with existing tools.
Deterministic memory & code intelligence MCP for 15 IDEs (100% LongMemEval in 12.9ms, 0 LLM tokens).
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
Code intelligence for coding agents: semantic, AST, graph, and full-text search. 279+ languages.
Shared memory MCP server for Claude Code, Codex, Gemini CLI and Cursor. Cited, editable.
