integrate_design
Merge DesignStrategy and blockDesigns to produce IntegratedDesign with props summary, private components, and composition recommendations for streamlined frontend development.
Instructions
Combine the overall DesignStrategy with completed blockDesigns and return IntegratedDesign (including props summary, private components used, and composition recommendations).
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| blockDesigns | Yes | Completed block design list: [{ blockId, component }] | |
| strategy | Yes | DesignStrategy object |
Implementation Reference
- src/tools/integration/design.ts:13-71 (handler)The primary handler function for the 'integrate_design' tool. It validates input, calls the core integrateDesign function, generates a human-readable summary, and returns structured content.
export async function integrateDesignTool( args: any ): Promise<{ content: any[] }> { const startTime = Date.now(); try { if (!args || !args.strategy || !Array.isArray(args.blockDesigns)) { throw new Error( 'Missing required parameters: strategy and blockDesigns are required' ); } const strategy: DesignStrategy = args.strategy as DesignStrategy; const blockDesigns: Array<{ blockId: string; component: ComponentDesign }> = args.blockDesigns as Array<{ blockId: string; component: ComponentDesign; }>; const integrated: IntegratedDesign = integrateDesign( strategy, blockDesigns ); // Human-readable summary const summaryLines: string[] = []; summaryLines.push('## 🔗 Design Integration Summary'); summaryLines.push(''); summaryLines.push(`- Number of blocks: ${integrated.blockDesigns.length}`); summaryLines.push( `- Private components used: ${integrated.aggregated.privateComponentsUsed.join(', ') || 'None'}` ); summaryLines.push(''); summaryLines.push('### 📦 Props overview per block'); for (const b of strategy.blocks) { const props = integrated.aggregated.propsByBlock[b.blockId] || []; summaryLines.push(`- ${b.blockId} (${b.title}): ${props.length} props`); } summaryLines.push(''); summaryLines.push('### 🧩 Composition recommendations'); summaryLines.push(integrated.compositionPlan || 'None'); return { content: [ { type: 'text', text: summaryLines.join('\n') }, { type: 'text', text: JSON.stringify({ integratedDesign: integrated }), }, ], }; } catch (error) { const message = error instanceof Error ? error.message : 'Unknown error'; return { content: [ { type: 'text', text: `❌ Integration design failed: ${message}` }, ], }; } } - src/mcp-server.ts:162-177 (schema)The input schema defining the parameters for the 'integrate_design' tool: strategy (DesignStrategy object) and blockDesigns (array of block designs).
inputSchema: { type: 'object', properties: { strategy: { type: 'object', description: 'DesignStrategy object', }, blockDesigns: { type: 'array', description: 'Completed block design list: [{ blockId, component }]', }, }, required: ['strategy', 'blockDesigns'], }, }, - src/mcp-server.ts:183-202 (registration)Tool dispatch registration in the CallToolRequestHandler switch statement, mapping 'integrate_design' to integrateDesignTool.
this.server.setRequestHandler(CallToolRequestSchema, async (request) => { const { name, arguments: args } = request.params; switch (name) { case 'design_component': return await designComponentTool(args); case 'query_component': return await queryComponentTool(args); case 'design_block': return await designBlockTool(args); case 'integrate_design': return await integrateDesignTool(args); default: throw new McpError(ErrorCode.MethodNotFound, `Unknown tool: ${name}`); } }); - src/mcp-server.ts:55-181 (registration)Tool listing registration in ListToolsRequestHandler, including name, description, and schema for 'integrate_design'.
this.server.setRequestHandler(ListToolsRequestSchema, async () => { // Build tools list const tools = [ { name: 'design_component', description: "Analyze user requirements and develop a block-based design strategy. Use this when users ask to 'design component', 'create component', or 'component design'. For complex needs, it breaks down into multiple blocks with step-by-step guidance.", inputSchema: { type: 'object', properties: { prompt: { type: 'array', description: 'User business requirements or design description', items: { type: 'object', properties: { type: { type: 'string', enum: ['text', 'image'] }, text: { type: 'string' }, image: { type: 'string' }, }, required: ['type'], }, }, component: { type: 'object', description: 'Existing component information (optional, for updates)', properties: { id: { type: 'string' }, name: { type: 'string' }, code: { type: 'string' }, }, }, }, required: ['prompt'], }, }, { name: 'query_component', description: 'Query detailed information of a component including documentation, API, and example code. Provide the component name to get all related information.', inputSchema: { type: 'object', properties: { componentName: { type: 'string', description: "Component name to query, e.g., 'das-action-more'", }, }, required: ['componentName'], }, }, { name: 'design_block', description: 'Design a specific block. This is the second-stage tool in the block-based design strategy for detailed component design.', inputSchema: { type: 'object', properties: { blockId: { type: 'string', description: 'ID of the design block to design', }, prompt: { type: 'array', description: 'Specific requirement description for the block', items: { type: 'object', properties: { type: { type: 'string', enum: ['text', 'image'] }, text: { type: 'string' }, image: { type: 'string' }, }, required: ['type'], }, }, blockInfo: { type: 'object', description: 'Detailed information of the block (optional)', properties: { blockId: { type: 'string' }, blockType: { type: 'string', enum: ['layout', 'component', 'logic'], }, title: { type: 'string' }, description: { type: 'string' }, priority: { type: 'string', enum: ['high', 'medium', 'low'] }, }, }, integratedContext: { type: 'object', description: 'Integration context (optional): contains the overall strategy and completed block designs to return an updated integrated design snapshot', properties: { strategy: { type: 'object' }, blockDesigns: { type: 'array' }, }, }, }, required: ['blockId', 'prompt'], }, }, { name: 'integrate_design', description: 'Combine the overall DesignStrategy with completed blockDesigns and return IntegratedDesign (including props summary, private components used, and composition recommendations).', inputSchema: { type: 'object', properties: { strategy: { type: 'object', description: 'DesignStrategy object', }, blockDesigns: { type: 'array', description: 'Completed block design list: [{ blockId, component }]', }, }, required: ['strategy', 'blockDesigns'], }, }, ]; return { tools }; }); - Core helper function integrateDesign that aggregates block designs into an IntegratedDesign, collecting props, private components, and generating a composition plan.
export function integrateDesign( strategy: DesignStrategy, blockDesigns: Array<{ blockId: string; component: ComponentDesign }> ): IntegratedDesign { // Aggregate props by block const propsByBlock: Record< string, Array<{ name: string; type: string; required?: boolean; default?: string; description?: string; }> > = {}; // Collect all used private components const privateComponentsUsed = new Set<string>(); blockDesigns.forEach(({ blockId, component }) => { // Collect props for this block if (component.props) { propsByBlock[blockId] = component.props; } // Collect private components used component.library.forEach(lib => { lib.components.forEach((comp: any) => { if (typeof comp === 'string') { // 兼容旧格式 if (comp.startsWith('das-')) { privateComponentsUsed.add(comp); } } else { // 新格式：检查是否为私有组件 if (comp.isPrivate) { privateComponentsUsed.add(comp.name); } } }); }); }); // Generate composition plan const compositionPlan = generateCompositionPlan(strategy, blockDesigns); return { strategy, blockDesigns, aggregated: { propsByBlock, privateComponentsUsed: Array.from(privateComponentsUsed), }, compositionPlan, }; }