Nuxt MCP Server

Model Context Protocol 지원을 통해 Nuxt 문서를 AI 어시스턴트에서 사용하세요.

MCP란?

MCP(Model Context Protocol)는 AI 어시스턴트가 외부 데이터 소스와 도구에 접근할 수 있게 해주는 표준화된 프로토콜입니다. Nuxt는 Claude Code, Cursor, Windsurf와 같은 AI 어시스턴트가 문서, 블로그 글, 배포 가이드를 직접 조회할 수 있도록 MCP 서버를 제공합니다.

MCP 서버는 Nuxt 문서에 구조화된 접근을 제공하여, AI 도구가 Nuxt 개발을 이해하고 도울 수 있도록 쉽게 만들어 줍니다.

리소스

Nuxt MCP 서버는 탐색을 위해 다음 리소스를 제공합니다:

  • resource://nuxt-com/documentation-pages: 사용 가능한 모든 문서 페이지를 탐색합니다(기본값은 v4.x)
  • resource://nuxt-com/blog-posts: 릴리스와 튜토리얼을 포함한 모든 Nuxt 블로그 글을 탐색합니다
  • resource://nuxt-com/deploy-providers: 모든 배포 제공자와 호스팅 플랫폼을 탐색합니다

Claude Code와 같은 도구에서 @를 사용해 이러한 리소스에 접근할 수 있습니다.

도구

Nuxt MCP 서버는 다음과 같은 도구를 카테고리별로 제공합니다:

문서

  • list_documentation_pages: 카테고리와 기본 정보를 포함한 사용 가능한 모든 Nuxt 문서 페이지를 나열합니다. 버전 필터링(3.x, 4.x 또는 전체)을 지원합니다
  • get_documentation_page: 경로로 문서 페이지의 내용과 세부 정보를 가져옵니다
  • get_getting_started_guide: 특정 Nuxt 버전에 대한 시작 가이드를 가져옵니다

블로그

  • list_blog_posts: 날짜, 카테고리, 태그를 포함한 메타데이터와 함께 모든 Nuxt 블로그 글을 나열합니다
  • get_blog_post: 경로로 블로그 글의 내용과 세부 정보를 가져옵니다

배포

  • list_deploy_providers: Nuxt 애플리케이션을 위한 모든 배포 제공자와 호스팅 플랫폼을 나열합니다
  • get_deploy_provider: 경로로 배포 제공자의 세부 정보와 안내를 가져옵니다

프롬프트

Nuxt MCP 서버는 일반적인 워크플로를 위한 가이드 프롬프트를 제공합니다:

  • find_documentation_for_topic: 특정 주제나 기능에 가장 적합한 Nuxt 문서를 찾습니다
  • deployment_guide: 특정 호스팅 제공자에 대한 배포 안내를 가져옵니다
  • migration_help: Nuxt 버전 간 마이그레이션을 도와줍니다

Claude Code와 같은 도구에서 /를 사용해 이러한 리소스에 접근할 수 있습니다.

설정

Nuxt MCP 서버는 HTTP 전송을 사용하며, 다양한 AI 어시스턴트에 설치할 수 있습니다.

ChatGPT

MCP를 사용하는 커스텀 커넥터는 웹에서 Pro 및 Plus 계정용 ChatGPT에서 사용할 수 있습니다.

다음 단계를 따라 ChatGPT 내에서 Nuxt를 커넥터로 설정하세요:

  1. Developer mode 활성화:
    • Settings → Connectors → Advanced settings → Developer mode로 이동
  2. ChatGPT 설정 열기
  3. Connectors 탭에서 새 커넥터 생성:
    • 이름 지정: Nuxt
    • MCP server URL: https://nuxt.com/mcp
    • Authentication: None
  4. Create 클릭

Nuxt 커넥터는 이후 대화 중 컴포저의 "Developer mode" 도구에 표시됩니다.

Claude Code

Claude Code가 설치되어 있는지 확인하세요 - 설치 안내는 Anthropic 문서를 참고하세요.

CLI 명령어를 사용해 서버를 추가하세요:

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

Cursor

아래 버튼을 클릭해 Cursor에 Nuxt MCP 서버를 바로 설치하세요:

Install MCP Server

수동 설정을 위해서는 다음 단계를 따르세요:

  1. Cursor를 열고 "Settings" > "Tools & MCP"로 이동
  2. Nuxt MCP 서버 설정을 추가

또는 프로젝트 루트에 .cursor/mcp.json을 수동으로 생성/업데이트하세요:

.cursor/mcp.json
{
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    }
  }
}

Le Chat Mistral

  1. "Intelligence" > "Connectors"로 이동
  2. "Add Connector" 버튼을 클릭한 후, "Custom MCP Connector"를 선택
  3. Custom MCP Connector를 생성:
    • Connector Name : Nuxt
    • Connector Server : https://nuxt.com/mcp

Visual Studio Code

필수 확장 프로그램 설치 - GitHub Copilot과 GitHub Copilot Chat 확장 프로그램이 설치되어 있는지 확인하세요.
  1. VS Code를 열고 명령 팔레트(Ctrl/Cmd + Shift + P)에 접근
  2. "Preferences: Open Workspace Settings (JSON)"을 입력하고 선택
  3. 프로젝트의 .vscode 폴더로 이동하거나, 없다면 생성
  4. 다음 설정으로 mcp.json 파일을 생성하거나 수정:
.vscode/mcp.json
{
  "servers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    }
  }
}

GitHub Copilot Agent

GitHub Copilot 코딩 에이전트용 MCP 서버를 설정하려면 저장소 관리자 권한이 필요합니다.

이미 VS Code에서 MCP 서버를 설정했다면(GitHub Copilot Agent용으로는 servers 키를 mcpServers로 교체), GitHub Copilot 코딩 에이전트에도 유사한 설정을 활용할 수 있습니다. Copilot에서 사용할 수 있는 도구를 지정하는 tools 키를 추가해야 합니다.

  1. GitHub 저장소로 이동
  2. Settings > Code & automation > Copilot > Coding agent로 이동
  3. MCP configuration 섹션에 다음 설정을 추가: 
    {
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}
  4. Save 클릭

설정 검증

MCP 서버가 올바르게 설정되었는지 확인하려면:

  1. 저장소에 이슈를 생성하고 Copilot에 할당
  2. Copilot이 Pull Request를 생성할 때까지 대기
  3. Pull Request에서 "Copilot started work" 타임라인 이벤트의 View session을 클릭
  4. 오른쪽 상단의 줄임표 버튼(...)을 클릭한 후, 사이드바에서 Copilot을 클릭
  5. Start MCP Servers 단계를 확장해 설정된 Nuxt 도구를 확인

GitHub Copilot 코딩 에이전트와 MCP 사용에 대한 자세한 내용은 Extend coding agent with MCP를 참고하세요.

Windsurf

  1. Windsurf를 열고 "Settings" > "Windsurf Settings" > "Cascade"로 이동
  2. "Manage MCPs" 버튼을 클릭한 후, "View raw config" 옵션을 선택
  3. MCP 설정에 다음 구성을 추가:
.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    }
  }
}

Zed

  1. Zed를 열고 "Settings" > "Open Settings"로 이동
  2. JSON 설정 파일로 이동
  3. 설정에 다음 컨텍스트 서버 구성을 추가:
.config/zed/settings.json
{
  "context_servers": {
    "nuxt": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://nuxt.com/mcp"],
      "env": {}
    }
  }
}

Opencode

  1. 프로젝트 루트에 opencode.json을 생성
  2. 다음 설정을 추가:
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt": {
      "type": "remote",
      "url": "https://nuxt.com/mcp",
      "enabled": true
    }
  }
}

프롬프트 예시

설정이 완료되면, AI 어시스턴트에게 다음과 같은 질문을 할 수 있습니다:

  • "사용 가능한 모든 Nuxt 문서 페이지를 나열해 줘"
  • "소개 문서를 가져와 줘"
  • "v3와 v4의 차이점이 뭐야?"
  • "Vercel에 어떻게 배포해?"
  • "최신 블로그 글을 보여줘"
  • "Nuxt 3에서 Nuxt 4로 마이그레이션하는 걸 도와줘"
  • "composables에 대한 문서를 검색해 줘"
  • "Cloudflare용 배포 가이드를 찾아줘"

AI 어시스턴트는 MCP 서버를 사용해 구조화된 JSON 데이터를 가져오고, Nuxt 개발을 위한 가이드형 도움을 제공합니다.