VS Code Extension (TypeScript + esbuild)

Scaffolds a VS Code extension with TypeScript and esbuild bundling. Optionally includes a React-based webview panel that communicates with the extension host via postMessage, and an AI integration layer with Anthropic and OpenAI providers using the shared registry pattern. Uses esbuild for fast builds and supports the standard VS Code extension development workflow.

Name	`vscode-ext`
Version	`0.1.0`
Category	applications
License	Apache-2.0
Persona	engineering
Tags	vscode, extension, typescript, ai, editor
Source	`templates/vscode-ext`

Render it

Three front doors, one catalog. Pick whichever suits the caller.

# CLI
npx @nanohype/sdk render vscode-ext --out ./my-app

# SDK
import { LocalSource, renderTemplate } from "@nanohype/sdk";
const result = await renderTemplate(source, "vscode-ext", variables);

# MCP — from an agent
get_template({ name: "vscode-ext" })

Prerequisites

Tool	Version	Why
`node`	`>=22`	Node.js runtime for building and bundling the extension
`vsce` (optional)	—	VS Code Extension CLI for packaging and publishing

Variables

Required

ProjectName string: Kebab-case project name, used as package name and directory Must be lowercase kebab-case starting with a letter.
ExtensionName string: Human-readable extension name displayed in VS Code
Publisher string: VS Code marketplace publisher ID Must start with a letter and contain only letters, numbers, and hyphens.

Optional

Description string — defaults to A VS Code extension: Short extension description for package.json and README
ActivationEvent string — defaults to onStartupFinished: VS Code activation event trigger
IncludeWebview bool — defaults to true: Include a React-based webview panel
IncludeAi bool — defaults to true: Include AI integration with Anthropic and OpenAI providers

What it produces

25 files. Placeholder names such as __APP_NAME__ are what the renderer substitutes into.

.env.example
.github/workflows/ci.yml
.gitignore
.vscodeignore
biome.json
esbuild.config.js
package.json
README.md
src/__tests__/commands.test.ts
src/__tests__/providers.test.ts
src/ai/client.ts
src/ai/providers/anthropic.ts
src/ai/providers/index.ts
src/ai/providers/openai.ts
src/ai/providers/registry.ts
src/ai/providers/types.ts
src/bootstrap.ts
src/commands/example.ts
src/extension.ts
src/webview/app/App.tsx
src/webview/app/index.html
src/webview/app/index.tsx
src/webview/panel.ts
tsconfig.json
vitest.config.ts

Composes with

Pairs with mcp-server-ts
Pairs with prompt-library
Nests inside monorepo

Composites that use it

VS Code AI Extension — VS Code extension with AI provider integration, MCP tool servers, and versioned prompt management..