de en es ja ko ru zh

nextjs-mcp-kit MCP Server

Name: nextjs-mcp-kit MCP Server
Author: kocicjelena

by kocicjelena

Overview Schema Source Related Servers Score Discussions Admin

TypeScript

Hybrid

nextjs-mcp-kit

Next.js App Router용 MCP 서버, MCP 클라이언트, 그리고 프로바이더에 종속되지 않는 채팅 UI — 설치할 수 있는 라우트 핸들러, 컴포넌트, 타입 상태로 제공됩니다.

앱에 대해 실제로 아는 작은 채팅을 앱에 추가하세요.

스마트 채팅 — 응답은 여러분이 작성한 내용, 여러분이 업로드한 문서에서 나옵니다.

여러분이 추가한 도구 브라우저의 폼에서 답변을 입력해 도구를 만드세요. 재학습도, 벡터 데이터베이스도, 재배포도 필요 없습니다.

일부러 똑똑하게 만들지 않았습니다. 인사하고 영업 시간을 아는 작은 채팅이며, 만드는 데 1분이면 충분합니다.

npm i nextjs-mcp-kit && npx nextjs-mcp-kit init

nextjs-mcp-kit — 스캐폴더 옵션

npx nextjs-mcp-kit init // scaffold into the current directory

npx nextjs-mcp-kit init --force // overwrite files that already exist

npx nextjs-mcp-kit init --dir web // scaffold into ./web

그런 다음 60초 만에 첫 도구 만들기로 이동하세요.

일부러 분리해 둔 여섯 개의 화면:

Route	What it is
`/`	MCP 프롬프트 채팅 — 앱 자체 MCP 서버가 제공하는 프롬프트
`/chat`	일반 채팅 — 프로바이더 + 모델을 선택하고, 지시문을 설정하고, 대화하세요. 도구 없음.
`/add-tool`	도구 만들기 — 폼, `.md`/`.txt` 업로드, 또는 스킬로부터
`/mcp-dashboard`	MCP 서버가 제공하는 것과 클라이언트가 이를 가리킬 `mcp.json`
`/personal-chat`	도구와 채팅 — 스트리밍되며, 항상 실행된 도구를 표시
`/smart-chat`	방문자 채팅 — 질문 하나를 넣으면 근거 있는 답변 하나가 나옵니다.

브라우저에서 도구를 추가하면 즉시 채팅에서 사용할 수 있으며, 앱을 가리키는 모든 대상(다른 사람의 클라이언트 포함)에 MCP로 제공됩니다.

Related MCP server: Example Next.js MCP Server

60초 만에 첫 도구 만들기

API도, 키도, 코드도 필요 없습니다. npm run dev를 실행하고 **/add-tool**을 연 다음 첫 번째 옵션을 **"내가 작성한 텍스트 반환"**으로 두세요:

필드	이렇게 입력
이름	`opening_hours`
설명	`The shop opening hours. Call this when asked when we are open.`
반환할 텍스트	`Open 9am to 6pm, Monday to Friday. Closed weekends.`

파라미터는 비워 두세요. 도구 추가를 누르세요.

이제 **/personal-chat**을 열고 opening_hours를 선택한 다음 *"토요일에 여나요?"*라고 물어보세요.

모델은 **"아니요 — 주말은 휴무입니다"**라고 답하고, 답변 아래에는 opening_hours가 실행되었다고 표시되며 도구가 반환한 내용이 정확히 나타납니다. 모델은 그걸 몰랐습니다. 30초 전에 폼을 통해 알려준 것입니다.

이것이 전체 루프입니다. 이 README의 나머지는 모두 이 루프에 선택지를 더한 것입니다.

설명이 보기보다 중요한 이유

설명은 문서가 아니라 모델이 도구를 호출할지 여부를 결정하는 기준입니다. "opening hours"는 절반은 무시됩니다. "The shop opening hours. Call this when asked when we are open."는 호출됩니다. 모호한 설명은 등록만 되고 선택되지 않는 도구를 의미합니다.

무엇에 좋은가

방문자를 위한 작은 채팅. 지원 에이전트가 될 만큼 똑똑하지도, 그럴 의도도 없습니다. 인사를 건네고, 앱이 실제로 받는 여섯 가지 질문에 여러분이 작성한 답변으로 응답할 만큼은 똑똑합니다. 그 답변 하나하나는 skill 도구입니다. 이름, 설명, 반환할 텍스트로 구성되죠.

여러분이 알려준 내용에 근거한 답변. 도구가 질문에 맞으면 모델은 그 도구를 호출하고 돌아온 내용으로 답합니다. 상점에 대해 어렴풋이 기억하는 일반적인 지식이 아니라요. 도구가 다루는 질문은 도구가 답합니다.

무슨 일이 있었는지 항상 확인할 수 있습니다. 도구를 사용한 모든 답변은 도구 이름과 반환 내용을 표시합니다. 답변이 여러분의 텍스트에서 나왔다면 증명할 수 있고, 모델이 스스로 답했다면 추적 기록이 비어 있어 그것도 확인할 수 있습니다. 어떤 답변인지 추측할 필요가 없습니다.

조용한 폴백이 없습니다. 프로바이더가 도구를 호출할 수 없거나 Ollama 모델에 해당 기능이 없으면 턴이 실행되기 전에 사유와 함께 503을 받습니다. 선택한 도구를 조용히 무시한 답변은 절대 없습니다.

실행 비용이 없습니다. Ollama는 로컬이므로 방문자 채팅은 메시지당 비용이 들지 않고 데이터가 머신을 떠나지 않습니다. 같은 도구로 더 나은 결과를 원하면 Claude로 전환하세요. 선택기는 결제가 필요한 턴에는 💳, 로컬 턴에는 🖥️를 표시합니다.

MCP 서버이기도 합니다. 브라우저에서 추가한 도구가 MCP로 제공되므로 Claude Desktop이나 다른 클라이언트가 배포된 앱을 가리키고 사용할 수 있습니다. MCP 클라이언트 연결을 참고하세요.

방문자에게 제공할 페이지

**/smart-chat**이 바로 방문자에게 안내할 페이지입니다. 질문 하나를 넣으면 답변 하나가 나옵니다. 등록된 모든 도구를 확인하고, 맞는 도구를 사용하며, 어떤 도구가 실행되었는지 알려줍니다. 유지할 대화도, 저장할 기록도, 방문자가 설정할 것도 없습니다.

// app/ask/page.tsx — your public "ask us anything" page
export { SmartChatPage as default } from 'nextjs-mcp-kit/pages';

또는 컴포넌트만 여러분의 페이지에 넣을 수도 있습니다:

import { SmartChat } from 'nextjs-mcp-kit/components';

**/personal-chat**은 여러분을 위한 페이지입니다. 전체 대화, 지시문, 이 대화에서 사용할 도구 체크리스트를 제공합니다. 다른 사람이 사용하기 전에 새 도구를 시험해 보는 곳입니다.

**/add-tool**과 **/mcp-dashboard**도 방문자용이 아니라 여러분용입니다. 둘 다 인증이 없으므로 자체 인증 뒤에 두거나, 공개 앱에 스캐폴드하지 마세요.

Ollama(로컬, 무료) 및 Claude(Anthropic)와 함께 작동합니다. 세 번째 프로바이더를 추가하는 것은 파일 하나와 배열 항목 하나입니다.

설치

Next.js 16+ 및 Node 20.9+가 필요합니다. 피어 범위는 의도적으로 >=15.0.0이 아니라 >=16.0.0입니다. 16은 이 프로젝트가 빌드되고 테스트된 유일한 메이저 버전이며, 피어 범위는 우연히 동작할 수도 있는 것이 아니라 실제로 검증된 것을 설명해야 하기 때문입니다. Next 15에서 npm i를 실행하면 피어 충돌이 보고됩니다. 이는 버그가 아니라 의도된 신호입니다.

기존 Next.js 앱에 설치

npm i nextjs-mcp-kit
npx nextjs-mcp-kit init

init은 라우트 핸들러와 /chat을 작성합니다. 루트 레이아웃은 건드리지 않습니다 — 두 줄을 직접 추가하세요:

// app/layout.tsx
import { GlobalProvider } from 'nextjs-mcp-kit/context';
import 'nextjs-mcp-kit/styles.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <GlobalProvider>{children}</GlobalProvider>
      </body>
    </html>
  );
}

그런 다음 cp env.local.example .env.local을 실행하고 npm run dev를 실행하세요.

컴포넌트 가져오기: 사람들이 가장 많이 실수하는 부분

컴포넌트는 패키지 루트에서 내보내지지 않습니다. 다음은 실패합니다:

import { AgentChat } from 'nextjs-mcp-kit';
// The export AgentChat was not found in module .../dist/index.js [app-rsc]
// Did you mean to import initialAgent?

다음은 동작합니다:

import { AgentChat } from 'nextjs-mcp-kit/components';

루트 엔트리는 의도적으로 서버에서 안전합니다 — Exports를 참고하세요. 경험 법칙: 렌더링되는 것은 루트에 있지 않습니다.

import를 고치는 것은 필요하지만 충분하지 않습니다. AgentChat은 앱에 /api/providers, /api/chat, /api/instructions가 존재해야 하고, 그 위에 GlobalProvider가 있어야 합니다. npx nextjs-mcp-kit init이 라우트를 작성하고, 레이아웃은 여러분의 몫입니다. 실제로 문제가 발생하는 순서대로 정리된 문제 해결 목록과 함께 완전히 동작하는 예제 앱은 examples 브랜치에 있습니다.

빈 디렉터리에서 독립 실행

mkdir my-app && cd my-app
npm init -y
npm i nextjs-mcp-kit
npx nextjs-mcp-kit init          # detects the empty dir, writes a whole app
npm i next react react-dom
npm i -D typescript@^5 @types/node @types/react @types/react-dom
cp env.local.example .env.local
npm run dev

typescript@^5는 의도적으로 고정되어 있습니다. 맨 npm i -D typescript는 현재 TypeScript 7로 해석되는데, 재구성된 lib/을 Next 16이 감지하지 못합니다. 설치되어 있어도 "you do not have the required package(s) installed"라고 보고하며 빌드가 실패합니다.

구성

OLLAMA_API_URL=http://localhost:11434   # 11434 is Ollama's default port
ANTHROPIC_API_KEY=                      # empty is fine — runs local-only
NEXTJS_MCP_DATA_DIR=                    # defaults to ./.data

ANTHROPIC_API_KEY를 비워 두는 것은 지원되는 모드이지, 고장난 상태가 아닙니다. 선택기는 Claude를 사유와 함께 사용 불가로 표시하고 Ollama는 계속 작동합니다. 이것이 isAvailable()의 요점입니다. 키가 없다는 것은 Send를 누를 때 예외를 던지는 것이 아니라, 미리 보고되는 정상 상태입니다.

서버리스 호스트에서는 NEXTJS_MCP_DATA_DIR=/tmp/nextjs-mcp-kit로 설정하세요. 번들 파일시스템은 /tmp를 제외하고 읽기 전용입니다. Persistence를 참고하세요.

라우트

Route	Methods	Purpose
`/api/chat`	POST	모든 프로바이더를 위한 단일 채팅 엔드포인트. 모델별 분기는 절대 없습니다.
`/api/providers`	GET	어떤 프로바이더가 존재하는지, 가용성, 그리고 (`?provider=`와 함께) 해당 모델
`/api/instructions`	GET, POST	지시문 프리셋, 영속화됨
`/api/agent-chat`	POST	도구를 사용하는 한 턴. `stream: true`일 때 NDJSON
`/api/tools`	GET, POST, DELETE	도구 레지스트리, 영속화됨
`/api/tools/upload`	POST	`.md`/`.txt` 문서가 스킬 도구가 됩니다
`/api/mcpserver/[transport]`	GET, POST, DELETE	앱의 MCP 서버. 연결 URL: `/api/mcpserver/mcp`
`/api/mcpserver/prompts`	GET	프롬프트 카탈로그
`/api/mcpserver/tools`	GET	도구 카탈로그
`/api/mcpclient-prompt`	GET, POST	프롬프트 나열 / 인자로 하나 채우기

상태 코드는 의미를 전달합니다. 프로바이더가 단순히 내려가 있으면(요청 자체는 정상) 503, 잘못된 입력이면 400, 실제 실패면 500입니다.

curl -X POST localhost:3000/api/chat -H 'content-type: application/json' -d '{
  "provider": "ollama",
  "model": "llama3.1:8b",
  "system": "Answer in one word.",
  "messages": [{ "role": "user", "content": "Capital of France?" }]
}'
# {"answer":"Paris","provider":"ollama","model":"llama3.1:8b","billed":false}

도구

/api/chat에는 도구가 없으며 앞으로도 없을 것입니다. 도구 호출은 자체 라우트로, 프로바이더 레지스트리를 직접 호출합니다. /api/chat을 감싸지 않습니다.

curl -X POST localhost:3000/api/agent-chat -H 'content-type: application/json' -d '{
  "provider": "anthropic",
  "model": "claude-haiku-4-5-20251001",
  "messages": [{ "role": "user", "content": "What is the refund window?" }],
  "tools": ["refund_policy"]
}'
# {"answer":"…","provider":"anthropic","model":"…","billed":true,
#  "trace":[{"name":"refund_policy","result":"…","isError":false,"ms":2}]}

trace가 이 기능을 가질 가치가 있는 이유입니다. 도구를 사용한 답변은 그것을 증명할 수 있습니다.

NDJSON을 원하면 "stream": true를 추가하세요. 줄마다 JSON 객체 하나씩, {"type":"token"} … {"type":"done"} 형태입니다. 직접 파싱하지 말고 nextjs-mcp-kit/client의 streamAgentChat으로 읽으세요.

어떤 도구를 실행할지는 전적으로 호출자의 선택입니다. tools[]가 없으면 일반 턴입니다. 어떤 것도 조용히 버려지지 않습니다. 도구를 호출할 수 없는 프로바이더나 기능이 없는 Ollama 모델은 요청을 조용히 무시한 답변 대신 사유와 함께 503을 받습니다.

라우트 세그먼트 구성

스캐폴드된 모든 라우트는 자체 runtime을 선언합니다:

export { POST } from 'nextjs-mcp-kit/api/chat';

export const runtime = 'nodejs';
export const maxDuration = 120;

이것은 버려도 되는 상용구가 아닙니다. Next는 세그먼트 구성을 라우트 모듈 자체에서 정적으로 읽으므로, 다시 내보낸 runtime은 조용히 무시되고 핸들러는 잘못된 런타임에서 실행됩니다.

프로바이더 추가

프로바이더 계층은 모델 백엔드를 아는 유일한 곳입니다. 두 단계입니다:

1. ChatProvider를 작성하세요:

import type { ChatProvider } from 'nextjs-mcp-kit/types';

export const myProvider: ChatProvider = {
  id: 'mine',
  label: 'My backend',
  defaultModel: 'some-model',
  billed: false,
  dynamicModels: false,

  // Never throws. A missing key or a down daemon is a normal state.
  async isAvailable() {
    return process.env.MY_KEY
      ? { available: true }
      : { available: false, reason: 'MY_KEY is not set' };
  },

  async listModels() {
    return [{ id: 'some-model', label: 'Some model' }];
  },

  // `system` arrives separately: Anthropic takes it as a top-level field,
  // Ollama as a message role. That difference is absorbed here, per provider.
  async chat({ model, system, messages }) {
    return { text: '…', model };
  },
};

2. 레지스트리에 추가하세요.

다른 것은 아무것도 바뀌지 않습니다. 라우트도, 리듀서도, 선택기도, 타입 유니언도 아닙니다. ProviderId는 의도적으로 string입니다. /api/providers와 ProviderModelPicker는 레지스트리로 구동되므로 새 프로바이더는 클라이언트 수정 없이 두 드롭다운에 모두 나타납니다.

billed는 💳/🖥️ 배지를 결정합니다. 유료 턴은 절대 예상치 못한 일이어서는 안 됩니다.

프로바이더가 도구를 호출하게 하려면 선택적 chatWithTools를 추가하세요. 이는 선택 사항으로 유지되므로 없는 프로바이더도 완벽하게 사용할 수 있으며, 요청된 도구 없이 조용히 답변하는 대신 도구 호출 불가로 보고됩니다:

async chatWithTools({ model, system, messages, tools, run, onToken }) {
  // `tools` is neutral — translate it with your dialect:
  //   import { DIALECTS } from 'nextjs-mcp-kit/tools';
  //   const declared = DIALECTS.openai.toTools(tools);
  // Then loop: ask, ingestToolCalls(raw), await run(call), feed results back.
  return { text: '…', model, trace: [] };
}

대부분의 새 백엔드는 OpenAI 호환 방식이며 DIALECTS.openai가 이미 있으므로, 새 프로바이더는 보통 다이얼렉트를 전혀 추가하지 않습니다.

도구가 내부에서 동작하는 방식

도구는 한 번만, 중립적인 형태 하나로 저장됩니다. 각 프로바이더의 표기는 그것에서 파생됩니다:

import { deriveByProvider } from 'nextjs-mcp-kit/tools';

deriveByProvider(tools).anthropic; // [{ name, description, input_schema }]
deriveByProvider(tools).ollama;    // [{ type:'function', function:{ … } }]

이것이 중요한 이유는 Anthropic과 Ollama가 모든 단계에서 다르기 때문입니다. 스키마 키, 호출에 id가 포함되는지, 결과가 반환되는 방식이 모두 다릅니다. 수동으로 유지하는 두 목록은 하나를 수정하는 순간 어긋나기 시작할 것입니다.

두 종류가 있으며, 둘 다 처음부터 호출할 수 있습니다:

kind	하는 일
`endpoint`	모델의 인자를 URL로 POST하며, 응답 본문이 결과입니다
`skill`	자체 저장된 지시문 텍스트를 반환합니다

skill은 문서나 SKILL.md 형태의 본문이 파일시스템 없이 도구가 되는 방식입니다. 그 텍스트는 레코드의 한 필드입니다.

id 문제와 그 해결 방법. Anthropic은 모든 도구 호출에 id를 부여하고 tool_use_id로 결과를 짝지으며, Ollama의 네이티브 API는 id를 전혀 보내지 않고 순서대로 짝짓습니다. 둘 중 하나를 가정하는 단일 루프는 다른 쪽에서 깨집니다. 그래서 한 파일 밖에서는 어떤 가정도 하지 않습니다: ingestToolCalls()는 id가 있는 곳에서는 id를 유지하고, 없는 곳에서는 name#index를 생성하며, JSON 문자열로 도착한 인자를 정규화합니다. 수집(ingest) 후에는 두 provider를 구분할 수 없으며, 각 provider는 여전히 자체 API가 요구하는 방식으로 결과를 반환합니다.

내보내기

Subpath	내용
`nextjs-mcp-kit`	providers, MCP 서버/클라이언트, store, reducers — 서버 안전
`nextjs-mcp-kit/context`	`GlobalProvider`, `useContextState`, `useContextActions`
`nextjs-mcp-kit/components`	`AgentChat`, `ProviderModelPicker`, `InstructionForm`, `McpPromptChat`, `PersonalChat`, `SmartChat`, `McpDashboard`, `ToolForm`, `ToolUploadForm`, `SkillToolForm`, `ToolChecklist`, `ToolTraceView`
`nextjs-mcp-kit/pages`	`ChatPage`, `McpPromptPage`, `AddToolPage`, `McpDashboardPage`, `PersonalChatPage`, `SmartChatPage`
`nextjs-mcp-kit/providers`	`PROVIDERS`, `getProvider`, `DEFAULT_PROVIDER_ID`
`nextjs-mcp-kit/tools`	`DIALECTS`, `deriveByProvider`, `validateFor`
`nextjs-mcp-kit/client`	타입이 지정된 fetch 래퍼, `streamAgentChat`, `postAgentChat`
`nextjs-mcp-kit/types`	모든 공개 타입
`nextjs-mcp-kit/api/*`	재-export할 라우트 핸들러
`nextjs-mcp-kit/styles.css`	테마 토큰

React 구성 요소들은 자체 서브패스 뒤에 있어서, 이를 import해도 Node 내장 모듈이나 ANTHROPIC_API_KEY가 클라이언트 번들에 끌려들어가지 않습니다. 렌더링된다면, 루트에 있지 않습니다.

서브패스는 package.json의 exports 맵을 통해 해석되며, tsconfig.json에 "moduleResolution": "bundler"가 필요합니다. create-next-app은 이미 이를 설정합니다. 레거시 "node" 설정에서는 모든 서브패스가 Cannot find module 'nextjs-mcp-kit/components' 오류로 해석에 실패합니다.

상태

분할 값 Context: { state, actions }이며 useContextState() / useContextActions()로 사용됩니다. dispatch만 하는 컴포넌트는 관련 없는 상태가 변경되어도 다시 렌더링되지 않습니다.

'use client';
import { useContextState, useContextActions } from 'nextjs-mcp-kit/context';

function MyChat() {
  const { agent, instruction } = useContextState();
  const { sendChat, selectProvider } = useContextActions();
  // agent.chat, agent.provider, agent.model, agent.routing …
}

두 개의 슬라이스, agent와 instruction이 있습니다. 액션은 클로저 대신 ref를 통해 현재 상태를 읽으므로, provider의 수명 동안 모든 액션의 정체성이 안정적으로 유지됩니다. 이것이 없으면 sendChat이 키 입력마다 다시 빌드될 것입니다.

Presets와 systemText

서로 다른 두 가지이며, 이 둘을 혼동하면 버그가 됩니다:

presets — 저장되고 영속화된 목록.
systemText — 다음 턴에 실제로 전송되는 편집 가능한 텍스트.

프리셋을 선택하면 systemText가 *시드(seed)*됩니다. 이후에 편집해도 저장된 프리셋은 변경되지 않습니다. 프리셋은 출발점이지, 가두는 것이 아닙니다. 기존 이름으로 저장하면 거의 중복된 항목을 쌓아 두는 대신 해당 프리셋을 편집합니다 (id는 이름에서 파생됩니다).

테마

모든 색상은 CSS 커스텀 프로퍼티에서 비롯됩니다. import 이후에 그중 무엇이든 재정의하면 됩니다 — 이것이 테마의 전부입니다:

:root {
  --mcp-bubble-user: #dcfce7;
  --mcp-border: #cbd5e1;
}

라이트와 다크는 모두 prefers-color-scheme를 통해 정의됩니다.

영속성

지시문 프리셋과 도구는 NEXTJS_MCP_DATA_DIR (기본값 ./.data) 아래에 JSON으로 저장됩니다 — 재시작 후에도 유지되는 가장 작은 단위입니다. .gitignore에 .data/를 추가하세요.

.data/
  instructions.json
  tools.json

파일 저장소이므로 서버리스에서는 인스턴스별로 존재하며 일시적입니다 — 번들 파일시스템은 /tmp를 제외하면 읽기 전용이며, /tmp도 호출 사이에 지워집니다. 지속성이 필요하다면 두 파일을 교체하세요: src/store/instructions.ts와 src/store/tools.ts가 라우트가 읽고 쓰는 유일한 곳입니다.

스킬의 본문은 도구 레코드의 필드이지, 디스크의 파일이 아닙니다. 문서를 업로드해도 어디에도 SKILL.md가 생성되지 않으며, 이 패키지의 어떤 것도 앱의 소스 트리에 기록하지 않습니다.

MCP 클라이언트 연결

{
  "mcpServers": {
    "nextjs-mcp-kit-local": {
      "type": "http",
      "url": "http://localhost:3000/api/mcpserver/mcp"
    }
  }
}

/mcp 접미사에 주의하세요 — 이 라우트는 동적 [transport] 세그먼트이므로, 클라이언트를 /api/mcpserver에만 지정하면 연결되지 않습니다.

이 엔드포인트는 공개된 표면이지, 사적인 문이 아닙니다. 앱을 배포하면 누구나 자신의 모델과 자신의 키를 사용해 자신의 MCP 클라이언트를 https://your-app.example.com/api/mcpserver/mcp에 지정할 수 있습니다 — 그들이 가져갈 당신의 것은 아무것도 없습니다. 그들은 당신이 추가한 모든 프롬프트와 모든 도구를 얻게 되며, /mcp-dashboard는 그것이 정확히 무엇인지 보여줍니다.

의도적으로 하지 않는 것

/chat에는 도구가 없습니다. 그 라우트는 의도적으로 메시지만 보내고 그 외에는 아무것도 하지 않습니다. 도구는 /api/agent-chat과 위의 네 페이지에 있습니다.
/api/chat에는 스트리밍이 없습니다. 응답이 완전한 형태로 도착하며 그 형태는 바뀌지 않았습니다. /api/agent-chat은 스트리밍합니다.
인증이 없습니다. 이 라우트들을 당신의 인증 뒤에 마운트하세요. /api/mcpserver/mcp는 설계상 공개입니다 — 그것은 지정되도록 만들어진 것입니다.
.docx 또는 .pdf 업로드는 없습니다. .md와 .txt만 가능합니다. 이를 지원하면 설치하는 패키지에 의존성이 전혀 추가되지 않기 때문입니다. 형식을 추가하는 것은 src/server/extractText.ts의 한 분기입니다.
데이터베이스가 없습니다. 도구와 프리셋은 JSON 파일입니다. 서버리스에서는 인스턴스별로 존재하고 일시적입니다 — 두 저장소 파일을 교체하세요.
"나중을 위해" 미리 만들어진 것은 없습니다. 플레이스홀더 레지스트리도, 죽은 추상화도 없습니다.

요구 사항

Next.js ≥ 16 (App Router), React ≥ 18.3, Node ≥ 20.9. Next 16.2 및 React 19.2로 테스트되었습니다.

참고 사항

nextjs-mcp-kit 아키텍처는 공개 클라이언트 측 컴포넌트와 안전한 서버 측 실행을 분리하는 엄격한 경계를 구현합니다. React 기반 클라이언트 레이어는 대화형 상태와 채팅 인터페이스를 조정하지만, 민감한 환경 변수나 제3자 자격 증명에 대해서는 완전히 알지 못한 채 작동합니다. 모든 API 키, 로컬 도구 실행, 직접적인 LLM 호출이 안전한 Node.js 런타임의 Next.js Route Handlers 뒤에만 존재하기 때문에 보안이 유지됩니다. 이러한 경계 간 통신은 사용자 시작 이벤트에 대한 표준 HTTP POST 액션과 단방향 실시간 데이터 스트리밍을 위한 Server-Sent Events (SSE)를 중심으로 구성됩니다. 이 설정은 복잡한 멀티에이전트 워크플로가 엄격한 현대 엔터프라이즈 보안 지침을 준수하면서도 높은 응답성을 유지하도록 보장합니다.

이 패키지의 흥미로운 점은 요구하는 시간이 얼마나 적은가입니다.

보통 작업이 되는 모든 것 — provider 연결 지점, 도구 호출 루프, 도구 선언 방식과 결과 반환 방식에 대해 두 provider가 서로 다른 점, 스트리밍, MCP 서버, 영속성 — 은 이미 완료되어 있습니다. 복사가 아니라 설치입니다. npm update를 해도 완료된 상태가 유지되며, 그중 어떤 것도 당신이 읽거나 소유하거나 유지보수해야 할 코드가 아닙니다.

당신에게 남겨진 것은 정말로 당신의 것이었던 유일한 부분입니다: 채팅이 무엇을 알아야 하는지 결정하는 것. 그것은 이름, 언제 사용할지 설명하는 한 문장, 그리고 답변입니다. 브라우저의 폼에 1분도 안 되어 작성합니다. 그런 것이 열 개면 어떤 범용 어시스턴트보다도 당신의 앱을 잘 아는 채팅이 됩니다 — 당신의 영업 시간, 환불 기간, 배송 규칙을 가진 사람은 아무도 없기 때문입니다.

그래서 작업의 형태는 이례적입니다: 오후 하나 정도이며, 그 대부분을 도구 스키마와 provider API가 아니라 방문자가 실제로 무엇을 묻는지 생각하는 데 씁니다. 데모는 만드는 데는 짧게 걸리고 보여주기에는 비할 데 없이 좋습니다. 사람들이 인상적으로 여기는 것 — 그게 당신 앱에 대해 그걸 알았다 — 은 몇 달이 걸린 부분이 아니라 1분이 걸린 부분에서 나오기 때문입니다.

시작하기 전에 알아둘 만한 두 가지가 있습니다. 여기의 어떤 것도 과장되지 않도록요. 이것은 설계상 집중된 채팅입니다: 당신이 준 내용으로 답하는 데 매우 뛰어나며, 범용 어시스턴트가 되려 하지 않습니다. 그리고 이 패키지 어디에도 인증이 없습니다 — /add-tool과 /mcp-dashboard는 방문자가 아닌 당신의 것입니다. 당신의 인증 뒤에 두거나, 공개 앱에 아예 마운트하지 마세요.

그 외에는, 이것으로 무언가를 만들어 보세요. 감상만 하라고 쓰여진 것이 아니라 확장하라고 쓰여졌습니다: 새 provider는 파일 하나와 배열 항목 하나, 새 도구 종류는 분기 하나, 그리고 저장소는 실제 데이터베이스로 교체할 두 파일입니다. 이것으로 무언가를 만든다면, 진심으로 보고 싶습니다.

감사의 말 ❤️

이 키트는 다른 사람들의 상당한 작업 위에 얹힌 얇은 것입니다.

Ollama ❤️ — 로컬 모델을 진정으로 쉽게 만들어 주었기 때문입니다. 계정도, 키도, 청구서도 없습니다: 모델을 내려받으면 답합니다. 이것이 nextjs-mcp-kit이 설치하는 순간 유용할 수 있는 이유이자, 기본 provider가 로컬인 이유의 전부입니다.

Claude와 Anthropic ❤️ — 모델과 **Model Context Protocol**을 위한 것입니다. MCP는 / 라우트가 기반으로 하는 것이며, 오픈 스펙으로 공개되었지 해자로 지켜지지 않았습니다. 이 패키지는 그것 없이는 이런 형태로 존재하지 않았을 것입니다.

여기서는 두 프로바이더 모두 의도적으로 일급 시민입니다. 하나는 로컬이고 무료이며, 하나는 호스팅되고 훌륭합니다. 그리고 프로바이더 경계는 어느 쪽도 이길 필요가 없도록 존재합니다.

라이선스

MIT

This server cannot be installed

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

Maintenance

ActivityMaintained

ResponsivenessNo issues

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

hithereiamaliff-mcp-nextcloudOAuth
ai.smithery
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
Cloud Storage File Systems Workplace & Productivity
237
mcp-aichatOAuth
io.github.AceDataCloud
MCP server for AI dialogue using various LLM models via AceDataCloud
AI & Machine Learning
2
vercel-mcpOAuth
com.vercel
An MCP server for Vercel
Cloud Platforms Developer Tools CI/CD & DevOps
2
mcp COAuth
com.wix
A Model Context Protocol server for Wix AI tools
Developer Tools Content Management Systems App Automation
216

Related MCP Servers

Example Next.js MCP Server
Developer Tools Code Execution Autonomous Agents
AbdelatifAbualya
A
license
Not graded
quality
C
maintenance
A drop-in MCP server implementation for Next.js projects using Vercel MCP Adapter, allowing developers to integrate model context protocol functionality with custom tools, prompts, and resources.
Updated a year ago (2025-06-25 00:45 UTC)
-
Example Next.js MCP Server
RMTRQ
A
license
Not graded
quality
D
maintenance
A drop-in Model Context Protocol server implementation for Next.js projects that enables AI tools, prompts, and resources integration using the Vercel MCP Adapter.
Updated a year ago (2025-07-20 01:13 UTC)
MIT
Next.js MCP Server Example
Agent Orchestration Developer Tools
noor188
A
license
Not graded
quality
D
maintenance
A sample implementation of Model Context Protocol server using Next.js and the Vercel MCP Adapter, allowing developers to create custom AI agent backends with tools, prompts, and resources.
Updated a year ago (2025-07-30 04:22 UTC)
MIT
FastMCP
RAG Systems Developer Tools
Dev00355
F
license
Not graded
quality
D
maintenance
A Model Context Protocol server that bridges MCP clients with local LLM services, enabling seamless integration with MCP-compatible applications through standard tools like chat completion, model listing, and health checks.
Updated a year ago (2025-08-03 11:53 UTC)
-