@vadenai/mcp-server 0.2.1 → 0.3.1

package/dist/api-client.d.ts

@@ -12,4 +12,7 @@ export declare class VadenMcpApiClient {
     private headers;
     private buildUrl;
     get<T>(path: string): Promise<T>;
+    post<T>(path: string, body: unknown): Promise<T>;
+    patch<T>(path: string, body: unknown): Promise<T>;
+    private request;
 }

package/dist/api-client.js

@@ -24,18 +24,28 @@ export class VadenMcpApiClient {
         return new URL(cleanPath, base).toString();
     }
     async get(path) {
+        return this.request("GET", path);
+    }
+    async post(path, body) {
+        return this.request("POST", path, body);
+    }
+    async patch(path, body) {
+        return this.request("PATCH", path, body);
+    }
+    async request(method, path, body) {
         const url = this.buildUrl(path);
         const controller = new AbortController();
         const timeoutId = setTimeout(() => controller.abort(), this.timeoutMs);
         try {
             const response = await fetch(url, {
-                method: "GET",
+                method,
                 headers: this.headers(),
                 signal: controller.signal,
+                ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
             });
             if (!response.ok) {
-                const body = await response.text();
-                throw new Error(`API error (${response.status}): ${body}`);
+                const text = await response.text();
+                throw new Error(`API error (${response.status}): ${text}`);
             }
             return (await response.json());
         }

package/dist/index.js

@@ -13,11 +13,14 @@ 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 { handleGetConcept, handleGetDesignRationale, handleUpdateConcept, } from "./tools/concept.js";
 import { handleGetDesignTokens, handleGetThemeCss, } from "./tools/design-tokens.js";
-import { handleGetWireframeDetail, handleGetWireframes, } from "./tools/wireframes.js";
+import { handleGetWireframeDetail, handleGetWireframes, handlePushWireframes, handleUpdateWireframe, } from "./tools/wireframes.js";
+import { handleUpdateComponentStyle } from "./tools/write-components.js";
+import { handleUpdateDesignTokens } from "./tools/write-tokens.js";
+import { validateArrayAddArgs, validateArrayRemoveArgs, validateFieldUpdateArgs, validatePushWireframesArgs, } from "./validation.js";
 // --- コマンドライン引数パース ---
-const VERSION = "0.2.1";
+const VERSION = "0.3.0";
 function parseArgs() {
     const args = process.argv.slice(2);
     if (args.includes("--help") || args.includes("-h")) {
@@ -159,6 +162,187 @@ const TOOLS = [
             required: [],
         },
     },
+    // --- Write ツール ---
+    {
+        name: "update_design_tokens",
+        description: "デザイントークン（色・spacing・radius等）を部分更新します。指定したフィールドのみ deep merge で上書きされます",
+        inputSchema: {
+            type: "object",
+            properties: {
+                tokens: {
+                    type: "object",
+                    description: "更新するトークン（deep merge）。例: { colors: { light: { semantic: { primary: '#3B82F6' } } } }",
+                },
+            },
+            required: ["tokens"],
+        },
+        annotations: {
+            readOnlyHint: false,
+            destructiveHint: false,
+            idempotentHint: true,
+            openWorldHint: false,
+        },
+    },
+    {
+        name: "update_component_style",
+        description: "指定したコンポーネントのスタイル設定をオーバーライドします。ベーススタイルは保持され、オーバーライドレイヤーとして保存されます",
+        inputSchema: {
+            type: "object",
+            properties: {
+                component: {
+                    type: "string",
+                    description: "コンポーネント名（例: button, card）",
+                },
+                updatedStyleConfig: {
+                    type: "object",
+                    description: "更新するスタイル設定。Single型: { baseStyles, variants }、Multipart型: { slots, variants }",
+                },
+            },
+            required: ["component", "updatedStyleConfig"],
+        },
+        annotations: {
+            readOnlyHint: false,
+            destructiveHint: false,
+            idempotentHint: true,
+            openWorldHint: false,
+        },
+    },
+    {
+        name: "update_concept",
+        description: "コンセプトの特定フィールドをドット区切りパスで更新します。例: serviceName, brandPersonality.0, targetUsers.2",
+        inputSchema: {
+            type: "object",
+            properties: {
+                field_path: {
+                    type: "string",
+                    description: "更新するフィールドのドット区切りパス（例: 'serviceName', 'brandPersonality.0'）",
+                },
+                value: {
+                    oneOf: [
+                        { type: "string" },
+                        { type: "number" },
+                        { type: "boolean" },
+                        { type: "null" },
+                    ],
+                    description: "新しい値（文字列・数値・真偽値・null）",
+                },
+            },
+            required: ["field_path", "value"],
+        },
+        annotations: {
+            readOnlyHint: false,
+            destructiveHint: false,
+            idempotentHint: true,
+            openWorldHint: false,
+        },
+    },
+    {
+        name: "update_wireframe",
+        description: "ワイヤーフレームの特定フィールドをドット区切りパスで更新します。例: screens.0.name, transitions.1.label",
+        inputSchema: {
+            type: "object",
+            properties: {
+                field_path: {
+                    type: "string",
+                    description: "更新するフィールドのドット区切りパス（例: 'screens.0.name'）",
+                },
+                value: {
+                    oneOf: [
+                        { type: "string" },
+                        { type: "number" },
+                        { type: "boolean" },
+                        { type: "null" },
+                    ],
+                    description: "新しい値（文字列・数値・真偽値・null）",
+                },
+            },
+            required: ["field_path", "value"],
+        },
+        annotations: {
+            readOnlyHint: false,
+            destructiveHint: false,
+            idempotentHint: true,
+            openWorldHint: false,
+        },
+    },
+    {
+        name: "add_wireframe_element",
+        description: "ワイヤーフレームの配列に要素を追加します。画面追加（screens）、コンポーネント追加（screens.0.components）、遷移追加（transitions）などに使用",
+        inputSchema: {
+            type: "object",
+            properties: {
+                field_path: {
+                    type: "string",
+                    description: "追加先の配列パス（例: 'screens', 'screens.0.components', 'transitions'）",
+                },
+                value: {
+                    type: "object",
+                    description: "追加する要素。画面: { id, name, purpose, width: 800, components: [], group?, journeyStage? }、コンポーネント: { id, type, label }、遷移: { id, fromScreenId, toScreenId, triggerAction?, label? }",
+                },
+            },
+            required: ["field_path", "value"],
+        },
+        annotations: {
+            readOnlyHint: false,
+            destructiveHint: false,
+            idempotentHint: false,
+            openWorldHint: false,
+        },
+    },
+    {
+        name: "remove_wireframe_element",
+        description: "ワイヤーフレームの配列から要素を削除します。画面削除（screens.2）、コンポーネント削除（screens.0.components.3）、遷移削除（transitions.1）などに使用",
+        inputSchema: {
+            type: "object",
+            properties: {
+                field_path: {
+                    type: "string",
+                    description: "削除する要素のパス（最後のセグメントが配列インデックス。例: 'screens.2', 'screens.0.components.3', 'transitions.1'）",
+                },
+            },
+            required: ["field_path"],
+        },
+        annotations: {
+            readOnlyHint: false,
+            destructiveHint: true,
+            idempotentHint: false,
+            openWorldHint: false,
+        },
+    },
+    {
+        name: "push_wireframes",
+        description: "UXIR（YAML形式）ファイルを一括プッシュしてワイヤーフレームを更新します。既存のワイヤーフレームは置換されます",
+        inputSchema: {
+            type: "object",
+            properties: {
+                files: {
+                    type: "array",
+                    items: {
+                        type: "object",
+                        properties: {
+                            filename: {
+                                type: "string",
+                                description: "ファイル名（.uxir 拡張子必須）",
+                            },
+                            content: {
+                                type: "string",
+                                description: "UXIR YAML コンテンツ",
+                            },
+                        },
+                        required: ["filename", "content"],
+                    },
+                    description: "UXIR ファイル一覧（最大50ファイル、各1MB以下）",
+                },
+            },
+            required: ["files"],
+        },
+        annotations: {
+            readOnlyHint: false,
+            destructiveHint: true,
+            idempotentHint: false,
+            openWorldHint: false,
+        },
+    },
 ];
 // --- メイン ---
 async function main() {
@@ -171,6 +355,7 @@ async function main() {
             name: t.name,
             description: t.description,
             inputSchema: t.inputSchema,
+            ...("annotations" in t ? { annotations: t.annotations } : {}),
         })),
     }));
     // ツール呼び出し
@@ -225,6 +410,53 @@ async function main() {
                 const content = await handleGetDesignRationale(client, projectId);
                 return { content };
             }
+            // --- Write ツール ---
+            case "update_design_tokens": {
+                const tokens = args?.tokens;
+                if (!tokens || typeof tokens !== "object") {
+                    throw new Error("tokens パラメータが必要です（オブジェクト）");
+                }
+                const content = await handleUpdateDesignTokens(client, projectId, tokens);
+                return { content };
+            }
+            case "update_component_style": {
+                const componentName = String(args?.component ?? "");
+                const updatedStyleConfig = args
+                    ?.updatedStyleConfig;
+                if (!componentName) {
+                    throw new Error("component パラメータが必要です");
+                }
+                if (!updatedStyleConfig || typeof updatedStyleConfig !== "object") {
+                    throw new Error("updatedStyleConfig パラメータが必要です（オブジェクト）");
+                }
+                const content = await handleUpdateComponentStyle(client, projectId, componentName, updatedStyleConfig);
+                return { content };
+            }
+            case "update_concept": {
+                const { fieldPath, value } = validateFieldUpdateArgs(args);
+                const content = await handleUpdateConcept(client, projectId, fieldPath, value);
+                return { content };
+            }
+            case "update_wireframe": {
+                const { fieldPath, value } = validateFieldUpdateArgs(args);
+                const content = await handleUpdateWireframe(client, projectId, fieldPath, value);
+                return { content };
+            }
+            case "add_wireframe_element": {
+                const { fieldPath, value } = validateArrayAddArgs(args);
+                const content = await handleUpdateWireframe(client, projectId, fieldPath, value, "add");
+                return { content };
+            }
+            case "remove_wireframe_element": {
+                const { fieldPath } = validateArrayRemoveArgs(args);
+                const content = await handleUpdateWireframe(client, projectId, fieldPath, null, "remove");
+                return { content };
+            }
+            case "push_wireframes": {
+                const validatedFiles = validatePushWireframesArgs(args);
+                const content = await handlePushWireframes(client, projectId, validatedFiles);
+                return { content };
+            }
             default:
                 throw new Error(`Unknown tool: ${name}`);
         }

package/dist/tools/components.js

@@ -1,5 +1,6 @@
 import { componentMetadata } from "../guides/component-metadata.js";
 import { generateComponentGuide } from "../guides/generate-guide.js";
+import { resolveVisualProperties, } from "../utils/tailwind-resolver.js";
 let cache = new WeakMap();
 const CACHE_TTL_MS = 5 * 60 * 1000; // 5分
 function getClientCache(client) {
@@ -307,8 +308,156 @@ function formatStyleSection(data) {
         }
         lines.push("");
     }
+    // --- Resolved Styles ---
+    const resolvedStyleEntries = [];
+    if (type === "single") {
+        const baseStylesValue = data.baseStyles;
+        if (typeof baseStylesValue === "string" && baseStylesValue.trim()) {
+            resolvedStyleEntries.push({
+                label: "baseStyles",
+                props: resolveVisualProperties(baseStylesValue, resolvedColors ?? {}),
+            });
+        }
+    }
+    else if (type === "multipart") {
+        const slotsObj = data.slots;
+        if (slotsObj && typeof slotsObj === "object") {
+            for (const [slotName, classes] of Object.entries(slotsObj)) {
+                if (typeof classes !== "string" || !classes.trim())
+                    continue;
+                resolvedStyleEntries.push({
+                    label: slotName,
+                    props: resolveVisualProperties(classes, resolvedColors ?? {}),
+                });
+            }
+        }
+    }
+    // --- Variant Resolved Styles ---
+    const resolvedVariantEntries = [];
+    const variants = data.variants;
+    if (variants && typeof variants === "object") {
+        for (const [groupName, groupVariants] of Object.entries(variants)) {
+            if (!groupVariants || typeof groupVariants !== "object")
+                continue;
+            for (const [variantName, classes] of Object.entries(groupVariants)) {
+                if (typeof classes !== "string" || !classes.trim())
+                    continue;
+                resolvedVariantEntries.push({
+                    group: groupName,
+                    name: variantName,
+                    props: resolveVisualProperties(classes, resolvedColors ?? {}),
+                });
+            }
+        }
+    }
+    if (resolvedStyleEntries.length > 0 || resolvedVariantEntries.length > 0) {
+        lines.push("## Resolved Styles");
+        lines.push("");
+        lines.push("Visual properties resolved from Style Config classes and design tokens.");
+        lines.push("Use these values for accurate rendering in design tools (Figma, Framer, etc.).");
+        lines.push("");
+        for (const { label, props } of resolvedStyleEntries) {
+            const propLines = formatResolvedProps(props);
+            if (propLines.length > 0) {
+                lines.push(`**${label}**:`);
+                for (const line of propLines) {
+                    lines.push(`- ${line}`);
+                }
+                lines.push("");
+            }
+        }
+        if (resolvedVariantEntries.length > 0) {
+            lines.push("### Variants");
+            lines.push("");
+            let currentGroup = "";
+            for (const { group, name, props } of resolvedVariantEntries) {
+                const propLines = formatResolvedProps(props);
+                if (propLines.length === 0)
+                    continue;
+                if (group !== currentGroup) {
+                    lines.push(`**${group}**:`);
+                    currentGroup = group;
+                }
+                lines.push(`  *${name}*:`);
+                for (const line of propLines) {
+                    lines.push(`  - ${line}`);
+                }
+            }
+            lines.push("");
+        }
+    }
     return lines.join("\n");
 }
+function formatResolvedProps(props) {
+    const result = [];
+    if (props.display)
+        result.push(`display: ${props.display}`);
+    if (props.width)
+        result.push(`width: ${props.width}`);
+    if (props.height)
+        result.push(`height: ${props.height}`);
+    if (props.aspectRatio)
+        result.push(`aspect-ratio: ${props.aspectRatio}`);
+    if (props.overflow)
+        result.push(`overflow: ${props.overflow}`);
+    if (props.borderRadius)
+        result.push(`border-radius: ${props.borderRadius}`);
+    if (props.border) {
+        const style = props.borderStyle ?? (props.border.color ? "solid" : undefined);
+        const parts = [
+            props.border.width,
+            style,
+            props.border.color || undefined,
+        ].filter(Boolean);
+        result.push(`border: ${parts.join(" ")}`);
+    }
+    if (props.backgroundColor)
+        result.push(`background-color: ${props.backgroundColor}`);
+    if (props.color)
+        result.push(`color: ${props.color}`);
+    if (props.fontWeight)
+        result.push(`font-weight: ${props.fontWeight}`);
+    if (props.fontSize)
+        result.push(`font-size: ${props.fontSize}`);
+    if (props.objectFit)
+        result.push(`object-fit: ${props.objectFit}`);
+    if (props.alignItems)
+        result.push(`align-items: ${props.alignItems}`);
+    if (props.justifyContent)
+        result.push(`justify-content: ${props.justifyContent}`);
+    if (props.opacity)
+        result.push(`opacity: ${props.opacity}`);
+    if (props.boxShadow)
+        result.push(`box-shadow: ${props.boxShadow}`);
+    if (props.padding)
+        result.push(`padding: ${props.padding}`);
+    if (props.paddingX)
+        result.push(`padding-inline: ${props.paddingX}`);
+    if (props.paddingY)
+        result.push(`padding-block: ${props.paddingY}`);
+    if (props.paddingTop)
+        result.push(`padding-top: ${props.paddingTop}`);
+    if (props.paddingBottom)
+        result.push(`padding-bottom: ${props.paddingBottom}`);
+    if (props.paddingLeft)
+        result.push(`padding-left: ${props.paddingLeft}`);
+    if (props.paddingRight)
+        result.push(`padding-right: ${props.paddingRight}`);
+    if (props.gap)
+        result.push(`gap: ${props.gap}`);
+    if (props.letterSpacing)
+        result.push(`letter-spacing: ${props.letterSpacing}`);
+    if (props.flexShrink)
+        result.push(`flex-shrink: ${props.flexShrink}`);
+    if (props.borderStyle && !props.border)
+        result.push(`border-style: ${props.borderStyle}`);
+    if (props.fontFamily)
+        result.push(`font-family: ${props.fontFamily}`);
+    if (props.gradient) {
+        result.push(`background: ${props.gradient}`);
+    }
+    return result;
+}
 /** テスト用にキャッシュをクリアする */
 export function clearRegistryCache() {
     cache = new WeakMap();

package/dist/tools/concept.d.ts

@@ -4,6 +4,18 @@
  * コンセプト API: GET /api/projects/{projectId}/concept
  */
 import type { VadenMcpApiClient } from "../api-client.js";
+/**
+ * コンセプトの特定フィールドを更新する
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ * @param fieldPath - ドット区切りのフィールドパス（例: 'brandPersonality.0', 'serviceName'）
+ * @param value - 新しい値
+ */
+export declare function handleUpdateConcept(client: VadenMcpApiClient, projectId: string, fieldPath: string, value: unknown, operation?: "update" | "add" | "remove"): Promise<{
+    type: "text";
+    text: string;
+}[]>;
 /**
  * コンセプト情報を返す
  *

package/dist/tools/concept.js

@@ -48,6 +48,24 @@ function generateConceptGuide(data) {
         }
         lines.push("");
     }
+    if (data.colorEmotions) {
+        lines.push("## Color Emotions");
+        lines.push("");
+        if (data.colorEmotions.primary) {
+            lines.push(`**Primary**: ${data.colorEmotions.primary}`);
+        }
+        if (data.colorEmotions.secondary) {
+            lines.push(`**Secondary**: ${data.colorEmotions.secondary}`);
+        }
+        if (data.colorEmotions.emotional?.length) {
+            lines.push("");
+            lines.push("### Emotional Effects");
+            for (const effect of data.colorEmotions.emotional) {
+                lines.push(`- ${effect}`);
+            }
+        }
+        lines.push("");
+    }
     lines.push("## Design Principles");
     lines.push("");
     for (const principle of data.designPrinciples) {
@@ -66,6 +84,32 @@ function generateConceptGuide(data) {
         lines.push(`- ${journey}`);
     }
     lines.push("");
+    if (data.layoutPatterns?.length) {
+        lines.push("## Layout Patterns");
+        lines.push("");
+        for (const pattern of data.layoutPatterns) {
+            lines.push(`### ${pattern.name}`);
+            lines.push("");
+            lines.push(pattern.description);
+            if (pattern.basedOn) {
+                if (pattern.basedOn.interfaceApproach?.length) {
+                    lines.push(`- **Interface Approach**: ${pattern.basedOn.interfaceApproach.join(", ")}`);
+                }
+                if (pattern.basedOn.layoutStrategy?.length) {
+                    lines.push(`- **Layout Strategy**: ${pattern.basedOn.layoutStrategy.join(", ")}`);
+                }
+            }
+            if (pattern.specs) {
+                if (pattern.specs.grid) {
+                    lines.push(`- **Grid**: ${pattern.specs.grid.columns ?? "?"}col, gap ${String(pattern.specs.grid.gap ?? "?")}`);
+                }
+                if (pattern.specs.nav?.type) {
+                    lines.push(`- **Navigation**: ${pattern.specs.nav.type}`);
+                }
+            }
+            lines.push("");
+        }
+    }
     lines.push("> Use `get_design_rationale` to understand the reasoning behind design decisions.");
     return lines.join("\n");
 }
@@ -120,6 +164,86 @@ function generateDesignRationaleGuide(data) {
         lines.push(`- ${principle}`);
     }
     lines.push("");
+    if (da.visualEffects?.length) {
+        lines.push("## Visual Effects");
+        lines.push("");
+        for (const effect of da.visualEffects) {
+            lines.push(`- **${effect.name}**: ${effect.intent}`);
+        }
+        lines.push("");
+    }
+    if (da.interactionDesign?.length) {
+        lines.push("## Interaction Design");
+        lines.push("");
+        for (const item of da.interactionDesign) {
+            lines.push(`- **${item.feature}**: ${item.purpose}`);
+        }
+        lines.push("");
+    }
+    if (da.layoutStrategy?.length) {
+        lines.push("## Layout Strategy");
+        lines.push("");
+        for (const item of da.layoutStrategy) {
+            lines.push(`- **${item.aspect}**: ${item.rationale}`);
+        }
+        lines.push("");
+    }
+    if (da.motionDesign?.length) {
+        lines.push("## Motion Design");
+        lines.push("");
+        for (const item of da.motionDesign) {
+            lines.push(`- ${item}`);
+        }
+        lines.push("");
+    }
+    if (da.differentiation?.length) {
+        lines.push("## Differentiation");
+        lines.push("");
+        for (const item of da.differentiation) {
+            lines.push(`- vs **${item.competitor}**: ${item.distinction}`);
+        }
+        lines.push("");
+    }
+    if (da.behavioralPsychology?.length) {
+        lines.push("## Behavioral Psychology");
+        lines.push("");
+        for (const item of da.behavioralPsychology) {
+            lines.push(`- **${item.principle}**: ${item.application}`);
+        }
+        lines.push("");
+    }
+    if (da.iconography?.length) {
+        lines.push("## Iconography");
+        lines.push("");
+        for (const item of da.iconography) {
+            lines.push(`- **${item.element}**: ${item.symbolism}`);
+        }
+        lines.push("");
+    }
+    if (da.culturalResonance?.length) {
+        lines.push("## Cultural Resonance");
+        lines.push("");
+        for (const item of da.culturalResonance) {
+            lines.push(`- ${item}`);
+        }
+        lines.push("");
+    }
+    if (da.informationArchitecture?.length) {
+        lines.push("## Information Architecture");
+        lines.push("");
+        for (const item of da.informationArchitecture) {
+            lines.push(`- ${item}`);
+        }
+        lines.push("");
+    }
+    if (da.brandConsistency?.length) {
+        lines.push("## Brand Consistency");
+        lines.push("");
+        for (const item of da.brandConsistency) {
+            lines.push(`- ${item}`);
+        }
+        lines.push("");
+    }
     lines.push("## Success Metrics");
     lines.push("");
     for (const metric of data.successMetrics) {
@@ -134,7 +258,29 @@ function generateDesignRationaleGuide(data) {
     lines.push("");
     return lines.join("\n");
 }
-// --- ツールハンドラー ---
+/**
+ * コンセプトの特定フィールドを更新する
+ *
+ * @param client - Vaden MCP API クライアント
+ * @param projectId - プロジェクトID
+ * @param fieldPath - ドット区切りのフィールドパス（例: 'brandPersonality.0', 'serviceName'）
+ * @param value - 新しい値
+ */
+export async function handleUpdateConcept(client, projectId, fieldPath, value, operation = "update") {
+    await client.patch(`/api/projects/${encodeURIComponent(projectId)}/concept`, { fieldPath, value, operation });
+    const actionLabel = operation === "add"
+        ? "added to"
+        : operation === "remove"
+            ? "removed from"
+            : "updated in";
+    return [
+        {
+            type: "text",
+            text: `Concept: element ${actionLabel} "${fieldPath}"${operation !== "remove" ? ` — ${JSON.stringify(value)}` : ""}`,
+        },
+    ];
+}
+// --- Read ハンドラー ---
 /**
  * コンセプト情報を返す
  *