Decodie for VSCode

View and create Decodie learning entries directly in your editor.

Features

Sidebar Entry Browser

As you navigate code, the Decodie sidebar automatically shows learning entries associated with the current file. Entries are matched using content-based anchors (function signatures, class declarations) that survive refactoring.

Each entry displays:

• Experience level badge (foundational, intermediate, advanced, ecosystem)
• Code snippet with syntax highlighting
• Collapsible explanation and alternatives considered
• External documentation links
• Reference resolution status

Right-Click Analysis

Highlight code or right-click a file to analyze it with Claude. New Decodie entries are generated and immediately appear in the sidebar.

Gutter Indicators

Lines with associated Decodie entries show subtle gutter markers. Hover to see the entry title.

Tabbed Sidebar

• File — entries for the currently active file
• All — every entry in the project, with filters for level, type, and topic
• Entry — full detail view when you click an entry

Getting Started

1. Install the extension

Install from the VSCode Marketplace or search "Decodie" in the Extensions panel.

2. Set up API credentials

The extension uses Claude to analyze code. You need one of the following:

Option A: API key (pay-per-token from console.anthropic.com)

Create a .decodie/.env file in your project root:

CLAUDE_API_KEY=sk-ant-api03-...

Option B: OAuth token (uses your Claude Pro/Max subscription)

This requires Claude Code to be installed. Run claude setup-token to generate a long-lived token, then add it to .decodie/.env:

CLAUDE_CODE_OAUTH_TOKEN=sk-ant-oat01-...

Option C: VSCode settings (API key only)

Set decodie.apiKey in your VSCode settings as a fallback if you prefer not to use a .env file.

3. Analyze your first file

1. Open a project in VSCode
2. Right-click any source file in the explorer and select Decodie: Analyze File
3. The sidebar opens with a spinner while Claude analyzes the code
4. When complete, entries appear in the sidebar — click any entry to see the full detail

That's it! The extension creates a .decodie/ directory in your project with structured JSON entries. You can analyze more files, or highlight specific code and use Decodie: Analyze Selection.

4. Browse entries as you code

Once you have entries, the sidebar automatically updates as you navigate between files. The File tab shows entries for whatever file is active, and the All tab shows everything in the project.

Gutter dots appear on lines that have associated entries — hover to see the entry title, or click the Decodie icon in the Activity Bar to open the sidebar.

Going further

Generate entries with Claude Code

For richer documentation, install the Decodie Claude Code skill. It provides two commands:

• /decodie:observe — activate during a coding session, and entries are written in real-time as Claude writes code
• /decodie:analyze — analyze an entire directory or project retroactively

Install the skill with:

npx @owenbush/decodie-ui install-skill

Entries generated by the skill appear automatically in the VSCode sidebar.

Browse entries in the web UI

For a full-featured browsing experience with lessons, progress tracking, and Q&A, run the Decodie UI:

npx @owenbush/decodie-ui serve

DDEV users

If you use DDEV, the Decodie DDEV add-on installs everything in one step:

ddev add-on get owenbush/decodie-ddev
ddev restart && ddev decodie

Configuration

The Decodie Ecosystem

License

MIT