히어로아이콘-mcp
Heroicons를 LLM 및 에이전트 애플리케이션의 리소스 및 도구로 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. Bun과 MCP TypeScript SDK로 구축되었습니다.
Heroicons란 무엇인가요?
Heroicons는 Tailwind CSS 개발자들이 직접 디자인한 수작업 SVG 아이콘으로 구성된 인기 라이브러리입니다. 아이콘은 다양한 스타일(윤곽선, 단색)로 제공되며 웹 프로젝트에 쉽게 통합할 수 있습니다.
Related MCP server: phalcon-mcp
MCP란 무엇인가요?
MCP(Model Context Protocol)는 AI 도구가 기본 학습 데이터 외부의 소스에서 특정 컨텍스트를 요청하기 위한 표준입니다.
이 MCP 서버를 통해 AI 코딩 어시스턴트와 기타 에이전트 애플리케이션이 Heroicons에 대한 정보에 액세스하여 더 나은 지원 및 아이콘 검색 기능을 제공할 수 있습니다.
특징
Heroicons를 MCP 리소스(개요 및 단색 스타일)로 노출합니다.
이름이나 키워드로 아이콘을 검색하기 위한 도구를 제공합니다.
모든 아이콘 또는 특정 스타일 내의 아이콘을 나열할 수 있습니다.
Claude Desktop 및 기타 MCP 클라이언트와 통합 준비 완료
HTTP 서버 또는 stdio 기반 MCP 서버로 실행할 수 있습니다.
필수 조건
시작하기(개발)
1. 저장소를 복제합니다.
지엑스피1
2. Bun을 설치하세요(Bun이 없다면)
Bun 설치 가이드 를 참조하세요.
설치 후 터미널을 다시 시작하고 다음을 확인하세요.
3. 종속성 설치
4. 프로젝트 빌드
이렇게 하면 TypeScript 소스가 build 디렉토리의 JavaScript로 컴파일됩니다.
용법
HTTP 모드
npx 사용하여 HTTP 서버를 실행할 수 있습니다.
이렇게 하면 HTTP 서버가 시작됩니다(기본값은 src/http.ts 에 정의된 대로 포트 3000).
또는 전역적으로 설치:
그런 다음 실행하세요.
표준 모드
지역 개발
MCP 서버를 실행하는 두 가지 주요 방법은 다음과 같습니다.
1. HTTP 모드
HTTP를 통한 통신을 지원하는 클라이언트에 적합합니다.
개발용(Bun 사용):
이는 src/entry.ts 에 정의된 서버를 실행하며, 기본값은 HTTP 모드입니다.
2. 표준 모드
Claude Desktop이나 MCP Inspector와 같은 도구와 직접 통합하여 표준 입출력을 통해 통신하는 데 자주 사용됩니다.
개발용(Bun 사용):
AI 도구를 사용한 구성
예: Claude Desktop
Claude Desktop 에서 이 MCP 서버를 사용하려면:
Claude Desktop 구성 파일을 엽니다.
(또는 원하는 편집기를 사용하세요) 2. mcpServers 섹션에 서버를 추가합니다.
옵션 A:
옵션 B: 빌드 출력을 직접 가리키기(
/ABSOLUTE/PATH/TO/heroicons-mcp/build/entry.js 빌드한 entry.js 파일의 실제 절대 경로로 바꾸세요.
파일을 저장하고 Claude Desktop을 다시 시작하세요.
이제 Claude의 도구 패널에서 "heroicons" 서버를 볼 수 있습니다.
참고:
사용 가능한 도구(MCP)
이 MCP 서버는 AI 코딩 어시스턴트에 다음 도구를 제공합니다.
모든 아이콘 목록
설명: 사용 가능한 모든 영웅아이콘을 나열하고, 선택적으로 스타일(윤곽선, 실선)별로 필터링합니다.
매개변수:
style(선택 사항: "outline" | "solid")
검색_아이콘
설명: 모든 스타일에서 이름이나 키워드로 Heroicons를 검색합니다.
매개변수:
query(문자열),style(선택 사항: "outline" | "solid")
get_icon_usage_examples
설명: 특정 아이콘에 대한 JSX 예제 사용법을 검색합니다.
매개변수:
name(문자열),style(문자열: "outline" | "solid")
사용 예
AI 도구가 MCP 서버를 사용하는 방법은 다음과 같습니다.
사용자가 AI 도구에 "Heroicons에서 '사용자' 아이콘을 찾아주세요. 단색 스타일이면 더 좋아요."라고 요청합니다 .
AI 도구는 :
query: "사용자"style: "솔리드"
MCP 서버는 일치하는 견고한 Heroicons(예:
UserIcon,UserCircleIcon,UserPlusIcon) 목록으로 응답합니다.사용자가 도구에 "UserIcon의 사용 예를 보여주세요"라고 요청합니다 .
AI 도구는 :
name: "UserIcon"style: "솔리드"
MCP 서버는 JSX 코드 예제로 응답합니다 .
Inspector를 사용하여 로컬에서 MCP 테스트
MCP Inspector를 사용하여 MCP 서버(stdio 모드)를 로컬로 테스트할 수 있습니다.
먼저, 프로젝트가 빌드되었는지 확인하세요.
그런 다음 Inspector를 실행하고 --stdio 플래그와 함께 node ./build/entry.js 명령을 사용하여 서버에 연결합니다.
이렇게 하면 Inspector 인터페이스가 열리고 MCP 서버에서 노출된 리소스와 도구를 대화형으로 테스트할 수 있습니다.
개발 스크립트
bun run dev: 개발을 위해 HTTP 모드로 서버를 시작합니다(src/entry.ts사용).bun run dev:stdio: 개발을 위한 stdio MCP 서버를 시작합니다(src/entry.ts --stdio사용).bun run build: TypeScript를 JavaScript로 컴파일합니다(build/에 출력).bun run lint: ESLint를 사용하여 코드베이스를 린트합니다.