chatgpt-artifacts

将 Claude 的 Artifacts（工件）功能引入 ChatGPT

预览

https://github.com/ozgrozer/chatgpt-artifacts/assets/651938/abc68e48-2a85-4cb8-a17a-ae795de1ed26

使用方法

克隆本仓库

git clone https://github.com/ozgrozer/chatgpt-artifacts.git

安装依赖

npm install

复制 .env.example 为 .env，并填入你的 OpenAI API 密钥

cp .env.example .env
vim .env

构建应用

npm run build

启动应用

npm start

Ollama 支持

若要使其与本地大语言模型（LLM）如 Llama3 或 Gemma2 配合使用，只需对代码进行简单修改。

打开 /pages/api/chat.js 文件

// 将此处
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
})
// 修改为
const openai = new OpenAI({
  apiKey: 'ollama',
  baseURL: 'http://127.0.0.1:11434/v1'
})

// 将此处
const stream = await openai.chat.completions.create({
  stream: true,
  model: 'gpt-4o',
  messages: conversations[conversationId]
})
// 修改为
const stream = await openai.chat.completions.create({
  stream: true,
  model: 'llama3',
  messages: conversations[conversationId]
})

Groq 支持

若要使其与 Groq 配合使用，只需在 此处 获取 API 密钥，并对代码进行简单修改。

打开 /pages/api/chat.js 文件

// 将此处
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
})
// 修改为
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  baseURL: 'https://api.groq.com/openai/v1'
})

// 将此处
const stream = await openai.chat.completions.create({
  stream: true,
  model: 'gpt-4o',
  messages: conversations[conversationId]
})
// 修改为
const stream = await openai.chat.completions.create({
  stream: true,
  model: 'llama3-70b-8192',
  messages: conversations[conversationId]
})

Azure OpenAI 支持

若要使其与 Azure OpenAI 配合使用，你需要在 Azure 门户 中创建资源，然后在 Azure OpenAI Studio 中创建部署，并获取你的 API 密钥、API 版本和 API 终结点，最后对代码进行简单修改。

打开 /pages/api/chat.js 文件

// 将此处
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
})
// 修改为（如果 API 版本不同，请相应调整）
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
  defaultQuery: { 'api-version': '2023-03-15-preview' },
  defaultHeaders: { 'api-key': process.env.OPENAI_API_KEY },
  baseURL: 'https://<RESOURCE_NAME>.openai.azure.com/openai/deployments/<DEPLOYMENT_NAME>'
})

// 在此处修改你的模型
const stream = await openai.chat.completions.create({
  stream: true,
  model: 'gpt-4o',
  messages: conversations[conversationId]
})

许可证

GPL-3.0

chatgpt-artifacts 快速上手指南

将 Claude 的 Artifacts 功能带到 ChatGPT。

环境准备

• 操作系统：支持 macOS、Linux 或 Windows（推荐使用 WSL）
• Node.js：版本 ≥ 18.x（建议使用 nvm 管理）
• npm 或 yarn：已随 Node.js 安装
• 网络环境：如需访问 OpenAI API，请确保网络可连通；国内用户建议配置代理或使用支持国内访问的替代方案（如 Groq、Ollama）

💡 国内加速提示：安装依赖时可使用淘宝 NPM 镜像加速：

npm install --registry https://registry.npmmirror.com

安装步骤

1. 克隆仓库：

   git clone https://github.com/ozgrozer/chatgpt-artifacts.git
   

2. 进入项目目录并安装依赖：

   cd chatgpt-artifacts
   npm install
   

3. 配置 API 密钥：

   cp .env.example .env
   vim .env  # 将 OPENAI_API_KEY 替换为你的 OpenAI API Key
   

4. 构建应用：

   npm run build
   

5. 启动服务：

   npm start
   

启动成功后，默认可通过 http://localhost:3000 访问。

基本使用

默认配置下，应用会调用 OpenAI 的 gpt-4o 模型。你只需在 .env 中填入有效的 OPENAI_API_KEY，启动后即可在浏览器中与支持 Artifacts 功能的 ChatGPT 界面交互。

如需切换至本地模型（如 Llama3）或 Groq、Azure OpenAI 等后端，请参考项目 README 中对应部分修改 /pages/api/chat.js 文件。