sfnext_analyze_component
Analyzes design and discovered components to recommend a component generation strategy. Returns a REUSE, EXTEND, or CREATE action with confidence score, key differences, and suggested implementation approach.
Note: 🚧 This MCP tool is for Storefront Next. Storefront Next is part of a closed pilot and isn't available for general use.
Overview
The sfnext_analyze_component tool compares design React code (e.g., from Figma, design handoff, or other sources) against existing components discovered in the codebase. It analyzes differences across styling, structure, behavior, and props, then recommends the best approach:
- REUSE: Use existing component with props or minor styling adjustments
- EXTEND: Extend existing component via props, variant, or composition pattern
- CREATE: Create a new component (reference existing patterns if applicable)
Workflow position: Call this tool after retrieving design data and discovering similar components. It is a required step in the Figma-to-component workflow.
This tool is part of the STOREFRONTNEXT toolset.
Prerequisites
- Design React code (from Figma MCP, design handoff, or other sources)
- Component discovery performed before calling
- Storefront Next project
See Figma-to-Component Tools Setup for complete prerequisites and configuration.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
figmaMetadata | string | Yes | JSON string containing design metadata (from Figma MCP or empty). Can be empty string if metadata was not fetched. |
figmaCode | string | Yes | React code from design (e.g., from Figma mcp__figma__get_design_context, or design handoff). |
componentName | string | Yes | Suggested name for the component extracted from the design. |
discoveredComponents | array | Yes | Array of similar components discovered using Glob/Grep/Read. Pass empty array if no similar components found. |
workspacePath | string | No | Optional workspace root path. Defaults to the MCP server project directory. |
Discovered Component Schema
Each item in discoveredComponents must have:
| Field | Type | Description |
|---|---|---|
path | string | Absolute file path to the component |
name | string | Component name |
similarity | number | Similarity score (0–100) |
matchType | string | One of 'name', 'structure', 'visual' |
code | string | Full source code of the component |
Usage Examples
With Figma design URL
I have a Figma design at [URL]. Use the MCP tool to fetch the design code, search the codebase for similar components, then analyze and recommend whether to reuse, extend, or create a component.With design code already fetched
Use the MCP tool to analyze this design and recommend reuse, extend, or create. Design code: [paste React/JSX from Figma or design handoff]. Search the codebase for similar components first, then call the tool with the discovered components.Agent workflow note
When the agent searches the codebase and finds no similar components, it should still call the tool with discoveredComponents: [] to get a CREATE recommendation. The user does not need to specify this—the agent discovers it during the workflow.
Output
Returns a formatted recommendation including:
- Decision: REUSE, EXTEND, or CREATE
- Confidence: Percentage (0–100)
- Matched Component: Path, name, similarity (if applicable)
- Key Differences: List of difference descriptions
- Suggested Approach: Implementation guidance
- Next Steps: Action-specific instructions
Related Tools
sfnext_start_figma_workflow- Call first to get workflow instructions and Figma parameterssfnext_match_tokens_to_theme- Match design tokens to theme variables- Part of the STOREFRONTNEXT toolset
- Auto-enabled for Storefront Next projects
See Also
- Figma-to-Component Tools Setup - Prerequisites and Figma MCP configuration
- STOREFRONTNEXT Toolset - Overview of Storefront Next development tools
- Configuration - Configure project directory
- Storefront Next Guide - Storefront Next development guide