构建 JavaScript ChatGPT 插件

川长思鸟来 2024-03-17 12:59 58阅读 0赞

> 聊天插件系统是一种令人兴奋的新方式，可以扩展ChatGPT的功能，纳入您自己的业务数据，并为客户与您的业务互动增加另一个渠道。在这篇文章中，我将解释什么是聊天插件，它们能做什么，以及你如何用JavaScript建立你自己的聊天插件。

这篇文章（或OpenAI所称的"训练数据"）提供了一个快速入门指南，来建立你的第一个ChatGPT插件，并将其与ChatGPT界面整合。

聊天插件是否会成为改变生活的贾维斯般的体验，或者只是一个昂贵的Alexa-for-your-browser，目前还没有定论。让我们通过看看插件能提供什么，需要注意什么，以及如何制作你自己的插件，来决定我们自己的想法。

### 目录 ###

*  什么是聊天插件?
    
     *  插件组成部分
     *  聊天插件生态系统的新机遇
     *  插件开发的考量和局限
 *  构建第一个JavaScript ChatGPT 插件
    
     *  设置项目
     *  添加OpenAI清单和API规范
     *  创建服务器
     *  设置强制性的插件路由
     *  设置Todo路由
     *  验证和测试插件
     *  (可选）将该服务器作为代理
 *  下一步

### 什么是聊天插件？ ###

"聊天插件"允许ChatGPT模型使用并与第三方应用程序互动。从本质上讲，它是一套指令和规范，语言模型可以遵循这些指令和规范在聊天对话中创建API的调用和操作。与第三方系统的整合为ChatGPT的用户提供了一系列新的功能：

*  创建、更新和修改我们自己的业务数据和数据库（如销售、营销系统）
 *  从外部服务中获取信息（如金融、天气API）
 *  执行操作（例如，发送Slack消息）

#### 插件组成部分 ####

建立一个能与AI互动的应用程序似乎是一个令人生畏的复杂系统，然而，一旦你开始做，你会发现它非常简单。一个"插件"是一套简单的指令，它告诉ChatGPT模型你的API是做什么的，以及如何和何时访问它。

这可以归结为两个重要文件：

1.  `ai-plugin.json`：插件清单，包含插件的基本元数据。这包括名称、作者、描述、认证和联系等细节。该清单被ChatGPT用来理解插件的作用。
2.  `openapi.yaml`：在OpenAPI规范中，你的API路由和模式的规范。也可以以json文件的形式提供。这将告诉ChatGPT可以使用哪些API，出于什么原因，以及请求和响应会是什么样子。

插件服务的基础功能和托管由你决定。你的API可以托管在任何地方，使用任何REST API或编程语言。

#### 聊天插件生态系统的新机遇 ####

聊天插件的到来为开发者、设计师、企业和企业家带来了一系列的机会：

*  **交互可以更"聪明"和更"流畅"** ：插件引入了人性化、假设和上下文的能力，并结合请求提供这些能力。这为互动增加了一个流动性的元素，而这是一个死板的GUI或结构化的数据API所不能满足的。例如，"我今天应该穿外套吗？"这个提示将导致API调用一个基于你的位置的天气服务，对天气的解释，以及对原始问题的回答："是的，你应该穿一件夹克。今天的温度是12度，有80%的机会下雨。"。
 *  **新的客户渠道**：ChatGPT在2023年4月以1.73亿活跃用户创造了增长最快的用户记录。毫无疑问，在这个平台上占有一席之地，为你提供了接触大量潜在客户的机会。它还提供了一种潜在的更容易、更直观、更容易与使用它的现有客户互动的方式。
 *  **人工智能界面（A.I.I.）的崛起**：用户现在无需点击"按钮"就可以执行复杂的操作。从理论上讲，一个插件可以提供一个惊人的服务，而不需要像传统的用户界面那样需要关注界面才行（或根本不需要）。一个直观的规范可能变得和一个直观的网络应用一样重要。
 *  **新的商业机会**：人工智能在提供工作的同时也会带走工作。如果成功的话，插件生态系统将为插件开发者、人工智能API开发者，以及为企业托管、认证和管理插件的全新垂直业务创造新的机会和空间。

#### 插件开发的考量和局限 ####

直观和无代码界面的好处带来了一系列挑战。承认生态系统、逻辑和界面会随着时间的推移而发展，在构建插件时，我们仍然需要记住一些事情。特别是如果你想把它们作为一项业务来建立。

*  **响应速度慢**：解释自然语言、选择插件、建立请求和解释响应都需要时间。对于简单的信息请求或操作，自己做就可以更快。根据上面的例子，我看一下我的手机主屏幕比等待15秒让ChatGPT解释天气并写给我要快得多。
 *  **成本高**：用户将花费token来与任何插件互动。这增加了潜在的成本，即使你是免费提供给他们的东西。你还必须为托管和运营这些API的基础设施付费。
 *  **不同方式**：在内部，与插件的互动仍然是REST API，只能执行我们与其他客户端相同的操作。插件更像是一个与企业互动的新渠道，而不是目前让人工智能为我们服务的新范式。
 *  **可操纵性**：由于用户在默认情况下看不到API响应，误导性信息和其他恶意策略可能会被插件制造商用来歪曲答案。
 *  **不可预测性**：让生成模型负责决策是有风险的，行为是不可靠的。有很多推理和猜测工作在幕后发生，以根据人类书面聊天提示创建API请求。打字不规范的信息或含糊不清的描述可能会导致调用错误的API或做出错误的行动。

### 构建第一个JavaScript ChatGPT 插件 ###

我们将为我们的聊天插件建立自己的`express`服务器。这不仅是一个容易上手的方法，而且`express`可以被扩展到包括中间件、认证和所有其他你想要的生产级的东西。

以下是我们将在下列步骤中创建和添加代码的所有文件。如果你感到困惑，可以回到这里，或者克隆这里的[源码][Link 1]。

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

**先决条件**

1.  **OpenAI账号**：在这里[注册][Link 2]
2.  **ChatGPT插件访问**：如果你还没有通过付费账户访问，你可以在[这里][Link 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`
 *  `/openapi.yaml`

这些文件中的描述是非常重要的！如果你在`summary`和`description_for_model`字段中的语言含糊不清，你可能会让ChatGPT对何时和如何使用你的插件感到困惑。请遵循以下步骤：

1.  创建一个名为`.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": "support@yourdomain.com",
        "legal_info_url": "<http://www.yourdomain.com/legal>"
    }

1.  在项目根路径下创建一个名为`openapi.yaml`，并且添加下列代码到文件中。

这是OpenAPI规范，ChatGPT会用它来理解您的API路由的作用（注意每个路由的`summary`）以及请求和响应的格式。如果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`都有一个路由。本地测试显示只有yaml文件被请求，但值得把它们都放在那里，因为以后可能会用到。

粘贴下面代码到`index.js`中：

上述代码做了下列事情：

*  导入`express`和`cors`所需的库
 *  导入我们的路由特定逻辑，在下一步添加
 *  添加日志中间件，将任何传入的请求打印到控制台中
 *  提供一个通用的转发函数，如果你已经有一个API服务就可以使用

#### 设置强制性的插件路由 ####

在这一步中，我们将为OpenAI / ChatGPT添加强制性的路由，来获取所需文件。我们将把所有具体的路由逻辑放在一个"routes"目录中。这就是我们将存储插件路由以及其他自定义路由的地方。

(你可能希望用额外的文件夹（控制器、中间件、服务等）扩展这个结构，或者创建你自己的结构）。

1.  创建`/routes`文件夹
2.  创建名为`openai.js`的文件
3.  粘贴下列代码到`routes/openai.js`中：

上述代码做了下列事情：

*  定义了两个路由，供插件检索你的清单和API规范。
 *  定义了一个路由，让插件在聊天中检索并显示你的插件标识。
 *  导出所有的路由，以便我们可以在`index.js`中导入它们。

#### 设置Todo路由 ####

现在我们将创建一些简单的路由来模拟一个简单的创建、更新、删除功能。我们通常避免使用todo教程，但考虑到文档中使用这个作为指南，我们希望尽可能保持它的可转移性。

1.  在你的路由文件夹中，创建一个名为`todos.js`的新文件
2.  将以下代码粘贴到`routes/todos.js`中：

上述代码做了下列事情：

*  创建3条路由，从一个简单的todo项目列表中获取、创建和删除。
 *  将这些路由导出，导入到我们的`index.js`文件。

#### 验证和测试插件 ####

现在，有趣的部分来了。我们已经有了所有必要的代码和设置，可以在ChatGPT上手动建立和运行一个本地插件了！我们开始吧：

1.  **开启服务**

在终端中输入`node index.js`。这会在终端中开启服务并打印’Plugin server listening on port 3000’。

1.  **将其连接到ChatGPT本地插件**

进入[chat.openai.com][]，在你的账户中打开一个新的聊天窗口。点击GPT-4下拉菜单，Plugins > Plugin Store > 点击`Develop Your Own Plugin` > 输入`localhost:3000` > 点击**Find manifest file**。

![a1bcee49a32686b2d447f382f45fd7b2.png][]

1.  **测试插件**

你应该看到一条验证信息，即ChatGPT能够获得你的清单文件，这样你就可以开始了。如果没有，请检查你的终端，服务器正在运行，并且正在接收传入的请求。

试试下面的一些命令：

*  "`what are my todos?`"
 *  `I have woken up`（你不需要说出确切的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的成熟聊天插件所需要的。将你的应用程序部署到生产环境中，需要一些额外的认证和部署步骤。教程中没有提到这些，但我推荐以下资源来完成这些工作：

*  [官方插件实例][Link 4]：服务水平认证，和检索插件。
 *  [生产你的应用程序][Link 5]：在Plugin store中出现的主机、安全和性能要求有关的官方指南。

以上就是本文的全部内容，感谢阅读。

[Link 1]: https://github.com/sitepoint-editors/chatgpt-plugin-quickstart-js
[Link 2]: https://platform.openai.com/signup?launch
[Link 3]: https://openai.com/waitlist/plugins
[chat.openai.com]: https://chat.openai.com/
[a1bcee49a32686b2d447f382f45fd7b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/36bb7358425e49e0b1762c78c5c34c24.png
[Link 4]: https://platform.openai.com/docs/plugins/examples
[Link 5]: https://platform.openai.com/docs/plugins/production/domain-verification-and-security