TSX — 145 Operations for AI Agents

This page is the canonical reference an AI coding agent uses to refactor, query, and analyze TSX code through the act MCP server. 145 operations available: 71 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 TSX examples

act101 parses TSX with the tree-sitter grammar and edits declarations and expressions as syntax nodes, including the JSX markup mixed into the same file, so a keyword change or a modifier addition lands on the exact node it targets. It can add the readonly modifier to an interface or class property, enforcing an immutability constraint the TypeScript compiler checks, and it can append a satisfies clause to an object literal, checking it against a named interface without widening the literal's own inferred type. It can add a discriminant field to an interface, giving a tagged-union switch a literal to narrow on, and it can replace the final || of a fallback chain with ??, so a present-but-falsy value stops falling through to the default. It can merge a run of const x = obj.x reads in a component into one destructuring declaration, and it can generate an equals() method for a class, comparing field by field. It can also rewrite an Object.assign({}, …) merge as object spread or convert string concatenation to a template literal. Each example below is the verbatim output of the command shown, run against the file shown.

Add a readonly modifier

escapement.tsx declares an Escapement interface with a palletCount property alongside a deadbeat flag. Neither field is marked optional with a ?.

$ act refactor-lang add_readonly --file escapement.tsx --params '{"line":1,"column":1,"symbol":"Escapement","field":"palletCount"}'

Before

interface Escapement { palletCount: number; deadbeat: boolean; }

After

interface Escapement { readonly palletCount: number; deadbeat: boolean; }

readonly is inserted before palletCount: number, so the property can only be set at declaration; deadbeat is untouched.

Add a satisfies clause to an object literal

movement-spec.tsx declares a movement object — including its isochronism flag — and a matching MovementSpec interface, but nothing checks the object against it. movement's beatRate holds the integer value 21600.

$ act refactor-lang add_satisfies --file movement-spec.tsx --params '{"line":1,"column":7,"symbol":"movement","type_name":"MovementSpec"}'

Before

const movement = { beatRate: 21600, isochronism: true };
interface MovementSpec { beatRate: number; isochronism: boolean }

After

const movement = { beatRate: 21600, isochronism: true } satisfies MovementSpec;
interface MovementSpec { beatRate: number; isochronism: boolean }

satisfies MovementSpec is appended after movement's closing brace; the MovementSpec interface and movement's own beatRate and isochronism values are untouched.

Add a discriminant field to an interface

shape.tsx declares interface Shape { radius: number; } — no literal field to narrow a tagged union on.

$ act refactor-lang add_discriminant --file shape.tsx --params '{"target":"Shape","discriminant":"kind","line":1,"column":1,"symbol":"Shape"}'

Before

interface Shape {
    radius: number;
}

After

interface Shape {
    kind: 'Shape';
    radius: number;
}

kind: 'Shape'; is inserted as the interface's first member, giving any Shape value a literal tag a switch can narrow on.

Coalesce a falsy-prone fallback

input.tsx assigns const x = a || b;, but an empty string or 0 in a is present-but-falsy and would fall through to b.

$ act refactor-lang add_nullish_coalescing --file fallback-chain.tsx --params '{"line":1,"column":13}'

Before

const x = a || b;

After

const x = a ?? b;

The single || becomes ??: only null/undefined in a falls through now. A chain like a || b || c is refused rather than half-rewritten — ?? next to an unparenthesized || is a SyntaxError.

Destructure a component's reads of one object

ChronographDial reads subdials, tachymeter and bezel off the module's chronograph constant in three consecutive declarations, then renders them into a <figure>.

$ act refactor-lang use_destructuring --file ChronographDial.tsx --params '{"line":6,"column":3}'

Before

type Chronograph = { subdials: number; tachymeter: boolean; bezel: string };

const chronograph: Chronograph = { subdials: 3, tachymeter: true, bezel: "ceramic" };

export function ChronographDial() {
  const subdials = chronograph.subdials;
  const tachymeter = chronograph.tachymeter;
  const bezel = chronograph.bezel;
  return (
    <figure className="dial">
      <figcaption>{subdials} subdials, {bezel} bezel</figcaption>
      {tachymeter && <span role="note">Tachymeter scale</span>}
    </figure>
  );
}

After

type Chronograph = { subdials: number; tachymeter: boolean; bezel: string };

const chronograph: Chronograph = { subdials: 3, tachymeter: true, bezel: "ceramic" };

export function ChronographDial() {
  const { subdials, tachymeter, bezel } = chronograph;
  return (
    <figure className="dial">
      <figcaption>{subdials} subdials, {bezel} bezel</figcaption>
      {tachymeter && <span role="note">Tachymeter scale</span>}
    </figure>
  );
}

The three declarations become one const { subdials, tachymeter, bezel } = chronograph;, merged because chronograph has a single const binding in the file; the JSX that reads them is unchanged.

Merge style objects with spread syntax

MoonphaseWindow builds its style prop with Object.assign({}, aperture, tint), layering the caller's tint over a round aperture before rendering the moon-phase <svg>.

$ act refactor-lang use_spread_operator --file MoonphaseWindow.tsx --params '{"line":6,"column":17}'

Before

import type { CSSProperties } from "react";

const aperture: CSSProperties = { borderRadius: "50%", overflow: "hidden" };

export function MoonphaseWindow({ lunation, tint }: { lunation: number; tint: CSSProperties }) {
  const style = Object.assign({}, aperture, tint);
  return (
    <div style={style} aria-label={`Day ${lunation} of the lunar cycle`}>
      <svg viewBox="0 0 40 20">
        <circle cx="12" cy="10" r="8" />
      </svg>
    </div>
  );
}

After

import type { CSSProperties } from "react";

const aperture: CSSProperties = { borderRadius: "50%", overflow: "hidden" };

export function MoonphaseWindow({ lunation, tint }: { lunation: number; tint: CSSProperties }) {
  const style = { ...aperture, ...tint };
  return (
    <div style={style} aria-label={`Day ${lunation} of the lunar cycle`}>
      <svg viewBox="0 0 40 20">
        <circle cx="12" cy="10" r="8" />
      </svg>
    </div>
  );
}

The call becomes { ...aperture, ...tint }, keeping the argument order so tint still wins; the props type and the markup are unchanged.

Generate an equals method for a class

user.tsx declares class User { name: string; age: number; } with no equality comparison.

$ act refactor-lang generate_equals --file user.tsx --params '{"symbol":"User","target":"User"}'

Before

class User {
    name: string;
    age: number;
}

After

class User {
    name: string;
    age: number;

  equals(other: User): boolean {
    if (!other) return false;
    if (!(other instanceof User)) return false;
    if (this.name !== other.name) return false;
    if (this.age !== other.age) return false;
    return true;
  }
}

An equals(other: User): boolean method is appended: a null guard, an instanceof guard, then one field comparison per declared field, returning true only when all match.

Replace string concatenation with a template literal

barrel-arbor.tsx's summary constant builds its message with 'Barrel torque ' + torque, string concatenation with a non-string operand. torque is referenced but never declared, and this compact file holds no other statement.

$ act refactor-lang use_template_literals --file barrel-arbor.tsx --params '{"line":1,"column":34}'

Before

const summary = 'Barrel torque ' + torque;

After

const summary = `Barrel torque ${torque}`;

The concatenation becomes a template literal, `Barrel torque ${torque}`, with the same wording.

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