# Univer Icons MCP

> AI Agent를 Univer Icons MCP에 연결하여 아이콘을 찾고 React 또는 Vue 코드를 생성하세요.

- Human documentation: [https://docs.univer.ai/ko-KR/guides/icons/ai](https://docs.univer.ai/ko-KR/guides/icons/ai)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/icons/ai.md](https://docs.univer.ai/ko-KR/guides/icons/ai.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [icons/ai.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/icons/ai.ko-KR.mdx)

---

Univer Icons MCP를 사용하면 AI Agent가 아이콘을 찾고 컴포넌트 사용법을 읽을 수 있습니다. 선택한 콘텐츠 복사나 이미지 삽입처럼 필요한 동작을 설명하세요. AI Agent가 아이콘을 선택하고 React 또는 Vue 코드를 생성할 수 있습니다.

## AI Agent 연결

Model Context Protocol(MCP)은 AI Agent를 외부 도구에 연결하는 프로토콜입니다. 원격 MCP를 지원하는 AI Agent에서 다음 설정으로 서버를 추가하세요.

| 설정     | 값                                  |
| ------ | ---------------------------------- |
| 이름     | `univer-icons`                     |
| 전송 방식  | Streamable HTTP                    |
| 서버 URL | `https://docs.univer.ai/mcp/icons` |
| 인증     | API 키 불필요                          |

서버를 저장하고 활성화하면 AI Agent가 다음 도구를 사용할 수 있습니다.

| 도구             | 용도                       |
| -------------- | ------------------------ |
| `search_icons` | 용도에 맞는 아이콘 후보 검색         |
| `get_icon`     | 가져오기 구문, 코드 예제, 외형 설정 확인 |

## 필요한 아이콘 설명

프레임워크, 아이콘이 나타내는 동작, 크기나 색상 요구 사항을 포함하세요. 예를 들면 다음과 같습니다.

> Univer Icons MCP를 사용해 선택한 콘텐츠를 복사하는 React 도구 모음 버튼용 단색 아이콘을 골라 주세요. 크기는 20 px로 하고 버튼의 텍스트 색상을 상속하게 하며, 버튼에 접근 가능한 이름을 지정해 주세요.

Vue 프로젝트에서는 다음과 같이 요청할 수 있습니다.

> Univer Icons MCP를 사용해 Vue 3의 채우기 색상 버튼용 두 가지 색상 아이콘을 골라 주세요. 기본 색상은 진한 회색, 강조 색상은 연한 회색으로 지정하고 가져오기 구문과 컴포넌트 코드를 생성해 주세요.

결과를 다듬으려면 “단색 아이콘으로 바꿔 주세요” 또는 “선을 가늘게 유지하면서 32 px로 키워 주세요”처럼 변경할 내용을 설명하세요.

## 프로젝트에서 아이콘 사용

[아이콘 미리 보기](https://docs.univer.ai/ko-KR/guides/icons/all-icons.md)에서 반환된 컴포넌트 이름을 검색하세요. 모양, 크기, 색상이 인터페이스에 맞는지 확인하고 프레임워크에 맞는 패키지를 설치한 뒤 버튼 이벤트를 애플리케이션 로직에 연결하세요.

구현 절차는 [React에 통합](https://docs.univer.ai/ko-KR/guides/icons/react.md) 또는 [Vue에 통합](https://docs.univer.ai/ko-KR/guides/icons/vue.md)을 참고하세요.