pai-zero 0.10.0 → 0.10.2

package/dist/bin/pai.js

@@ -511,16 +511,26 @@ async function interactiveInterview(analysis, _cwd, projectName) {
   }]);
   if (mcpDev) {
     console.log("");
+    const hasSupabase = extraTools.includes("supabase");
+    const typeChoices = [
+      { name: `Tools \uC11C\uBC84 (\uAC1C\uC778\uC6A9)    ${colors.dim("\u2500  AI\uAC00 \uD638\uCD9C\uD560 \uAE30\uB2A5 \uC81C\uACF5")}`, value: "tools" }
+    ];
+    if (hasSupabase) {
+      typeChoices.push({
+        name: `Tools \uC11C\uBC84 (\uACF5\uAC1C \uBC30\uD3EC) ${colors.dim("\u2500  API \uD0A4 + \uAD00\uB9AC\uD654\uBA74 + \uC0AC\uC6A9\uB7C9 \uCD94\uC801")}`,
+        value: "tools-public"
+      });
+    }
+    typeChoices.push(
+      { name: `Resources \uC11C\uBC84         ${colors.dim("\u2500  AI\uAC00 \uC77D\uC744 \uCEE8\uD14D\uC2A4\uD2B8 \uC81C\uACF5")}`, value: "resources" },
+      { name: `Prompts \uC11C\uBC84           ${colors.dim("\u2500  \uC7AC\uC0AC\uC6A9 \uD504\uB86C\uD504\uD2B8 \uD15C\uD50C\uB9BF")}`, value: "prompts" },
+      { name: `All-in-one             ${colors.dim("\u2500  \uBAA8\uB450 \uD3EC\uD568")}`, value: "all" }
+    );
     const { mcpType } = await inquirer.prompt([{
       type: "list",
       name: "mcpType",
       message: "MCP \uC11C\uBC84 \uC720\uD615:",
-      choices: [
-        { name: `Tools \uC11C\uBC84       ${colors.dim("\u2500  AI\uAC00 \uD638\uCD9C\uD560 \uAE30\uB2A5 \uC81C\uACF5")}`, value: "tools" },
-        { name: `Resources \uC11C\uBC84   ${colors.dim("\u2500  AI\uAC00 \uC77D\uC744 \uCEE8\uD14D\uC2A4\uD2B8 \uC81C\uACF5")}`, value: "resources" },
-        { name: `Prompts \uC11C\uBC84     ${colors.dim("\u2500  \uC7AC\uC0AC\uC6A9 \uD504\uB86C\uD504\uD2B8 \uD15C\uD50C\uB9BF")}`, value: "prompts" },
-        { name: `All-in-one       ${colors.dim("\u2500  \uBAA8\uB450 \uD3EC\uD568")}`, value: "all" }
-      ]
+      choices: typeChoices
     }]);
     const { mcpName } = await inquirer.prompt([{
       type: "input",
@@ -529,7 +539,11 @@ async function interactiveInterview(analysis, _cwd, projectName) {
       default: `${projectName}-mcp`,
       validate: (v) => /^[a-z0-9][a-z0-9-]*$/.test(v.trim()) ? true : "\uC601\uBB38 \uC18C\uBB38\uC790, \uC22B\uC790, \uD558\uC774\uD508(-)\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."
     }]);
-    mcp = { enabled: true, type: mcpType, name: mcpName.trim() };
+    mcp = {
+      enabled: true,
+      type: mcpType,
+      name: mcpName.trim()
+    };
     extraTools.push("mcp");
   }
   step(3, 3, "\uC124\uCE58 \uD655\uC778");
@@ -964,6 +978,7 @@ async function provisionMcp(ctx) {
   await fs4.ensureDir(mcpDir);
   await fs4.ensureDir(join3(mcpDir, "src"));
   await fs4.ensureDir(join3(mcpDir, "tests"));
+  const isPublicDeps = mcp.type === "tools-public";
   const pkgJson = {
     name: mcp.name,
     version: "0.1.0",
@@ -978,7 +993,8 @@ async function provisionMcp(ctx) {
       start: "node dist/index.js"
     },
     dependencies: {
-      "@modelcontextprotocol/sdk": "^1.0.0"
+      "@modelcontextprotocol/sdk": "^1.0.0",
+      ...isPublicDeps ? { "@supabase/supabase-js": "^2.48.0" } : {}
     },
     devDependencies: {
       typescript: "^5.7.0",
@@ -1014,10 +1030,53 @@ async function provisionMcp(ctx) {
   if (!await fs4.pathExists(indexPath)) {
     await fs4.writeFile(indexPath, buildIndexTs(mcp), "utf8");
   }
-  if (mcp.type === "tools" || mcp.type === "all") {
+  const isTools = mcp.type === "tools" || mcp.type === "tools-public" || mcp.type === "all";
+  const isPublic = mcp.type === "tools-public";
+  if (isTools) {
     const toolsPath = join3(mcpDir, "src", "tools.ts");
     if (!await fs4.pathExists(toolsPath)) {
-      await fs4.writeFile(toolsPath, TOOLS_TEMPLATE, "utf8");
+      await fs4.writeFile(toolsPath, isPublic ? TOOLS_PUBLIC_TEMPLATE : TOOLS_TEMPLATE, "utf8");
+    }
+  }
+  if (isPublic) {
+    const authPath = join3(mcpDir, "src", "auth.ts");
+    if (!await fs4.pathExists(authPath)) {
+      await fs4.writeFile(authPath, AUTH_MIDDLEWARE_TEMPLATE, "utf8");
+    }
+    const rateLimitPath = join3(mcpDir, "src", "rate-limit.ts");
+    if (!await fs4.pathExists(rateLimitPath)) {
+      await fs4.writeFile(rateLimitPath, RATE_LIMIT_TEMPLATE, "utf8");
+    }
+    const migDir = join3(ctx.cwd, "supabase", "migrations");
+    await fs4.ensureDir(migDir);
+    const migPath = join3(migDir, "20260101_mcp_keys_and_usage.sql");
+    if (!await fs4.pathExists(migPath)) {
+      await fs4.writeFile(migPath, SUPABASE_MIGRATION, "utf8");
+    }
+    const dashDir = join3(ctx.cwd, "src", "app", "dashboard");
+    await fs4.ensureDir(join3(dashDir, "keys"));
+    await fs4.ensureDir(join3(dashDir, "usage"));
+    const dashLayoutPath = join3(dashDir, "layout.tsx");
+    if (!await fs4.pathExists(dashLayoutPath)) {
+      await fs4.writeFile(dashLayoutPath, DASHBOARD_LAYOUT, "utf8");
+    }
+    const dashPagePath = join3(dashDir, "page.tsx");
+    if (!await fs4.pathExists(dashPagePath)) {
+      await fs4.writeFile(dashPagePath, DASHBOARD_PAGE, "utf8");
+    }
+    const keysPagePath = join3(dashDir, "keys", "page.tsx");
+    if (!await fs4.pathExists(keysPagePath)) {
+      await fs4.writeFile(keysPagePath, KEYS_PAGE, "utf8");
+    }
+    const usagePagePath = join3(dashDir, "usage", "page.tsx");
+    if (!await fs4.pathExists(usagePagePath)) {
+      await fs4.writeFile(usagePagePath, USAGE_PAGE, "utf8");
+    }
+    const apiKeysDir = join3(ctx.cwd, "src", "app", "api", "keys");
+    await fs4.ensureDir(apiKeysDir);
+    const keysRoutePath = join3(apiKeysDir, "route.ts");
+    if (!await fs4.pathExists(keysRoutePath)) {
+      await fs4.writeFile(keysRoutePath, KEYS_API_ROUTE, "utf8");
     }
   }
   if (mcp.type === "resources" || mcp.type === "all") {
@@ -1040,6 +1099,17 @@ async function provisionMcp(ctx) {
   if (!await fs4.pathExists(readmePath)) {
     await fs4.writeFile(readmePath, buildReadme(mcp), "utf8");
   }
+  const openspecPath = join3(ctx.cwd, "docs", "openspec.md");
+  if (await fs4.pathExists(openspecPath)) {
+    const existing = await fs4.readFile(openspecPath, "utf8");
+    if (!existing.includes("## MCP \uC11C\uBC84")) {
+      const section2 = buildOpenSpecMcpSection(mcp);
+      await fs4.appendFile(openspecPath, `
+
+${section2}
+`);
+    }
+  }
   const mcpJsonPath = join3(ctx.cwd, ".mcp.json");
   const mcpJson = await fs4.pathExists(mcpJsonPath) ? await fs4.readJson(mcpJsonPath) : { mcpServers: {} };
   mcpJson.mcpServers[mcp.name] = {
@@ -1104,7 +1174,72 @@ main().catch((err) => {
 });
 `;
 }
+function buildOpenSpecMcpSection(mcp) {
+  const isPublic = mcp.type === "tools-public";
+  const hasTools = mcp.type === "tools" || mcp.type === "tools-public" || mcp.type === "all";
+  const hasResources = mcp.type === "resources" || mcp.type === "all";
+  const hasPrompts = mcp.type === "prompts" || mcp.type === "all";
+  const lines = [
+    "## MCP \uC11C\uBC84 (\uC790\uB3D9 \uC0DD\uC131\uB428)",
+    "",
+    "\uC774 \uD504\uB85C\uC81D\uD2B8\uB294 MCP(Model Context Protocol) \uC11C\uBC84\uB97C \uD3EC\uD568\uD569\uB2C8\uB2E4.",
+    "`/pai design` \uC2E4\uD589 \uC2DC \uC544\uB798 \uD45C\uB97C \uC2EC\uCE35 \uC778\uD130\uBDF0\uB85C \uCC44\uC6B0\uC138\uC694.",
+    "",
+    `- **\uC774\uB984**: ${mcp.name}`,
+    `- **\uD0C0\uC785**: ${mcp.type}`
+  ];
+  if (isPublic) {
+    lines.push(
+      "- **\uC778\uD504\uB77C**: Supabase (api_keys, usage_logs)",
+      "- **\uB808\uC774\uD2B8 \uB9AC\uBC0B**: 100\uD68C/\uC2DC\uAC04 (\uAE30\uBCF8\uAC12)",
+      "- **\uAD00\uB9AC \uD654\uBA74**: `/dashboard/keys`, `/dashboard/usage`"
+    );
+  }
+  lines.push("", "### MCP \uB3C4\uAD6C / \uB9AC\uC18C\uC2A4 / \uD504\uB86C\uD504\uD2B8 \uC124\uACC4");
+  if (hasTools) {
+    lines.push(
+      "",
+      "#### Tools (AI\uAC00 \uD638\uCD9C\uD560 \uAE30\uB2A5)",
+      "",
+      "| \uB3C4\uAD6C \uC774\uB984 | \uC124\uBA85 | \uC785\uB825 \uD30C\uB77C\uBBF8\uD130 | \uCD9C\uB825 \uD615\uC2DD | \uB0B4\uBD80 \uB85C\uC9C1 |",
+      "|----------|------|-------------|----------|----------|",
+      "| TODO | TODO | TODO | TODO | TODO |"
+    );
+  }
+  if (hasResources) {
+    lines.push(
+      "",
+      "#### Resources (AI\uAC00 \uC77D\uC744 \uCEE8\uD14D\uC2A4\uD2B8)",
+      "",
+      "| URI | \uC774\uB984 | \uC124\uBA85 | MIME \uD0C0\uC785 |",
+      "|-----|------|------|----------|",
+      "| TODO | TODO | TODO | TODO |"
+    );
+  }
+  if (hasPrompts) {
+    lines.push(
+      "",
+      "#### Prompts (\uC7AC\uC0AC\uC6A9 \uD504\uB86C\uD504\uD2B8 \uD15C\uD50C\uB9BF)",
+      "",
+      "| \uC774\uB984 | \uC124\uBA85 | \uC778\uC790 |",
+      "|------|------|------|",
+      "| TODO | TODO | TODO |"
+    );
+  }
+  if (isPublic) {
+    lines.push(
+      "",
+      "### \uACF5\uAC1C \uBC30\uD3EC \uC124\uC815",
+      "",
+      "- **\uB808\uC774\uD2B8 \uB9AC\uBC0B**: TODO (\uAE30\uBCF8 100\uD68C/\uC2DC\uAC04)",
+      "- **\uC694\uAE08\uC81C**: \uBB34\uB8CC (Stripe \uC81C\uC678)",
+      "- **API \uD0A4 \uC815\uCC45**: \uC0AC\uC6A9\uC790\uB2F9 \uBCF5\uC218 \uD0A4 \uD5C8\uC6A9"
+    );
+  }
+  return lines.join("\n");
+}
 function buildReadme(mcp) {
+  const isPublic = mcp.type === "tools-public";
   return `# ${mcp.name} \u2014 MCP Server
 
 PAI\uAC00 \uC0DD\uC131\uD55C MCP(Model Context Protocol) \uC11C\uBC84\uC785\uB2C8\uB2E4.
@@ -1112,9 +1247,35 @@ PAI\uAC00 \uC0DD\uC131\uD55C MCP(Model Context Protocol) \uC11C\uBC84\uC785\uB2C
 ## \uD0C0\uC785: ${mcp.type}
 
 ${mcp.type === "tools" || mcp.type === "all" ? "- **Tools**: AI\uAC00 \uD638\uCD9C\uD560 \uAE30\uB2A5 \uC81C\uACF5 (src/tools.ts)" : ""}
+${isPublic ? "- **Tools (\uACF5\uAC1C \uBC30\uD3EC)**: API \uD0A4 \uAC80\uC99D + \uB808\uC774\uD2B8 \uB9AC\uBC0B + \uC0AC\uC6A9\uB7C9 \uCD94\uC801 (src/tools.ts, auth.ts, rate-limit.ts)" : ""}
 ${mcp.type === "resources" || mcp.type === "all" ? "- **Resources**: AI\uAC00 \uC77D\uC744 \uCEE8\uD14D\uC2A4\uD2B8 \uC81C\uACF5 (src/resources.ts)" : ""}
 ${mcp.type === "prompts" || mcp.type === "all" ? "- **Prompts**: \uC7AC\uC0AC\uC6A9 \uD504\uB86C\uD504\uD2B8 \uD15C\uD50C\uB9BF (src/prompts.ts)" : ""}
 
+${isPublic ? `
+## \uACF5\uAC1C \uBC30\uD3EC \uC124\uC815
+
+1. **Supabase \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uC2E4\uD589**
+   \\\`\\\`\\\`bash
+   supabase db push
+   \\\`\\\`\\\`
+   (\\\`supabase/migrations/\\\` \uCC38\uACE0)
+
+2. **\uD658\uACBD \uBCC0\uC218 \uC124\uC815 (.env.local)**
+   \\\`\\\`\\\`
+   NEXT_PUBLIC_SUPABASE_URL=...
+   NEXT_PUBLIC_SUPABASE_ANON_KEY=...
+   SUPABASE_SERVICE_ROLE_KEY=...
+   \\\`\\\`\\\`
+
+3. **\uB300\uC2DC\uBCF4\uB4DC \uC811\uC18D**
+   \\\`\\\`\\\`bash
+   npm run dev
+   # \u2192 http://localhost:3000/dashboard
+   \\\`\\\`\\\`
+   - API \uD0A4 \uBC1C\uAE09 \uBC0F \uAD00\uB9AC
+   - \uC0AC\uC6A9\uB7C9 \uD655\uC778
+` : ""}
+
 ## \uAC1C\uBC1C
 
 \`\`\`bash
@@ -1147,10 +1308,368 @@ claude mcp add ${mcp.name} -- node ./mcp-server/dist/index.js
 - [SDK \uBB38\uC11C](https://github.com/modelcontextprotocol/sdk)
 `;
 }
-var TOOLS_TEMPLATE, RESOURCES_TEMPLATE, PROMPTS_TEMPLATE, TEST_TEMPLATE;
+var TOOLS_PUBLIC_TEMPLATE, AUTH_MIDDLEWARE_TEMPLATE, RATE_LIMIT_TEMPLATE, SUPABASE_MIGRATION, DASHBOARD_LAYOUT, DASHBOARD_PAGE, KEYS_PAGE, USAGE_PAGE, KEYS_API_ROUTE, TOOLS_TEMPLATE, RESOURCES_TEMPLATE, PROMPTS_TEMPLATE, TEST_TEMPLATE;
 var init_mcp = __esm({
   "src/stages/environment/provisioners/mcp.ts"() {
     "use strict";
+    TOOLS_PUBLIC_TEMPLATE = `import type { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import {
+  CallToolRequestSchema,
+  ListToolsRequestSchema,
+} from '@modelcontextprotocol/sdk/types.js';
+import { verifyApiKey } from './auth.js';
+import { checkRateLimit, logUsage } from './rate-limit.js';
+
+export function registerTools(server: Server): void {
+  server.setRequestHandler(ListToolsRequestSchema, async () => ({
+    tools: [
+      {
+        name: 'hello',
+        description: '\uC778\uC99D\uB41C \uB3C4\uAD6C \uD638\uCD9C \u2014 API \uD0A4 \uD544\uC694',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            apiKey: { type: 'string', description: 'API \uD0A4' },
+            name: { type: 'string', description: '\uC778\uC0AC\uD560 \uB300\uC0C1' },
+          },
+          required: ['apiKey', 'name'],
+        },
+      },
+    ],
+  }));
+
+  server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    const { apiKey, ...params } = (args as { apiKey?: string; [k: string]: unknown }) ?? {};
+
+    if (!apiKey) throw new Error('API key required');
+    const user = await verifyApiKey(apiKey);
+    if (!user) throw new Error('Invalid API key');
+
+    const allowed = await checkRateLimit(user.id);
+    if (!allowed) throw new Error('Rate limit exceeded');
+
+    if (name === 'hello') {
+      const target = (params as { name?: string })?.name ?? 'world';
+      const result = { content: [{ type: 'text' as const, text: \`Hello, \${target}!\` }] };
+      await logUsage(user.id, name);
+      return result;
+    }
+
+    throw new Error(\`Unknown tool: \${name}\`);
+  });
+}
+`;
+    AUTH_MIDDLEWARE_TEMPLATE = `import { createClient } from '@supabase/supabase-js';
+
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL ?? '',
+  process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+);
+
+export interface AuthUser {
+  id: string;
+  email: string;
+}
+
+/**
+ * API \uD0A4 \uAC80\uC99D \u2014 Supabase api_keys \uD14C\uC774\uBE14\uC5D0\uC11C \uC870\uD68C
+ */
+export async function verifyApiKey(apiKey: string): Promise<AuthUser | null> {
+  const { data, error } = await supabase
+    .from('api_keys')
+    .select('user_id, revoked_at, users(id, email)')
+    .eq('key_hash', await hashKey(apiKey))
+    .single();
+
+  if (error || !data || data.revoked_at) return null;
+
+  // \uB9C8\uC9C0\uB9C9 \uC0AC\uC6A9 \uC2DC\uAC04 \uC5C5\uB370\uC774\uD2B8
+  await supabase
+    .from('api_keys')
+    .update({ last_used_at: new Date().toISOString() })
+    .eq('key_hash', await hashKey(apiKey));
+
+  const users = (data as unknown as { users: { id: string; email: string } }).users;
+  return { id: users.id, email: users.email };
+}
+
+async function hashKey(key: string): Promise<string> {
+  const crypto = await import('node:crypto');
+  return crypto.createHash('sha256').update(key).digest('hex');
+}
+
+export async function generateApiKey(): Promise<{ key: string; hash: string }> {
+  const crypto = await import('node:crypto');
+  const key = \`mcp_\${crypto.randomBytes(32).toString('hex')}\`;
+  const hash = crypto.createHash('sha256').update(key).digest('hex');
+  return { key, hash };
+}
+`;
+    RATE_LIMIT_TEMPLATE = `import { createClient } from '@supabase/supabase-js';
+
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL ?? '',
+  process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+);
+
+const RATE_LIMIT_PER_HOUR = 100;
+
+/**
+ * Rate limit \uCCB4\uD06C \u2014 \uCD5C\uADFC 1\uC2DC\uAC04 \uB0B4 \uD638\uCD9C \uC218 \uD655\uC778
+ */
+export async function checkRateLimit(userId: string): Promise<boolean> {
+  const oneHourAgo = new Date(Date.now() - 60 * 60 * 1000).toISOString();
+  const { count } = await supabase
+    .from('usage_logs')
+    .select('*', { count: 'exact', head: true })
+    .eq('user_id', userId)
+    .gte('created_at', oneHourAgo);
+
+  return (count ?? 0) < RATE_LIMIT_PER_HOUR;
+}
+
+/**
+ * \uC0AC\uC6A9\uB7C9 \uAE30\uB85D \u2014 usage_logs \uD14C\uC774\uBE14\uC5D0 \uC800\uC7A5
+ */
+export async function logUsage(userId: string, toolName: string): Promise<void> {
+  await supabase.from('usage_logs').insert({
+    user_id: userId,
+    tool_name: toolName,
+    created_at: new Date().toISOString(),
+  });
+}
+`;
+    SUPABASE_MIGRATION = `-- MCP Tools \uACF5\uAC1C \uBC30\uD3EC \u2014 API \uD0A4 \uAD00\uB9AC + \uC0AC\uC6A9\uB7C9 \uCD94\uC801
+-- Generated by PAI
+
+-- \uC0AC\uC6A9\uC790 \uD14C\uC774\uBE14 (Supabase Auth\uC640 \uC5F0\uB3D9)
+create table if not exists public.users (
+  id uuid primary key references auth.users(id) on delete cascade,
+  email text not null unique,
+  created_at timestamptz default now()
+);
+
+-- API \uD0A4 \uD14C\uC774\uBE14
+create table if not exists public.api_keys (
+  id uuid primary key default gen_random_uuid(),
+  user_id uuid not null references public.users(id) on delete cascade,
+  key_hash text not null unique,
+  name text not null,
+  created_at timestamptz default now(),
+  last_used_at timestamptz,
+  revoked_at timestamptz
+);
+
+create index if not exists api_keys_user_id_idx on public.api_keys(user_id);
+create index if not exists api_keys_key_hash_idx on public.api_keys(key_hash);
+
+-- \uC0AC\uC6A9\uB7C9 \uB85C\uADF8 \uD14C\uC774\uBE14
+create table if not exists public.usage_logs (
+  id bigserial primary key,
+  user_id uuid not null references public.users(id) on delete cascade,
+  tool_name text not null,
+  created_at timestamptz default now()
+);
+
+create index if not exists usage_logs_user_id_idx on public.usage_logs(user_id);
+create index if not exists usage_logs_created_at_idx on public.usage_logs(created_at);
+
+-- RLS (Row Level Security)
+alter table public.users enable row level security;
+alter table public.api_keys enable row level security;
+alter table public.usage_logs enable row level security;
+
+create policy "Users can view own data" on public.users
+  for select using (auth.uid() = id);
+
+create policy "Users can manage own api keys" on public.api_keys
+  for all using (auth.uid() = user_id);
+
+create policy "Users can view own usage" on public.usage_logs
+  for select using (auth.uid() = user_id);
+`;
+    DASHBOARD_LAYOUT = `import Link from 'next/link';
+import type { ReactNode } from 'react';
+
+export default function DashboardLayout({ children }: { children: ReactNode }) {
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh' }}>
+      <aside style={{ width: 240, borderRight: '1px solid #eee', padding: 24 }}>
+        <h2 style={{ fontSize: 18, marginBottom: 16 }}>MCP \uB300\uC2DC\uBCF4\uB4DC</h2>
+        <nav>
+          <Link href="/dashboard" style={{ display: 'block', padding: '8px 0' }}>\uAC1C\uC694</Link>
+          <Link href="/dashboard/keys" style={{ display: 'block', padding: '8px 0' }}>API \uD0A4</Link>
+          <Link href="/dashboard/usage" style={{ display: 'block', padding: '8px 0' }}>\uC0AC\uC6A9\uB7C9</Link>
+        </nav>
+      </aside>
+      <main style={{ flex: 1, padding: 24 }}>{children}</main>
+    </div>
+  );
+}
+`;
+    DASHBOARD_PAGE = `export default function DashboardPage() {
+  return (
+    <div>
+      <h1>MCP \uB300\uC2DC\uBCF4\uB4DC</h1>
+      <p>API \uD0A4\uB97C \uBC1C\uAE09\uD558\uACE0 \uC0AC\uC6A9\uB7C9\uC744 \uAD00\uB9AC\uD558\uC138\uC694.</p>
+      <ul>
+        <li><a href="/dashboard/keys">API \uD0A4 \uBC1C\uAE09</a></li>
+        <li><a href="/dashboard/usage">\uC0AC\uC6A9\uB7C9 \uD655\uC778</a></li>
+      </ul>
+    </div>
+  );
+}
+`;
+    KEYS_PAGE = `'use client';
+import { useEffect, useState } from 'react';
+
+interface ApiKey {
+  id: string;
+  name: string;
+  created_at: string;
+  last_used_at?: string;
+}
+
+export default function KeysPage() {
+  const [keys, setKeys] = useState<ApiKey[]>([]);
+  const [newKeyName, setNewKeyName] = useState('');
+  const [newKey, setNewKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/keys').then(r => r.json()).then(setKeys);
+  }, []);
+
+  async function create() {
+    const res = await fetch('/api/keys', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: newKeyName }),
+    });
+    const data = await res.json();
+    setNewKey(data.key);
+    setKeys([...keys, data.apiKey]);
+    setNewKeyName('');
+  }
+
+  async function revoke(id: string) {
+    await fetch(\`/api/keys/\${id}\`, { method: 'DELETE' });
+    setKeys(keys.filter(k => k.id !== id));
+  }
+
+  return (
+    <div>
+      <h1>API \uD0A4 \uAD00\uB9AC</h1>
+      <div style={{ marginBottom: 24 }}>
+        <input
+          placeholder="\uD0A4 \uC774\uB984"
+          value={newKeyName}
+          onChange={e => setNewKeyName(e.target.value)}
+        />
+        <button onClick={create}>\uC0C8 \uD0A4 \uBC1C\uAE09</button>
+      </div>
+      {newKey && (
+        <div style={{ padding: 16, background: '#fffbe6', marginBottom: 24 }}>
+          <strong>\uC0C8 API \uD0A4 (\uD55C \uBC88\uB9CC \uD45C\uC2DC):</strong>
+          <pre>{newKey}</pre>
+        </div>
+      )}
+      <table style={{ width: '100%' }}>
+        <thead>
+          <tr><th>\uC774\uB984</th><th>\uC0DD\uC131\uC77C</th><th>\uB9C8\uC9C0\uB9C9 \uC0AC\uC6A9</th><th></th></tr>
+        </thead>
+        <tbody>
+          {keys.map(k => (
+            <tr key={k.id}>
+              <td>{k.name}</td>
+              <td>{new Date(k.created_at).toLocaleDateString()}</td>
+              <td>{k.last_used_at ? new Date(k.last_used_at).toLocaleString() : '\u2014'}</td>
+              <td><button onClick={() => revoke(k.id)}>\uC0AD\uC81C</button></td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+`;
+    USAGE_PAGE = `'use client';
+import { useEffect, useState } from 'react';
+
+interface UsageLog {
+  tool_name: string;
+  count: number;
+}
+
+export default function UsagePage() {
+  const [usage, setUsage] = useState<UsageLog[]>([]);
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    fetch('/api/usage').then(r => r.json()).then(data => {
+      setUsage(data.byTool ?? []);
+      setTotal(data.total ?? 0);
+    });
+  }, []);
+
+  return (
+    <div>
+      <h1>\uC0AC\uC6A9\uB7C9</h1>
+      <p>\uCD5C\uADFC 30\uC77C \uCD1D \uD638\uCD9C: <strong>{total}</strong></p>
+      <table style={{ width: '100%' }}>
+        <thead>
+          <tr><th>\uB3C4\uAD6C</th><th>\uD638\uCD9C \uC218</th></tr>
+        </thead>
+        <tbody>
+          {usage.map(u => (
+            <tr key={u.tool_name}>
+              <td>{u.tool_name}</td>
+              <td>{u.count}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+`;
+    KEYS_API_ROUTE = `import { NextResponse } from 'next/server';
+import { createClient } from '@supabase/supabase-js';
+import crypto from 'node:crypto';
+
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL ?? '',
+  process.env.SUPABASE_SERVICE_ROLE_KEY ?? '',
+);
+
+export async function GET() {
+  // TODO: \uD604\uC7AC \uB85C\uADF8\uC778 \uC0AC\uC6A9\uC790\uC758 \uD0A4\uB9CC \uC870\uD68C (auth \uBBF8\uB4E4\uC6E8\uC5B4 \uC5F0\uB3D9 \uD544\uC694)
+  const { data, error } = await supabase
+    .from('api_keys')
+    .select('id, name, created_at, last_used_at')
+    .is('revoked_at', null);
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+  return NextResponse.json(data);
+}
+
+export async function POST(request: Request) {
+  const { name } = await request.json();
+  const key = \`mcp_\${crypto.randomBytes(32).toString('hex')}\`;
+  const key_hash = crypto.createHash('sha256').update(key).digest('hex');
+
+  // TODO: \uD604\uC7AC \uB85C\uADF8\uC778 \uC0AC\uC6A9\uC790 ID \uC5F0\uB3D9
+  const user_id = 'TODO-REPLACE-WITH-AUTH-USER-ID';
+
+  const { data, error } = await supabase
+    .from('api_keys')
+    .insert({ user_id, name, key_hash })
+    .select('id, name, created_at')
+    .single();
+  if (error) return NextResponse.json({ error: error.message }, { status: 500 });
+
+  return NextResponse.json({ apiKey: data, key });
+}
+`;
     TOOLS_TEMPLATE = `import type { Server } from '@modelcontextprotocol/sdk/server/index.js';
 import {
   CallToolRequestSchema,
@@ -1917,6 +2436,37 @@ AskUserQuestion \uB3C4\uAD6C\uB85C \uC2EC\uCE35 \uC778\uD130\uBDF0\uB97C \uC9C4\
 - \uAE30\uC220 \uC2A4\uD0DD (Stack)
 - API \uC5D4\uB4DC\uD3EC\uC778\uD2B8
 
+## Phase 2.5: MCP \uC11C\uBC84 \uC124\uACC4 (MCP \uD504\uB85C\uC81D\uD2B8\uB9CC)
+
+\\\`.pai/config.json\\\`\uC758 \\\`mcp.enabled\\\`\uAC00 true\uC774\uBA74 \uC774 Phase\uB97C \uC218\uD589\uD558\uC138\uC694:
+
+1. \\\`docs/openspec.md\\\`\uC758 "## MCP \uC11C\uBC84" \uC139\uC158\uC744 \uCC3E\uC544 \uD604\uC7AC \uC815\uC758\uB41C \uB3C4\uAD6C/\uB9AC\uC18C\uC2A4/\uD504\uB86C\uD504\uD2B8 \uBAA9\uB85D \uD655\uC778
+2. TODO\uB85C \uCC44\uC6CC\uC9C4 \uD56D\uBAA9\uC774 \uC788\uC73C\uBA74 AskUserQuestion\uC73C\uB85C \uC2EC\uCE35 \uC778\uD130\uBDF0:
+
+   **Tools \uC11C\uBC84 (tools / tools-public / all)**:
+   - "\uC774 MCP \uC11C\uBC84\uC5D0\uC11C \uC81C\uACF5\uD560 \uB3C4\uAD6C \uC774\uB984\uACFC \uAE30\uB2A5\uC740?"
+   - "\uAC01 \uB3C4\uAD6C\uC758 \uC785\uB825 \uD30C\uB77C\uBBF8\uD130(JSON Schema)\uB294?"
+   - "\uCD9C\uB825 \uD615\uC2DD(text/json/image)\uC740?"
+   - "\uB0B4\uBD80 \uB85C\uC9C1\uC740 \uC5B4\uB514\uC5D0 \uAD6C\uD604? (src/lib/ \uB610\uB294 \uC678\uBD80 API \uD638\uCD9C?)"
+
+   **Resources \uC11C\uBC84 (resources / all)**:
+   - "AI\uC5D0\uAC8C \uC81C\uACF5\uD560 \uCEE8\uD14D\uC2A4\uD2B8\uB294 \uBB34\uC5C7\uC778\uAC00\uC694?"
+   - "\uAC01 \uB9AC\uC18C\uC2A4\uC758 URI \uC2A4\uD0A4\uB9C8(\uC608: \\\`wiki://pages/\\\`)\uB294?"
+   - "MIME \uD0C0\uC785(text/plain, application/json)\uC740?"
+
+   **Prompts \uC11C\uBC84 (prompts / all)**:
+   - "\uC7AC\uC0AC\uC6A9 \uD504\uB86C\uD504\uD2B8 \uC774\uB984\uACFC \uC6A9\uB3C4\uB294?"
+   - "\uAC01 \uD504\uB86C\uD504\uD2B8\uC5D0 \uD544\uC694\uD55C \uC778\uC790\uB294?"
+
+3. \uB2F5\uBCC0\uC744 \uC885\uD569\uD558\uC5EC \\\`openspec.md\\\`\uC758 MCP \uC139\uC158 \uD14C\uC774\uBE14\uC744 \uCC44\uC6C1\uB2C8\uB2E4.
+
+4. **\uACF5\uAC1C \uBC30\uD3EC(tools-public)**\uC778 \uACBD\uC6B0 \uCD94\uAC00 \uC9C8\uBB38:
+   - "\uC2DC\uAC04\uB2F9 \uB808\uC774\uD2B8 \uB9AC\uBC0B\uC744 \uBCC0\uACBD\uD560\uAE4C\uC694? (\uAE30\uBCF8 100\uD68C/\uC2DC\uAC04)"
+   - "\uAC01 \uB3C4\uAD6C\uBCC4 \uBE44\uC6A9\uC774 \uB2E4\uB974\uAC8C \uC124\uACC4\uB418\uB098\uC694?"
+   - "\uB300\uC2DC\uBCF4\uB4DC\uC5D0\uC11C \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uD45C\uC2DC\uD560 \uBB34\uB8CC \uD55C\uB3C4\uB294?"
+
+5. MCP \uC11C\uBC84\uC758 \\\`src/tools.ts\\\`, \\\`src/resources.ts\\\` \uB4F1\uC5D0 \uC124\uACC4\uB41C \uB3C4\uAD6C\uB97C \uAD6C\uD604\uD558\uB3C4\uB85D \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uC548\uB0B4\uD558\uC138\uC694.
+
 ## Phase 3: \uAE30\uC220 \uC81C\uC57D + \uD558\uB124\uC2A4 \uC5D4\uC9C0\uB2C8\uC5B4\uB9C1
 
 **\uBAA9\uD45C**: AI \uC5D0\uC774\uC804\uD2B8\uAC00 \uC548\uC804\uD558\uAC8C \uC791\uC5C5\uD560 \uC218 \uC788\uB294 \uD658\uACBD \uD655\uC778
@@ -2510,6 +3060,7 @@ var init_environment = __esm({
           await withSpinner("\uC124\uC815 \uC800\uC7A5 \uC911...", async () => {
             const config = createDefaultConfig(interview.projectName, interview.mode);
             config.plugins = pluginKeys;
+            if (interview.mcp) config.mcp = interview.mcp;
             await saveConfig(input.cwd, config);
             await sleep(300);
           });