# How to Integrate Archify with Cursor, Claude Code, Codex CLI, and OpenCode > Integrate Archify with Cursor, Claude Code, Codex CLI, and OpenCode. Use a single Node.js binary to generate typed JSON specs and interactive HTML diagrams for agent-aware skills. - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: how-to-guide - Published: 2026-08-08 --- **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 ```bash npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes ``` ### Claude Code ```bash npx -y skills add tt-a1i/archify --skill archify --agent claude-code --global --copy --yes ``` ### Codex CLI ```bash npx -y skills add tt-a1i/archify --skill archify --agent codex --global --copy --yes ``` ### OpenCode ```bash 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: ```bash npx skills use tt-a1i/archify@archify --agent ``` Replace `` 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`](https://github.com/tt-a1i/archify/blob/main/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 .json --quality showcase --json` 3. **Deliver**: Renders the final HTML with `node bin/archify.mjs deliver .json .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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/architecture.json) based on the codebase analysis - Validates the JSON against the schema documented in [`archify/schemas/README.md`](https://github.com/tt-a1i/archify/blob/main/archify/schemas/README.md) - Outputs [`archify.html`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/./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.