デザインシステム MFUI を MCP サーバー化して社内に提供した話

mfui/
├── apps/
│   └── mcp-server/          # mfui-developer-mcpの実装
│       ├── dist/
│       │   └── index.js     # ビルド時に生成され、MCPクライアントによって実行されるファイル
│       ├── src/
│       │   └── index.ts     # サーバーの実装
│       └── package.json
│
├── packages/
│   ├── components/          # UIライブラリ
│   │   ├── src/
│   │   │   ├── Button/
│   │   │   ├── Checkbox/
│   │   │   ├── ... (その他のコンポーネント)
│   │   │   └── index.ts    # パッケージのエントリーポイント
│   │   └── package.json
│   │
│   └── icons-react/        # Reactアイコンコンポーネント
│   │   ├── dist/
│   │   │   ├── ... (各アイコンのtsxファイル)
│   │   │   └── index.ts    # パッケージのエントリーポイント
│   │   └── package.json
│
└── package.json

components/src/ComponentName/
├── ComponentName.tsx          # コンポーネント本体
├── ComponentName.types.tsx    # 型定義
├── ComponentName.stories.tsx  # Storybook用定義
└── index.ts                   # エクスポート定義

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';


const server = new McpServer({
  name: 'mfui-developer-mcp',
  version: '1.0.0',
  capabilities: {
    resources: {},
    tools: {},
  },
});

server.tool('get_available_components', 'Get a list of available MFUI components', {}, async () => {
  const componentsIndexPath = path.join(rootDir, 'packages/components/src/index.ts');
  const componentsIndexContent = await fs.promises.readFile(componentsIndexPath, 'utf-8');

  
  const componentNames = componentsIndexContent
    .split('n')
    .filter((line) => line.startsWith('export *'))
    .map((line) => {
      const match = line.match(/['"]./(.+)['"]/);
      return match ? match[1] : '';
    })
    .filter((name) => name !== '');

  return {
    content: [
      {
        type: 'text',
        text: 'Available MFUI Components:nn' + componentNames.join('n'),
      },
    ],
  };
});

server.tool(
  'get_component_files',
  'Get files for a specific MFUI component',
  {
    componentName: z.string().describe('Name of the component to get information for'),
  },
  async ({ componentName }) => {
    const componentsDir = path.join(rootDir, 'packages/components/src');
    const componentPath = path.join(componentsDir, componentName);

    try {
      
      await fs.promises.access(componentPath);

      
      const files = await fs.promises.readdir(componentPath);

      
      const fileContents = {};
      for (const file of files) {
        const filePath = path.join(componentPath, file);
        try {
          const content = await fs.promises.readFile(filePath, 'utf-8');
          fileContents[file] = content;
        } catch (error) {
          fileContents[file] = `Error reading file: ${error.message}`;
        }
      }

      return {
        content: [
          {
            type: 'text',
            text:
              `Component: ${componentName}n` +
              `Directory: ${componentPath}nn` +
              `Available files:n${files.join('n')}nn` +
              `File contents:nn` +
              Object.entries(fileContents)
                .map(([filename, content]) => `=== ${filename} ===n${content}n`)
                .join('n'),
          },
        ],
      };
    } catch (error) {
      return {
        content: [
          {
            type: 'text',
            text: `Component "${componentName}" not found. Error: ${error instanceof Error ? error.message : 'Unknown error'}`,
          },
        ],
      };
    }
  }
);

{
  "mcpServers": {
    "mfui-developer-mcp": {
      "command": "node",
      "args": [
        "/your/path/to/mfui/apps/mcp-server/build/index.js"
      ]
    }
  }
}