import OpenAI from 'openai';
import { createChatExporterOpenAI } from 'ai-chat-html-exporter';

// 创建带有导出功能的 OpenAI 客户端
const openai = createChatExporterOpenAI(OpenAI, {
  apiKey: process.env.OPENAI_API_KEY,
});

// 正常使用 OpenAI API，对话会自动导出为 HTML
const response = await openai.chat.completions.create({
  model: 'gpt-3.5-turbo',
  messages: [
    { role: 'user', content: 'Hello, how are you?' }
  ],
});

console.log(response.choices[0].message.content);

CommonJS

const OpenAI = require('openai');
const { createChatExporterOpenAI } = require('ai-chat-html-exporter');

const openai = createChatExporterOpenAI(OpenAI, {
  apiKey: process.env.OPENAI_API_KEY,
});

浏览器 UMD

<script src="https://unpkg.com/ai-chat-html-exporter/dist/index.umd.js"></script>
<script>
  const openai = AiChatHtmlExporter.createChatExporterOpenAI(OpenAI, {
    apiKey: 'your-api-key',
  });
</script>

配置选项

interface ExporterOptions {
  outputDir?: string;        // 输出目录，默认 'logs'
  enableFileOutput?: boolean; // 是否启用文件输出，默认 true
  customStyles?: string;     // 自定义 CSS 样式
}

const openai = createChatExporterOpenAI(OpenAI, {
  apiKey: process.env.OPENAI_API_KEY,
}, {
  outputDir: 'chat-exports',
  enableFileOutput: true,
  customStyles: `
    .message { border-radius: 15px; }
    .user { background: #e3f2fd; }
  `
});

高级用法

直接使用导出器类

import { OpenaiChatHtmlExporter } from 'ai-chat-html-exporter';

const exporter = new OpenaiChatHtmlExporter({
  outputDir: 'my-exports',
  customStyles: '/* 自定义样式 */'
});

// 手动处理消息
exporter.processUserMessages([
  { role: 'user', content: 'Hello!' }
]);

// 处理 AI 响应
exporter.processAIResponse(response);

流式响应支持

库完全支持 OpenAI 的流式响应：

const stream = await openai.chat.completions.create({
  model: 'gpt-3.5-turbo',
  messages: [{ role: 'user', content: 'Tell me a story' }],
  stream: true,
});

for await (const chunk of stream) {
  process.stdout.write(chunk.choices[0]?.delta?.content || '');
}
// 对话会自动保存为 HTML 文件

工具调用支持

const response = await openai.chat.completions.create({
  model: 'gpt-3.5-turbo',
  messages: [{ role: 'user', content: 'What\'s the weather like?' }],
  tools: [
    {
      type: 'function',
      function: {
        name: 'get_weather',
        description: 'Get weather information',
        parameters: {
          type: 'object',
          properties: {
            location: { type: 'string' }
          }
        }
      }
    }
  ]
});
// 工具调用信息会在 HTML 中完整展示

API 文档

`createChatExporterOpenAI(OpenAIClass, config, exporterOptions?)`

创建带有对话导出功能的 OpenAI 客户端。

参数:

OpenAIClass: OpenAI 客户端类
config: OpenAI 配置对象
exporterOptions: 可选的导出器配置

返回:

增强的 OpenAI 客户端实例

`OpenaiChatHtmlExporter`

对话导出器类。

构造函数:

constructor(options?: ExporterOptions)

主要方法:

processUserMessages(messages, tools?): 处理用户消息
processAIResponse(response): 处理 AI 响应
processStreamCompletionResponse(content, toolCalls): 处理流式响应
logError(errorMessage): 记录错误信息

输出示例

生成的 HTML 文件包含：

📝 对话历史记录
🎨 优雅的消息样式
💻 代码语法高亮
🔧 工具调用详情
📱 响应式布局
🌙 可自定义主题

浏览器兼容性

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

Node.js 兼容性

Node.js 14.0.0+

与 Python 版本的关系

这个 JavaScript/TypeScript 库是 ai-chat-html-exporter 项目的前端实现。该项目同时提供：

Python 版本：支持 LangChain 和 OpenAI Python SDK
JavaScript/TypeScript 版本：支持 Node.js 和浏览器环境

两个版本生成相同格式的 HTML 文件，您可以根据项目需求选择合适的版本。

开发

# 进入 JavaScript 包目录
cd packages/javascript

# 安装依赖
npm install

# 构建
npm run build

# 开发模式
npm run dev

# 验证构建
npm run validate

示例

查看 examples/ 目录获取更多使用示例：

basic-usage.js - 基础用法示例
typescript-usage.ts - TypeScript 高级示例

许可证

MIT License - 详见项目根目录的 LICENSE 文件。

贡献

欢迎提交 Issue 和 Pull Request！请参考项目根目录的贡献指南。

更新日志

1.0.0

初始版本发布
支持基本的对话导出功能
TypeScript 支持
多种构建格式支持

Keywords

FAQs

What is ai-chat-html-exporter?

Is ai-chat-html-exporter well maintained?

Package last updated on 29 Sep 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

ai-chat-html-exporter