@vadenai/mcp-server 0.1.0

package/dist/tools/concept.js

@@ -0,0 +1,179 @@
+// --- ガイド生成 ---
+/**
+ * コンセプト用 LLM ガイドを生成する
+ */
+function generateConceptGuide(data) {
+    const lines = [];
+    lines.push(`# Concept: ${data.serviceName}`);
+    lines.push("");
+    lines.push(`**Project**: ${data.projectName}`);
+    lines.push(`**Domain**: ${data.businessDomain}`);
+    lines.push("");
+    lines.push("## Brand Identity");
+    lines.push("");
+    lines.push(`**Personality**: ${data.brandPersonality.join(", ")}`);
+    lines.push("");
+    lines.push("### Target Users");
+    for (const user of data.targetUsers) {
+        lines.push(`- ${user}`);
+    }
+    lines.push("");
+    if (data.visualStyle) {
+        lines.push("## Visual Direction");
+        lines.push("");
+        lines.push(`**Aesthetic**: ${data.visualStyle.aesthetic}`);
+        lines.push(`**Mood**: ${data.visualStyle.mood}`);
+        lines.push(`**Era**: ${data.visualStyle.era}`);
+        lines.push("");
+        lines.push("### Inspiration");
+        for (const item of data.visualStyle.inspiration) {
+            lines.push(`- ${item}`);
+        }
+        lines.push("");
+    }
+    if (data.targetAudience) {
+        lines.push("## Target Audience");
+        lines.push("");
+        lines.push(`**Demographics**: ${data.targetAudience.demographics}`);
+        lines.push(`**Psychographics**: ${data.targetAudience.psychographics}`);
+        lines.push("");
+        lines.push("### Pain Points");
+        for (const point of data.targetAudience.painPoints) {
+            lines.push(`- ${point}`);
+        }
+        lines.push("");
+        lines.push("### Aspirations");
+        for (const aspiration of data.targetAudience.aspirations) {
+            lines.push(`- ${aspiration}`);
+        }
+        lines.push("");
+    }
+    lines.push("## Design Principles");
+    lines.push("");
+    for (const principle of data.designPrinciples) {
+        lines.push(`- ${principle}`);
+    }
+    lines.push("");
+    lines.push("## Key Features");
+    lines.push("");
+    for (const feature of data.keyFeatures) {
+        lines.push(`- ${feature}`);
+    }
+    lines.push("");
+    lines.push("## User Journeys");
+    lines.push("");
+    for (const journey of data.userJourneys) {
+        lines.push(`- ${journey}`);
+    }
+    lines.push("");
+    lines.push("> Use `get_design_rationale` to understand the reasoning behind design decisions.");
+    return lines.join("\n");
+}
+/**
+ * デザイン意思決定理由用 LLM ガイドを生成する
+ */
+function generateDesignRationaleGuide(data) {
+    const lines = [];
+    lines.push(`# Design Rationale: ${data.serviceName}`);
+    lines.push("");
+    lines.push(`**Project**: ${data.projectName}`);
+    lines.push("");
+    const da = data.designAnalysis;
+    if (!da ||
+        (!da.philosophy &&
+            !da.colorStrategyBase &&
+            !da.typographyChoice &&
+            (!da.interfaceApproach || da.interfaceApproach.length === 0))) {
+        // 最低限のガイド（ヘッダー + Goals のみ）
+        lines.push("## Goals");
+        lines.push("");
+        for (const goal of data.mainGoals) {
+            lines.push(`- ${goal}`);
+        }
+        lines.push("");
+        return lines.join("\n");
+    }
+    lines.push("## Philosophy");
+    lines.push("");
+    lines.push(da.philosophy);
+    lines.push("");
+    lines.push("## Interface Approach");
+    lines.push("");
+    for (const approach of da.interfaceApproach) {
+        lines.push(`- ${approach}`);
+    }
+    lines.push("");
+    lines.push("## Color Strategy");
+    lines.push("");
+    lines.push(`**Base**: ${da.colorStrategyBase}`);
+    lines.push(`**Accent Color**: ${da.colorStrategyAccentColor}`);
+    lines.push(`**Accent Meaning**: ${da.colorStrategyAccentMeaning}`);
+    lines.push("");
+    lines.push("## Typography");
+    lines.push("");
+    lines.push(`**Choice**: ${da.typographyChoice}`);
+    lines.push(`**Rationale**: ${da.typographyRationale}`);
+    lines.push("");
+    lines.push("## UX Principles");
+    lines.push("");
+    for (const principle of da.uxPrinciples) {
+        lines.push(`- ${principle}`);
+    }
+    lines.push("");
+    lines.push("## Success Metrics");
+    lines.push("");
+    for (const metric of data.successMetrics) {
+        lines.push(`- ${metric}`);
+    }
+    lines.push("");
+    lines.push("## Goals");
+    lines.push("");
+    for (const goal of data.mainGoals) {
+        lines.push(`- ${goal}`);
+    }
+    lines.push("");
+    return lines.join("\n");
+}
+// --- ツールハンドラー ---
+/**
+ * コンセプト情報を返す
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ */
+export async function handleGetConcept(client, projectId) {
+    const data = await client.get(`/api/projects/${encodeURIComponent(projectId)}/concept`);
+    const guide = generateConceptGuide(data);
+    const parts = [
+        guide,
+        "",
+        "---",
+        "",
+        "## Raw Concept (JSON)",
+        "```json",
+        JSON.stringify(data, null, 2),
+        "```",
+    ];
+    return [{ type: "text", text: parts.join("\n") }];
+}
+/**
+ * デザイン意思決定理由を返す
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ */
+export async function handleGetDesignRationale(client, projectId) {
+    const data = await client.get(`/api/projects/${encodeURIComponent(projectId)}/concept`);
+    const guide = generateDesignRationaleGuide(data);
+    const parts = [
+        guide,
+        "",
+        "---",
+        "",
+        "## Raw Design Rationale (JSON)",
+        "```json",
+        JSON.stringify(data.designAnalysis ?? {}, null, 2),
+        "```",
+    ];
+    return [{ type: "text", text: parts.join("\n") }];
+}

package/dist/tools/design-tokens.d.ts

@@ -0,0 +1,15 @@
+import type { VadenMcpApiClient } from "../api-client.js";
+/**
+ * get_design_tokens ツールハンドラー
+ */
+export declare function handleGetDesignTokens(client: VadenMcpApiClient, projectId: string): Promise<{
+    type: "text";
+    text: string;
+}[]>;
+/**
+ * get_theme_css ツールハンドラー
+ */
+export declare function handleGetThemeCss(client: VadenMcpApiClient, projectId: string): Promise<{
+    type: "text";
+    text: string;
+}[]>;

package/dist/tools/design-tokens.js

@@ -0,0 +1,115 @@
+/**
+ * DesignSystemTokens の構造から LLM 向け使い方ガイドを生成する
+ */
+function generateTokenUsageGuide(tokens) {
+    const lines = ["# Design Token Usage Guide", ""];
+    // カラー
+    if (tokens.colors) {
+        lines.push("## Colors");
+        const mode = tokens.colors.preferredAppearance ?? "light";
+        lines.push(`- Preferred appearance: ${mode}`);
+        const palette = tokens.colors[mode];
+        if (palette?.semantic) {
+            const s = palette.semantic;
+            if (s.primary) {
+                lines.push("- `primary`: Brand color. Use for primary buttons, links, and key interactive elements.");
+            }
+            if (s.secondary) {
+                lines.push("- `secondary`: Supporting color. Use for secondary buttons and accents.");
+            }
+            if (s.destructive) {
+                lines.push("- `destructive`: Error/danger color. Use for delete actions and error states.");
+            }
+            if (s.base) {
+                lines.push("- `background` / `foreground`: Page background and default text color.");
+            }
+        }
+        lines.push("");
+    }
+    // フォント
+    if (tokens.fontFamily) {
+        lines.push("## Typography");
+        if (tokens.fontFamily.heading) {
+            lines.push(`- Heading font: \`${tokens.fontFamily.heading}\` — Use for h1–h6 and display text.`);
+        }
+        if (tokens.fontFamily.body) {
+            lines.push(`- Body font: \`${tokens.fontFamily.body}\` — Use for paragraphs, labels, and UI text.`);
+        }
+        if (tokens.fontFamily.code) {
+            lines.push(`- Code font: \`${tokens.fontFamily.code}\` — Use for code blocks and monospace text.`);
+        }
+        lines.push("");
+    }
+    // Spacing
+    if (tokens.spacing) {
+        lines.push("## Spacing");
+        lines.push(`- Base spacing unit: \`${tokens.spacing}\`. Use multiples of this value for consistent layout gaps and padding.`);
+        lines.push("");
+    }
+    // Radius
+    if (tokens.radius) {
+        lines.push("## Border Radius");
+        lines.push(`- Base radius: \`${tokens.radius}\`. Apply via \`--radius\` CSS variable. Do NOT use hardcoded pixel values.`);
+        lines.push("");
+    }
+    // Shadow
+    if (tokens.shadowColor ||
+        tokens.shadowX != null ||
+        tokens.shadowBlur != null) {
+        lines.push("## Shadow");
+        lines.push("- Shadow color and dimensions are defined by token values. Use the provided shadow tokens rather than custom box-shadow values.");
+        if (tokens.shadowX != null || tokens.shadowY != null) {
+            lines.push(`- Offset: x=${tokens.shadowX ?? "0"}, y=${tokens.shadowY ?? "0"}, blur=${tokens.shadowBlur ?? "0"}, spread=${tokens.shadowSpread ?? "0"}`);
+        }
+        lines.push("");
+    }
+    // Border
+    if (tokens.border) {
+        lines.push("## Border");
+        lines.push("- Border styles are defined by token values. Use border tokens for consistent border styling.");
+        lines.push("");
+    }
+    // Glass / Gradient / Noise (decorative effects)
+    const effects = [];
+    if (tokens.glass)
+        effects.push("glass");
+    if (tokens.gradient)
+        effects.push("gradient");
+    if (tokens.noise)
+        effects.push("noise");
+    if (effects.length > 0) {
+        lines.push("## Decorative Effects");
+        lines.push(`- Available effects: ${effects.join(", ")}. Use the token values — do not create custom implementations.`);
+        lines.push("");
+    }
+    lines.push("## Important Rules");
+    lines.push("- Always use CSS variables (e.g., `var(--primary)`) instead of raw color values.");
+    lines.push("- Do not override token values inline; extend via Tailwind utilities that reference CSS variables.");
+    lines.push("- For dark mode, wrap overrides in the `.dark` class — the theme CSS handles this automatically.");
+    return lines.join("\n");
+}
+/**
+ * get_design_tokens ツールハンドラー
+ */
+export async function handleGetDesignTokens(client, projectId) {
+    const data = await client.get(`/api/projects/${projectId}/design-system/tokens`);
+    const usageGuide = generateTokenUsageGuide(data.tokens);
+    const output = [
+        usageGuide,
+        "",
+        "---",
+        "",
+        "## Raw Tokens (JSON)",
+        "```json",
+        JSON.stringify(data.tokens, null, 2),
+        "```",
+    ].join("\n");
+    return [{ type: "text", text: output }];
+}
+/**
+ * get_theme_css ツールハンドラー
+ */
+export async function handleGetThemeCss(client, projectId) {
+    const data = await client.get(`/api/projects/${projectId}/design-system/theme-css`);
+    return [{ type: "text", text: data.css }];
+}

package/dist/tools/wireframes.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ワイヤーフレーム関連 MCP ツールハンドラー
+ *
+ * ワイヤーフレーム一覧 API: GET /api/projects/{projectId}/wireframe
+ * 画面詳細 API: GET /api/projects/{projectId}/wireframe/{screenId}
+ */
+import type { VadenMcpApiClient } from "../api-client.js";
+/**
+ * ワイヤーフレーム一覧を返す
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ */
+export declare function handleGetWireframes(client: VadenMcpApiClient, projectId: string): Promise<{
+    type: "text";
+    text: string;
+}[]>;
+/**
+ * 特定画面の詳細を返す
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ * @param screenId - 画面ID
+ */
+export declare function handleGetWireframeDetail(client: VadenMcpApiClient, projectId: string, screenId: string): Promise<{
+    type: "text";
+    text: string;
+}[]>;

package/dist/tools/wireframes.js

@@ -0,0 +1,214 @@
+// --- ガイド生成 ---
+/**
+ * ワイヤーフレーム一覧用 LLM ガイドを生成する
+ */
+function generateWireframesGuide(data) {
+    const { screens, transitions, metadata } = data;
+    const lines = [];
+    lines.push("# Wireframe Overview");
+    lines.push("");
+    lines.push(`Total screens: ${metadata.totalScreens}${metadata.generatedAt ? `  (generated: ${metadata.generatedAt})` : ""}`);
+    lines.push("");
+    // Screen Map（画面一覧テーブル）
+    lines.push("## Screen Map");
+    lines.push("");
+    lines.push("| ID | Name | Purpose | Group | Journey Stage | Components |");
+    lines.push("|-----|------|---------|-------|--------------|------------|");
+    for (const screen of screens) {
+        lines.push(`| \`${screen.id}\` | ${screen.name} | ${screen.purpose} | ${screen.group ?? "—"} | ${screen.journeyStage ?? "—"} | ${screen.componentCount} |`);
+    }
+    lines.push("");
+    // Screen Groups（グループ別の画面リスト）
+    const groups = new Map();
+    for (const screen of screens) {
+        const group = screen.group ?? "(ungrouped)";
+        const existing = groups.get(group);
+        if (existing) {
+            existing.push(screen);
+        }
+        else {
+            groups.set(group, [screen]);
+        }
+    }
+    lines.push("## Screen Groups");
+    lines.push("");
+    for (const [group, groupScreens] of groups.entries()) {
+        lines.push(`### ${group}`);
+        for (const s of groupScreens) {
+            lines.push(`- \`${s.id}\` — **${s.name}**: ${s.purpose}`);
+        }
+        lines.push("");
+    }
+    // Navigation Flow（遷移をアスキーアートで表現）
+    lines.push("## Navigation Flow");
+    lines.push("");
+    if (transitions.length === 0) {
+        lines.push("_(no transitions defined)_");
+    }
+    else {
+        // 画面名を素早く引けるマップ
+        const screenNameMap = new Map(screens.map((s) => [s.id, s.name]));
+        for (const t of transitions) {
+            const fromName = screenNameMap.get(t.fromScreenId) ?? t.fromScreenId;
+            const toName = screenNameMap.get(t.toScreenId) ?? t.toScreenId;
+            const action = t.triggerAction ? `[${t.triggerAction}]` : "";
+            const label = t.label ? ` "${t.label}"` : "";
+            lines.push(`${fromName} --${action}${label}--> ${toName}`);
+        }
+    }
+    lines.push("");
+    lines.push("> Use `get_wireframe_detail` with a screen ID to get full component details.");
+    return lines.join("\n");
+}
+/**
+ * 画面詳細用 LLM ガイドを生成する
+ */
+function generateWireframeDetailGuide(screen) {
+    const lines = [];
+    lines.push(`# Screen: ${screen.name}`);
+    lines.push("");
+    lines.push(`**ID**: \`${screen.id}\``);
+    lines.push(`**Purpose**: ${screen.purpose}`);
+    if (screen.layoutPattern) {
+        lines.push(`**Layout Pattern**: ${screen.layoutPattern}`);
+    }
+    if (screen.journeyStage) {
+        lines.push(`**Journey Stage**: ${screen.journeyStage}`);
+    }
+    if (screen.group) {
+        lines.push(`**Group**: ${screen.group}`);
+    }
+    lines.push("");
+    // コンポーネント一覧テーブル
+    lines.push("## Components");
+    lines.push("");
+    if (screen.components.length === 0) {
+        lines.push("_(no components)_");
+    }
+    else {
+        lines.push("| ID | Type | Label | DataKey | Position (x,y) | Size (w×h) |");
+        lines.push("|----|------|-------|---------|----------------|------------|");
+        for (const comp of screen.components) {
+            const pos = comp.x !== undefined && comp.y !== undefined
+                ? `${comp.x},${comp.y}`
+                : "—";
+            const size = comp.width !== undefined && comp.height !== undefined
+                ? `${comp.width}×${comp.height}`
+                : "—";
+            lines.push(`| \`${comp.id}\` | ${comp.type} | ${comp.label} | ${comp.dataKey ?? "—"} | ${pos} | ${size} |`);
+        }
+    }
+    lines.push("");
+    // UI States（状態一覧）
+    if (screen.designSpec?.states && screen.designSpec.states.length > 0) {
+        lines.push("## UI States");
+        lines.push("");
+        for (const state of screen.designSpec.states) {
+            lines.push(`### ${state.name}`);
+            lines.push(`- **Condition**: ${state.condition}`);
+            lines.push(`- **Display**: ${state.display}`);
+            if (state.behavior) {
+                lines.push(`- **Behavior**: ${state.behavior}`);
+            }
+            lines.push("");
+        }
+    }
+    // Behaviors（アクション→結果）
+    if (screen.designSpec?.behaviors && screen.designSpec.behaviors.length > 0) {
+        lines.push("## Behaviors");
+        lines.push("");
+        lines.push("| Action | Result | On Error |");
+        lines.push("|--------|--------|----------|");
+        for (const b of screen.designSpec.behaviors) {
+            lines.push(`| ${b.action} | ${b.result} | ${b.onError ?? "—"} |`);
+        }
+        lines.push("");
+    }
+    // Design Rules
+    if (screen.designSpec?.rules && screen.designSpec.rules.length > 0) {
+        lines.push("## Design Rules");
+        lines.push("");
+        for (const rule of screen.designSpec.rules) {
+            lines.push(`- ${rule}`);
+        }
+        lines.push("");
+    }
+    // 遷移先画面一覧
+    if (screen.relatedScreens.length > 0) {
+        lines.push("## Related Screens");
+        lines.push("");
+        for (const related of screen.relatedScreens) {
+            lines.push(`- \`${related.id}\` — **${related.name}**: ${related.purpose}`);
+        }
+        lines.push("");
+    }
+    // Mock Data の概要
+    if (screen.mockData && Object.keys(screen.mockData).length > 0) {
+        lines.push("## Mock Data Keys");
+        lines.push("");
+        for (const key of Object.keys(screen.mockData)) {
+            const val = screen.mockData[key];
+            const preview = Array.isArray(val)
+                ? `Array(${val.length})`
+                : typeof val === "object" && val !== null
+                    ? `Object(${Object.keys(val).join(", ")})`
+                    : String(val);
+            lines.push(`- \`${key}\`: ${preview}`);
+        }
+        lines.push("");
+    }
+    // Notes
+    if (screen.designSpec?.notes && screen.designSpec.notes.length > 0) {
+        lines.push("## Notes");
+        lines.push("");
+        for (const note of screen.designSpec.notes) {
+            lines.push(`- ${note}`);
+        }
+        lines.push("");
+    }
+    return lines.join("\n");
+}
+// --- ツールハンドラー ---
+/**
+ * ワイヤーフレーム一覧を返す
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ */
+export async function handleGetWireframes(client, projectId) {
+    const data = await client.get(`/api/projects/${encodeURIComponent(projectId)}/wireframe`);
+    const guide = generateWireframesGuide(data);
+    const parts = [
+        guide,
+        "",
+        "---",
+        "",
+        "## Raw Wireframe (JSON)",
+        "```json",
+        JSON.stringify(data, null, 2),
+        "```",
+    ];
+    return [{ type: "text", text: parts.join("\n") }];
+}
+/**
+ * 特定画面の詳細を返す
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ * @param screenId - 画面ID
+ */
+export async function handleGetWireframeDetail(client, projectId, screenId) {
+    const data = await client.get(`/api/projects/${encodeURIComponent(projectId)}/wireframe/${encodeURIComponent(screenId)}`);
+    const guide = generateWireframeDetailGuide(data);
+    const parts = [
+        guide,
+        "",
+        "---",
+        "",
+        "## Raw Screen (JSON)",
+        "```json",
+        JSON.stringify(data, null, 2),
+        "```",
+    ];
+    return [{ type: "text", text: parts.join("\n") }];
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@vadenai/mcp-server",
+  "description": "Vaden MCP Server — Provide design tokens, component specs, and wireframes to coding agents via MCP",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "mcp",
+    "mcp-server",
+    "vaden"
+  ],
+  "homepage": "https://vaden.ai",
+  "license": "MIT",
+  "version": "0.1.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "vaden-mcp-server": "dist/index.js"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "1.26.0"
+  },
+  "devDependencies": {
+    "@supabase/supabase-js": "2.98.0",
+    "jose": "6.1.3",
+    "tsx": "4.19.4",
+    "typescript": "5.9.3",
+    "vitest": "4.0.6"
+  },
+  "scripts": {
+    "build": "tsc",
+    "generate-token": "tsx scripts/generate-dev-token.ts",
+    "postbuild": "node scripts/postbuild.js",
+    "prepack": "npm run build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "author": "ROUTE06, Inc.",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "types": "dist/index.d.ts"
+}