Atomic State Canvas Viewer CLI

An interactive web application for analyzing and visualizing atomic state relationships. By launching the development tool, it looks for ".asc." files in the directory and automatically populates the atomic graphs in a "Storybook"-like experience.

Installation

npm install @atomic-state-canvas/asc-viewer-cli -D

Configuration

The CLI uses cosmiconfig for configuration. Create one of the following files in your project root:

• .ascrc.json
• .ascrc.js
• .ascrc.yaml
• asc.config.js
• asc.config.ts

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | watchDir | string | "src" | Directory to watch for .asc. files | | port | number | 1296 | Port to run the viewer server on | | extensions | string[] | [".asc.js", ".asc.ts"] | File extensions to watch | | excludePatternInGlob | string | undefined | Glob pattern to exclude files |

Example Configuration

.ascrc.json:

{
  "watchDir": "./src",
  "port": 3000,
  "extensions": [".asc.ts"],
  "excludePatternInGlob": "*.test.ts"
}

asc.config.js:

module.exports = {
  watchDir: './src/stores',
  port: 1296,
  extensions: ['.asc.ts', '.asc.js'],
  excludePatternInGlob: '**/*.test.*'
};

Usage

Start the Viewer

# Start the viewer (default command)
npx asc-viewer

# With options
npx asc-viewer serve --port 3000 --watch-dir ./src

MCP Server (AI Assistant Integration)

Start the MCP server for AI assistant integration:

npx asc-viewer mcp

Add to your Claude Code config (.mcp.json):

{
  "mcpServers": {
    "atomic-state-canvas": {
      "command": "npx",
      "args": ["@atomic-state-canvas/asc-viewer-cli", "mcp"]
    }
  }
}

Available MCP Tools

| Tool | Description | |------|-------------| | analyze_state | Generate dependency graph from entry file/variable | | find_cycles | Detect cyclic dependencies and self-references | | list_atoms | List all atoms/selectors in a file with dependencies | | launch_viewer | Get command instructions to start the visualization server |

MCP Inspector

Start the MCP inspector for debugging and visualization:

npx @modelcontextprotocol/inspector node dist/asc-viewer-cli/index.js mcp