构建 JavaScript ChatGPT 插件,你学会了吗?

人工智能
如果你已经有一个在本地或外部运行的API来发送请求,你可以把这个服务器作为一个代理,把请求转发给它。这是一个值得推荐的选项,因为它使你能够快速测试和迭代如何处理清单和规范文件,而不必重新部署或更新你现有的代码库。

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

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

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

目录

  • 什么是聊天插件?

插件组成部分

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

插件开发的考量和局限

  • 设置项目
  • 添加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可以被扩展到包括中间件、认证和所有其他你想要的生产级的东西。

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

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

「先决条件」

  1. 「OpenAI账号」:在这里注册[2]
  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
  • /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中:

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"目录中。这就是我们将存储插件路由以及其他自定义路由的地方。

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

  1. 创建/routes文件夹
  2. 创建名为openai.js的文件
  3. 粘贴下列代码到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规范。
  • 定义了一个路由,让插件在聊天中检索并显示你的插件标识。
  • 导出所有的路由,以便我们可以在index.js中导入它们。

设置Todo路由

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

  1. 在你的路由文件夹中,创建一个名为todos.js的新文件
  2. 将以下代码粘贴到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;

上述代码做了下列事情:

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

验证和测试插件

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

  1. 「开启服务」

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

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

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

图片

  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的成熟聊天插件所需要的。将你的应用程序部署到生产环境中,需要一些额外的认证和部署步骤。教程中没有提到这些,但我推荐以下资源来完成这些工作:

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

本文译自:https://www.sitepoint.com/javascript-chatgpt-plugin/[7]

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

参考资料

[1]源码:https://github.com/sitepoint-editors/chatgpt-plugin-quickstart-js

[2]注册:https://platform.openai.com/signup?launch

[3]这里:https://openai.com/waitlist/plugins

[4]chat.openai.com:https://chat.openai.com/

[5]官方插件实例:https://platform.openai.com/docs/plugins/examples

[6]生产你的应用程序:https://platform.openai.com/docs/plugins/production/domain-verification-and-security

[7]https://www.sitepoint.com/javascript-chatgpt-plugin/:https://www.sitepoint.com/javascript-chatgpt-plugin/

责任编辑:武晓燕 来源: 前端F2E
相关推荐

2023-07-26 13:11:21

ChatGPT平台工具

2023-05-04 08:01:35

umi 插件开发插件

2024-11-29 08:53:46

2024-11-28 10:09:06

2023-06-15 08:00:23

2024-07-17 09:23:58

Vite插件机制

2024-09-04 08:40:51

2024-02-04 00:00:00

Effect数据组件

2024-01-19 08:25:38

死锁Java通信

2023-01-10 08:43:15

定义DDD架构

2023-06-28 11:01:08

2023-08-01 12:51:18

WebGPT机器学习模型

2024-01-02 12:05:26

Java并发编程

2024-07-31 08:39:45

Git命令暂存区

2022-07-08 09:27:48

CSSIFC模型

2023-12-12 08:02:10

2023-01-30 09:01:54

图表指南图形化

2024-08-06 09:47:57

2024-05-06 00:00:00

InnoDBView隔离

2023-10-10 11:04:11

Rust难点内存
点赞
收藏

51CTO技术栈公众号