앱 SDK 템플릿
요약
이 문서는 ChatGPT 및 MCP 앱 구축을 위한 최소한의 TypeScript SDK 템플릿 사용법을 안내합니다. 개발자는 Node.js와 ngrok 같은 도구를 사용하여 로컬 환경에서 서버를 설정하고, React 컴포넌트를 통해 위젯을 만들고 편집할 수 있습니다. 프로덕션 배포는 Alpic 플랫폼을 통해 진행하며, ChatGPT 커넥터에 MCP 서버 URL을 등록하여 최종적으로 앱을 완성할 수 있습니다.
핵심 포인트
- ChatGPT 및 MCP 기반의 애플리케이션 개발을 위한 TypeScript 템플릿 제공
- 로컬 개발 시 Node.js와 ngrok를 사용하여 서버 및 웹 인터페이스를 테스트할 수 있음
- 위젯은 React 컴포넌트로 구현되며, HMR 기능을 통해 실시간 편집이 가능함
- 프로덕션 배포는 Alpic 플랫폼을 이용하며, ChatGPT 커넥터에 MCP 서버 URL로 연결해야 함
앱 SDK 템플릿
ChatGPT 및 MCP 앱 구축을 위한 최소한의 TypeScript 템플릿입니다.
이 템플릿은 생성되었으며 Skybridge 에 의해 구동됩니다.
시작하기
요구 사항
- Node.js 24+
- HTTP 터널, 예: ngrok
로컬 개발
1. 설치
git clone git@github.com:alpic-ai/apps-sdk-template.git
cd apps-sdk-template
npm install
2. 로컬 서버 시작
루트 디렉토리에서 개발 서버 실행:
npm run dev
DevTools 열기 로컬 앱 테스트: http://localhost:3000/
MCP 서버 실행 중: http://localhost:3000/mcp
3. ChatGPT 연결
- ChatGPT 는 커넥터가 공개적으로 접근 가능해야 합니다. 인터넷에 서버를 노출하려면 다음을 실행하세요:
ngrok http 3000
- ChatGPT 에서 Settings → Connectors → Create로 이동하고 ngrok 가 제공하는 포워딩 URL 에
/mcp를 접미사 (suffix) 하여 추가하세요 (예:https://3785c5ddc4b6.ngrok-free.app/mcp)
첫 번째 위젯 만들기
1. 새 위젯 추가
server/server.ts에 고유한 이름 (예:my-widget) 을 가진 위젯 등록web/src/widgets/my-widget.tsx에 일치하는 React 컴포넌트 생성. 파일명은 위젯명과 정확히 일치해야 합니다
2. Hot Module Replacement (HMR) 를 사용하여 위젯 편집
web/src/widgets/ 에서 컴포넌트 편집 및 저장 — 호스트에서 변경 사항이 즉시 나타납니다
3. 서버 코드 편집
server/ 파일 수정하고 Settings → Connectors → [Your connector] → Reload 에서 ChatGPT 커넥터 재로드
프로덕션 배포
Alpic 를 사용하여 OpenAI 앱을 프로덕션에 배포하세요
- ChatGPT 에서 Settings → Connectors → Create로 이동하고 MCP 서버 URL 을 추가하세요 (예:
https://your-app-name.alpic.live)
리소스
AI 자동 생성 콘텐츠
본 콘텐츠는 HN Claude Code Search의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기1