DEV Community

Yurukusa
Yurukusa

Posted on

I Distributed My VS Code Extension as a GitHub Action, npm Library, and MCP Server — All in One Session

One afternoon I had an idea: what if your pre-PR checklist ran everywhere?

Not just in VS Code. Not just in CI. But also directly in Claude — without leaving the conversation.

Here's how Review Ready went from a VS Code extension to four distribution channels in a single autonomous session.

The Tool: Review Ready

Review Ready scans your git-changed lines before you open a pull request. It catches:

  • Debug statements (console.log, debugger, print(), fmt.Print)
  • TODO/FIXME debt in newly added code
  • Potential secrets (AWS keys, GitHub PATs, OpenAI keys, Slack tokens)
  • Large files accidentally staged (>500KB)
  • Missing test files for changed source files
  • High cyclomatic complexity in JS/TS additions

It only looks at new lines, not the whole codebase. No false positives from legacy code.

Channel 1: VS Code Extension

The original form. Install from the VS Code Marketplace, and you get a sidebar panel with live check results as you edit.

Review Ready: 2 errors, 1 warning
✗ [no-secrets] Possible API key detected  [src/config.ts:8]
✗ [no-debug-statements] console.log(userData)  [src/auth.ts:42]
⚠ [no-todo-in-changes] TODO: validate token expiry  [src/auth.ts:67]
Enter fullscreen mode Exit fullscreen mode

The extension watches your workspace, reruns on save, and integrates with the VS Code Problems panel.

Channel 2: GitHub Action

Some checks are better in CI, where they're enforced consistently across the team.

name: Review Ready
on:
  pull_request:
    branches: [main, master]
jobs:
  review-ready:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: yurukusa/review-ready@v0.1.0
Enter fullscreen mode Exit fullscreen mode

The action uses GitHub's annotation format so issues appear inline in the PR diff — right where the problem is, visible to reviewers.

::error file=src/auth.ts,line=42::[review-ready/no-debug-statements] Debug statement found
::warning file=src/utils.ts,line=15::[review-ready/no-todo-in-changes] Unresolved marker
Enter fullscreen mode Exit fullscreen mode

The bundle is 11KB. Zero external dependencies.

Channel 3: npm Library

For programmatic use — integrate into your own tooling:

npm install review-ready
Enter fullscreen mode Exit fullscreen mode
import { checkDebugStatements, checkSecrets, checkTodos } from 'review-ready';

const results = [
  ...checkDebugStatements({ filename: 'src/auth.ts', addedLines: [...], ... }),
  ...checkSecrets({ filename: 'src/auth.ts', addedLines: [...], ... }),
];
Enter fullscreen mode Exit fullscreen mode

Each check is a pure function: (FileChanges) → CheckResult[]. No side effects, no configuration needed.

Channel 4: MCP Server

This is the one I'm most excited about. With an MCP server, you can ask Claude to run the checks directly:

Add to your .mcp.json or claude_desktop_config.json:

{
  "mcpServers": {
    "review-ready": {
      "command": "npx",
      "args": ["review-ready-mcp"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Then in Claude Code:

You: Check my changes before I push.

Claude: (calls check_changes with the current repo)

Found 2 errors, 1 warning

✗ [no-debug-statements] console.log(userData) [src/auth.ts:42]
✗ [no-secrets] Possible API key detected [src/config.ts:8]
⚠ [no-todo-in-changes] TODO: validate token expiry [src/auth.ts:67]

Two tools are exposed:

  • check_changes: Runs git diff to get changed files, then runs all checks. Pass repo_path.
  • check_content: Checks a code snippet directly — no git needed. Useful for reviewing code Claude just generated.

How the MCP Server Works

The server is built with the official @modelcontextprotocol/sdk and zod for schema validation:

server.registerTool(
  'check_changes',
  {
    title: 'Check Changed Files',
    description: 'Run Review Ready pre-PR checks...',
    inputSchema: {
      repo_path: z.string().describe('Absolute path to git repo'),
      base_sha: z.string().optional(),
      head_sha: z.string().optional(),
      complexity_threshold: z.number().optional(),
    },
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      idempotentHint: true,
    },
  },
  async ({ repo_path, base_sha, head_sha, complexity_threshold = 10 }) => {
    const changedFiles = getChangedFiles(repo_path, base_sha, head_sha);
    const results = runAllChecks(changedFiles, getAllProjectFiles(repo_path), complexity_threshold);

    return {
      content: [{ type: 'text', text: formatResults(results) }],
      structuredContent: { status, filesChecked, errors, warnings, results },
    };
  }
);
Enter fullscreen mode Exit fullscreen mode

Transport is stdio — the MCP client spawns npx review-ready-mcp as a subprocess. Because the process runs locally on the developer's machine, it has full access to the filesystem and git.

This is important: check_changes needs to read the actual git diff. A remote HTTP server couldn't do this. The local stdio model is the right choice for developer tools that need filesystem access.

The Architecture Decision

All four channels share the same core check functions from the review-ready npm package:

vscode-review-ready/   — VS Code extension + CLI
  src/checks.ts       — Pure check functions (shared)
  src/gitDiff.ts      — Git diff parser

review-ready/          — npm library (re-exports checks.ts)

review-ready-mcp/      — MCP server
  src/checks.ts       — Copied (no circular deps in MCP context)
  src/gitDiff.ts      — Copied
  src/index.ts        — MCP server
Enter fullscreen mode Exit fullscreen mode

I copied checks.ts and gitDiff.ts into the MCP package rather than importing from the VS Code extension. The VS Code extension has vscode types as a dev dependency; pulling it into an MCP server would be messy. Self-contained is better.

Result

  • npx review-ready-mcp — 11KB, 3 source files, zero non-MCP dependencies
  • Works with Claude Desktop and Claude Code
  • Responds to natural language: "check my changes", "is my code PR-ready"

GitHub: yurukusa/review-ready-mcp
npm: review-ready-mcp
VS Code Extension: vscode-review-ready
GitHub Action: uses: yurukusa/review-ready@v0.1.0
Live demo — try it in the browser

What would you add to a pre-PR checklist?

Running Claude Code autonomously? Claude Code Ops Kit ($19) — 10 hooks + 6 templates + 3 tools. Production-ready in 15 minutes.

Top comments (0)