ChatGPT Sidebar 开发入门指南：从零构建你的第一个侧边栏应用

1次阅读

没有评论

共计 2270 个字符，预计需要花费 6 分钟才能阅读完成。

ChatGPT Sidebar 是一种可以在 ChatGPT 界面侧边显示的交互式应用组件。它允许开发者在 ChatGPT 的对话界面旁添加自定义功能，为用户提供更丰富的交互体验。Sidebar 的典型应用场景包括：

实时数据展示（如股票行情、天气信息）
快捷工具集成（如代码片段管理、翻译工具）
内容辅助（如文档大纲、知识库检索）

确保你已经具备以下基础环境：

Node.js 16+ 版本
npm 或 yarn 包管理器
现代浏览器（推荐 Chrome 或 Edge）

访问 OpenAI 开发者平台
创建新应用并获取 API 密钥
记录你的 APP_ID 和 API_KEY

// 示例配置
const config = {
  appId: 'your-app-id',
  apiKey: 'your-api-key'
};

Sidebar 应用的生命周期包括以下几个阶段：

初始化 ：应用加载并建立与 ChatGPT 的连接
就绪：应用准备就绪，可以接收和处理消息
交互：用户与 Sidebar 交互的阶段
销毁：应用被关闭或卸载

Sidebar 与 ChatGPT 主界面通过消息进行通信。主要消息类型包括：

init：初始化消息
userMessage：用户发送的消息
systemMessage：系统消息
error：错误消息

weather-sidebar/
├── index.html
├── style.css
└── app.js

<!DOCTYPE html>
<html>
<head>
  <title> 天气查询 </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1> 天气查询 </h1>
    <div class="search-box">
      <input type="text" id="city-input" placeholder="输入城市名称">
      <button id="search-btn"> 查询 </button>
    </div>
    <div id="weather-result"></div>
  </div>
  <script src="app.js"></script>
</body>
</html>

// 初始化 ChatGPT Sidebar
const sidebar = window.ChatGPT.sidebar.init({
  appId: config.appId,
  apiKey: config.apiKey,
  onMessage: handleMessage
});

// 处理消息
function handleMessage(message) {switch (message.type) {
    case 'init':
      console.log('Sidebar 初始化完成');
      break;
    case 'userMessage':
      processUserQuery(message.content);
      break;
    default:
      console.log('收到未知消息类型:', message.type);
  }
}

// 查询天气功能
async function getWeather(city) {
  try {const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=${config.weatherApiKey}&q=${city}`);
    const data = await response.json();
    return data;
  } catch (error) {console.error('获取天气数据失败:', error);
    return null;
  }
}

// 绑定查询按钮事件
document.getElementById('search-btn').addEventListener('click', async () => {const city = document.getElementById('city-input').value;
  if (city) {const weatherData = await getWeather(city);
    displayWeather(weatherData);

    // 将结果发送到 ChatGPT 主界面
    sidebar.sendMessage({
      type: 'weatherResult',
      content: weatherData
    });
  }
});