tsx-query

Semantic React/TSX analysis MCP server for AI coding assistants.

Save 70-90% tokens compared to grep + file reads.

Why tsx-query?

LLMs waste tokens on grep + file reads. tsx-query uses semantic AST analysis to return precisely what you need.

Related MCP server: Component Library MCP

Installation

npm install -g @paramhq/tsx-query

Quick Start

For Claude Code

claude mcp add tsx-query -- npx -y @paramhq/tsx-query

Or manually add to your MCP config (~/.claude/mcp.json or project .mcp.json):

{
  "mcpServers": {
    "tsx-query": {
      "command": "npx",
      "args": ["-y", "@paramhq/tsx-query"]
    }
  }
}

For Other MCP Clients

{
  "command": "npx",
  "args": ["-y", "@paramhq/tsx-query"]
}

From Source

git clone https://github.com/paramhq/tsx-query.git
cd tsx-query
npm install
npm run build
npm run mcp

High-Value Tools

1. find_component_usages

Find 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.

2. trace_prop_flow

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).

3. trace_state_updates

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.

4. find_render_triggers

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.

5. analyze_imports

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.

Additional Tools

Roadmap

• trace_event_handler - Trace callback chains from event to side effects

• trace_context_usage - Map Context providers to consumers

Why Use Over Grep?

Built With

• ts-morph - TypeScript AST manipulation

• Model Context Protocol SDK - MCP server implementation

• Zod - Schema validation

Author

Sukhdev - @paramhq

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT - see LICENSE