히어로아이콘-mcp

Heroicons를 LLM 및 에이전트 애플리케이션의 리소스 및 도구로 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. Bun과 MCP TypeScript SDK로 구축되었습니다.

Heroicons란 무엇인가요?

Heroicons는 Tailwind CSS 개발자들이 직접 디자인한 수작업 SVG 아이콘으로 구성된 인기 라이브러리입니다. 아이콘은 다양한 스타일(윤곽선, 단색)로 제공되며 웹 프로젝트에 쉽게 통합할 수 있습니다.

Related MCP server: SupaUI MCP Server

MCP란 무엇인가요?

MCP(Model Context Protocol)는 AI 도구가 기본 학습 데이터 외부의 소스에서 특정 컨텍스트를 요청하기 위한 표준입니다.

이 MCP 서버를 통해 AI 코딩 어시스턴트와 기타 에이전트 애플리케이션이 Heroicons에 대한 정보에 액세스하여 더 나은 지원 및 아이콘 검색 기능을 제공할 수 있습니다.

특징

• Heroicons를 MCP 리소스(개요 및 단색 스타일)로 노출합니다.

• 이름이나 키워드로 아이콘을 검색하기 위한 도구를 제공합니다.

• 모든 아이콘 또는 특정 스타일 내의 아이콘을 나열할 수 있습니다.

• Claude Desktop 및 기타 MCP 클라이언트와 통합 준비 완료

• HTTP 서버 또는 stdio 기반 MCP 서버로 실행할 수 있습니다.

필수 조건

• 깃

• 혈액 요소 질소

시작하기(개발)

1. 저장소를 복제합니다.

지엑스피1

2. Bun을 설치하세요(Bun이 없다면)

Bun 설치 가이드 를 참조하세요.
설치 후 터미널을 다시 시작하고 다음을 확인하세요.

bun --version

3. 종속성 설치

bun install

4. 프로젝트 빌드

이렇게 하면 TypeScript 소스가 build 디렉토리의 JavaScript로 컴파일됩니다.

bun run build

용법

HTTP 모드

npx 사용하여 HTTP 서버를 실행할 수 있습니다.

npx heroicons-mcp

이렇게 하면 HTTP 서버가 시작됩니다(기본값은 src/http.ts 에 정의된 대로 포트 3000).

또는 전역적으로 설치:

npm install -g heroicons-mcp

그런 다음 실행하세요.

heroicons-mcp

표준 모드

npx heroicons-mcp --stdio
# or if installed globally
heroicons-mcp --stdio

지역 개발

MCP 서버를 실행하는 두 가지 주요 방법은 다음과 같습니다.

1. HTTP 모드

HTTP를 통한 통신을 지원하는 클라이언트에 적합합니다.

개발용(Bun 사용):

bun run start
# or directly
bun run src/entry.ts

이는 src/entry.ts 에 정의된 서버를 실행하며, 기본값은 HTTP 모드입니다.

2. 표준 모드

Claude Desktop이나 MCP Inspector와 같은 도구와 직접 통합하여 표준 입출력을 통해 통신하는 데 자주 사용됩니다.

개발용(Bun 사용):

bun run src/entry.ts --stdio

AI 도구를 사용한 구성

예: Claude Desktop

Claude Desktop 에서 이 MCP 서버를 사용하려면:

1. Claude Desktop 구성 파일을 엽니다.

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

(또는 원하는 편집기를 사용하세요) 2. mcpServers 섹션에 서버를 추가합니다.

옵션 A: npx 를 통해:

{
  "mcpServers": {
    "heroicons": {
      "command": "npx",
      "args": ["heroicons-mcp", "--stdio"]
    }
  }
}

옵션 B: 빌드 출력을 직접 가리키기( bun run build 사용하여 프로젝트를 빌드했는지 확인):

{
  "mcpServers": {
    "heroicons": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/heroicons-mcp/build/entry.js", "--stdio"]
    }
  }
}

/ABSOLUTE/PATH/TO/heroicons-mcp/build/entry.js 빌드한 entry.js 파일의 실제 절대 경로로 바꾸세요.

3. 파일을 저장하고 Claude Desktop을 다시 시작하세요.

4. 이제 Claude의 도구 패널에서 "heroicons" 서버를 볼 수 있습니다.

참고: npx heroicons-mcp --stdio 명령은 stdio 모드에 권장되는 방법입니다.

사용 가능한 도구(MCP)

이 MCP 서버는 AI 코딩 어시스턴트에 다음 도구를 제공합니다.

1. 모든 아이콘 목록

• 설명: 사용 가능한 모든 영웅아이콘을 나열하고, 선택적으로 스타일(윤곽선, 실선)별로 필터링합니다.

• 매개변수: style (선택 사항: "outline" | "solid")

2. 검색_아이콘

• 설명: 모든 스타일에서 이름이나 키워드로 Heroicons를 검색합니다.

• 매개변수: query (문자열), style (선택 사항: "outline" | "solid")

3. get_icon_usage_examples

• 설명: 특정 아이콘에 대한 JSX 예제 사용법을 검색합니다.

• 매개변수: name (문자열), style (문자열: "outline" | "solid")

사용 예

AI 도구가 MCP 서버를 사용하는 방법은 다음과 같습니다.

1. 사용자가 AI 도구에 "Heroicons에서 '사용자' 아이콘을 찾아주세요. 단색 스타일이면 더 좋아요."라고 요청합니다 .

2. AI 도구는 search_icons 호출합니다 :

• query : "사용자"

• style : "솔리드"

3. MCP 서버는 일치하는 견고한 Heroicons(예: UserIcon , UserCircleIcon , UserPlusIcon ) 목록으로 응답합니다.

4. 사용자가 도구에 "UserIcon의 사용 예를 보여주세요"라고 요청합니다 .

5. AI 도구는 get_icon_usage_examples 호출합니다 :

• name : "UserIcon"

• style : "솔리드"

6. MCP 서버는 JSX 코드 예제로 응답합니다 .

import { UserIcon } from "@heroicons/react/24/solid";

function Example() {
  return (
    <div>
      <UserIcon className="w-6 h-6 text-blue-500" />
    </div>
  );
}

Inspector를 사용하여 로컬에서 MCP 테스트

MCP Inspector를 사용하여 MCP 서버(stdio 모드)를 로컬로 테스트할 수 있습니다.

먼저, 프로젝트가 빌드되었는지 확인하세요.

bun run build

그런 다음 Inspector를 실행하고 --stdio 플래그와 함께 node ./build/entry.js 명령을 사용하여 서버에 연결합니다.

npx @modelcontextprotocol/inspector node ./build/entry.js --stdio

이렇게 하면 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를 사용하여 코드베이스를 린트합니다.

자원

• 영웅 아이콘

• 모델 컨텍스트 프로토콜

• MCP 검사관

• MCP 타입스크립트 SDK

• 혈액 요소 질소

특허

MIT