Nuxt MCP Server — AI가 내 앱 문서를 직접 읽게 만들기

Resource  → AI에게 데이터 제공 (읽기 전용)
Tool      → AI가 실행하는 함수 (검색, API 호출)
Prompt    → 재사용 가능한 프롬프트 템플릿

npx nuxi module add mcp-toolkit

export default defineNuxtConfig({
  modules: ["@nuxtjs/mcp-toolkit"],
  mcp: {
    name: "my-nuxt-app",
  },
})

import { defineMcpResource } from "@nuxtjs/mcp-toolkit/server"
import { queryCollection } from "#content"
 
export default defineMcpResource({
  uri: "resource://my-app/documentation-pages",
  description: "앱의 모든 문서 페이지 목록",
  cache: "1h",
  async handler(uri: URL) {
    const allDocs = await queryCollection(event, "docs")
    const result = allDocs.map((doc) => ({
      path: doc._path,
      title: doc.title,
      description: doc.description,
    }))
 
    return {
      contents: [
        {
          uri: uri.href,
          mimeType: "application/json",
          text: JSON.stringify(result, null, 2),
        },
      ],
    }
  },
})

import { defineMcpTool, jsonResult } from "@nuxtjs/mcp-toolkit/server"
import { z } from "zod"
 
export default defineMcpTool({
  description: "앱 문서에서 특정 주제를 검색한다",
  inputSchema: {
    query: z.string().describe("검색할 키워드 또는 질문"),
    limit: z.number().optional().default(5).describe("최대 결과 수"),
  },
  async handler({ query, limit }) {
    const results = await searchDocuments(query, { limit })
 
    return jsonResult(
      results.map((r) => ({
        path: r._path,
        title: r.title,
        excerpt: r.body?.slice(0, 200),
        score: r._score,
      }))
    )
  },
})

import { defineMcpPrompt } from "@nuxtjs/mcp-toolkit/server"
import { z } from "zod"
 
export default defineMcpPrompt({
  description: "특정 주제에 대한 최적의 Nuxt 문서를 찾아준다",
  inputSchema: {
    topic: z.string().describe("알고 싶은 주제 또는 기능"),
  },
  async handler({ topic }) {
    const docs = await searchDocuments(topic, { limit: 3 })
 
    const docsList = docs
      .map((d) => `- ${d.title}: ${d._path}`)
      .join("\n")
 
    return {
      messages: [
        {
          role: "user",
          content: {
            type: "text",
            text: `"${topic}"에 대한 문서를 찾아줘.\n\n관련 문서:\n${docsList}`,
          },
        },
      ],
    }
  },
})

사용자: "Nuxt에서 소셜 로그인 구현하는 법 알려줘"
 
1. search-docs Tool 호출 (query: "소셜 로그인")
   → ["auth/social-login", "modules/oauth"] 반환
 
2. get-page-content Tool 호출 (path: "auth/social-login")
   → 전체 문서 내용 반환
 
3. AI가 문서 내용을 바탕으로 답변 생성

{
  "mcpServers": {
    "my-nuxt-app": {
      "url": "https://my-app.com/mcp",
      "transport": "http"
    }
  }
}

import { defineMcpTool, jsonResult } from "@nuxtjs/mcp-toolkit/server"
import { z } from "zod"
 
export default defineMcpTool({
  description: "앱 문서에서 특정 주제를 검색한다",
  inputSchema: {
    query: z.string().min(1).describe("검색할 키워드 또는 질문"),
  },
  async handler({ query }) {
    try {
      const results = await searchDocuments(query)
      if (results.length === 0) {
        return jsonResult({ message: "검색 결과가 없다", query })
      }
      return jsonResult(results)
    } catch (error) {
      throw new Error(`문서 검색 실패: ${error instanceof Error ? error.message : "알 수 없는 오류"}`)
    }
  },
})