feat: implement domscribe init interactive wizard

README.md

@@ -100,11 +100,28 @@ Once the agent is done with the edits, it calls `domscribe.annotation.respond` w
 
 ---
 
-## Install
+## Getting Started
+
+```bash
+npx domscribe init
+```
+
+The setup wizard walks you through two steps:
+
+1. **Connect your coding agent** — select your agent (Claude Code, Copilot, Gemini, Kiro, or others) and the wizard installs the plugin automatically.
+2. **Add to your app** — select your framework and bundler, the wizard installs the right package and shows you the config snippet to add.
+
+That's it. Start your dev server and you're ready to go.
+
+> Prefer to set things up manually, or need finer control? See the [manual setup](#manual-setup) instructions below.
+
+---
+
+## Manual Setup
 
 Domscribe has two sides: **app-side** (bundler + framework plugins) and **agent-side** (MCP for your coding agent). Both are needed for the full workflow.
 
-### Step 1 — Add to Your App
+### App-Side — Add to Your Bundler
 
 <details>
 <summary><strong>Next.js (15 + 16)</strong> — <code>npm install -D @domscribe/next</code></summary>
@@ -151,12 +168,34 @@ export default defineConfig({
 
 Webpack plugin:
 
-```ts
+```js
 // webpack.config.js
 const { DomscribeWebpackPlugin } = require('@domscribe/react/webpack');
 
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
 module.exports = {
-  plugins: [new DomscribeWebpackPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        enforce: 'pre',
+        use: [
+          {
+            loader: '@domscribe/transform/webpack-loader',
+            options: { enabled: isDevelopment },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new DomscribeWebpackPlugin({
+      enabled: isDevelopment,
+      overlay: true,
+    }),
+  ],
 };
 ```
 
@@ -180,12 +219,34 @@ export default defineConfig({
 
 Webpack plugin:
 
-```ts
+```js
 // webpack.config.js
 const { DomscribeWebpackPlugin } = require('@domscribe/vue/webpack');
 
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
 module.exports = {
-  plugins: [new DomscribeWebpackPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        enforce: 'pre',
+        use: [
+          {
+            loader: '@domscribe/transform/webpack-loader',
+            options: { enabled: isDevelopment },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new DomscribeWebpackPlugin({
+      enabled: isDevelopment,
+      overlay: true,
+    }),
+  ],
 };
 ```
 
@@ -214,26 +275,46 @@ const {
   DomscribeWebpackPlugin,
 } = require('@domscribe/transform/plugins/webpack');
 
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
 module.exports = {
-  plugins: [new DomscribeWebpackPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        enforce: 'pre',
+        use: [
+          {
+            loader: '@domscribe/transform/webpack-loader',
+            options: { enabled: isDevelopment },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new DomscribeWebpackPlugin({
+      enabled: isDevelopment,
+      overlay: true,
+    }),
+  ],
 };
 ```
 
 </details>
 
 > **Working examples:** See [`packages/domscribe-test-fixtures/fixtures/`](./packages/domscribe-test-fixtures/fixtures/) for complete app setups across every supported framework and bundler combination.
 
-### Step 2 — Connect Your Coding Agent
-
-Domscribe exposes its full tool surface (12 tools + 4 prompts) via MCP. Agent plugins bundle the MCP config and a skill file that teaches the agent how to use the tools effectively.
+### Agent-Side — Connect Your Coding Agent
 
-For agents with first-class plugin support, install the plugin and you're done:
+Domscribe exposes 12 tools and 4 prompts via MCP. Agent plugins bundle the MCP config and a skill file that teaches the agent how to use the tools effectively.
 
 #### Claude Code
 
 ```shell
-/plugin marketplace add patchorbit/domscribe
-/plugin install domscribe@domscribe
+claude plugin marketplace add patchorbit/domscribe
+claude plugin install domscribe@domscribe
 ```
 
 #### GitHub Copilot

packages/domscribe-relay/package.json

@@ -21,11 +21,13 @@
     "domscribe-mcp": "./cli/bin/mcp.js"
   },
   "dependencies": {
+    "@clack/prompts": "^1.1.0",
     "@domscribe/core": "workspace:*",
     "@domscribe/manifest": "workspace:*",
     "@fastify/cors": "^10.0.0",
     "@fastify/websocket": "^11.0.0",
     "@modelcontextprotocol/sdk": "^1.0.0",
+    "cli-highlight": "^2.1.11",
     "commander": "^14.0.2",
     "fastify": "^5.0.0",
     "fastify-type-provider-zod": "^6.1.0",

packages/domscribe-relay/src/cli/commands/init.command.ts

@@ -1,25 +1,68 @@
 import { Command } from 'commander';
 
-/**
- * Init command options
- */
+import {
+  runInitWizard,
+  AGENT_IDS,
+  FRAMEWORK_IDS,
+  PACKAGE_MANAGER_IDS,
+} from '../init/index.js';
+import type { InitOptions } from '../init/index.js';
+
 interface InitCommandOptions {
   force: boolean;
   dryRun: boolean;
+  agent?: string;
+  framework?: string;
+  pm?: string;
 }
 
 export const InitCommand = new Command('init')
   .description('Initialize Domscribe and configure your coding agent')
   .option('-f, --force', 'Overwrite existing configuration', false)
   .option('--dry-run', 'Show what would be done without making changes', false)
-  .action((options: InitCommandOptions) => {
-    init(options);
-  });
+  .option('--agent <name>', `Coding agent (${AGENT_IDS.join(', ')})`)
+  .option(
+    '--framework <name>',
+    `Framework + bundler (${FRAMEWORK_IDS.join(', ')})`,
+  )
+  .option('--pm <name>', `Package manager (${PACKAGE_MANAGER_IDS.join(', ')})`)
+  .action(async (options: InitCommandOptions) => {
+    try {
+      if (options.agent && !AGENT_IDS.includes(options.agent as never)) {
+        console.error(
+          `[domscribe-cli] Invalid agent: ${options.agent}. Valid options: ${AGENT_IDS.join(', ')}`,
+        );
+        process.exit(1);
+      }
 
+      if (
+        options.framework &&
+        !FRAMEWORK_IDS.includes(options.framework as never)
+      ) {
+        console.error(
+          `[domscribe-cli] Invalid framework: ${options.framework}. Valid options: ${FRAMEWORK_IDS.join(', ')}`,
+        );
+        process.exit(1);
+      }
 
-function init(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _options: InitCommandOptions
-): void {
-  console.error('[domscribe-cli] Not implemented');
-}
+      if (options.pm && !PACKAGE_MANAGER_IDS.includes(options.pm as never)) {
+        console.error(
+          `[domscribe-cli] Invalid package manager: ${options.pm}. Valid options: ${PACKAGE_MANAGER_IDS.join(', ')}`,
+        );
+        process.exit(1);
+      }
+
+      const initOptions: InitOptions = {
+        force: options.force,
+        dryRun: options.dryRun,
+        agent: options.agent as InitOptions['agent'],
+        framework: options.framework as InitOptions['framework'],
+        pm: options.pm as InitOptions['pm'],
+      };
+
+      await runInitWizard(initOptions);
+    } catch (error) {
+      console.error(`[domscribe-cli] Init failed: ${error}`);
+      process.exit(1);
+    }
+  });