MCP 서버

MCP 란 무엇입니까?

MCP(Model Context Protocol)는 AI 도우미가 외부 데이터 소스 및 도구에 액세스할 수 있도록 해주는 표준화된 프로토콜입니다. Nuxt UI는 Claude Code, Cursor, Windsurf와 같은 AI 도우미가 구성 요소 정보, 소스 코드 및 사용 예제에 직접 액세스할 수 있도록 해주는 MCP 서버를 제공합니다.

MCP 서버는 컴포넌트 라이브러리에 대한 구조적 액세스를 제공하여 AI 도구가 Nuxt UI 개발을 쉽게 이해하고 지원할 수 있도록 합니다.

가용 리소스

Nuxt UI MCP 서버는 검색을 위해 다음과 같은 리소스를 제공합니다.

• resource://nuxt-ui/components: 범주를 사용하여 사용 가능한 모든 구성 요소를 탐색합니다.
• resource://nuxt-ui/composables: 범주를 사용하여 사용 가능한 모든 합성 파일을 찾습니다.
• resource://nuxt-ui/examples: 사용 가능한 코드 예제를 모두 찾아보기
• resource://nuxt-ui/templates: 사용 가능한 모든 프로젝트 템플릿 보기
• resource://nuxt-ui/documentation-pages: 사용 가능한 모든 문서 페이지 보기

@를 사용하여 Claude Code와 같은 도구를 사용하여 이러한 리소스에 액세스 할 수 있습니다.

사용 가능한 툴

Nuxt UI MCP 서버는 범주별로 구성된 다음과 같은 도구를 제공합니다.

검색 툴

• search-components: 이름, 범주 또는 의도를 기준으로 구성 요소를 검색합니다. "segmented control" 또는 "combobox"와 같은 대체 이름이 일치하고 결과는 관련성별로 순위가 매겨집니다. params가 없으면 모든 구성 요소가 나열됩니다
• search-composables: 이름이나 설명을 기준으로 합성 파일을 검색합니다. 매개변수가 없으면 모든 합성 파일이 나열됩니다.
• search-icons: Iconify 컬렉션에서 아이콘을 검색합니다(기본값은 lucide). Nuxt UI에서 사용하는 i-{prefix}-{name} 형식으로 아이콘 이름을 반환합니다.

구성 요소 도구

• get-component: 구성 요소 문서 및 세부 정보를 검색합니다. sections 매개 변수(usage, examples, api, theme, changelog)를 지원하여 특정 부품만 검색하고 응답 크기를 줄일 수 있습니다.
• get-component-metadata: 소품, 슬롯 및 이벤트(경량, 문서 내용 없음)를 포함하는 구성 요소에 대한 메타데이터를 검색합니다. 소품은 기본적으로 컴팩트하며 원시 재귀 소품 스키마에 대해 full: true를 전달합니다

문서화 툴

• search-documentation: 제목, 설명 또는 섹션별로 문서 페이지를 검색합니다. params가 없으면 모든 페이지가 나열됩니다. section를 사용하여 필터링합니다(예: "getting-started", "components").
• get-documentation-page: URL 경로를 통해 문서 페이지 컨텐츠를 검색합니다. headings 매개 변수는 특정 h2 섹션(예: ["Usage", "API"])만 검색하고 응답 크기를 줄입니다.

Template 툴

• list-templates: 프레임워크 필터링 옵션을 사용하여 사용 가능한 모든 Nuxt UI 템플릿을 나열합니다.
• get-template: 템플릿에 대한 설명, 기능 및 링크 검색

샘플 도구

• list-examples: 사용 가능한 모든 UI 예제 이름을 나열합니다.
• get-example: UI 예제에 대한 소스 코드 검색

마이그레이션 도구

• get-migration-guide: 이 Nuxt UI 버전에 대한 마이그레이션 가이드 및 업그레이드 지침을 검색합니다.

Limit 사용할 수 있는 도구

옵션 X-MCP-Tools HTTP 헤더를 쉼표로 구분된 도구 이름 목록으로 설정하여 도우미가 필요로 하는 도구만 표시합니다. 이렇게 하면 도우미에 정의된 컨텍스트를 줄일 수 있습니다.

정확한 케밥 케이스 MCP 도구 이름을 사용하십시오. 예를 들면 다음과 같습니다.

{
  "X-MCP-Tools": "search-components,get-component"
}

헤더는 모든 도구를 노출하지 않고, 빈 헤더는 도구를 노출하지 않으며, 알 수 없는 도구 이름은 구성 오류를 반환합니다.

사용할 수 있는 프롬프트

Nuxt UI MCP 서버는 일반적인 작업 흐름에 대한 안내 프롬프트를 제공합니다.

• find-component-for-usecase: 특정 사용 사례에 가장 적합한 구성 요소 찾기
• implement-component-with-props: 적절한 props로 전체 구성요소 구현을 생성합니다.
• setup-project-with-template: 프로젝트 템플릿에 대한 지침 보기

/를 사용하여 Claude Code와 같은 도구를 사용하여 이러한 리소스에 액세스 할 수 있습니다.

설정

Nuxt UI MCP 서버는 HTTP 전송을 사용하며 다른 AI 도우미에서 구성할 수 있습니다.

Chat GPT

다음 단계에 따라 ChatGPT 내에서 Nuxt UI를 커넥터로 설정합니다.Follow these steps to set up Nuxt UI as a connector within ChatGPT:

1. **Enable 개발자 모드: **
   • Settings > Connectors > Advanced settings > Developer mode 로 이동합니다.
2. **ChatGPT 설정 ** 열기
3. **커넥터 탭에서 새 커넥터를 만듭니다. **
   • xxNuxt UI 이름 지정
   • MCP 서버 URL: https://ui.nuxt.com/mcp
   • 인증: None
4. Create 클릭

Nuxt UI 커넥터는 나중에 대화 중에 작곡가의 "개발자 모드" 도구에 나타납니다.

Claude 코드

CLI 명령을 사용하여 서버를 추가합니다.

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

Claude 데스크톱

Setup 설명서:

1. Claude Desktop을 열고 "설정" > "개발자"로 이동합니다.
2. Edit Config 를 클릭하면 로컬 Claude 디렉토리가 열립니다.
3. 사용자 정의 MCP 서버 구성을 사용하여 claude_desktop_config.json 파일을 수정합니다.

{
  "mcpServers": {
    "nuxt-ui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://ui.nuxt.com/mcp"
      ]
    }
  }
}

4. Claude Desktop 앱을 다시 시작합니다. 이제 Nuxt UI MCP 서버를 등록해야 합니다.

Cursor 키

빠른 설치:

아래 버튼을 클릭하여 커서에 직접 Nuxt UI MCP 서버를 설치합니다.

수동 설정 지침:

1. 커서를 열고 "설정"> "도구 및 MCP"로 이동합니다.
2. Nuxt UI MCP 서버 구성 추가

또는 프로젝트 루트에서 .cursor/mcp.json를 수동으로 생성 / 업데이트합니다.

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

Gemini CLI

Setup 사용 방법:

1. Gemini CLI 설정 파일을 찾습니다 (일반적으로 ~/.gemini/settings.json 또는 환경에 지정된대로).
2. mcpServers 개체에 다음 구성을 추가합니다.

{
  "mcpServers": {
    "nuxt-ui": {
      "httpUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

3. 터미널 세션을 다시 시작하거나 CLI를 다시 로드합니다. 이제 Nuxt UI MCP 서버 도구를 사용할 수 있습니다.

GitHub Copilot 에이전트

Visual Studio Code에서 MCP 서버를 이미 구성한 경우 servers 키를 mcpServers로 바꾸고 Copilot에서 사용할 수 있는 도구를 지정하는 tools 키를 추가합니다.

Setup 설명서:

1. GitHub 저장소로 이동
2. xSettings>Code&automation>Copilot>Coding agent로 이동
3. xMCP configuration 섹션에서 다음 구성을 추가합니다.

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

4. 저장을 클릭합니다

Configuration 구성 확인:

MCP 서버가 올바르게 구성되었는지 확인하려면 다음을 수행합니다.

1. 리포지토리에 문제를 만들고 Copilot에 할당
2. Copilot이 pull request를 생성할 때까지 기다립니다.
3. Pull Request에서 Copilot started work 타임라인 이벤트에서 View session 을 클릭합니다.
4. 오른쪽 위에 있는 줄임표 버튼(...)을 클릭한 다음 사이드바에서 Copilot 을 클릭합니다
5. MCP 서버 시작 단계를 확장하여 구성된 Nuxt 도구를 확인합니다.

GitHub Copilot 코딩 에이전트와 MCP를 사용하는 방법에 대한 자세한 내용은 MCP](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/extend-coding-agent-with-mcp)를 사용하는 [Extend 코딩 에이전트를 참조하십시오.

GitHub Copilot CLI

Setup 지침:

1. Start GitHub Copilot CLI를 대화형 모드로 실행합니다.
2. x/mcp add 실행.
3. 구성 양식을 다음과 같이 입력합니다.Fill the configuration form with:
   • Server Name: nuxt-ui
   • Server Type: HTTP
   • URL: https://ui.nuxt.com/mcp
   • HTTP Headers : 비어 있음
   • Tools: *
4. Press Ctrl+S 저장. MCP 서버는 CLI를 다시 시작하지 않고도 즉시 사용할 수 있습니다.

또는 ~/.copilot/mcp-config.json에 서버를 직접 추가하십시오.

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

/mcp show를 사용하여 서버가 구성되어 있고 사용 가능한지 확인합니다.

자세한 내용은 GitHub Copilot에 대한 MCP 서버 추가 CLI를 참조하십시오.

Google 중력 차단

Setup 지침:

1. 편집기 에이전트 패널 상단에 있는 "..." 드롭다운을 통해 MCP 스토어를 엽니다.
2. MCP 서버 관리 클릭
3. View raw config 를 클릭합니다.
4. 사용자 정의 MCP 서버 구성을 사용하여 mcp_config.json를 수정합니다.

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

5. MCP 서버 관리 탭으로 돌아가서 새로 고침을 클릭합니다. 이제 Nuxt UI MCP 서버가 나타납니다.

Le 채팅 Mistral

Setup 지침:

1. 인텔리전스 > 커넥터로 이동합니다.
2. 커넥터 추가 버튼을 클릭한 다음 "Custom MCP Connector"를 선택합니다.
3. 사용자 지정 MCP 커넥터 만들기:
   • 커넥터 이름: NuxtUI
   • Server URL: https://ui.nuxt.com/mcp

OpenCode (### OpenCode) 코드

Setup 설명서:

1. 프로젝트 루트에서 opencode.json를 만듭니다.
2. 다음 설정을 추가합니다.

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt-ui": {
      "type": "remote",
      "url": "https://ui.nuxt.com/mcp",
      "enabled": true
    }
  }
}

Visual Studio 코드

Setup 사용 방법:

1. VS 코드를 열고 명령 팔레트에 액세스 (Ctrl/Cmd+Shift+P)
2. Type "Preferences: Open Workspace Settings (JSON)" 선택
3. 프로젝트의 .vscode 폴더로 이동하거나 존재하지 않는 경우 하나를 만듭니다.Navigate to your project's .vscode folder or create one if it doesn't exist.
4. xxmcp.json 파일을 만들거나 편집합니다.

{
  "servers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "headers": {
        "X-MCP-Tools": "search-components,get-component"
      }
    }
  }
}

headers 항목을 제거하여 모든 Nuxt UI MCP 도구를 사용할 수 있도록 합니다.

Windsurf 윈도우서핑

Setup 설명서:

1. Windsurf를 열고 Settings > Windsurf Settings > Cascade 로 이동합니다.
2. Manage MCP 버튼을 클릭한 다음 View raw config 옵션을 선택합니다.
3. MCP 설정에 다음 설정을 추가합니다.

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

Zed 코드

Setup 지침:

1. Zed를 열고 "설정" > "설정 열기"로 이동합니다.
2. JSON 설정 파일로 이동
3. 다음 컨텍스트 서버 구성을 설정에 추가합니다.

{
  "context_servers": {
    "nuxt-ui": {
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

Usage 예제

구성이 완료되면 AI Assistant에게 다음과 같은 질문을 할 수 있습니다.

• "사용 가능한 모든 Nuxt UI 구성 요소 나열"
• "Get Button 구성 요소 문서"
• "Show me just the Button 사용법 예제만 보여주세요"
• "Input은 어떤 props를 허용합니까?"
• "폼 관련 구성 요소 찾기"
• "lucide에서 화살표 아이콘 검색"
• 대시보드 템플릿 나열
• 템플릿 설정 지침 가져오기
• 설치 가이드 표시
• "마이그레이션 가이드 얻기"
• "모든 샘플 나열"
• "ContactForm 예제 코드 가져오기"

AI 도우미는 MCP 서버를 사용하여 구조화된 JSON 데이터를 가져오고 개발 중에 Nuxt UI에 대한 안내 지원을 제공합니다.