DEV Community

Cover image for From Zero to NPM Package: Building Claude React Assistant (CRA) Across 5 Weeks of AI Engineering
Rushi Patel
Rushi Patel

Posted on

From Zero to NPM Package: Building Claude React Assistant (CRA) Across 5 Weeks of AI Engineering

#claude #npm #react #ai

Context switching is a hidden tax in modern frontend development.

Every time you copy component code to a web browser, type a prompt, copy the generated response back, and fix broken imports, you lose your terminal flow state.

To eliminate this friction, I built Claude React Assistant (cra)—a lightweight, interactive CLI tool that brings specialized React refactoring, component analysis, Git PR reviews, and documentation generation directly into your terminal.

In this article, we’ll cover the 5-week development journey, the core architecture, the tech stack powering the tool, real visual workflows, and how to build a model-agnostic AI tool.

📍 Quick Navigation

1. Why Build a Terminal AI Tool? (Busting Common Myths)

Many developers wonder why a CLI tool is necessary when web interfaces like ChatGPT or Claude already exist.

Let's clear up a few common misconceptions:

❌ Myth 1: Web-based AI chat is faster for coding

Reality: Copying files, explaining context, switching between tabs, and manually replacing generated code can take significantly longer than running a command directly on a local file.

❌ Myth 2: AI CLI tools are unsafe and rewrite code silently

Reality: A well-architected CLI can show a visual, colorized diff preview and create automatic .bak backups before touching a single line of your source code.

❌ Myth 3: You need complex setup and dozens of CLI flags

Reality: Interactive menus powered by tools like inquirer can make workflows almost zero-config.

Just type:

cra
Enter fullscreen mode Exit fullscreen mode

…and press Enter.

Key Insight: AI tools shouldn't feel like a side-tab conversation. They should feel like a native developer utility operating directly on local files and Git state.

2. The 5-Week Evolution Journey

Building claude-react-assistant was the result of a step-by-step learning progression across five weeks.

Five Step Workflow

Week 0: Prompt Engineering Fundamentals

It started with understanding how system prompts, constraints, and instructions influence model output.

One of the earliest lessons was simple:

Generic prompts often produce bloated and over-engineered React code.

That pushed me toward more specialized prompts instead of relying on one general-purpose coding assistant.

Week 1: Node.js & Anthropic SDK Integration

The next step was connecting the @anthropic-ai/sdk with TypeScript.

I started with simple scripts that could:

  • Read local .tsx files directly from disk
  • Send the code to Claude through the API
  • Receive and process the generated response

This was the first step toward bringing AI directly into a local development workflow.

Week 2: Modular AI Personas ("Skills")

Instead of relying on one large, monolithic prompt, I split responsibilities into targeted AI personas.

Each persona focused on a specific task:

  • React Analyzer Pro — Finds unnecessary re-renders, prop drilling, and missing callback dependencies.
  • React Refactor Expert — Rewrites components using modern Hooks such as useCallback and useMemo, while improving interfaces.
  • PR Review Analyst — Parses raw git diff output to flag breaking changes and potential risks.
  • Code Documentation Expert — Extracts prop types and generates Markdown documentation tables.

This modular approach made the workflows more focused and easier to extend.

Week 3: Multi-Stage Pipeline Orchestration

The next challenge was orchestration.

I built an execution engine in pipeline/engine.ts to run multiple AI tasks sequentially in a single workflow:

Read File
   ↓
Analyze
   ↓
Refactor
   ↓
Document
   ↓
Calculate Cost
Enter fullscreen mode Exit fullscreen mode

The idea was to move beyond individual AI calls and start thinking about AI workflows as pipelines.

Week 4: Interactive UX, Visual Diffs & Package Publishing

The final stage was turning the underlying functionality into a developer-friendly CLI.

This included:

  • Interactive terminal menus
  • Colorized diff previews using diff
  • Safety backups using .bak files
  • Improved terminal UX
  • Publishing the package to npm

The result was claude-react-assistant v1.2.2.

3. Architecture & How It Works Under the Hood

To keep the system lightweight and maintainable, CRA follows a simple five-step architecture.

Five Step Architecture

Data Flow Explained

1. User Action

You type:

cra
Enter fullscreen mode Exit fullscreen mode

in your terminal.

2. Interactive Selection

CRA asks you to select the workflow you want to run:

  • Analyze
  • Refactor
  • Full Pipeline
  • PR Review

3. Local Ingestion

Node.js reads the target .tsx file or executes git diff using child_process.

4. Persona Dispatch

CRA attaches the relevant specialized system prompt and sends the request through the Anthropic SDK.

5. Safe Rendering

The tool then:

  • Formats the response
  • Previews a colorized diff
  • Creates a .bak snapshot before overwriting files
  • Prints token usage and estimated session cost

4. The Tech Stack Breakdown

Here is the lightweight tech stack powering CRA:

Tool / Package Purpose
Node.js + TypeScript Core runtime and strict type safety across pipelines and CLI options.
@anthropic-ai/sdk Official Anthropic API client for sending structured messages and retrieving token usage metrics.
commander Handles direct command-line arguments, such as cra analyze src/App.tsx.
inquirer Powers interactive terminal prompt menus for zero-config navigation.
diff Generates terminal diff previews before overwriting code.
dotenv Manages local API key configuration.

The overall goal was to keep the stack small while focusing on the developer experience.

5. Core Workflows & Visual Demos

1. Zero-Setup Experience & Main Menu

Type:

cra
Enter fullscreen mode Exit fullscreen mode

to launch the interactive prompt.

If no API key is found, CRA guides you through the initial setup.

CRA Main Menu

? What do you want to do?
❯ 🔍 Analyze Code
  ♻️ Refactor Code
  🚀 Full Pipeline
  🧠 PR Review
Enter fullscreen mode Exit fullscreen mode

2. Safe Refactoring with Interactive Visual Diffs

Before any code is modified on disk, CRA previews the exact additions and deletions.

CRA Advanced Options Demo

🔴 import React from "react";
🟢 import React, { useCallback, useMemo } from "react";

🟢 const handleToggleClick = useCallback(() => {
     if (onToggleActive && !isLoading && !disabled) {
       onToggleActive(!isActive);
     }
   }, [isActive, onToggleActive, isLoading, disabled]);
Enter fullscreen mode Exit fullscreen mode

This gives the developer visibility into exactly what the AI wants to change before the updated code is written.

3. Automated PR Reviews & Output Artifacts

The PR Review workflow reads your current git diff and generates structured output artifacts inside:

outputs/pr-review/
Enter fullscreen mode Exit fullscreen mode

CRA PR Review Demo

The generated files include:

  • pr-summary.md — A concise overview of changes that can be used in pull request descriptions.
  • risks.json — Flagged side effects, breaking changes, and potential missing edge cases.
  • suggestions.md — Concrete recommendations to improve code quality before review.

6. Model-Agnostic Cost Engineering

AI models evolve rapidly. Versions change, pricing changes, and the models available today may not be the ones available tomorrow.

That means a well-designed AI tool should avoid tightly coupling its cost tracking to a specific model version.

CRA extracts token usage metadata directly from the API response:

  • input_tokens
  • output_tokens

It then calculates the session cost programmatically.

// utils/calcCost.ts

export function calculateCostByTokens(
  inputTokens: number,
  outputTokens: number
) {
  const pricing = {
    input: 1 / 1_000_000,
    output: 5 / 1_000_000,
  }

  const totalCost =
    inputTokens * pricing.input +
    outputTokens * pricing.output

  return {
    totalInputTokens: inputTokens,
    totalOutputTokens: outputTokens,
    estimatedCost: `$${totalCost.toFixed(6)}`,
  }
}
Enter fullscreen mode Exit fullscreen mode

After every run, CRA displays the token usage and estimated session cost:

{
  "totalInputTokens": 24656,
  "totalOutputTokens": 3066,
  "estimatedCost": "$0.039986"
}
Enter fullscreen mode Exit fullscreen mode

This kind of visibility helps eliminate surprise API costs and makes usage more transparent.

7. Key Takeaways & What's Next

💡 Key Takeaways

1. Terminal-Native Workflow

Reducing browser context switching helps developers stay focused inside their existing IDE and terminal workflow.

2. Safety First

Colorized diffs and .bak backups reduce the risk and fear of silent AI-driven code changes.

3. Modular AI Personas

Specialized prompts can produce more focused results than relying on one generic prompt for every task.

🗺️ Future Roadmap

A few ideas I want to explore next:

  • AST Pre-parsing — Integrating SWC or Babel to provide structured syntax trees for deeper code understanding.
  • Local LLM Support — Adding fallbacks for offline usage through local runners such as Ollama or DeepSeek.
  • Custom Team Rules (.crarc.json) — Allowing engineering teams to define custom React conventions and style guides.

🚀 Try It Out

You can try Claude React Assistant directly from your terminal:

npx claude-react-assistant
Enter fullscreen mode Exit fullscreen mode

Or install it globally:

npm install -g claude-react-assistant
Enter fullscreen mode Exit fullscreen mode

What developer CLI tools have you built recently? I'd love to hear your thoughts and feedback in the comments below!

Top comments (0)