How to Integrate Archify with Cursor, Claude Code, Codex CLI, and OpenCode

Archify integrates with Cursor, Claude Code, Codex CLI, and OpenCode as an agent-aware skill using a single Node.js binary that generates typed JSON specifications and renders interactive HTML diagrams.

Archify is an open-source architecture visualization tool distributed as a universal skill for AI coding assistants. By installing the tt-a1i/archify skill into your preferred agent's global store, you can generate validated, interactive architecture diagrams from natural language prompts.

Installation Commands for Each Agent

Archify uses the same npx installer across all four agents, differing only in the --agent flag value. These commands place the skill into the agent's global skill directory and copy the pre-built HTML renderer.

Cursor

npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

Claude Code

npx -y skills add tt-a1i/archify --skill archify --agent claude-code --global --copy --yes

Codex CLI

npx -y skills add tt-a1i/archify --skill archify --agent codex --global --copy --yes

OpenCode

npx -y skills add tt-a1i/archify --skill archify --agent opencode --global --copy --yes

Temporary Session Installation

For one-off usage without persisting to the global skill store, use the temporary install command:

npx skills use tt-a1i/archify@archify --agent <agent>

Replace <agent> with cursor, claude-code, codex, or opencode. This loads the skill for the current session only and does not modify directories like ~/.agents/skills/ (Codex) or ~/.config/opencode/skills/ (OpenCode).

How the Archify Skill Works

According to the archify/SKILL.md contract, the skill encapsulates a Node.js runtime that follows a four-step workflow. When you ask the agent to "use archify," the binary archify/bin/archify.mjs handles the entire pipeline internally.

The workflow consists of:

1. Generate: Creates a typed JSON IR based on your natural language description
2. Validate: Runs deterministic validators using node bin/archify.mjs validate <type> <candidate>.json --quality showcase --json
3. Deliver: Renders the final HTML with node bin/archify.mjs deliver <type> <candidate>.json <output>.html --quality showcase --json

The generated HTML contains a self-contained viewer runtime with pan, zoom, and theme switching capabilities, requiring no external dependencies. The typed JSON schema is documented in archify/schemas/README.md.

Using Archify After Installation

Once installed in the agent's global skill directory, invoke the skill with a natural language prompt.

Example prompt:

Use archify to draw a high-level runtime architecture of this repository.

The agent automatically executes the three-stage pipeline:

• Generates architecture.json based on the codebase analysis
• Validates the JSON against the schema documented in archify/schemas/README.md
• Outputs archify.html with an interactive diagram

You can refine diagrams through follow-up prompts like "add Redis" or "highlight the authentication path" without regenerating the entire specification. The skill preserves the original JSON source, updating only relevant nodes and edges.

Advanced Configuration Options

The archify/bin/archify.mjs CLI supports additional flags exposed through natural language requests:

• Animation: Enable trace animations with --meta '{"animation":"trace"}'
• Visual Presets: Choose signal-flow, blueprint, or classic styles via --meta '{"visual_preset":"signal-flow"}'
• Preview Mode: Run a live authoring loop with node bin/archify.mjs preview architecture my.json out.html --quality showcase

The viewer UI also supports exporting PNG, JPEG, SVG, WebM, or 1200×630 share cards directly from the browser.

Summary

• Archify installs as a universal skill across Cursor, Claude Code, Codex CLI, and OpenCode using npx -y skills add with agent-specific flags.
• Single binary execution: The archify/bin/archify.mjs file handles generation, validation, and delivery through subcommands (generate, validate, deliver).
• Self-contained output: Generated HTML files include the full viewer runtime; no external servers or dependencies required.
• Temporary installation is available via npx skills use for one-off sessions without modifying global skill stores.

Frequently Asked Questions

What is the difference between global and temporary Archify installation?

Global installation persists the skill in the agent's skill directory (such as ~/.agents/skills/ or ~/.config/opencode/skills/) using the --global flag, making Archify available across all future sessions. Temporary installation using npx skills use loads the skill only for the current conversation without modifying the filesystem.

Where does Archify store the generated architecture diagrams?

The skill returns a local file path (typically ./archify.html) after running the deliver command. The HTML file is self-contained and can be opened manually in any browser or automatically via the agent's --open flag.

Can I customize the visual style of Archify diagrams?

Yes. The deliver command accepts a --meta parameter with visual presets including signal-flow, blueprint, and classic. You can request these styles in natural language (e.g., "use the blueprint style") or pass them directly as JSON flags to the CLI.

Does Archify require internet access after installation?

No. Once installed, the skill operates entirely offline. The Node.js runtime in archify/bin/archify.mjs processes local codebases, validates JSON against local schemas, and generates standalone HTML files with embedded JavaScript viewers.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}