[📪정보] 나만의 ChatGPT 플러그인 만들기 2편(프로그래밍 지식 없어도 가능)

[Ad_Astr..(peraspera83)]

Chapter 4. 플러그인 제작해보기 (feat. ChatGPT)

눈치가 빠른 독자들은 "어차피 이걸 적는 것은 당신이 아닐 것이다"에서 이 글의 제목의 의미를 알아봤을 수도 있다

그렇다. '우리'는 플러그인의 코드를 작성하지 않을 것이다.

왜냐? 플러그인 코드는 우리 대부분보다 ChatGPT가 더 잘 쓰니.

앞으로 우리는, '딸깍' 한 번으로 플러그인을 제작할 거다. 설레지 않는가?

이 글에서 프롬프트를 작성해 줄테니, 본인의 기호에 맞게 괄호안의 내용을 수정만 하면 된다!

GPT 3.5 보단 4를, 한국어보단 영어를 쓰는 것을 추천한다

*프롬프트는 하늘색 바탕으로 표시함

1. 플러그인 아이디어 정리하기

넌 지금부터 (본인이 원하는 플러그인 기능) 을 하는 ChatGPT 플러그인을 만드는 개발자야

아래 빈칸($ 표시)을 영어로 채워봐

Scope and idea for the app:

$GENERAL_PROJECT_SCOPE

The plugin has one main functionality which allows the user to say something like:

$EXAMPLE_PROMPTS

The endpoint will receive:

$INFO_NEEDED_FOR_FUNCTIONALITY (eg, date, stock name, url)

ChatGPT will take in the user’s prompt and extract these fields before sending it to the API endpoint.

The user is not able to:

$FUNCTIONALITY_LIMIT

위 프롬프트는 ChatGPT에게 당신이 만들고자 하는 플러그인을 설명해주고

그 내용을 ChatGPT가 알아서 발전시켜 (+영어로) 정리하도록 자동화 해주는 프롬프트다

이 프롬프트에 대한 답장을 복사하고 2번으로 넘어가자

2. 플러그인 코드 아웃소싱하기

(1번 프롬프트로 얻은 답장)

Information on any API's that will be used to create this app and the docs for the functionality required:

(사용하려는 API에 대한 자료)

Below is a main.py file showing an example of a basic plugin app:

import json

import quart

import quart_cors

from quart import request

# Note: Setting CORS to allow chat.openapi.com is only required when running a localhost plugin

app = quart_cors.cors(quart.Quart(__name__), allow_origin="https://chat.openai.com")

_TODOS = {}

@app.post("/todos/<string:username>")

async def add_todo(username):

request = await quart.request.get_json(force=True)

if username not in _TODOS:

_TODOS[username] = []

_TODOS[username].append(request["todo"])

return quart.Response(response='OK', status=200)

@app.get("/todos/<string:username>")

async def get_todos(username):

return quart.Response(response=json.dumps(_TODOS.get(username, [])), status=200)

@app.delete("/todos/<string:username>")

async def delete_todo(username):

request = await quart.request.get_json(force=True)

todo_idx = request["todo_idx"]

if 0 <= todo_idx < len(_TODOS[username]):

_TODOS[username].pop(todo_idx)

return quart.Response(response='OK', status=200)

@app.get("/logo.png")

async def plugin_logo():

filename = 'logo.png'

return await quart.send_file(filename, mimetype='image/png')

@app.get("/.well-known/ai-plugin.json")

async def plugin_manifest():

host = request.headers['Host']

with open("ai-plugin.json") as f:

text = f.read()

# This is a trick we do to populate the PLUGIN_HOSTNAME constant in the manifest

text = text.replace("PLUGIN_HOSTNAME", f"https://{host}")

return quart.Response(text, mimetype="text/json")

@app.get("/openapi.yaml")

async def openapi_spec():

host = request.headers['Host']

with open("openapi.yaml") as f:

text = f.read()

# This is a trick we do to populate the PLUGIN_HOSTNAME constant in the OpenAPI spec

text = text.replace("PLUGIN_HOSTNAME", f"https://{host}")

return quart.Response(text, mimetype="text/yaml")

def main():

app.run(debug=True, host="0.0.0.0", port=5002)

if __name__ == "__main__":

main()

Important notes:

Be sure to set a conservative limit on the size of the response the app tries to return to ensure the character limit of 100k characters is not exceeded.

Make sure the API endpoints name eg "/news" matches up with what is written in the OpenAPI definition.

Include a custom logging handler on all visits to URLs and important app events as in the above examples

Do not leave placeholders in, replace all of them with the correct info so that I can copy and paste this and it is ready to launch.

Make sure the routes for '/.well-known/ai-plugin.json’ and '/.well-known/openapi.yaml' are reused exactly as shown above.

Now, I need you to create the main.py file for my app.

API에 대한 자료는 인터넷에서 검색한 공식 문서 그냥 복붙하면 된다

필자는 다음을 이용했다(https://github.com/jdepoix/youtube-transcript-api)

여기까지 했다면 축하한다.

방금 플러그인의 핵심 코드를 다 작성했다.

이 쯤에서 ChatGPT 대화창을 새로 파는 것을 추천한다(API 자료가 너무 길 경우 대화내용을 까먹을 수 있기 때문임)

3. ai-plugin.json 작성하기

Now I need you to write me a manifest file for my plugin. Here are the OpenAI docs on how to create a manifest file:

Plugin manifest

Every plugin requires a ai-plugin.json file, which needs to be hosted on the API’s domain. For example, a company called example.com would make the plugin JSON file accessible via an https://example.com domain since that is where their API is hosted. When you install the plugin via the ChatGPT UI, on the backend we look for a file located at /.well-known/ai-plugin.json. The /.well-known folder is required and must exist on your domain in order for ChatGPT to connect with your plugin. If there is no file found, the plugin cannot be installed. For local development, you can use HTTP but if you are pointing to a remote server, HTTPS is required.

The minimal definition of the required ai-plugin.json file will look like the following:

{

"schema_version": "v1",

"name_for_human": "TODO Plugin",

"name_for_model": "todo",

"description_for_human": "Plugin for managing a TODO list. You can add, remove and view your TODOs.",

"description_for_model": "Plugin for managing a TODO list. You can add, remove and view your TODOs.",

"auth": {

"type": "none"

},

"api": {

"type": "openapi",

"url": "<http://localhost:3333/openapi.yaml>",

"is_user_authenticated": false

},

"logo_url": "<http://localhost:3333/logo.png>",

"contact_email": "[e-mail]",

"legal_info_url": "<http://www.example.com/legal>"

}

If you want to see all of the possible options for the plugin file, you can refer to the definition below.

FIELD

TYPE

DESCRIPTION / OPTIONS

REQUIRED

schema_version

String

Manifest schema version

✅

name_for_model

String

Name the model will used to target the plugin

✅

name_for_human

String

Human-readable name, such as the full company name

✅

description_for_model

String

Description better tailored to the model, such as token context length considerations or keyword usage for improved plugin prompting.

✅

description_for_human

String

Human-readable description of the plugin

✅

auth

ManifestAuth

Authentication schema

✅

api

Object

API specification

✅

logo_url

String

URL used to fetch the plugin's logo

✅

contact_email

String

Email contact for safety/moderation reachout, support, and deactivation

✅

legal_info_url

String

Redirect URL for users to view plugin information

✅

HttpAuthorizationType

HttpAuthorizationType

"bearer" or "basic"

✅

ManifestAuthType

ManifestAuthType

"none", "user_http", "service_http", or "oauth"

interface BaseManifestAuth

BaseManifestAuth

type: ManifestAuthType; instructions: string;

ManifestNoAuth

ManifestNoAuth

No authentication required: BaseManifestAuth & { type: 'none', }

ManifestAuth

ManifestAuth

ManifestNoAuth, ManifestServiceHttpAuth, ManifestUserHttpAuth, ManifestOAuthAuth

There are also some limits to the length of certain field in the manifest file that are subject to change over time:

50 character max for**name_for_human**

50 character max for name_for_model

120 character max for description_for_human

8000 character max just for description_for_model (will decrease over time)

Separately, we also have a 100k character limit (will decrease over time) on the API response body length which is also subject to change.

Here is my application:

(2번에서 받은 코드 복붙)

Write a manifest file for my app.

description_for_model 부분은 되도록이면 직접 작성하자

영어를 모른다면 DeepL을 쓰든 GPT를 써서 시키든 하자

description_for_model을 쓸 때 OpenAI의 오피셜 팁은 다음과 같다:

출처 : https://platform.openai.com/docs/plugins/getting-started/writing-descriptions

• 플러그인을 쓸 때의 GPT의 말투, 응답 형식을 고정적으로 정하려고 하지 말 것
• 사용자가 플러그인을 쓰도록 유도하라 지시하지 말 것
• 플러그인을 발동시키기 위 일종의 'trigger 프롬프트'를 정해놓지 말 것

4. openapi.yaml 작성하기

Now I need you to write me an openAPI definition for my plugin. Here are the OpenAI docs on how to create one correctly:

OpenAPI definition

The next step is to build the OpenAPI specification to document the API. The model in ChatGPT does not know anything about your API other than what is defined in the OpenAPI specification and manifest file. This means that if you have an extensive API, you need not expose all functionality to the model and can choose specific endpoints. For example, if you have a social media API, you might want to have the model access content from the site through a GET request but prevent the model from being able to comment on users posts in order to reduce the chance of spam.

The OpenAPI specification is the wrapper that sits on top of your API. A basic OpenAPI specification will look like the following:

`openapi: 3.0.1 info: title: TODO Plugin description: A plugin that allows the user to create and manage a TODO list using ChatGPT. version: 'v1' servers:

url: http://localhost:3333 paths: /todos: get: operationId: getTodos summary: Get the list of todos responses: "200": description: OK content: application/json: schema: $ref: '#/components/schemas/getTodosResponse' components: schemas: getTodosResponse: type: object properties: todos: type: array items: type: string description: The list of todos.`

We start by defining the specification version, the title, description, and version number. When a query is run in ChatGPT, it will look at the description that is defined in the info section to determine if the plugin is relevant for the user query. You can read more about prompting in the writing descriptions section.

Keep in mind the following limits in your OpenAPI specification, which are subject to change:

200 characters max for each API endpoint description/summary field in API specification

200 characters max for each API param description field in API specification

Since we are running this example locally, we want to set the server to point to your localhost URL. The rest of the OpenAPI specification follows the traditional OpenAPI format, you can learn more about OpenAPI formatting through various online resources. There are also many tools that auto generate OpenAPI specifications based on your underlying API code.

Here is an example of a working OpenAPI definition from a plugin I made previously:

openapi: 3.0.1

info:

title: TODO Plugin

description: A plugin that allows the user to create and manage a TODO list using ChatGPT.

version: 'v1'

servers:

- url: http://localhost:3333

paths:

/todos:

get:

operationId: getTodos

summary: Get the list of todos

responses:

"200":

description: OK

content:

application/json:

schema:

$ref: '#/components/schemas/getTodosResponse'

components:

schemas:

getTodosResponse:

type: object

properties:

todos:

type: array

items:

type: string

description: The list of todos.

Here is my application:

(2번에서 받은 코드 복붙)

Write me an OpenAPI definition for my app. Provide only the code.

이제 거의 다왔다

5. 플러그인 파일 저장

아무 위치에나 폴더를 만들자

이 폴더는 우리가 플러그인 관련 파일들을 저장할 폴더다

그 폴더 안에 ./well-known 이라는 폴더를 하나 더 만들자

./well-known이라는 폴더 안에 ai-plugin.json, openapi.yaml, logo.png 라는 이름으로 파일들을 넣자

그 다음 여기로 가서 컴퓨터에 git을 설치하자

그리고 github 계정을 하나 만든다

new repository를 클릭해 원격 저장소를 하나 만든다

플러그인 파일(./well-known '말고')의 빈공간에 우클릭을 하면 나오는 메뉴 중 git bash here 을 누른다

그러면 명령어를 입력할 수 있는 창이 하나 뜬다

다음의 명령어를 입력한다

git remote add origin <아까 만든 repository 링크>

6. 플러그인 호스팅하기

플러그인을 호스팅하는 데에는 다양한 호스팅 서비스를 활용할 수 있다

하지만 우리는 무료가 좋으므로, 이 글에서는 무료 플랜(render, vercel)이 있는 서비스를 이용할 것이다

이 글에서는 render를 이용하겠다

render에서 github으로 로그인 한뒤 dashboard로 간다

오른쪽 위 파란색으로 나와있는 New+ 버튼을 누르고 Web service를 선택한다

Connect a repository에서 아까 만들었던 플러그인 repository를 선택한다

채워야 할 란들을 전부 채우고 free plan을 선택한다

맨 아래 launch web service를 클릭한다

거의 다왔다!

7. ai-plugin.json, openapi.yaml 완성하기

render에 호스팅을 시키고 나서, 당신의 웹서비스가 호스팅 되고 있는 링크에 /ai-plugin.json 을 붙인 다음 엔터를 누르자

본인의 ai-plugin.json 파일의 내용이 보인다면 성공적으로 호스팅 되었다는 뜻이다

ai-plugin.json에서, 다음의 줄을 당신의 웹사이트와 함께 수정하자

"api": {

"type": "openapi",

"url": "(웹사이트 링크)/.well-known/openapi.yaml",

"is_user_authenticated": false

},

"logo_url": "(웹사이트 링크)/.well-known/logo.png",

openapi.yaml에서, 다음의 줄을 당신의 웹사이트와 함께 수정하자

version: 'v1'

servers:

- url: (웹사이트 링크)

legal_info_url의 경우,

플러그인의 법적 정보를 적어 놓은 웹사이트가 필요하다

이번에도 무료 호스팅 사이트를 쓸 것이다

본문에선 github pages를 이용하겠다

법률적인 내용을 적어 놓는 부분이기 때문에 잘 모르면 그냥 GPT에게 적어달라고 하자

index.html을 만들어 github pages용 repository에 저장한다

ai-plugin.json을 다음과 같이 수정한다

"legal_info_url": "<github pages 링크>"

contact email 적는 것도 빼먹지 말자

8. 내가 만든 플러그인 설치하기

이제 내가 만든 플러그인이 잘 작동하는지 시험해볼 차례다

plugin store를 열고, 우측 하단 'Develop your own plugin' 버튼을 누른다

플러그인을 호스팅 했던 웹사이트 주소 링크를 적는다

ai-plugin.json 파일과 openapi.yaml 파일에 오류가 났다면, 무엇인지 확인하고 해결한다

이제 install for me를 눌러 설치하면 끝이다!

FAQ

Q. openai.yaml이 분명 있는데 없다고 떠요

A. openapi 입니다

Q. api 공식문서가 너무 커서 GPT에게 전송할 수가 없어요

A. api키를 발급 받아 여기에 입력후, 최대 토큰 길이를 설정 후 대화해보세요 (이건 사용료 있음)

또는, https://github.com/LagPixelLOL/ChatGPTCLIBot 이걸 이용해보세요 (댓글에 원하는 사람있으면 사용법 올리겠음)

댓글에 질문 받음

[슈퍼130클럽(y3xxqs89b55t)]

아 이렇게 복잡한 과정 말고 "야, 시간당 10만원 버는 플러그인 만들어" 하면 뚝딱 만드는 AI 원한다고 ㅋㅋㅋ 해줘

[Ad_Astra(peraspera83)]

설명이 좀 어려웠나? 프롬프트만 적으면 되는건데...

[슈퍼130클럽(y3xxqs89b55t)]

프롬프트만????? 걍 눈빛만으로도 "해줘"

[슈퍼130클럽(y3xxqs89b55t)]

농담이고 좋은글 같음

[익명(121.158)]

진짜 정성스레 쓴 정보글같은데 농담이라도 쓴사람은 ㄹㅇ 기분나쁘겠네

[익명(119.207)]

좋은 글. 개추.