Next.js를 사용한 헤드리스 MCP 사용(레지스트리에서)

구성 가능한 MCP 레지스트리와 함께 @vercel/mcp-adapter 사용합니다.

배포된 URL

이 애플리케이션은 https://nextjs-mcp-use.vercel.app 에 배포되었습니다.

Related MCP server: Example Next.js MCP Server

특징

• MCP 레지스트리 : 단일 JSON 파일에 여러 MCP 서버 구성

• GitHub Actions : 예약 및 수동 워크플로를 통해 API 엔드포인트 테스트 및 모니터링

• 오류 처리 : 시간 초과 및 연결 실패의 우아한 처리

• 환경 변수 : 각 MCP 서버에 대한 환경 변수 구성

MCP 레지스트리

MCP 레지스트리는 사용 가능한 모든 MCP 서버에 대한 정보를 저장하는 JSON 구성 파일입니다. 각 서버는 활성화 또는 비활성화할 수 있으며, 자체 환경 변수를 가질 수 있습니다.

레지스트리는 config/mcp-registry.json 에 위치하며 다음과 같은 구조를 갖습니다.

지엑스피1

용법

이 샘플 앱은 Next.js 프로젝트의 경로 그룹에 MCP 서버를 추가할 수 있는 Vercel MCP 어댑터를 사용합니다.

MCP TypeScript SDK 설명서 에 따라 도구, 프롬프트 및 리소스로 app/[transport]/route.ts 업데이트합니다.

API 엔드포인트

• 채팅 API : /api/chat - 스트리밍 채팅 엔드포인트

• 완료 API : /api/completions - 스트리밍이 아닌 채팅 완료 엔드포인트

API 테스트

제공된 테스트 스크립트를 사용하여 API 엔드포인트를 테스트할 수 있습니다.

# Test the chat endpoint
npm run test:chat -- --message "Your message here"

# Test the completions endpoint
npm run test:completions -- --message "Your message here"

# Test with a custom URL
npm run test:chat -- --url http://localhost:3000/api/chat --message "Your message here"

GitHub 액션

이 프로젝트에는 API 엔드포인트 테스트 및 모니터링을 위한 GitHub Actions 워크플로가 포함되어 있습니다. 자세한 내용은 .github/workflows/README.md 파일을 참조하세요.

Vercel에서 실행하기 위한 참고 사항

• SSE 전송을 사용하려면 process.env.REDIS_URL 아래 프로젝트에 연결된 Redis가 필요합니다.

• 효율적인 실행을 위해 Fluid 컴퓨팅이 활성화되어 있는지 확인하세요.

• Fluid 컴퓨팅을 활성화한 후 app/route.ts 열고 Vercel Pro 또는 Enterprise 계정을 사용하는 경우 maxDuration 800으로 조정합니다.

• Next.js MCP 템플릿 배포

샘플 클라이언트

• scripts/test-client.mjs 에는 호출을 시도해 볼 수 있는 샘플 클라이언트가 들어 있습니다.

node scripts/test-client.mjs https://nextjs-mcp-use.vercel.app