10. AI 개발 지원: AUIPivot MCP Server
AUIPivot MCP는 AI 개발 도구가 공식 API 문서와 실제 예제 코드를 찾아 답변하도록 돕습니다. 속성의 기본값, 메소드의 인자와 반환값, TypeScript 타입을 확인하고 React와 Vue 예제를 참고해 코드를 작성할 때 사용합니다.
MCP(Model Context Protocol)는 AI 도구와 외부 자료를 연결하는 표준입니다. AUIPivot MCP를 연결하면 필요한 문서를 대화에 직접 복사하는 대신 AI가 도구를 호출해 조회할 수 있습니다.
무료로 처음 시작하려면 비상업용 CDN 시작 안내를 확인하세요. MCP에서 CDN 연결 방법과 데이터가 포함된 HTML 예제를 조회하여 로컬 환경에서 실행할 수 있습니다.
10.1 연결 방식 선택
사용하는 AI 개발 도구에 원격 또는 로컬 방식 중 하나를 등록합니다. 두 방식 모두 같은 다섯 조회 도구를 제공합니다.
기존 설정이 있다면 다른 MCP 서버 항목은 유지하고 auipivot 항목을 추가하거나 변경합니다.
| 연결 방식 | 실행 위치와 준비 사항 |
|---|---|
| 원격 URL (권장) | AUIPivot 운영 서버에 연결합니다. Streamable HTTP를 지원하는 AI 도구와 인터넷 연결이 필요합니다. |
| 로컬 npm (stdio) | 고객 PC에서 AI 도구가 실행합니다. Node.js 22.12 이상과 npm 접속 환경이 필요합니다. |
10.2 원격 URL 연결 (권장)
서버 주소는 https://auipivot.com/mcp입니다. https://를 포함하고 주소 끝에 슬래시(/)를 붙이지 않습니다. 전송 방식은
Streamable HTTP이며 로그인, API 키 또는 별도의 인증 설정이 필요하지 않습니다.
공개된 AUIPivot 문서와 예제를 읽기 전용으로 제공합니다. 고객 프로젝트나 피벗 데이터에 접근하는 도구는 포함하지 않습니다.
Claude Code 원격 연결
사용할 프로젝트의 터미널에서 실행합니다.
claude mcp add --transport http auipivot https://auipivot.com/mcp
Claude Code 대화의 /mcp에서 연결 상태를 확인합니다.
Claude Code 공식 연결 안내
Cursor 원격 연결
프로젝트의 .cursor/mcp.json에 추가합니다.
{
"mcpServers": {
"auipivot": {
"url": "https://auipivot.com/mcp"
}
}
}
Cursor의 MCP 설정에서 auipivot가 활성화되어 있는지 확인합니다.
Cursor 공식 연결 안내
VS Code 원격 연결
프로젝트의 .vscode/mcp.json에 추가합니다. 최상위 키는 servers를 사용합니다. Cursor의 mcpServers와 다릅니다.
{
"servers": {
"auipivot": {
"type": "http",
"url": "https://auipivot.com/mcp"
}
}
}
명령 팔레트의 MCP: List Servers에서 서버와 도구 목록을 확인합니다.
VS Code 공식 연결 안내
Codex CLI 원격 연결
터미널에서 다음 명령으로 등록합니다.
codex mcp add auipivot --url https://auipivot.com/mcp
codex mcp list에서 등록 상태를 확인하고, Codex 대화의 /mcp에서 연결 상태를
확인합니다.
Codex 공식 연결 안내
Claude의 사용자 지정 커넥터 등 다른 MCP 지원 도구에서는 원격 MCP 서버로 https://auipivot.com/mcp를
등록하고 전송 방식을 Streamable HTTP로 선택합니다.
연결 후 AI에게 “AUIPivot MCP의 list_versions로 사용 가능한 문서 버전을 확인해 줘”라고 요청하십시오.
원격 자료는 운영 서버에서 갱신하므로 고객이 npm 패키지를 갱신할 필요가 없습니다.
이 주소를 브라우저 주소창에서 열면 HTTP 405가 표시됩니다. MCP 요청만 처리하는 주소이므로 정상
응답입니다. HTTP 429는 요청 한도를 초과했다는 뜻이며 응답의 Retry-After에 표시된
시간 이후 다시 요청합니다.
10.3 로컬 npm 연결
Node.js 22.12 이상과 로컬 MCP(stdio)를 지원하는 AI 개발 도구가 필요합니다. 설정을 추가하면 AI
도구가 npx로 패키지를 받아 MCP 서버를 자동 실행합니다. 별도의 웹서버 운영이나 소스 빌드는 필요하지
않습니다.
처음 실행하거나 패키지를 갱신할 때는 npm에 접속할 수 있어야 합니다. -y는 설치 확인을 자동 승인하고,
@latest는 npm에 게시된 최신 MCP 패키지를 선택합니다.
사용 중인 도구의 설정을 펼쳐 적용하십시오. 기존 설정 파일이 있다면 다른 서버 설정을 유지하고
auipivot 항목을 추가합니다.
Cursor
프로젝트의 .cursor/mcp.json에 다음 설정을 추가합니다.
{
"mcpServers": {
"auipivot": {
"type": "stdio",
"command": "npx",
"args": ["-y", "auipivot-mcp-server@latest"]
}
}
}
Cursor의 MCP 설정에서 auipivot가 활성화되어 있는지 확인합니다.
Cursor 공식 연결 안내
VS Code
프로젝트의 .vscode/mcp.json에 다음 설정을 추가합니다.
{
"servers": {
"auipivot": {
"type": "stdio",
"command": "npx",
"args": ["-y", "auipivot-mcp-server@latest"]
}
}
}
명령 팔레트의 MCP: List Servers에서 서버를 시작하고 Agent 대화의 도구 목록을 확인합니다.
VS Code 공식 연결 안내
Codex CLI
터미널에서 다음 명령으로 등록한 뒤 Codex를 다시 시작합니다.
codex mcp add auipivot -- npx -y auipivot-mcp-server@latest
codex mcp list에서 등록 상태를 확인하고, Codex 대화의 /mcp에서 연결 상태를
확인합니다.
Codex 공식 연결 안내
Claude Code
사용할 프로젝트의 터미널에서 다음 명령으로 등록한 뒤 Claude Code를 다시 시작합니다.
claude mcp add --transport stdio auipivot -- npx -y auipivot-mcp-server@latest
Claude Code 대화의 /mcp에서 연결 상태를 확인합니다.
Claude Code 공식 연결 안내
10.4 이렇게 질문해 보세요
-
“AUIPivot MCP에서
layoutType의 설정값과 기본값을 확인하고, 트리 보고서를 테이블과 셀병합 방식으로 바꾸는 예제를 작성해 줘.” - “React와 TypeScript에서 피벗 메소드와 이벤트를 사용하는 실제 예제를 찾아 줘. TypeScript 타입도 확인해 줘.”
-
“
registerCustomAggregator의 콜백 인수와 반환값을 확인하고, 판매 대수를 반영한 평균 가격 예제를 찾아 줘.”
원하는 프레임워크와 언어를 함께 알려 주면 예제를 찾기 쉽습니다. MCP는 포함된 문서와 예제를 조회하며, 코드 작성과 수정은 연결한 AI 도구가 수행합니다.
10.5 제공 도구와 자료 범위
| 도구 | 용도 |
|---|---|
list_versions |
포함된 문서, 엔진과 npm 타입 패키지의 버전 확인 |
search_docs |
공식 API와 안내 문서를 한글 또는 API 이름으로 검색 |
get_api |
설명, 기본값, 도입 버전과 대응 TypeScript 선언 조회 |
list_examples |
기능, 프레임워크와 언어에 맞는 예제 검색 |
get_example |
예제 소스와 관련 파일, 의존성 및 실행 조건 조회 |
프레임워크 안내는 공통 사용 방법, React,
Vue, 서브 컴포넌트 속성으로 나누어 제공합니다. MCP의
문서 ID는 각각 Desc/frameworks.html, Desc/react.html, Desc/vue.html,
Desc/component-props.html입니다.
JavaScript 기본 예제와 React, Vue의 JavaScript 및 TypeScript 예제를 제공합니다. 실제로 포함된 예제만 조회할 수 있으며, 공식 문서 링크도 함께 반환합니다.
MCP는 패키지에 포함된 자료를 읽으며 웹에서 최신 문서를 자동 수집하지 않습니다. 원격 자료는 운영 서버에서
갱신하며 로컬 방식은 새 자료가 게시되면 최신 패키지로 MCP를 다시 시작합니다. 특정 패키지 버전을 유지하려면 연결
설정의 @latest를 해당 버전으로 바꿉니다. 고객 프로젝트나 피벗 데이터를 읽고 조작하는 도구는
포함하지 않습니다.
제품 버전과 지원 여부
먼저 list_versions로 실제 자료 버전과 허용 제품판을 확인합니다. 현재 문서판은 2.8,
엔진 버전은 2.8.0이며 MCP 최초 지원 기준은 2.7.0입니다.
acceptedProductVersions에는 2.7, 2.8이 등록되어 있고
acceptsPatchVersions: true이므로 주.부.패치 형식도 허용합니다. 2.6, 미등록 제품판과 네
자리 버전은 허용하지 않습니다. 패치 요청 허용은 해당 패치의 출시나 별도 문서 보유를 뜻하지 않습니다.
고객의 제품 버전을 알면 search_docs, get_api, list_examples,
get_example에 같은 version을 전달합니다. 모르면 임의로 추정하지 않고 생략하여 실제
자료의 기본 버전을 사용합니다. 제품 버전과 MCP 및 타입 npm 패키지 버전은 구분합니다.
다음은 get_api에 전달하는 인수입니다.
{ "id": "Pivot/Properties.html#layoutType", "version": "2.7.0" }
응답의 requestedVersion은 입력한 2.7.0을 유지하고 version은 실제 문서판
2.8입니다. list_versions의 versions에는 실제 보유한 문서판만 나열합니다.
허용 제품판이 과거 문서 보유 목록은 아닙니다.
| 응답 필드 | 의미 |
|---|---|
baselineVersion |
MCP 지원 판정의 시작 제품 버전 |
since, available |
항목의 지원 기준과 요청 제품의 기준 충족 여부 |
introducedVersion |
API, 페이지와 타입의 실제 도입 이력. 원본 기록이 없으면 null |
compatibilityNote |
현재 문서를 다른 제품판에 적용할 때의 한계 |
since는 최초 지원 기준과 실제 도입 버전 중 높은 값입니다. 미지원 항목은 검색과 목록에
available: false로 표시하고 검색 본문 대신 사용 불가 설명을 제공합니다. 상세 설명, TypeScript
선언과 예제 소스는 VERSION_NOT_AVAILABLE 오류로 차단하며 예제의 보조 파일도 같습니다. 필요한 제품
버전을 확인하고 지원이 검증된 기존 기능을 사용하거나 업그레이드하십시오. 미지원 코드를 동작하는 예제로 사용하지
않습니다.
available: true는 도입 기준 충족만 뜻합니다. 최신 옵션, 기본값 변경, 중첩 타입의 새 멤버와 현재
예제 전체의 구버전 동작을 보장하지 않습니다. 예제는 명시 버전과 연결 API 목록으로 판정하며 전체 소스를 자동
분석하지 않습니다.
npm과 원격 서버는 별도로 갱신됩니다. npm 게시만으로 실행 중인 원격 자료가 바뀌지 않으며 운영 서버의 자료 교체와 재시작이 필요합니다. 고객 PC에서 원격 연결을 사용하면 Node.js를 설치할 필요가 없고, 로컬 연결은 Node.js 22.12 이상을 사용합니다.
비상업용 CDN으로 시작하기
AUIPivot은 비상업용 버전의 CDN을 제공합니다. 비상업용 목적의 localhost 또는
127.0.0.1에서 무료로 시작할 수 있습니다. CDN은 비상업용 버전 전용이며, 정품은 제공받은 제품 파일을
연결합니다.
로컬호스트(localhost, 127.0.0.1) 환경 외의 접속 도메인이나 접속 IP에서 사용하고자 하는
경우, 30일 평가판을 제공합니다.
- 평가판 라이선스는 정품과 동일한 기능을 제공합니다.
- 사전 평가, 적합성 검토(PoC), 테스트 목적으로 사용할 수 있습니다.
- 제공 기간은 30일입니다.
- 다운로드: AUIPivot 평가판 다운로드
MCP에서 CDN 연결 방법과 사용 조건을 조회하고, 데이터가 포함된 HTML 예제를 가져올 수 있습니다. 인터넷이 연결된 로컬 웹 서버에서 실행하며 별도 데이터 파일이나 PHP 공통 파일은 필요하지 않습니다.
AUIPivot 비상업용 CDN 시작 안내를 찾아줘. 데이터가 포함된 HTML 하나로 판매 지점별 매출을 집계하고 필드 패널에서 분석 기준을 바꿀 수 있게 만들어줘.
search_docs에서 CDN 또는 비상업용으로 검색하고, get_api의
id: "Desc/noncommercial.html"로 사용 조건까지 확인합니다. 전체 예제는 get_example의
id: "noncommercial-cdn-vanilla-js"로 조회합니다.
React/Vue에서는 프레임워크와 JavaScript/TypeScript 사용 여부를 함께 알려 해당 샘플과 서브 컴포넌트를 참고하도록 요청하세요. 라이브러리와 샘플은 비상업용 GitHub 저장소에서도 내려받을 수 있습니다.
10.6 연결되지 않을 때
-
원격 URL 연결 실패: 주소가
https://auipivot.com/mcp와 정확히 같은지, 끝에 슬래시가 없는지 확인합니다. 전송 방식은 Streamable HTTP이며 사내 HTTPS 접속 정책도 확인합니다. - 브라우저에서 HTTP 405: 일반 웹페이지가 아닌 MCP 요청 전용 주소이므로 정상입니다. AI 도구에서 연결 상태를 확인합니다.
-
HTTP 429: 요청 한도를 초과했습니다.
Retry-After에 표시된 시간 이후 다시 요청합니다. -
로컬 연결에서 npx를 찾을 수 없음: Node.js 설치 후 AI 도구를 다시 시작합니다. 터미널에서만
인식된다면 설정의
command에 npx의 절대 경로를 지정합니다. - 로컬 패키지를 받지 못함: 인터넷 및 npm 접속 상태와 사내 프록시 설정을 확인합니다. 최초 설치가 오래 걸리면 AI 도구의 MCP 시작 제한 시간을 늘립니다.
- 도구가 보이지 않음: AI 도구에서 MCP를 활성화하고 다시 시작합니다. 도구 사용 승인이 표시되면 조회 도구의 사용을 허용합니다.
-
제품 버전이 거부됨:
list_versions의acceptedProductVersions와 패치 허용 여부를 확인합니다. npm 버전을 제품 버전으로 전달하지 않습니다. 원격 자료는 운영 서버에서 갱신하며 로컬 방식은 해당 자료가 들어 있는 MCP 패키지를 선택합니다. - 로컬 연결에서 Node.js 버전 오류: AI 도구가 사용하는 Node.js를 22.12 이상으로 갱신합니다. 터미널과 AI 도구가 같은 Node.js를 사용하는지도 확인합니다.