MCP 프론트엔드 도구 서버

AI 어시스턴트(Claude, Copilot, Cursor)가 컴포넌트 스캐폴딩, 번들 분석, 접근성 검사, 반응형 디자인 가이드와 같은 프론트엔드 개발 도구에 접근할 수 있도록 하는 MCP(Model Context Protocol) 서버입니다.

MCP TypeScript Node.js

사용 가능한 도구

도구	설명
`scaffold_react_component`	테스트, 스토리, CSS 모듈이 포함된 타입 지정 React 컴포넌트 생성
`analyze_bundle`	빌드 디렉터리에서 용량이 큰 JS/CSS를 스캔하고 결과 보고
`check_accessibility`	HTML에 대한 정적 WCAG 2.2 검사 및 수정 제안
`responsive_breakpoint_guide`	반응형 CSS, 컨테이너 쿼리 및 Tailwind 패턴 생성

설정

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json에 추가하세요:

{
  "mcpServers": {
    "frontend-tools": {
      "command": "node",
      "args": ["/path/to/mcp-frontend-tools/dist/index.js"]
    }
  }
}

VS Code 및 Copilot

.vscode/settings.json에 추가하세요:

{
  "github.copilot.chat.mcpServers": {
    "frontend-tools": {
      "command": "node",
      "args": ["${workspaceFolder}/mcp-frontend-tools/dist/index.js"]
    }
  }
}

사용 예시 (AI 채팅)

"아바타, 이름, 자기소개 props를 가진 UserProfileCard 컴포넌트를 스캐폴딩해줘"

AI가 scaffold_react_component를 호출하여 다음을 반환합니다:

UserProfileCard.tsx — forwardRef가 포함된 타입 지정 컴포넌트
UserProfileCard.test.tsx — Testing Library 테스트
UserProfileCard.stories.tsx — Storybook 스토리
UserProfileCard.module.css — CSS 모듈
index.ts — 배럴(Barrel) 내보내기

"내 dist/ 폴더의 번들 크기 문제를 분석해줘"

AI가 analyze_bundle을 호출하여 용량이 큰 파일, 권장 사항, 요약 표가 포함된 마크다운 보고서를 반환합니다.

아키텍처

src/
├── index.ts                  # MCP server setup (stdio transport)
└── tools/
    ├── index.ts              # Tool definitions + router
    ├── scaffold-component.ts # React component generator
    ├── bundle-analyzer.ts    # Build output analyzer
    ├── a11y-checker.ts       # Static WCAG checks
    └── responsive-guide.ts   # Responsive CSS pattern generator

개발

npm install
npm run build
npm run inspector   # Test with MCP Inspector

라이선스

MIT

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

How are these scores calculated?

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

MCP Frontend Tools Server