@vadenai/mcp-server 0.1.0

package/dist/guides/generate-guide.d.ts

@@ -0,0 +1,36 @@
+interface ComponentInfo {
+    name: string;
+    title: string;
+    description: string;
+    categories: string[];
+}
+/**
+ * コンポーネント使用ガイドを生成する
+ *
+ * 出力例:
+ * ```
+ * # Button — Component Usage Guide
+ *
+ * > Displays a button or a component that looks like a button.
+ *
+ * **Category**: form
+ *
+ * ## Structure
+ * Single element component (cva-based).
+ *
+ * ## Variants
+ * - `variant`: default | destructive | outline | secondary | ghost | link
+ * - `size`: default | sm | lg | icon
+ *
+ * ## Accessibility
+ * - Use <button> for actions, <a> for navigation ...
+ *
+ * ## States
+ * hover, focus-visible, active, disabled
+ *
+ * ## Do NOT
+ * - Do not use color props — use variant instead
+ * ```
+ */
+export declare function generateComponentGuide(info: ComponentInfo): string | null;
+export {};

package/dist/guides/generate-guide.js

@@ -0,0 +1,104 @@
+/**
+ * コンポーネントメタデータから LLM 向け使用ガイドを生成する
+ *
+ * design-tokens の generateTokenUsageGuide と同じパターン。
+ * JSON 仕様だけでは不足する「どう使うべきか」を自然言語で補完する。
+ */
+import { componentMetadata } from "./component-metadata.js";
+/**
+ * コンポーネント使用ガイドを生成する
+ *
+ * 出力例:
+ * ```
+ * # Button — Component Usage Guide
+ *
+ * > Displays a button or a component that looks like a button.
+ *
+ * **Category**: form
+ *
+ * ## Structure
+ * Single element component (cva-based).
+ *
+ * ## Variants
+ * - `variant`: default | destructive | outline | secondary | ghost | link
+ * - `size`: default | sm | lg | icon
+ *
+ * ## Accessibility
+ * - Use <button> for actions, <a> for navigation ...
+ *
+ * ## States
+ * hover, focus-visible, active, disabled
+ *
+ * ## Do NOT
+ * - Do not use color props — use variant instead
+ * ```
+ */
+export function generateComponentGuide(info) {
+    if (!Object.hasOwn(componentMetadata, info.name))
+        return null;
+    const meta = componentMetadata[info.name];
+    const lines = [`# ${info.title} — Component Usage Guide`, ""];
+    if (info.description.trim()) {
+        lines.push(`> ${info.description}`, "");
+    }
+    lines.push(`**Categories**: ${info.categories.join(", ") || "unknown"}`, "");
+    // Structure
+    lines.push("## Structure");
+    if (meta.type === "single") {
+        const hasVariants = meta.variants && Object.keys(meta.variants).length > 0;
+        lines.push(hasVariants
+            ? "Single element component (cva-based) with variants."
+            : "Single element component (cva-based), no variants.");
+    }
+    else {
+        lines.push(`Multipart component with ${meta.slots?.length ?? 0} slots.`);
+        if (meta.slots && meta.slots.length > 0) {
+            lines.push(`Slots: \`${meta.slots.join("` | `")}\``);
+        }
+    }
+    lines.push("");
+    // Variants
+    if (meta.variants && Object.keys(meta.variants).length > 0) {
+        lines.push("## Variants");
+        for (const [key, options] of Object.entries(meta.variants)) {
+            lines.push(`- \`${key}\`: ${options.join(" | ")}`);
+        }
+        lines.push("");
+    }
+    // Dependencies
+    if (meta.dependencies && meta.dependencies.length > 0) {
+        lines.push("## Dependencies");
+        lines.push(meta.dependencies.map((d) => `- \`${d}\``).join("\n"));
+        lines.push("");
+    }
+    // Accessibility
+    if (meta.a11y && meta.a11y.length > 0) {
+        lines.push("## Accessibility");
+        for (const rule of meta.a11y) {
+            lines.push(`- ${rule}`);
+        }
+        lines.push("");
+    }
+    // States
+    if (meta.states && meta.states.length > 0) {
+        lines.push("## States");
+        lines.push(`Supported: ${meta.states.join(", ")}`);
+        lines.push("");
+    }
+    // Do NOT
+    if (meta.doNot && meta.doNot.length > 0) {
+        lines.push("## Do NOT");
+        for (const rule of meta.doNot) {
+            lines.push(`- ${rule}`);
+        }
+        lines.push("");
+    }
+    // Important rules (common to all)
+    lines.push("## Important Rules");
+    lines.push("- Always use design token CSS variables — never hardcode colors or spacing.");
+    lines.push("- Follow the variant system — do not create ad-hoc style overrides.");
+    if (meta.type === "multipart") {
+        lines.push("- Use the slot-based structure — each slot has specific styling responsibilities.");
+    }
+    return lines.join("\n");
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+/**
+ * Vaden MCP Server エントリポイント
+ *
+ * 起動方法:
+ *   node dist/index.js --project-id <id> --token <token> [--api-url <url>]
+ *
+ * 環境変数フォールバック:
+ *   VADEN_PROJECT_ID, VADEN_TOKEN, VADEN_API_URL
+ */
+export {};

package/dist/index.js

@@ -0,0 +1,238 @@
+#!/usr/bin/env node
+/**
+ * Vaden MCP Server エントリポイント
+ *
+ * 起動方法:
+ *   node dist/index.js --project-id <id> --token <token> [--api-url <url>]
+ *
+ * 環境変数フォールバック:
+ *   VADEN_PROJECT_ID, VADEN_TOKEN, VADEN_API_URL
+ */
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
+import { VadenMcpApiClient } from "./api-client.js";
+import { handleGetComponentList, handleGetComponentSpec, handleSearchComponents, } from "./tools/components.js";
+import { handleGetConcept, handleGetDesignRationale } from "./tools/concept.js";
+import { handleGetDesignTokens, handleGetThemeCss, } from "./tools/design-tokens.js";
+import { handleGetWireframeDetail, handleGetWireframes, } from "./tools/wireframes.js";
+// --- コマンドライン引数パース ---
+const VERSION = "0.1.0";
+function parseArgs() {
+    const args = process.argv.slice(2);
+    if (args.includes("--help") || args.includes("-h")) {
+        console.log(`vaden-mcp-server v${VERSION}
+
+Usage: vaden-mcp-server [options]
+
+Options:
+  --project-id <id>  Vaden project ID (or VADEN_PROJECT_ID env)
+  --token <jwt>      Registry token (or VADEN_TOKEN env)
+  --api-url <url>    API endpoint (default: https://app.vaden.ai)
+  --help, -h         Show this help message
+  --version, -v      Show version number`);
+        process.exit(0);
+    }
+    if (args.includes("--version") || args.includes("-v")) {
+        console.log(VERSION);
+        process.exit(0);
+    }
+    let projectId = "";
+    let token = "";
+    let apiUrl = "";
+    for (let i = 0; i < args.length; i++) {
+        if (args[i] === "--project-id" && args[i + 1]) {
+            projectId = args[++i] ?? "";
+        }
+        else if (args[i] === "--token" && args[i + 1]) {
+            token = args[++i] ?? "";
+        }
+        else if (args[i] === "--api-url" && args[i + 1]) {
+            apiUrl = args[++i] ?? "";
+        }
+    }
+    // 環境変数フォールバック
+    projectId ||= process.env.VADEN_PROJECT_ID ?? "";
+    token ||= process.env.VADEN_TOKEN ?? "";
+    apiUrl ||= process.env.VADEN_API_URL ?? "https://app.vaden.ai";
+    if (!projectId)
+        throw new Error("--project-id または VADEN_PROJECT_ID が必要です");
+    if (!token)
+        throw new Error("--token または VADEN_TOKEN が必要です");
+    return { projectId, token, apiUrl };
+}
+// --- ツール定義 ---
+const TOOLS = [
+    {
+        name: "get_design_tokens",
+        description: "デザイントークン（色・フォント・spacing・radius 等）を返します",
+        inputSchema: {
+            type: "object",
+            properties: {},
+            required: [],
+        },
+    },
+    {
+        name: "get_theme_css",
+        description: "CSS 変数形式のテーマ（theme.css）を返します",
+        inputSchema: {
+            type: "object",
+            properties: {},
+            required: [],
+        },
+    },
+    {
+        name: "get_component_list",
+        description: "利用可能なコンポーネントの一覧を返します",
+        inputSchema: {
+            type: "object",
+            properties: {},
+            required: [],
+        },
+    },
+    {
+        name: "get_component_spec",
+        description: "指定したコンポーネントの仕様（props・バリアント等）を返します",
+        inputSchema: {
+            type: "object",
+            properties: {
+                component: {
+                    type: "string",
+                    description: "コンポーネント名（例: button, card）",
+                },
+            },
+            required: ["component"],
+        },
+    },
+    {
+        name: "search_components",
+        description: "キーワードでコンポーネントを検索します（日本語対応）。'button', 'form', 'ボタン', 'primary' 等で検索できます",
+        inputSchema: {
+            type: "object",
+            properties: {
+                query: {
+                    type: "string",
+                    description: "検索クエリ（コンポーネント名・カテゴリ・バリアント・日本語キーワード）",
+                },
+            },
+            required: ["query"],
+        },
+    },
+    {
+        name: "get_wireframes",
+        description: "ワイヤーフレームの画面一覧と遷移フローを返します。画面の目的・グループ・ジャーニーステージ・コンポーネント数と、画面間の遷移情報が含まれます",
+        inputSchema: {
+            type: "object",
+            properties: {},
+            required: [],
+        },
+    },
+    {
+        name: "get_wireframe_detail",
+        description: "指定した画面の詳細情報を返します。コンポーネント一覧・UI状態・ビヘイビア・モックデータ・関連画面が含まれます",
+        inputSchema: {
+            type: "object",
+            properties: {
+                screen_id: {
+                    type: "string",
+                    description: "画面ID（get_wireframes で取得した id）",
+                },
+            },
+            required: ["screen_id"],
+        },
+    },
+    {
+        name: "get_concept",
+        description: "コンセプト情報（ブランド人格・ムード・ビジュアルスタイル・ターゲットユーザー・デザイン原則）を返します",
+        inputSchema: {
+            type: "object",
+            properties: {},
+            required: [],
+        },
+    },
+    {
+        name: "get_design_rationale",
+        description: "デザイン哲学・意思決定理由・UX原則・カラー戦略・タイポグラフィ選択の根拠を返します",
+        inputSchema: {
+            type: "object",
+            properties: {},
+            required: [],
+        },
+    },
+];
+// --- メイン ---
+async function main() {
+    const { projectId, token, apiUrl } = parseArgs();
+    const client = new VadenMcpApiClient(apiUrl, token);
+    const server = new Server({ name: "vaden-mcp-server", version: VERSION }, { capabilities: { tools: {} } });
+    // ツール一覧を返す
+    server.setRequestHandler(ListToolsRequestSchema, async () => ({
+        tools: TOOLS.map((t) => ({
+            name: t.name,
+            description: t.description,
+            inputSchema: t.inputSchema,
+        })),
+    }));
+    // ツール呼び出し
+    server.setRequestHandler(CallToolRequestSchema, async (request) => {
+        const { name, arguments: args } = request.params;
+        switch (name) {
+            case "get_design_tokens": {
+                const content = await handleGetDesignTokens(client, projectId);
+                return { content };
+            }
+            case "get_theme_css": {
+                const content = await handleGetThemeCss(client, projectId);
+                return { content };
+            }
+            case "get_component_list": {
+                const content = await handleGetComponentList(client, projectId);
+                return { content };
+            }
+            case "get_component_spec": {
+                const componentName = String(args?.component ?? "");
+                if (!componentName) {
+                    throw new Error("component パラメータが必要です");
+                }
+                const content = await handleGetComponentSpec(client, projectId, componentName);
+                return { content };
+            }
+            case "search_components": {
+                const query = String(args?.query ?? "");
+                if (!query) {
+                    throw new Error("query パラメータが必要です");
+                }
+                const content = await handleSearchComponents(client, projectId, query);
+                return { content };
+            }
+            case "get_wireframes": {
+                const content = await handleGetWireframes(client, projectId);
+                return { content };
+            }
+            case "get_wireframe_detail": {
+                const screenId = String(args?.screen_id ?? "").trim();
+                if (!screenId) {
+                    throw new Error("screen_id パラメータが必要です");
+                }
+                const content = await handleGetWireframeDetail(client, projectId, screenId);
+                return { content };
+            }
+            case "get_concept": {
+                const content = await handleGetConcept(client, projectId);
+                return { content };
+            }
+            case "get_design_rationale": {
+                const content = await handleGetDesignRationale(client, projectId);
+                return { content };
+            }
+            default:
+                throw new Error(`Unknown tool: ${name}`);
+        }
+    });
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+}
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});

package/dist/tools/components.d.ts

@@ -0,0 +1,21 @@
+/**
+ * コンポーネント関連 MCP ツールハンドラー
+ *
+ * レジストリ API: GET /api/projects/{projectId}/design-system/registry
+ * レスポンス形式: shadcn/ui registry.json 互換
+ */
+import type { VadenMcpApiClient } from "../api-client.js";
+export declare function handleGetComponentList(client: VadenMcpApiClient, projectId: string): Promise<{
+    type: "text";
+    text: string;
+}[]>;
+export declare function handleGetComponentSpec(client: VadenMcpApiClient, projectId: string, componentName: string): Promise<{
+    type: "text";
+    text: string;
+}[]>;
+export declare function handleSearchComponents(client: VadenMcpApiClient, projectId: string, query: string): Promise<{
+    type: "text";
+    text: string;
+}[]>;
+/** テスト用にキャッシュをクリアする */
+export declare function clearRegistryCache(): void;

package/dist/tools/components.js

@@ -0,0 +1,234 @@
+import { componentMetadata } from "../guides/component-metadata.js";
+import { generateComponentGuide } from "../guides/generate-guide.js";
+let cache = new WeakMap();
+const CACHE_TTL_MS = 5 * 60 * 1000; // 5分
+function getClientCache(client) {
+    let clientCache = cache.get(client);
+    if (!clientCache) {
+        clientCache = new Map();
+        cache.set(client, clientCache);
+    }
+    return clientCache;
+}
+function getCached(client, projectId) {
+    const entry = getClientCache(client).get(projectId);
+    if (!entry)
+        return null;
+    if (Date.now() > entry.expiresAt) {
+        getClientCache(client).delete(projectId);
+        return null;
+    }
+    return entry.data;
+}
+function setCached(client, projectId, data) {
+    getClientCache(client).set(projectId, {
+        data,
+        expiresAt: Date.now() + CACHE_TTL_MS,
+    });
+}
+let pending = new WeakMap();
+function getClientPending(client) {
+    let clientPending = pending.get(client);
+    if (!clientPending) {
+        clientPending = new Map();
+        pending.set(client, clientPending);
+    }
+    return clientPending;
+}
+async function fetchRegistry(client, projectId) {
+    const cached = getCached(client, projectId);
+    if (cached)
+        return cached;
+    const inFlight = getClientPending(client).get(projectId);
+    if (inFlight)
+        return inFlight;
+    const request = client
+        .get(`/api/projects/${encodeURIComponent(projectId)}/design-system/registry`)
+        .then((data) => {
+        setCached(client, projectId, data);
+        return data;
+    })
+        .finally(() => {
+        getClientPending(client).delete(projectId);
+    });
+    getClientPending(client).set(projectId, request);
+    return request;
+}
+export async function handleGetComponentList(client, projectId) {
+    const registry = await fetchRegistry(client, projectId);
+    const components = registry.items.map((item) => ({
+        name: item.name,
+        title: item.title ?? item.name,
+        description: item.description ?? "",
+        categories: item.categories ?? [],
+    }));
+    return [{ type: "text", text: JSON.stringify({ components }, null, 2) }];
+}
+export async function handleGetComponentSpec(client, projectId, componentName) {
+    const registry = await fetchRegistry(client, projectId);
+    const item = registry.items.find((i) => i.name === componentName);
+    if (!item) {
+        const available = registry.items.map((i) => i.name).join(", ");
+        throw new Error(`Component "${componentName}" not found. Available: ${available}`);
+    }
+    const spec = {
+        name: item.name,
+        type: item.type,
+        title: item.title ?? item.name,
+        description: item.description ?? "",
+        categories: item.categories ?? [],
+        registryDependencies: item.registryDependencies ?? [],
+        dependencies: item.dependencies ?? [],
+        files: item.files ?? [],
+        cssVars: {
+            light: item.cssVars?.light ?? {},
+            dark: item.cssVars?.dark ?? {},
+        },
+        meta: item.meta ?? {},
+    };
+    // ガイドを生成（メタデータがあれば）
+    const guide = generateComponentGuide({
+        name: spec.name,
+        title: spec.title,
+        description: spec.description,
+        categories: spec.categories,
+    });
+    const parts = [];
+    if (guide) {
+        parts.push(guide);
+        parts.push("", "---", "");
+    }
+    parts.push("## Registry Spec (JSON)");
+    parts.push("```json");
+    parts.push(JSON.stringify(spec, null, 2));
+    parts.push("```");
+    return [{ type: "text", text: parts.join("\n") }];
+}
+// --- search_components ---
+const JA_TO_EN = {
+    ボタン: ["button"],
+    入力: ["input", "textarea"],
+    カード: ["card"],
+    テーブル: ["table", "data-table"],
+    ダイアログ: ["dialog", "alert-dialog"],
+    モーダル: ["dialog"],
+    メニュー: ["menubar", "dropdown-menu", "context-menu"],
+    ナビ: ["navigation-menu", "breadcrumb", "sidebar"],
+    フォーム: ["form", "input", "select", "checkbox", "radio-group"],
+    タブ: ["tabs"],
+    アコーディオン: ["accordion", "collapsible"],
+    通知: ["toast", "alert", "sonner"],
+    アバター: ["avatar"],
+    バッジ: ["badge"],
+    スイッチ: ["switch"],
+    スライダー: ["slider"],
+    ツールチップ: ["tooltip"],
+};
+function scoreComponent(item, query) {
+    const q = query.toLowerCase();
+    const name = item.name.toLowerCase();
+    const title = (item.title ?? item.name).toLowerCase();
+    const description = (item.description ?? "").toLowerCase();
+    const categories = (item.categories ?? []).map((c) => c.toLowerCase());
+    const meta = componentMetadata[item.name];
+    const variantValues = [];
+    const variantKeys = [];
+    if (meta?.variants) {
+        for (const [key, vals] of Object.entries(meta.variants)) {
+            variantKeys.push(key.toLowerCase());
+            for (const v of vals) {
+                variantValues.push(v.toLowerCase());
+            }
+        }
+    }
+    const slots = (meta?.slots ?? []).map((s) => s.toLowerCase());
+    const type = meta?.type ?? "";
+    let score = 0;
+    // 完全一致(100) > 前方一致(80) > 部分一致(60) > カテゴリ一致(40)
+    const checkField = (field) => {
+        if (field === q)
+            return 100;
+        if (field.startsWith(q))
+            return 80;
+        if (field.includes(q))
+            return 60;
+        return 0;
+    };
+    score = Math.max(score, checkField(name));
+    score = Math.max(score, checkField(title));
+    if (description.includes(q)) {
+        score = Math.max(score, 60);
+    }
+    for (const cat of categories) {
+        if (cat.includes(q) || q.includes(cat)) {
+            score = Math.max(score, 40);
+        }
+    }
+    for (const vk of variantKeys) {
+        if (vk === q || vk.includes(q))
+            score = Math.max(score, 60);
+    }
+    for (const vv of variantValues) {
+        if (vv === q || vv.includes(q))
+            score = Math.max(score, 60);
+    }
+    for (const slot of slots) {
+        if (slot === q || slot.includes(q))
+            score = Math.max(score, 40);
+    }
+    if (type === q)
+        score = Math.max(score, 60);
+    return score;
+}
+export async function handleSearchComponents(client, projectId, query) {
+    const normalizedQuery = query.trim();
+    if (!normalizedQuery) {
+        return [
+            {
+                type: "text",
+                text: `No components found matching "${query}". Use \`get_component_list\` to see all available components.`,
+            },
+        ];
+    }
+    const registry = await fetchRegistry(client, projectId);
+    // 日本語→英語マッピング展開
+    const queries = [normalizedQuery];
+    for (const [ja, ens] of Object.entries(JA_TO_EN)) {
+        if (normalizedQuery.includes(ja)) {
+            queries.push(...ens);
+        }
+    }
+    const scored = registry.items.map((item) => {
+        const maxScore = Math.max(...queries.map((q) => scoreComponent(item, q)));
+        return {
+            name: item.name,
+            title: item.title ?? item.name,
+            description: item.description ?? "",
+            categories: item.categories ?? [],
+            matchScore: maxScore,
+        };
+    });
+    const matched = scored
+        .filter((c) => c.matchScore > 0)
+        .sort((a, b) => b.matchScore - a.matchScore)
+        .slice(0, 10);
+    if (matched.length === 0) {
+        return [
+            {
+                type: "text",
+                text: `No components found matching "${query}". Use \`get_component_list\` to see all available components.`,
+            },
+        ];
+    }
+    const header = "| Component | Title | Categories | Score |\n|-----------|-------|------------|-------|\n";
+    const rows = matched
+        .map((c) => `| \`${c.name}\` | ${c.title} | ${c.categories.join(", ")} | ${c.matchScore} |`)
+        .join("\n");
+    const text = `## Search Results for "${query}"\n\n${header}${rows}\n\nUse \`get_component_spec\` with a component name for full details.`;
+    return [{ type: "text", text }];
+}
+/** テスト用にキャッシュをクリアする */
+export function clearRegistryCache() {
+    cache = new WeakMap();
+    pending = new WeakMap();
+}

package/dist/tools/concept.d.ts

@@ -0,0 +1,26 @@
+/**
+ * コンセプト関連 MCP ツールハンドラー
+ *
+ * コンセプト API: GET /api/projects/{projectId}/concept
+ */
+import type { VadenMcpApiClient } from "../api-client.js";
+/**
+ * コンセプト情報を返す
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ */
+export declare function handleGetConcept(client: VadenMcpApiClient, projectId: string): Promise<{
+    type: "text";
+    text: string;
+}[]>;
+/**
+ * デザイン意思決定理由を返す
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ */
+export declare function handleGetDesignRationale(client: VadenMcpApiClient, projectId: string): Promise<{
+    type: "text";
+    text: string;
+}[]>;