JSX — 151 Operations for AI Agents

This page is the canonical reference an AI coding agent uses to refactor, query, and analyze JSX code through the act MCP server. 151 operations available: 77 refactor, 18 query, 42 analysis, 14 verification. Each operation is callable from Claude Code, Cursor, Codex, OpenCode, or any MCP-compatible agent host. Click any operation for a stable anchor link suitable for citation.

Worked JSX examples

act101 edits JSX using the element and expression structure the tree-sitter grammar exposes, so an edit targets a specific JSX element, attribute, or hook call rather than a raw line offset. It can add a default value for a prop in a component's destructured parameter list, so the prop no longer renders as undefined when the caller omits it. It can expand a {...props} spread on a JSX element into the explicit attributes the spread object defines, reading each member from the object literal in the same file. And when the file already imports its hooks (react or preact/hooks), it can wrap a computed expression in useMemo(() => expr, deps), caching the result between renders until one of its dependencies changes; with no such import it refuses rather than emit a hook call the file cannot resolve. Each example below is the verbatim output of the command shown, run against the file shown.

Add a default value for a prop

Alert.jsx destructures variant and message from its props, with no default for variant.

$ act refactor-lang add_default_prop --file Alert.jsx --params '{"component_name":"Alert","prop_name":"variant","default_value":"'"'"'info'"'"'","line":1,"column":10,"symbol":"Alert"}'

Before

function Alert({ variant, message }) {
  return <div className={`alert-${variant}`}>{message}</div>;
}

After

function Alert({ variant = 'info', message }) {
  return <div className={`alert-${variant}`}>{message}</div>;
}

variant gains the default 'info' in the destructured parameter list, so Alert still renders a class name when the caller omits variant.

Expand a props spread into explicit attributes

Modal.jsx renders <Modal {...modalProps} />, with modalProps an object literal defined in the same file.

$ act refactor-lang unspread_props --file Modal.jsx --params '{"component_name":"Modal","spread_name":"modalProps","line":2,"column":18,"symbol":"Modal"}'

Before

const modalProps = { title: 'Alert', size: 'lg' };
function App() {
  return <Modal {...modalProps} />;
}

After

const modalProps = { title: 'Alert', size: 'lg' };
function App() {
  return <Modal title={'Alert'} size={'lg'} />;
}

The spread becomes the explicit attributes title={'Alert'} and size={'lg'}, taken from the object literal's members.

Cache an expensive computation with useMemo

Stats.jsx imports useMemo from react and recomputes total from data.reduce(...) on every render, with no memoization.

$ act refactor-lang add_use_memo --file Stats.jsx --params '{"start_line":4,"start_column":17,"dependencies":["data"]}'

Before

import { useMemo } from "react";

function Stats({ data }) {
  const total = data.reduce((sum, item) => sum + item.value, 0);
  return <p>Total: {total}</p>;
}

After

import { useMemo } from "react";

function Stats({ data }) {
  const total = useMemo(() => data.reduce((sum, item) => sum + item.value, 0), [data]);
  return <p>Total: {total}</p>;
}

The reduce expression is wrapped in useMemo(() => ..., [data]), using the useMemo binding the file already imports, so total is only recomputed when data changes.

Query

18 query tools, the same on every supported language. Descriptions live in the shared reference: /docs/query-tools.

callers control_flow data_flow definition diagnostics effect_closure effect_summary fix_auto get_type graph import_organize interface mutations references repo_outline skeleton symbols symbols_batch

Refactor

Analysis

42 analysis tools, the same on every supported language. Descriptions live in the shared reference: /docs/analysis-tools.

analyze_api_diff analyze_chokepoints analyze_clones analyze_clusters analyze_cohesion analyze_conformance analyze_coupling analyze_cycle_risk analyze_cycles analyze_dead_code analyze_depth analyze_entry_points analyze_export analyze_extraction analyze_fan_balance analyze_features analyze_hotspots analyze_impact analyze_inconsistencies analyze_inheritance analyze_interface_bloat analyze_interfaces analyze_layers analyze_orphan_types analyze_patterns analyze_platform_deps analyze_readiness analyze_roles analyze_seams analyze_stability analyze_surface analyze_test_gaps analyze_thickness analyze_type_completeness churn_hotspots co_change_clusters coverage_overlay ownership_map profile_overlay simulate split_module trace_overlay

Verify

14 verify tools, the same on every supported language. Descriptions live in the shared reference: /docs/verification.

bisect_regression gate generate_test_harness scan secret_surface summarize_pr taint_flow unsafe_surface verify_behavioral_equivalence verify_contract_preserved verify_diff_semantics verify_port_parity verify_side_effects verify_test_impact