JavaScript ChatGPT プラグインの構築、学習しましたか?

チャットプラグインシステムは、ChatGPT の機能を拡張し、独自のビジネスデータを組み込み、顧客がビジネスと関わるための別のチャネルを追加する、エキサイティングな新しい方法です。この記事では、チャットプラグインとは何か、何ができるのか、そして JavaScript を使用して独自のチャットプラグインを構築する方法について説明します。

この投稿 (または OpenAI では「トレーニングデータ」と呼びます) では、最初の ChatGPT プラグインを構築し、それを ChatGPT インターフェースに統合するためのクイックスタートガイドを提供します。

このチャットプラグインが、人生を変えるような Jarvis のような体験になるのか、それとも単に高価なブラウザ用 Alexa になるのかについては、まだ結論が出ていません。プラグインが何を提供できるのか、何に注意すべきか、独自のプラグインを作成する方法を見て、私たち自身でどう考えるかを決めましょう。

チャットプラグインとは何ですか?

「チャットプラグイン」を使用すると、ChatGPT モデルでサードパーティアプリケーションを使用したり対話したりできるようになります。本質的には、言語モデルがチャット会話で API 呼び出しと操作を作成するために従うことができる一連の指示と仕様です。サードパーティシステムとの統合により、ChatGPT ユーザーにさまざまな新機能が提供されます。

独自のビジネスデータとデータベース（販売、マーケティングシステムなど）を作成、更新、変更します。
外部サービス（金融、天気予報APIなど）から情報を取得する
アクションを実行する（例：Slack メッセージを送信する）

プラグインコンポーネント

AI と対話するアプリケーションの構築は、困難で複雑なシステムのように思えるかもしれませんが、実際に構築してみると、非常に簡単であることがわかります。「プラグイン」とは、ChatGPT モデルに API の機能と、API にアクセスする方法とタイミングを指示する一連の命令です。

これは 2 つの重要なファイルに帰着します。

ai-plugin.json: プラグインの基本メタデータを含むプラグインマニフェスト。これには、名前、作成者、説明、認証、連絡先などの詳細が含まれます。このリストは、ChatGPT がプラグインの機能を理解するために使用されます。
openapi.yaml: OpenAPI 仕様における API ルートとスキーマの仕様。 json ファイルとして提供することもできます。これにより、ChatGPT にどの API が使用可能か、どのような理由で使用可能か、リクエストと応答がどのようになるかが伝えられます。

プラグインサービスの基本的な機能とホスティングはお客様次第です。任意の REST API またはプログラミング言語を使用して、API をどこでもホストできます。

チャットプラグインエコシステムの新たな機会

チャットプラグインの登場により、開発者、デザイナー、企業、起業家にとって多くのチャンスが生まれます。

「インタラクションはよりスマートかつスムーズになります」: プラグインは人間化、仮定、およびコンテキスト機能を導入し、リクエストと組み合わせてこれらの機能を提供します。これにより、固定された GUI や構造化データ API では提供できない、インタラクションに流動性の要素が追加されます。たとえば、「今日はジャケットを着るべきでしょうか？」という質問に対して、API はユーザーの位置、天気の解釈、および元の質問に対する回答に基づいて天気予報サービスを呼び出します。「はい、ジャケットを着るべきです。今日の気温は 12 度で、降水確率は 80% です。」
「新規顧客チャネル」：ChatGPTは2023年4月に1億7,300万人のアクティブユーザーを獲得し、最速のユーザー成長記録を樹立しました。このプラットフォームに存在することで、多数の潜在顧客にリーチする機会が得られることは間違いありません。また、それを使用している既存の顧客と関わるための、より簡単で直感的な方法も提供します。
「人工知能インターフェース（AII）の台頭」：ユーザーは「ボタン」をクリックせずに複雑な操作を実行できるようになりました。理論的には、プラグインは従来のユーザーインターフェイスを必要とせずに (またはまったく必要とせずに) 素晴らしいサービスを提供できます。直感的な仕様は、直感的な Web アプリケーションと同じくらい重要になる可能性があります。
「新たなビジネスチャンス」：人工知能は雇用を創出する一方で、雇用を奪うことになる。成功すれば、プラグインエコシステムは、プラグイン開発者、AI API 開発者、そして企業向けプラグインをホスト、認証、管理するまったく新しい垂直ビジネスに新たな機会とスペースを生み出すことになります。

プラグイン開発の考慮事項と制限

直感的でコード不要のインターフェースの利点には、独自の課題が伴います。エコシステム、ロジック、インターフェースは時間の経過とともに進化することを認識し、プラグインを構築する際には留意すべき点がいくつかあります。特にビジネスとして構築したい場合はそうです。

「応答時間が遅い」: 自然言語の解釈、プラグインの選択、リクエストの構築、応答の解釈に時間がかかります。単純な情報要求やアクションの場合は、自分で行う方が早い場合があります。上記の例に基づくと、ChatGPT が天気を解釈して書き込むのを 15 秒待つよりも、携帯電話のホーム画面を見る方がはるかに早いです。
「高コスト」: ユーザーはプラグインとやり取りするためにトークンを消費します。これにより、無料で何かを提供している場合でも、潜在的なコストが増加します。また、それらの API をホストおよび運用するためのインフラストラクチャに対しても料金を支払う必要があります。
「別の方法」: 内部的には、プラグインとのやり取りは依然として REST API であり、他のクライアントと同じ操作しか実行できません。プラグインは、AI を私たちのために機能させるための新しいパラダイムというよりも、企業とやり取りするための新しいチャネルのようなものです。
操作可能: デフォルトではユーザーは API 応答を表示できないため、プラグイン作成者は誤解を招く情報やその他の悪意のある戦術を使用して回答を歪曲することができます。
「予測不可能性」: 生成モデルに意思決定を任せるのは危険であり、その動作は信頼できません。人間が書いたチャットプロンプトに基づいて API リクエストを作成するために、舞台裏では多くの推論と推測作業が行われています。情報の入力が不適切であったり、説明があいまいだったりすると、間違った API が呼び出されたり、間違ったアクションが実行されたりする可能性があります。

最初の JavaScript ChatGPT プラグインの構築

チャットプラグイン用に独自の Express サーバーをセットアップします。これは簡単に始められる方法であるだけでなく、Express を拡張して、ミドルウェア、認証、その他必要なすべての本番環境レベルの機能を追加することもできます。

次の手順で作成してコードを追加するすべてのファイルを次に示します。混乱した場合は、ここに戻ってくるか、ここ[1]のソースコードを複製してください。

 my-chat-plugin/ ├─ .well-known/ │ ├─ ai-plugin.json <- 插件元数据├─ routes/ │ ├─ todos.js <- 处理Todo请求的路由│ ├─ openai.js <- 处理openAI请求的路由openapi.yaml <- Open API规范index.js <- 插件入口

「前提条件」

「OpenAIアカウント」：こちらから登録[2]
「ChatGPTプラグインへのアクセス」：有料アカウントでまだアクセスしていない場合は、ここから待機リストに参加できます[3]。

プロジェクトの設定

my-chat-plugin というフォルダーを作成し、次のコマンドを実行して開始します。

 ## 1. Create the directory and open it mkdir my-chat-plugin && cd my-chat-plugin ## 2. Initialize a project with the default values npm init --yes ## 3. Install our dependencies npm install axios express cors js-yaml

OpenAIマニフェストとAPI仕様を追加する

ここで、必要なチャットプラグインマニフェストと OpenAPI 仕様を作成します。 ChatGPT はサーバー上の特定のルートでこれらのファイルを要求するので、次の場所に配置します。

/.well-known/ai-plugin.json
オープンAPI

これらのファイル内の説明は非常に重要です。 summary フィールドと description_for_model フィールドの言語があいまいな場合、ChatGPT がプラグインをいつどのように使用するかについて混乱する可能性があります。次の手順に従ってください:

.well-known というフォルダーを作成し、その中に ai-plugin.json というファイルを追加します。ターミナル経由でこれを行うには:

 mkdir .well-known && touch .well-known/ai-plugin.json

次のコードを ai-plugin.json に貼り付けます。

 { "schema_version": "v1", "name_for_human": "My ChatGPT To Do Plugin", "name_for_model": "todo", "description_for_human": "Plugin for managing a To Do list. You can add, remove and view your To Dos.", "description_for_model": "Plugin for managing a To Do list. You can add, remove and view your ToDos.", "auth": { "type": "none" }, "api": { "type": "openapi", "url": "<http://localhost:3000/openapi.yaml>", "is_user_authenticated": false }, "logo_url": "<http://localhost:3000/logo.png>", "contact_email": "[email protected]", "legal_info_url": "<http://www.yourdomain.com/legal>" }

プロジェクトのルートパスに openapi.yaml という名前のファイルを作成し、そのファイルに次のコードを追加します。

これは、ChatGPT が API ルートの機能 (各ルートの概要に注意) とリクエストおよび応答の形式を理解するために使用する OpenAPI 仕様です。 ChatGPT が API を使用する際に問題が発生する場合は、この仕様が API の応答と一致していないことが原因である可能性が高くなります。

 openapi: 3.0.1 info: title: TODO Plugin description: A plugin that allows the user to create and manage a To Do list using ChatGPT. version: 'v1' servers: - url: <http://localhost:3000> paths: /todos: get: operationId: getTodos summary: Get the list of todos responses: "200": description: OK content: application/json: schema: type: array items: $ref: '#/components/schemas/Todo' post: operationId: addTodo summary: Add a todo to the list requestBody: required: true content: application/json: schema: $ref: '#/components/schemas/Todo' responses: "201": description: Created content: application/json: schema: $ref: '#/components/schemas/Todo' /todos/{id}: delete: operationId: removeTodo summary: Delete a todo from the list when it is complete, or no longer required. parameters: - name: id in: path required: true schema: type: integer responses: "204": description: No Content components: schemas: Todo: type: object properties: id: type: integer format: int64 task: type: string required: - id - task

サーバーの作成

次のステップは、プラグインのエントリポイントとなるメインファイルを作成することです。プロジェクトのルートディレクトリに、index.js というファイルを追加し、次のコードを追加します。

注: ChatGPT のドキュメントでは、openapi.yaml と openapi.json の両方に 1 つのルートがあることが示されています。ローカルテストでは、YAML ファイルのみが要求されていることが示されていますが、後で必要になる可能性があるため、すべてをそこに配置しておく価値があります。

次のコードを index.js に貼り付けます。

 const express = require('express'); const cors = require('cors'); const todoRouter = require('./routes/todos'); const openaiRoutes = require('./routes/openai'); const app = express(); const PORT = 3000; // Setting CORS to allow chat.openapi.com is required for ChatGPT to access your plugin app.use(cors({ origin: [`http://localhost:${PORT}`, '<https://chat.openai.com>'] })); app.use(express.json()); // Simple request logging to see if your plugin is being called by ChatGPT app.use((req, res, next) => { console.log(`Request received: ${req.method}: ${req.path}`) next() }) // OpenAI Required Routes app.use(openaiRoutes); // The dummy todos API app.use('/todos', todoRouter); app.listen(PORT, () => { console.log(`Plugin server listening on port ${PORT}`); });

上記のコードは次のことを行います。

ExpressとCorsに必要なライブラリをインポートする
次のステップで追加するルート固有のロジックをインポートします。
受信したリクエストをコンソールに出力するためのロギングミドルウェアを追加します。
すでにAPIサービスをお持ちの場合に使用できる汎用転送機能を提供します

必須プラグインルートを設定する

このステップでは、OpenAI/ChatGPT が必要なファイルを取得するための必須ルートを追加します。具体的なルーティングロジックはすべて「routes」ディレクトリに配置します。ここには、プラグインルートとその他のカスタムルートが保存されます。

(追加のフォルダー (コントローラー、ミドルウェア、サービスなど) を使用してこの構造を拡張したり、独自の構造を作成したりすることもできます)。

/routesフォルダを作成する
openai.jsという名前のファイルを作成します。
次のコードをroutes/openai.jsに貼り付けます。

 const express = require('express'); const router = express.Router(); const fs = require('fs'); const path = require('path'); const yaml = require('js-yaml'); router.get('/openapi.yaml', async function(req, res) { try { const yamlData = fs.readFileSync(path.join(process.cwd(), 'openapi.yaml'), 'utf8'); const jsonData = yaml.load(yamlData); res.json(jsonData); } catch(e) { console.log(e.message) res.status(500).send({ error: 'Unable to fetch manifest.' }); } }); router.get('/.well-known/ai-plugin.json', function(req, res) { res.sendFile(path.join(process.cwd(), '/.well-known/ai-plugin.json')); }); router.get('/logo.png', function(req, res) { res.sendFile(path.join(process.cwd(), 'logo.png')); }) module.exports = router;

上記のコードは次のことを行います。

プラグインがマニフェストと API 仕様を取得するための 2 つのルートが定義されています。
プラグインがプラグインのロゴを取得してチャットに表示するためのルートを定義します。
すべてのルートをエクスポートして、index.js にインポートできるようにします。

Todoルートの設定

ここで、単純な作成、更新、削除機能をシミュレートするための簡単なルートをいくつか作成します。私たちは通常、ToDo チュートリアルを避けますが、これはドキュメントのガイドとして使用されるため、できるだけ転送可能な状態にしておきたいと考えました。

ルートフォルダにtodos.jsという新しいファイルを作成します。
次のコードをroutes/todos.jsに貼り付けます。

 const express = require('express'); const router = express.Router(); let todos = [ { id: 1, task: 'Wake up' }, { id: 2, task: 'Grab a brush'}, { id: 3, task: 'Put a little makeup'}, { id: 4, task: 'Build a Chat Plugin'} ]; // placeholder todos let currentId = 5; // to assign unique ids to new todos getTodos = async function(req, res) { res.json(todos); } addTodo = async function(req, res) { const { task } = req.body; const newTodo = { id: currentId, task }; todos.push(newTodo); currentId++; res.json(newTodo); } removeTodo = async function(req, res) { const { id } = req.params; todos = todos.filter(todo => todo.id !== Number(id)); res.json({ "message" : "Todo successfully deleted" }); } router.get('/', getTodos); router.post('/', addTodo); router.delete('/:id', removeTodo); module.exports = router;

上記のコードは次のことを行います。

簡単な ToDo 項目のリストを取得、作成、削除するための 3 つのルートを作成します。
これらのルートをエクスポートし、index.js ファイルにインポートします。

プラグインの検証とテスト

さて、ここからが楽しい部分です。これで、ChatGPT でローカルプラグインを手動でビルドして実行するために必要なコードとセットアップがすべて揃いました。始めましょう:

「サービス開始」

ターミナルに「node index.js」と入力します。これにより、サービスが開始され、ターミナルに「プラグインサーバーがポート 3000 でリッスンしています」と表示されます。

「ChatGPTローカルプラグインに接続する」

chat.openai.com[4]にアクセスし、アカウントで新しいチャットウィンドウを開きます。 GPT-4 ドロップダウンメニューをクリックし、プラグイン > プラグインストア > 独自のプラグインの開発をクリック > localhost:3000 と入力 > 「マニフェストファイルの検索」をクリックします。

「テストプラグイン」

ChatGPT がマニフェストファイルを取得できたことを示す確認メッセージが表示されるので、開始する準備が整います。そうでない場合は、ターミナルでサーバーが実行中であり、着信リクエストを受信しているかどうかを確認してください。

次のコマンドをいくつか試してください。

「私のやるべきことは何ですか？」
目が覚めました（ToDoタスクを正確に言う必要はありません。あなたの言っていることを理解します）

(オプション) このサーバーをプロキシとして使用する

リクエストの送信先となる API がローカルまたは外部で既に実行されている場合は、このサーバーをプロキシとして使用し、リクエストを転送できます。これは、既存のコードベースを再デプロイまたは更新することなく、マニフェストファイルと仕様ファイルの処理方法をすばやくテストして反復できるため、推奨されるオプションです。

作成したルートの下の index.js ファイルに次のコードを追加します。

 // PASTE IN BEFORE app.listen(... // Proxy server to an existing API const api_url = '<http://localhost>'; app.all('/:path', async (req, res) => { const { path } = req.params; const url = `${api_url}/${path}`; console.log(`Forwarding call: ${req.method} ${path} -> ${url}`); const headers = { 'Content-Type': 'application/json', }; try { const response = await axios({ method: req.method, url, headers, params: req.query, data: req.body, }); res.send(response.data); } catch (error) { console.error(`Error in forwarding call: ${error}`); res.status(500).send('Error in forwarding call'); } });

次のステップ

この基本的なチュートリアルは、独自の本格的な JavaScript ベースのチャットプラグインの構築を開始するために必要なものすべてです。アプリケーションを本番環境にデプロイするには、追加の認証とデプロイの手順が必要です。これはチュートリアルでは説明されていませんが、これを実現するには次のリソースをお勧めします。