구축할 내용

모든 MCP 기반 플러그인은 다음 세 부분으로 구성됩니다:

• 도구를 정의하고, 데이터를 반환하며, 인증을 적용하고, ChatGPT가 사용할 UI 리소스를 지정하는 MCP 서버.
• 선택적으로 사용할 수 있으며 ChatGPT iframe 안에서 렌더링되는 웹 컴포넌트. React 또는 일반 HTML, CSS, JavaScript로 구축할 수 있습니다.
• 제공한 메타데이터를 바탕으로 플러그인의 도구를 언제 호출할지 결정하는 모델.

이러한 구성 요소와 관련된 반복적인 엔지니어링 작업을 Codex에 맡기면 가장 효과적입니다:

• 도구 구성과 메타데이터 계획.
• 서버와 위젯 스캐폴딩.
• 로컬 실행 스크립트 연결.
• 인증과 배포 변경 사항을 구분해 단계별로 추가.
• 플러그인이 ChatGPT에서 작동함을 입증하는 검증 루프 작성.

Codex가 적합한 이유

• MCP 기반 플러그인은 서버, 선택적 UI, 모델 기반 도구 호출로 명확하게 나뉩니다.
• Codex 프롬프팅은 작업이 명확하고 범위가 한정되어 있으며 쉽게 검증할 수 있을 때 가장 효과적이므로 플러그인 구축 작업과 잘 맞습니다.
• 스킬과 AGENTS.md는 Codex가 작업 맥락을 유지하는 데 필요한 재사용 가능한 지침과 프로젝트 규칙을 제공합니다.

스킬 문서에서 스킬 설치 및 사용 방법을 자세히 알아보세요.

사용 방법

사전 요구 사항

• 제품 전체를 채팅에 옮기려 하지 말고, 사용자가 달성할 핵심 목표 하나부터 시작하세요.
• 스택을 미리 선택하세요. 서버에는 TypeScript 또는 Python을 사용하고, 위젯에는 React 또는 일반 HTML, CSS, JavaScript를 사용합니다.
• 개발 중 사용할 HTTPS 경로를 정하세요. 예: ngrok, Cloudflare Tunnel.
• 일부 설정에서는 여전히 MCP 서버 연결을 가리키는 이전 용어를 사용합니다. 로컬 테스트 중에는 이러한 레이블이 등록된 서버를 가리키는 것으로 간주하세요.

1. 먼저 플러그인으로 달성할 구체적인 목표 하나를 정하고, Codex에 명확한 이름, 설명, 입력 및 출력을 갖춘 도구 3~5개를 제안해 달라고 요청하세요.
2. v1이 데이터만 제공해도 되는지 아니면 위젯이 필요한지 결정하세요. 그런 다음 종속성을 추가하기 전에 기존 레포지토리 패턴을 따라 MCP 서버와 선택적 위젯을 스캐폴딩하세요.
3. HTTPS를 통해 MCP 서버를 로컬에서 실행하고, ChatGPT 개발자 모드에서 연결한 다음, 소규모의 직접·간접·부정 프롬프트 세트로 테스트하세요.
4. 핵심 읽기 플로우가 ChatGPT 안에서 안정적으로 작동할 때까지 메타데이터, 상태 처리, structuredContent, _meta 페이로드를 반복해서 개선하세요.
5. 사용자별 데이터 또는 쓰기 작업에 필요한 경우에만 OAuth 2.1을 추가하되, 익명 또는 읽기 전용 플로우를 복잡하게 만들지 마세요.
6. 안정적인 /mcp 엔드포인트로 호스팅된 프리뷰를 준비하고, 스트리밍과 UI 에셋 호스팅을 확인한 후 플러그인을 공유하거나 제출하기 전에 출시 체크리스트를 검토하세요.

추천 프롬프트

이 워크플로우에 적합한 프롬프트에는 다음 요소가 공통으로 포함됩니다:

• 한 가지 명확한 목표: 플러그인이 ChatGPT 안에서 사용자의 어떤 작업을 도와야 하는지 설명하세요.
• 구체적인 스택: 서버에 TypeScript 또는 Python 중 무엇을 사용할지, 위젯에 React를 사용할지 아니면 가볍게 유지할지 명시하세요.
• 명확한 도구 경계: 도구마다 한 가지 역할만 맡도록 소수의 도구를 제안하거나 구축해 달라고 Codex에 요청하세요.
• 인증 요구 사항: 첫 버전을 익명으로 사용할 수 있는지, 아니면 연결된 계정과 쓰기 작업이 필요한지 명시하세요.
• 로컬 개발 경로: ChatGPT에서 HTTPS 테스트에 사용할 터널 또는 호스팅 경로를 명시하세요.
• 검증 단계: 실행할 명령어, 테스트할 프롬프트, 보고할 검증 근거를 Codex에 알려 주세요.

계획, 구현, 인증, 배포, 제출, 마무리까지 한 번에 모두 요청하는 거대한 프롬프트는 피하세요. 대신 작업을 더 작은 마일스톤으로 나누세요.

스캐폴딩 전에 플러그인 계획하기

작동하는 첫 버전 스캐폴딩하기

핵심 플로우가 작동한 후에만 인증 추가

배포 및 검토를 위한 플러그인 준비

출시 준비 상태

• 플러그인은 사용자가 이해하기 쉬운 하나의 명확한 결과에만 집중합니다.
• 도구 수는 적게 유지하며, 각 도구의 메타데이터와 입력 및 출력이 명확하게 정의되어 있습니다.
• MCP 서버는 엔드 투 엔드로 작동하며 간결한 structuredContent를 반환하고, 위젯 전용 데이터는 _meta에만 담습니다.
• 필요한 경우 위젯이 ChatGPT 내에서 올바르게 렌더링됩니다.
• ChatGPT 개발자 모드에서 로컬 HTTPS 테스트 루프가 정상적으로 작동합니다.
• 직접·간접·부정 프롬프트로 구성된 소규모 테스트 세트에서 대화 플로우와 도구 페이로드가 예상대로 나타나고 모든 테스트가 통과합니다.
• 사용자별 데이터 또는 쓰기 작업에 필요한 경우에만 인증이 추가됩니다.
• 플러그인을 공유하거나 제출하기 전에 배포 계획과 출시 준비 검토를 통해 메타데이터, 도구 힌트, 개인정보 보호, 테스트 프롬프트를 점검합니다.

흔히 저지르는 실수

• 전체 제품을 ChatGPT로 포팅해 달라고 Codex에 요청하는 것. 더 나은 방법: 사용자가 달성할 핵심 목표 하나, 도구 3~5개, 한 가지 용도에 집중한 위젯 하나를 요청하세요.
• 방대한 구현 프롬프트 하나로 시작하는 것. 더 나은 방법: 작업을 계획, 스캐폴딩, 인증, 배포, 검토 단계로 나누세요.
• 도구 계약이 명확해지기 전에 UI를 작성하는 것. 더 나은 방법: 먼저 도구 인터페이스와 응답 스키마를 계획한 다음 위젯을 빌드하세요.
• 공식 문서를 참고하지 않는 것. 더 나은 방법: 스캐폴딩 결과가 최신 플러그인 가이드를 따르도록 $chatgpt-apps와 $openai-docs를 함께 사용하세요.
• 메타데이터를 나중에 처리할 문제로 여기는 것. 더 나은 방법: 도구 설명과 매개변수 문서를 일찍 작성한 다음, 그 내용을 기준으로 프롬프트 세트를 다시 실행하세요.
• 익명 또는 읽기 전용 경로를 검증하기 전에 인증을 추가하는 것. 더 나은 방법: 먼저 핵심 도구 플로우를 작동시킨 다음, 실제로 필요한 도구에만 OAuth를 추가하세요.
• ChatGPT 내에서 테스트하기 전에 플러그인이 완성되었다고 선언하는 것. 더 나은 방법: 개발자 모드에서 MCP 서버를 연결하고 도구 페이로드를 살펴본 뒤 실제 대화 플로우를 검증하세요.