Turn React/TS IntoAI-Ready ContextTurn React/TS Into AI-Ready Context

LogicStamp Context scans your React/TypeScript codebase and generates structured context bundles optimized for AI consumption. It analyzes component structure, extracts logic signatures (props, state, events), builds dependency graphs, and packages everything into machine-readable JSON with built-in token optimization. No configuration needed - just run `stamp context` and get instant AI-ready context bundles.

Pasting raw code wastes tokens on boilerplate, imports, and redundant formatting. LogicStamp Context extracts only what AI needs - component contracts, dependency relationships, and logic signatures - saving up to 65% tokens compared to full source code. Plus, it provides structured context that AI can actually parse and understand, not just raw text.

Yes! LogicStamp Context is completely free and open-source. Install it globally with npm i -g logicstamp-context and use it. The CLI (v0.3.7) is production-ready and includes context generation, drift detection, validation, token optimization, security scanning, and style metadata extraction. MCP (Model Context Protocol) integration is also available for free, providing real-time context analysis in Cursor, Claude Desktop, and Claude CLI. Install with `npm install -g logicstamp-mcp` and configure your MCP client (see "How do I set up MCP integration?" below for details). All features are available at no cost.

Currently supports React and TypeScript projects (including Next.js), plus Vue 3 TypeScript/TSX files. Requires Node.js >= 18.18.0 (Node 20+ recommended). MCP integration is available (v0.1.4) for Cursor, Claude Desktop, and Claude CLI. Works with any React/TypeScript codebase regardless of styling solution (Tailwind, styled-components, CSS modules, Material UI, ShadCN/UI, Radix UI, Framer Motion, etc.). Note: Vue Single File Components (.vue files) support is planned for a future release.

Quick start: Run `npx logicstamp-context context` (no install needed) or install globally with `npm i -g logicstamp-context`. For first-time setup, run `stamp init` in your project directory (sets up .gitignore patterns and scans for secrets). Next, run `stamp context` to generate multiple `context.json` files (one per folder) plus a `context_main.json` index with AI-ready bundles. Share these files with Claude, ChatGPT, or any AI assistant for instant codebase understanding. Use `stamp context validate` to verify the output, or try the MCP integration for real-time analysis in Cursor, Claude Desktop, or Claude CLI.

MCP (Model Context Protocol) provides real-time context analysis directly in Cursor, Claude Desktop, or Claude CLI. Setup (one-time, global): 1. Install LogicStamp CLI: `npm install -g logicstamp-context` 2. Install MCP server: `npm install -g logicstamp-mcp` 3. Configure your MCP client by adding LogicStamp to your config file: - Cursor: `~/.cursor/mcp.json` (macOS/Linux) or `%USERPROFILE%\.cursor\mcp.json` (Windows) - Claude CLI: `~/.claude.json` (macOS/Linux) or `%USERPROFILE%\.claude.json` (Windows) - Claude Desktop: `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\Claude\claude_desktop_config.json` (Windows)

Add this configuration:

{
  "mcpServers": {
    "logicstamp": {
      "command": "npx",
      "args": ["logicstamp-mcp"]
    }
  }
}

LogicStamp Context offers three code inclusion modes: `none` (contracts only, ~79% savings vs full context), `header` (recommended, ~65% savings vs full context, ~70% vs raw source), and `full` (complete source). The header mode includes just enough context for AI to understand component logic without wasting tokens on implementation details. Additionally, you can use `--format toon` for an alternative output format that uses ~40% fewer tokens than JSON while maintaining the same data structure. Use `stamp context --compare-modes` to see exact savings for your codebase. Token counts are automatically calculated using model-accurate tokenizers (GPT-4 and Claude) when available, or character-based estimation as a fallback.

LogicStamp Context generates per-root bundles (one bundle per page/feature component) rather than individual files per component. Each bundle contains the root component plus its complete dependency graph - all related components together. This design matches how developers work: when you need help with a specific page or feature, share that bundle and the AI has complete context in one self-contained unit.

The `stamp context style` command generates context bundles with visual and layout metadata included. It extracts style information from your components including Tailwind CSS classes, SCSS/CSS modules, inline styles, styled-components/Emotion, framer-motion animations, Material UI, ShadCN/UI, Radix UI, and Styled JSX. This enables AI assistants to understand visual design, suggest visually consistent components, analyze layout patterns, track color palettes, and identify animations. Use it when you need AI to understand the visual aspects of your UI, not just the logic. Note: Style metadata adds more tokens (~52-65% of raw source vs ~30% for header mode), so use `--compare-modes` to see the exact cost impact for your codebase.

Watch mode is planned for v0.4.x (not yet implemented). The MCP (Model Context Protocol) integration provides efficient context updates on-demand, which may be preferable to automatic watch mode. For now, regenerate context with `stamp context` when needed, or use MCP tools for real-time analysis. When implemented, watch mode will automatically regenerate context files when source files change, with incremental updates and debouncing.