주요 콘텐츠로 건너뛰기
AI 튜토리얼

OpenAI MCP 확장으로 네이티브한 느낌의 ChatGPT 플러그인 구축

OpenAI MCP 확장이 MCP 플러그인에 ChatGPT 전용 경험을 어떻게 더하는지 알아보세요. 이 튜토리얼에서는 사용 가능한 기능, TypeScript 및 Python SDK 설정, Bits & Bolts 예제, 실용적인 개발 워크플로, 확장을 선택하고 구현하는 방법을 다룹니다.

OpenAI MCP 확장으로 네이티브한 느낌의 ChatGPT 플러그인 구축

OpenAI MCP Extensions의 기능

OpenAI MCP Extensions는 Model Context Protocol(MCP)에 ChatGPT 전용 기능을 추가합니다. 이미 플러그인을 보유하고 있거나 새로 만들 준비가 되어 있으며, 플러그인이 기본 ChatGPT 기능처럼 작동하기를 원하는 개발자를 위한 프로젝트입니다.

이 프로젝트는 지원되는 확장 기능을 MCP 서버에 통합하기 위한 SDK를 제공합니다. TypeScript 패키지는 MCP 서버 및 Apps와 함께 사용할 수 있으며, Python 패키지는 MCP 서버를 대상으로 합니다.

주요 기능

사이드바 진입점

사이드바 진입점을 사용하면 사용자가 ChatGPT 사이드바에서 앱을 직접 열 수 있습니다. 이를 통해 부품 라이브러리와 같은 경험에 지속적이고 쉽게 접근할 수 있습니다.

사이드바에서 열린 Bits and Bolts 부품 라이브러리

파일 확장자 핸들러

파일 확장자 진입점을 사용하면 사용자가 지원되는 파일 형식을 열 때 플러그인이 맞춤형 뷰어를 표시할 수 있습니다. 이 저장소에서는 CAD 파일을 특수 뷰어로 여는 방식으로 이를 보여 줍니다.

Composer 멘션

Composer 멘션을 사용하면 사용자가 플러그인이 제공하는 리소스를 검색하고 해당 리소스에 대한 참조를 메시지에 추가할 수 있습니다. 쇼케이스에서는 Composer에서 CAD 부품을 검색할 수 있습니다.

확장 양식

OpenAI 양식 요청 기능은 더욱 풍부한 선택 경험을 지원합니다. Bits & Bolts 예제에서는 썸네일 선택지를 사용하므로 사용자가 CAD 부품을 시각적으로 선택할 수 있습니다.

사전 요구 사항

확장 기능을 추가하기 전에 OpenAI 플러그인 문서에 따라 플러그인을 만드세요. OpenAI MCP Extensions는 초기 플러그인 설정을 대체하는 것이 아니라 기존 플러그인과 MCP 서버를 확장합니다.

선택한 SDK에 따라 TypeScript 또는 Python 개발 환경도 필요합니다.

참조 플러그인 사용해 보기

의도한 사용자 경험을 이해하는 가장 빠른 방법은 저장소 전반에서 예제 플러그인으로 사용되는 Bits & Bolts Remote를 직접 사용해 보는 것입니다.

  1. Bits & Bolts Remote 플러그인 디렉터리 페이지를 열고 플러그인을 설치합니다.

  2. ChatGPT 사이드바에서 Bits & Bolts Remote를 선택합니다.

  3. Parts Library를 열고 플러그인이 사이드바 경험으로 표시되는 방식을 살펴봅니다.

  4. 쇼케이스를 맞춤 파일 보기, Composer 리소스 검색, 시각적 양식 선택을 위한 참고 자료로 활용합니다.

SDK 설치

TypeScript

TypeScript MCP 서버 또는 Apps를 빌드할 때 @openai/mcp-extensions를 사용합니다. 원하는 JavaScript 패키지 관리자로 설치하세요.

npm install @openai/mcp-extensions

현재 패키지 설치 방법과 SDK별 세부 정보는 저장소의 TypeScript 설치 문서를 참조하세요.

Python

Python MCP 서버의 경우 openai-mcp-extensions를 설치합니다.

pip install openai-mcp-extensions

최신 설정 안내는 Python 설치 문서를 참조하세요.

README에는 MCP 서버 및 Apps에 대한 TypeScript 지원이, MCP 서버에 대한 Python 지원이 명시되어 있습니다. 확장 로직이 실행될 위치에 따라 SDK를 선택하세요.

기본 개발 워크플로

  1. 플러그인을 만듭니다. 이러한 확장 기능을 통합하기 전에 표준 플러그인 설정을 완료합니다.

  2. 적절한 SDK를 추가합니다. 서버 또는 Apps에는 TypeScript 패키지를 사용하고, 서버 측 통합에는 Python 패키지를 사용합니다.

  3. 확장 기능을 선택합니다. 사용자가 사이드바에서 앱을 발견하도록 할지, 지원되는 파일을 맞춤 뷰어로 열도록 할지, Composer에서 플러그인 리소스를 멘션하도록 할지, 확장 양식과 상호작용하도록 할지 결정합니다.

  4. 확장 계약을 구현합니다. 필수 필드와 동작은 공식 OpenAI MCP Extensions 사양을 따릅니다.

  5. 전체 상호작용을 테스트합니다. 플러그인의 진입점 또는 리소스가 예상한 ChatGPT 화면에 표시되고 결과 경험이 의도대로 작동하는지 확인합니다.

기능 계획 예시

사이드바 라이브러리 구축

대화와 별개로 사용자가 열고 싶어 할 수 있는 인터페이스가 플러그인에 있다면 MCP App 진입점을 사용합니다. Bits & Bolts Parts Library는 이 모델을 보여 줍니다. 사용자는 사이드바에서 플러그인을 선택하고 앱 경험을 탐색할 수 있습니다.

특수 파일 형식 표시

플러그인이 특정 파일 형식을 이해하고 더 적합한 뷰어를 제공할 수 있다면 파일 확장자 진입점을 사용합니다. 쇼케이스에서는 CAD 콘텐츠를 예시로 사용합니다. 모든 파일을 플러그인이 처리한다고 가정하지 말고 사양에 따라 지원 범위를 정의하세요.

Composer에서 리소스 제공

사용자가 플러그인 리소스를 찾고 메시지에 참조를 첨부해야 한다면 Composer 멘션을 사용합니다. 예를 들어 카탈로그 중심 플러그인은 Bits & Bolts에서 보여 주는 CAD 부품과 같은 검색 가능한 항목을 제공할 수 있습니다.

시각적 선택지 제공

일반 텍스트 옵션만으로 제공할 수 있는 정보보다 더 많은 맥락이 필요한 경우 OpenAI 폼 입력을 사용하세요. 항목을 시각적으로 인식하기 쉬울 때는 썸네일 선택이 특히 유용하며, CAD 부품 선택기가 그 예입니다.

고급 팁

  • 사용자 진입점에서 시작하세요. 작업에 맞는 ChatGPT 표면을 선택하세요. 앱에 직접 접근하려면 사이드바를, 지원되는 문서에는 파일 핸들러를, 메시지 참조에는 컴포저 멘션을, 구조화된 선택에는 확장 폼을 사용하세요.

  • Bits & Bolts를 동작 참고 자료로 활용하세요. 직접 확장 기능을 구현하기 전에 예제를 살펴보면 기능이 사용자 워크플로에 어떻게 통합되는지 확인할 수 있습니다.

  • 개발 중에는 사양을 열어 두세요. 최상위 README는 기능을 요약하지만, 사양에는 구현에 필요한 자세한 확장 계약이 포함되어 있습니다.

  • 언어별 문서를 확인하세요. TypeScript SDK와 Python SDK의 설치 및 통합 세부 사항은 서로 다를 수 있습니다.

  • 하나의 일관된 워크플로를 중심으로 기능을 조합하세요. 쇼케이스는 사이드바 접근, 파일 보기, 컴포저 리소스, 리치 폼이 부품 중심 경험의 서로 다른 단계를 어떻게 지원할 수 있는지 보여 줍니다.

결론

OpenAI MCP Extensions를 사용하면 개발자는 기본적인 MCP 통합을 넘어 ChatGPT에 자연스럽게 어울리는 플러그인을 만들 수 있습니다. 표준 플러그인으로 시작하고, 사용하는 언어에 맞는 SDK를 설치한 다음, 적절한 진입점이나 상호작용을 선택하고 프로젝트 사양에 따라 구현하세요. 저장소는 Apache License 2.0에 따라 제공됩니다.