8. AI 개발 지원: AUIGrid MCP Server
AUIGrid MCP는 AI 개발 도구가 공식 API 문서와 실제 예제 코드를 찾아 답변하도록 돕습니다. 속성의 기본값, 메소드의 인자와 반환값, TypeScript 타입을 확인하고 React와 Vue 예제를 참고해 코드를 작성할 때 사용합니다.
MCP(Model Context Protocol)는 AI 도구와 외부 자료를 연결하는 표준입니다. AUIGrid MCP를 연결하면 필요한 문서를 대화에 직접 복사하는 대신 AI가 도구를 호출해 조회할 수 있습니다.
8.1 연결 방식 선택
사용하는 AI 개발 도구에 원격 또는 로컬 방식 중 하나를 등록합니다. 두 방식 모두 같은 다섯 조회 도구를 제공합니다.
기존 설정이 있다면 다른 MCP 서버 항목은 유지하고 auigrid 항목을 추가하거나 변경합니다.
| 연결 방식 | 실행 위치와 준비 사항 |
|---|---|
| 원격 URL (권장) | AUIGrid 운영 서버에 연결합니다. Streamable HTTP를 지원하는 AI 도구와 인터넷 연결이 필요합니다. |
| 로컬 npm (stdio) | 고객 PC에서 AI 도구가 실행합니다. Node.js 22.12 이상과 npm 접속 환경이 필요합니다. |
8.2 원격 URL 연결 (권장)
서버 주소는 https://auigrid.com/mcp입니다.
https://를 포함하고 주소 끝에 슬래시(/)를 붙이지 않습니다.
전송 방식은 Streamable HTTP이며 로그인, API 키 또는 별도의 인증 설정이 필요하지 않습니다.
공개된 AUIGrid 문서와 예제를 읽기 전용으로 제공합니다. 고객 프로젝트나 그리드 데이터에 접근하는 도구는 포함하지 않습니다.
Claude Code 원격 연결
사용할 프로젝트의 터미널에서 실행합니다.
claude mcp add --transport http auigrid https://auigrid.com/mcp
Claude Code 대화의 /mcp에서 연결 상태를 확인합니다.
Claude Code 공식 연결 안내
Cursor 원격 연결
프로젝트의 .cursor/mcp.json에 추가합니다.
{
"mcpServers": {
"auigrid": {
"url": "https://auigrid.com/mcp"
}
}
}
Cursor의 MCP 설정에서 auigrid가 활성화되어 있는지 확인합니다.
Cursor 공식 연결 안내
VS Code 원격 연결
프로젝트의 .vscode/mcp.json에 추가합니다.
최상위 키는 servers를 사용합니다. Cursor의 mcpServers와 다릅니다.
{
"servers": {
"auigrid": {
"type": "http",
"url": "https://auigrid.com/mcp"
}
}
}
명령 팔레트의 MCP: List Servers에서 서버와 도구 목록을 확인합니다.
VS Code 공식 연결 안내
Codex CLI 원격 연결
터미널에서 다음 명령으로 등록합니다.
codex mcp add auigrid --url https://auigrid.com/mcp
codex mcp list에서 등록 상태를 확인하고, Codex 대화의 /mcp에서 연결 상태를 확인합니다.
Codex 공식 연결 안내
Claude의 사용자 지정 커넥터 등 다른 MCP 지원 도구에서는 원격 MCP 서버로
https://auigrid.com/mcp를 등록하고 전송 방식을 Streamable HTTP로 선택합니다.
연결 후 AI에게 “AUIGrid MCP의 list_versions로 사용 가능한 문서 버전을 확인해 줘”라고 요청하십시오.
원격 자료는 운영 서버에서 갱신하므로 고객이 npm 패키지를 갱신할 필요가 없습니다.
이 주소를 브라우저 주소창에서 열면 HTTP 405가 표시됩니다. MCP 요청만 처리하는 주소이므로 정상 응답입니다.
HTTP 429는 요청 한도를 초과했다는 뜻이며 응답의 Retry-After에 표시된 시간 이후 다시 요청합니다.
8.3 로컬 npm 연결
Node.js 22.12 이상과 로컬 MCP(stdio)를 지원하는 AI 개발 도구가 필요합니다.
설정을 추가하면 AI 도구가 npx로 패키지를 받아 MCP 서버를 자동 실행합니다.
별도의 웹서버 운영이나 소스 빌드는 필요하지 않습니다.
처음 실행하거나 패키지를 갱신할 때는 npm에 접속할 수 있어야 합니다.
-y는 설치 확인을 자동 승인하고, @latest는 npm에 게시된 최신 MCP 패키지를 선택합니다.
사용 중인 도구의 설정을 펼쳐 적용하십시오.
기존 설정 파일이 있다면 다른 서버 설정을 유지하고 auigrid 항목을 추가합니다.
Cursor
프로젝트의 .cursor/mcp.json에 다음 설정을 추가합니다.
{
"mcpServers": {
"auigrid": {
"type": "stdio",
"command": "npx",
"args": ["-y", "auigrid-mcp-server@latest"]
}
}
}
Cursor의 MCP 설정에서 auigrid가 활성화되어 있는지 확인합니다.
Cursor 공식 연결 안내
VS Code
프로젝트의 .vscode/mcp.json에 다음 설정을 추가합니다.
{
"servers": {
"auigrid": {
"type": "stdio",
"command": "npx",
"args": ["-y", "auigrid-mcp-server@latest"]
}
}
}
명령 팔레트의 MCP: List Servers에서 서버를 시작하고 Agent 대화의 도구 목록을 확인합니다.
VS Code 공식 연결 안내
Codex CLI
터미널에서 다음 명령으로 등록한 뒤 Codex를 다시 시작합니다.
codex mcp add auigrid -- npx -y auigrid-mcp-server@latest
codex mcp list에서 등록 상태를 확인하고, Codex 대화의 /mcp에서 연결 상태를 확인합니다.
Codex 공식 연결 안내
Claude Code
사용할 프로젝트의 터미널에서 다음 명령으로 등록한 뒤 Claude Code를 다시 시작합니다.
claude mcp add --transport stdio auigrid -- npx -y auigrid-mcp-server@latest
Claude Code 대화의 /mcp에서 연결 상태를 확인합니다.
Claude Code 공식 연결 안내
8.4 이렇게 질문해 보세요
- “AUIGrid MCP에서
bodyLayoutMode의 설정값과 기본값을 확인하고, 밴드형 칼럼 레이아웃을 작성해 줘.” - “React TypeScript의 밴드형 기본 예제를 찾아 우리 컴포넌트에 적용해 줘. 실제 타입 선언도 확인해 줘.”
- “
exportToXlsx와useExportStyle문서를 찾아 화면과 내보내기 스타일을 분리하는 예제를 작성해 줘.”
원하는 프레임워크와 언어를 함께 알려 주면 예제를 찾기 쉽습니다. MCP는 포함된 문서와 예제를 조회하며, 코드 작성과 수정은 연결한 AI 도구가 수행합니다.
8.5 제공 도구와 자료 범위
| 도구 | 용도 |
|---|---|
list_versions |
포함된 문서, 엔진과 npm 타입 패키지의 버전 확인 |
search_docs |
공식 API와 안내 문서를 한글 또는 API 이름으로 검색 |
get_api |
설명, 기본값, 도입 버전과 대응 TypeScript 선언 조회 |
list_examples |
기능, 프레임워크와 언어에 맞는 예제 검색 |
get_example |
예제 소스와 관련 파일, 의존성 및 실행 조건 조회 |
JavaScript 기본 예제와 React, Vue의 JavaScript 및 TypeScript 예제를 제공합니다. 실제로 포함된 예제만 조회할 수 있으며, 공식 문서 링크도 함께 반환합니다.
3.0.18 제품에서 이용하기
AUIGrid 3.0.18 사용자도 현재 3.0.19 문서와 예제를 조회할 수 있습니다.
search_docs, get_api, list_examples, get_example의
version에 3.0.18 또는 3.0.18.1 같은 패치 버전을 지정합니다.
3.0.19와 해당 패치 버전도 같은 방식으로 조회합니다.
AUIGrid 3.0.18을 사용 중이야. MCP 조회에 version을 3.0.18로 지정하고, since가 3.0.19인 API는 제외해서 작성해줘.
응답의 requestedVersion은 요청한 제품 버전, version은 실제 자료 버전입니다.
3.0.18을 요청하면 version: "3.0.19"와 compatibilityNote를 반환합니다.
과거 문서판을 제공하는 것은 아닙니다.
MCP의 since는 최초 제공 버전인 3.0.18부터 시작합니다.
그 이전부터 있던 기능은 since: "3.0.18", 3.0.19에서 추가한 기능은 since: "3.0.19"로 표시합니다.
공식 원본에 기록된 실제 도입 이력은 introducedVersion에 보존하며 기록이 없으면 null입니다.
공식 HTML 및 TypeScript의 기존 도입 버전은 변경하지 않습니다.
검색 결과와 예제 목록의 available은 요청 제품이 since 기준을 충족하는지 나타냅니다.
available: false인 API 또는 예제를 상세 조회하면
isError: true, code: "VERSION_NOT_AVAILABLE"와 필요한 버전을 반환하며 상세 코드와 예제 파일은 제공하지 않습니다.
예를 들어 3.0.18에서 PercentageRenderer를 요청하면 3.0.19 이상이 필요하다는 안내를 받습니다.
렌더러 대표 문서, 대응 TypeScript 타입과 예제에 같은 기준을 적용합니다.
available: true는 도입 기준 충족을 의미합니다.
기존 API의 기본값, 추가 옵션, 타입과 현재 예제의 동작까지 구버전과 같다고 보장하지 않으므로 사용 중인 제품 문서와 확인하십시오.
list_versions의 baselineVersion은 MCP 기준 버전, versions는 실제 포함된 문서판,
acceptedProductVersions는 조회 가능한 제품 목록입니다.
acceptsPatchVersions가 true이면 해당 제품의 패치 버전도 지정할 수 있습니다.
MCP는 패키지에 포함된 자료를 읽으며 웹에서 최신 문서를 자동 수집하지 않습니다.
로컬 방식은 새 자료가 게시되면 MCP를 다시 시작해 갱신하며 원격 방식은 운영 서버에서 갱신합니다. 특정 패키지 버전을 유지하려면 연결 설정의 @latest를 해당 버전으로 바꿉니다.
고객 프로젝트나 그리드 데이터를 읽고 조작하는 도구는 포함하지 않습니다.
비상업용 CDN 예제로 시작하기
AUIGrid는 비상업용 버전의 CDN을 제공합니다. 정품은 CDN으로 제공하지 않습니다.
비상업용 목적의 localhost 또는 127.0.0.1에서 실행할 수 있으며,
CDN 시작 안내에 연결 코드, 실행 방법과 사용 조건을 정리했습니다.
AUIGrid MCP에서 비상업용 CDN 예제를 찾아 데이터가 포함된 HTML 하나로 만들어줘. 정렬, 필터 및 편집 기능을 사용하고 localhost에서 실행할게.
search_docs의 query: "CDN"으로 안내를 찾고,
list_examples의 query: "CDN"과 get_example으로 실제 예제 코드를 조회합니다.
CDN 예제는 엔진, 라이선스와 CSS를 연결하므로 별도의 제품 파일 복사 없이 시작할 수 있습니다.
React/Vue의 파일 import 방식, TypeScript 예제와 래퍼 속성은 React, Vue 및 TypeScript에서 사용하기를 참고하십시오.
search_docs에서 React TypeScript, Vue TypeScript, resizeMode로 검색할 수 있습니다.
get_api의 문서 ID는 Desc/frameworks.html, Desc/react.html, Desc/vue.html,
Desc/component-props.html입니다. resizeMode는 엔진 속성이 아닌 서브 컴포넌트 1.7의 옵션입니다.
AI에 테스트 서버의 도메인이나 IP에서 실행할 예제를 요청할 때는 평가판 안내도 함께 참고하도록 알려 주십시오. 평가판 다운로드에서 테스트할 주소를 지정할 수 있습니다.
8.6 연결되지 않을 때
- 원격 URL 연결 실패: 주소가
https://auigrid.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로 포함된 버전을 확인합니다. 원격 자료는 운영 서버에서 갱신하며 로컬 방식은 해당 자료가 들어 있는 MCP 패키지를 선택합니다. - 로컬 연결에서 Node.js 버전 오류: AI 도구가 사용하는 Node.js를 22.12 이상으로 갱신합니다. 터미널과 AI 도구가 같은 Node.js를 사용하는지도 확인합니다.
8.7 기존 0.1.1에서 전환하기
AUIGrid 3.0.19 문서를 제공하는 구현은 기존 auigrid-mcp-server@0.1.1과 도구 호출 형식이 다릅니다.
패키지 이름과 npx 실행 명령은 유지하며, 로컬 연결의 Node.js 지원 조건은 18 이상에서 22.12 이상으로 변경되었습니다. 원격 연결에는 고객 PC의 Node.js가 필요하지 않습니다.
원격 연결을 등록하거나 로컬 실행 환경을 갱신한 뒤 AI 도구에서 연결을 다시 시작해 새 도구 목록을 불러오십시오. 저장한 프롬프트나 자동화에서 직접 도구를 호출한다면 아래 표에 따라 변경해야 합니다. 기존 도구 이름의 별칭은 제공하지 않습니다.
| 기존 도구 | 새 도구 및 지정 방법 |
|---|---|
search_api |
search_docs에 query를 전달합니다. 필요한 경우 문서 경로인 category를 지정합니다. |
get_api_entry |
get_api에 검색 결과의 id를 전달합니다. 기존 parent 대신 category로 구분합니다. |
search_methods, get_method |
search_docs, get_api에 category: "DataGrid/Methods"를 지정합니다. |
search_static_utils, get_static_util |
search_docs, get_api에 category: "DataGrid/StaticUtils"를 지정합니다. |
search_samples, list_samples |
list_examples로 조회합니다. query, framework, language로 목록을 좁힐 수 있습니다. |
get_sample |
get_example에 목록에서 얻은 id를 전달합니다. 기존 파일명인 name을 그대로 넘기지 않습니다. |
ping |
연결 확인에는 list_versions를 호출합니다. pong 대신 포함된 자료 버전을 반환합니다. |
기존 kind와 parent는 자동 변환하지 않습니다.
같은 이름의 속성이 여러 곳에 있으면 get_api는 후보를 반환하므로, 검색 결과의 id를 지정하십시오.
다음은 get_method로 조회하던 메소드를 새 도구로 조회하는 예입니다.
{
"name": "get_api",
"arguments": {
"name": "exportToXlsx",
"category": "DataGrid/Methods",
"version": "3.0.19"
}
}
예제는 list_examples에 framework: "react", language: "typescript"를 전달해 찾고,
결과의 id로 get_example을 호출합니다.
기존 패키지의 모든 예제가 포함된 것은 아닙니다. query는 예제 제목과 기능, 태그를 검색하며 소스 전체를 검색하지 않습니다.
새 도구는 Markdown 본문 대신 structuredContent 객체와 같은 내용을 담은 JSON 텍스트를 반환합니다.
결과를 직접 처리하는 코드도 함께 변경해야 합니다. 검색과 목록의 최대 limit은 20입니다.
- 긴 API: 응답의
nextOffset을 다음 요청의offset으로 전달합니다. - 긴 예제:
nextStartLine을startLine으로 전달합니다. - 검색 결과 없음: 빈
results를 반환합니다. API나 예제 조회 실패:isError: true와 오류 정보를 반환합니다.
도구의 version은 문서 또는 제품 버전입니다.
npm 타입 버전 2.0.19을 지정하지 않습니다.
현재 문서의 3.0.18 제품 조회 안내와 list_versions에서
실제 문서판과 조회 가능한 제품 버전을 구분해 확인하십시오.