当前位置： 首页 > news >正文

开源项目chatgpt-artifacts：为ChatGPT实现Claude式并排视图，支持多模型部署

news 2026/5/14 20:56:31

1. 项目概述：将Claude的Artifacts功能带到ChatGPT

如果你和我一样，既是ChatGPT的重度用户，又对Anthropic的Claude 3.5 Sonnet新推出的Artifacts功能眼馋不已，那么这个项目绝对值得你花时间折腾一下。简单来说，chatgpt-artifacts是一个开源项目，它通过一个自托管的Web应用，复刻了Claude Artifacts的核心体验——在对话界面旁边，实时生成并展示代码、文档、图表等“工作产物”。

我最初看到Claude的演示时，就被这个设计打动了：左边是自然的对话，右边是AI实时“敲”出来的代码或文档，这种并排视图对于开发者、内容创作者来说，效率提升是肉眼可见的。但问题是，我日常的工作流已经深度绑定了OpenAI的API和GPT-4o，切换成本太高。这个项目正好解决了这个痛点，它不改变你后端的AI服务提供商（你依然可以用OpenAI、Azure OpenAI，甚至本地的Ollama），只是在前端给你提供了一个类似Claude Artifacts的交互界面。

这个项目适合谁呢？首先是全栈或前端开发者，你可以直接部署使用，甚至基于它的代码进行二次开发。其次是AI应用爱好者，想体验多模型支持下的“产物生成”工作流。最后，它也适合任何希望提升与AI协作效率的人，尤其是需要频繁生成、查看和调试结构化内容（如代码、JSON、Markdown）的场景。接下来，我会带你从零开始，完成部署、配置到深度定制的全过程，并分享我踩过的几个坑和优化技巧。

2. 核心设计思路与方案选型解析

这个项目的本质，是一个构建在Next.js框架上的Web应用，它充当了一个“智能中继”的角色。理解它的设计思路，有助于我们后续的故障排查和自定义扩展。

2.1 为什么选择Next.js + OpenAI SDK架构？

作者选择了Next.js，这是一个非常务实且高效的选择。Next.js同时支持服务端渲染（SSR）和API Routes，这让整个项目的结构变得异常清晰。前端页面（/pages/index.js）负责渲染类似Claude的聊天界面和Artifacts预览窗格，而后端API（/pages/api/chat.js）则专门处理与AI模型的通信。这种分离使得前端可以专注于用户体验，后端则专注于稳定、安全地调用AI接口。

更重要的是，项目使用了官方的openaiNode.js SDK。这个SDK最新版本的一个重要特性是，它不再仅仅服务于api.openai.com，而是设计成了一个通用的“OpenAI API兼容层”。只要后端服务遵循OpenAI的API格式，这个SDK就能与之通信。这恰恰是项目能支持Ollama、Groq等服务的技术基石。你看到的代码修改，本质上都是在配置这个SDK的客户端实例，告诉它：“别去找OpenAI了，去找这个地址（baseURL），并且用这个格式（headers/query）。”

2.2 Artifacts功能是如何实现的？

Claude的Artifacts看起来神奇，但其核心原理在这个项目中被巧妙地简化并实现了。它主要依赖于GPT-4o等模型强大的结构化输出能力。流程是这样的：

  1. 用户提问：你在聊天框输入“用Python写一个快速排序函数，并附上解释”。
  2. 提示词工程：应用后端在将你的问题发送给AI模型之前，很可能对消息（messages）进行了一层包装。它可能添加了类似“请将代码部分用特定的Markdown代码块格式输出”的系统指令。虽然项目代码中没有明确展示这部分，但这是实现可靠产物提取的常见做法。
  3. 流式响应与解析：后端开启流式传输（stream: true）。前端一边接收AI返回的文本流，一边进行实时解析。这里的关键是，前端需要识别并分离“普通对话文本”和“产物内容”。
  4. 内容分离与渲染：解析逻辑（可能在前端组件中）会监测像 ````python这样的Markdown代码块标记。当检测到一个完整的代码块时，它就会将这个块的内容提取出来，放置到右侧的Artifacts预览窗格中。对于非代码块的文本，则继续在左侧聊天区域显示。预览窗格通常集成了代码高亮（如通过prism.js）或Markdown渲染（如react-markdown`）库，让产物看起来更专业。

所以，它并不是调用了某个特殊的“生成产物”的API，而是通过前后端配合，对模型的常规文本输出进行了智能的识别、分割和展示。这种实现方式的好处是兼容性极强，任何能输出格式化文本的模型都能支持。

3. 本地部署与基础配置详解

让我们动手，把这个项目跑起来。我将以macOS/Linux环境为例，Windows用户只需在终端部分稍作调整（如使用Git Bash）。

3.1 环境准备与项目初始化

首先确保你的系统已经安装了Node.js（版本18或以上，推荐20 LTS）和Git。你可以通过终端命令检查：

node --version git --version

如果未安装，请前往Node.js官网和Git官网下载安装。

接下来，克隆仓库并安装依赖。这里有一个关键细节：项目根目录下的package.json里定义了构建和启动脚本。我们需要先安装所有必需的npm包。

# 克隆项目到本地 git clone https://github.com/ozgrozer/chatgpt-artifacts.git # 进入项目目录 cd chatgpt-artifacts # 安装依赖。这里网络状况不好的同学可能会遇到问题，解决方案见后文“常见问题”部分。 npm install

npm install命令会根据package.json文件，下载Next.js、OpenAI SDK、React以及其他必要的UI库到本地的node_modules文件夹。这个过程可能会花费一两分钟。

3.2 配置OpenAI API密钥

项目使用环境变量来管理敏感信息，如API密钥。这是现代应用的标准安全实践。

# 复制环境变量示例文件为正式配置文件 cp .env.example .env

现在，用你喜欢的文本编辑器（如VSCode、Vim、Nano）打开新创建的.env文件。你会看到类似如下的内容：

OPENAI_API_KEY=sk-xxx

你需要将sk-xxx替换成你从OpenAI平台获取的真实API密钥。

重要安全提示：.env文件包含了你的密钥，务必将其添加到.gitignore文件中（项目通常已默认添加），确保它不会被意外提交到公开的Git仓库。永远不要在代码中硬编码API密钥。

3.3 构建与启动应用

配置好密钥后，就可以构建并启动应用了。Next.js应用在开发环境下可以直接运行，但为了模拟生产环境，项目脚本要求先构建。

# 构建生产优化版本 npm run build

build命令会执行Next.js的构建过程，包括编译TypeScript（如果存在）、打包React组件、优化代码等。你会在终端看到构建进度。完成后，运行：

# 启动生产服务器 npm start

如果一切顺利，终端会输出类似> Ready on http://localhost:3000的信息。现在，打开你的浏览器，访问http://localhost:3000，你应该能看到一个简洁的聊天界面，左侧是对话历史，中间是输入框，右侧是一个空白的产物预览区。

3.4 首次使用测试

在输入框中尝试发送一条消息，比如：“用JavaScript写一个Hello World函数”。如果配置正确，你应该会看到：

  1. 左侧聊天区域出现你的问题和AI的回复文本。
  2. 右侧的Artifacts预览区会高亮显示生成的JavaScript代码块。

至此，基础部署就成功了。但这只是开始，这个项目的强大之处在于其多模型支持能力。

4. 多模型支持配置实战

这是本项目最精彩的部分。通过修改一个核心文件，你就能让这个“ChatGPT Artifacts”界面为多种AI模型服务。

4.1 连接本地Ollama（运行Llama 3, Gemma等）

Ollama让你能在本地电脑上运行大型语言模型，完全离线，数据隐私性最高。假设你已经安装好了Ollama并拉取了模型（例如ollama pull llama3:8b），配置步骤如下：

  1. 首先，确保Ollama服务正在运行。默认情况下，它会在http://127.0.0.1:11434提供API服务。
  2. 找到项目中的/pages/api/chat.js文件。这是所有AI请求的入口。
  3. 按照项目说明修改文件。但这里我提供更清晰、更安全的修改实践：

不要直接删除原有代码，而是通过环境变量或条件判断来切换配置。这是更工程化的做法。你可以这样修改chat.js文件的开头部分：

import OpenAI from 'openai'; // 根据环境变量决定使用哪个后端 let openai; if (process.env.AI_PROVIDER === 'ollama') { openai = new OpenAI({ apiKey: 'ollama', // Ollama不需要真密钥，但SDK要求此字段存在 baseURL: 'http://127.0.0.1:11434/v1', // 指向本地Ollama服务 }); } else if (process.env.AI_PROVIDER === 'groq') { openai = new OpenAI({ apiKey: process.env.GROQ_API_KEY, // 从环境变量读取Groq密钥 baseURL: 'https://api.groq.com/openai/v1', }); } else { // 默认为OpenAI openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); }

然后，在调用处，同样进行条件判断：

let modelName; if (process.env.AI_PROVIDER === 'ollama') { modelName = 'llama3'; // 与你本地拉取的模型名称一致 } else if (process.env.AI_PROVIDER === 'groq') { modelName = 'llama3-70b-8192'; // Groq提供的模型名 } else { modelName = 'gpt-4o'; // 默认使用GPT-4o } const stream = await openai.chat.completions.create({ stream: true, model: modelName, messages: conversations[conversationId], });

最后，记得在.env文件中添加一行：AI_PROVIDER=ollama。这样，你就可以通过修改一个环境变量轻松切换不同的AI后端，而无需每次都去改动代码。

实操心得：使用Ollama时，响应速度取决于你的电脑硬件。对于7B/8B参数量的模型，16GB内存的MacBook Pro可以流畅运行，但生成速度仍无法与云端API相比。它的优势在于完全离线和零成本，适合处理敏感数据或进行大量实验。

4.2 接入Groq Cloud（体验极致速度）

Groq以其LPU推理引擎闻名，能提供极快的文本生成速度。接入步骤同样简单：

  1. 前往 Groq控制台 注册并获取API密钥。
  2. 在你的.env文件中设置GROQ_API_KEY和AI_PROVIDER。
    OPENAI_API_KEY=sk-xxx（仍可保留） GROQ_API_KEY=gsk_xxx（你的Groq密钥） AI_PROVIDER=groq
  3. 按照上面4.1节的代码示例，你已经配置好了条件判断。重启应用 (npm run build && npm start) 即可。

现在，你的应用后端就会将请求转发到Groq的API。你可以尝试问同一个问题，感受一下生成速度的显著提升。

4.3 配置Azure OpenAI服务

对于企业用户或需要更稳定服务保障的开发者，Azure OpenAI是一个理想选择。它的配置稍复杂，因为涉及Azure特有的资源结构。

  1. 创建资源：在Azure门户中创建“Azure OpenAI”资源。
  2. 部署模型：在Azure OpenAI Studio中，于你的资源下创建一个模型部署（例如，部署一个GPT-4o模型）。记下你给这个部署起的名字，比如my-gpt-4o-deployment。
  3. 获取关键信息：
    • 终结点（Endpoint）：格式类似https://<你的资源名称>.openai.azure.com/。
    • API密钥：在Azure门户中资源的“密钥与终结点”页面找到。
    • API版本：例如2024-02-15-preview。使用较新的版本。
    • 部署名称：你上一步起的名字my-gpt-4o-deployment。
  4. 修改配置：在chat.js的条件判断中增加一个azure分支：
    else if (process.env.AI_PROVIDER === 'azure') { openai = new OpenAI({ apiKey: process.env.AZURE_OPENAI_API_KEY, defaultQuery: { 'api-version': process.env.AZURE_API_VERSION }, defaultHeaders: { 'api-key': process.env.AZURE_OPENAI_API_KEY }, baseURL: `${process.env.AZURE_ENDPOINT}openai/deployments/${process.env.AZURE_DEPLOYMENT_NAME}`, }); }
  5. 更新环境变量：在.env文件中补充：
    AI_PROVIDER=azure AZURE_OPENAI_API_KEY=你的Azure密钥 AZURE_API_VERSION=2024-02-15-preview AZURE_ENDPOINT=https://<你的资源名称>.openai.azure.com/ AZURE_DEPLOYMENT_NAME=my-gpt-4o-deployment

注意事项：Azure OpenAI的baseURL格式非常关键，必须精确到/deployments/<部署名>。一个常见的错误是漏掉了deployments路径段，导致404错误。另外，Azure的计费是基于你选择的模型和部署的令牌使用量，使用前请了解定价。

5. 高级使用技巧与自定义优化

基础功能跑通后，我们可以让它更贴合个人使用习惯。以下是我在实际使用中总结的几个优化方向。

5.1 提升Artifacts的识别与渲染效果

默认的解析器可能对某些复杂的Markdown或非标准代码块支持不佳。你可以探索和修改前端组件中负责解析聊天流的部分。这通常位于/components或/pages/index.js文件中，寻找处理stream数据或解析message content的函数。

例如，你可以增强解析逻辑，使其不仅能识别python`，还能识别json、````html，甚至自定义的 ````artifact:chart` 这样的标记，并为不同类型的产物调用不同的渲染组件（如为JSON展示一个可折叠的树状视图）。

5.2 实现对话持久化

当前项目示例中，对话历史可能保存在内存中，服务器重启就会丢失。对于日常使用，这是不可接受的。一个简单的改进方案是引入一个轻量级数据库。

  1. 选择数据库：SQLite是一个零配置、单文件数据库，非常适合个人项目。可以使用better-sqlite3或kysely这类库。
  2. 修改API逻辑：在/pages/api/chat.js中，当收到新消息时，不再仅更新内存对象conversations，而是将其写入SQLite数据库的一张表中（表字段可包括id,conversation_id,role,content,timestamp）。
  3. 加载历史：当应用启动或用户请求某个对话时，从数据库中读取记录并重构messages数组。

这样，你的所有对话和生成的Artifacts都能被永久保存和检索。

5.3 添加前端功能：导出与分享

一个实用的功能是允许用户将右侧Artifacts预览区的内容导出为文件。这可以通过在前端添加一个按钮来实现。

  1. 在产物预览区组件旁添加一个“导出”按钮。
  2. 编写按钮点击事件处理函数。这个函数需要：
    • 获取预览区内的纯文本或HTML内容。
    • 利用JavaScript的Blob对象和URL.createObjectURL方法，创建一个文件下载链接。
    • 根据产物类型设置文件名和扩展名（如quicksort.py,document.md）。
  3. 触发浏览器下载。通过动态创建一个隐藏的<a>标签并模拟点击，来触发文件下载。

这个功能虽然简单，但能极大提升工具的实用性，让你生成的代码、文档能立刻保存到本地使用。

6. 常见问题与故障排查实录

在部署和使用过程中，你几乎一定会遇到下面这些问题。我把我的解决方案记录下来，希望能帮你节省时间。

6.1 依赖安装失败或构建错误

问题：运行npm install或npm run build时，出现网络超时、依赖冲突或Node版本不兼容的错误。

排查与解决：

  • 网络问题：这是最常见的问题，尤其在国内。解决方案是切换npm源到国内镜像。
    npm config set registry https://registry.npmmirror.com # 然后重新运行 npm install
  • Node版本问题：确保你的Node.js版本符合项目要求（查看package.json中的engines字段或项目README）。推荐使用nvm(Mac/Linux) 或nvm-windows来管理多个Node版本。
    # 使用nvm安装并切换至18.x或20.x nvm install 18 nvm use 18
  • 清理缓存：有时旧的缓存会导致问题。
    npm cache clean --force rm -rf node_modules package-lock.json npm install

6.2 应用启动后，发送消息无反应或报错

问题：页面能打开，但发送消息后长时间无响应，或前端控制台（浏览器按F12）出现500错误。

排查步骤：

  1. 检查后端日志：首先看启动应用的终端窗口，是否有红色的错误堆栈信息。这是最直接的线索。
  2. 验证API密钥与环境变量：90%的初始化问题源于此。确保.env文件中的密钥正确无误，并且没有多余的空格或换行。可以在chat.js中临时添加console.log(process.env.OPENAI_API_KEY)来验证是否成功读取。
  3. 检查API端点连通性：对于Ollama，在浏览器中访问http://127.0.0.1:11434/api/tags，应该能看到你已下载的模型列表。对于Groq或Azure，可以使用curl命令测试：
    # 测试OpenAI (将YOUR_KEY替换) curl https://api.openai.com/v1/models \ -H "Authorization: Bearer YOUR_KEY"
  4. 检查模型名称：确保代码中model参数与你的服务提供商支持的模型名称完全一致。例如，Azure OpenAI使用的是部署名称，而不是模型名称。

6.3 Ollama连接正常，但返回乱码或错误

问题：配置Ollama后，能收到响应，但内容是乱码或非预期的错误信息。

排查与解决：

  • 模型未加载：Ollama需要显式拉取（pull）模型。确保你运行了ollama pull llama3（以你要用的模型为准）。
  • 上下文长度超限：本地模型上下文窗口较小。如果对话历史很长，可能导致失败。尝试在API调用中减少messages数组的长度，或者使用Ollama的num_ctx参数在拉取模型时设置更大的上下文（如ollama pull llama3:8b --num_ctx 4096）。
  • Ollama API版本：确保baseURL指向的是.../v1。Ollama的OpenAI兼容端点在/v1路径下。

6.4 产物预览区不显示或显示格式错乱

问题：聊天有回复，但右侧的Artifacts窗口是空的，或者代码没有高亮。

排查与解决：

  • 检查AI输出格式：Artifacts的提取依赖于AI返回的Markdown代码块。如果AI的回复是纯文本而没有用 ```` 包裹，提取就会失败。你可以在系统提示词（如果项目支持配置）中明确要求AI“将代码放在Markdown代码块中”。
  • 前端解析逻辑：打开浏览器开发者工具，切换到“网络”标签页，查看对/api/chat的响应数据流（SSE）。观察AI返回的数据是否包含完整的代码块标记。如果包含但页面不显示，问题可能在前端的解析和渲染组件上。检查控制台是否有JavaScript错误。
  • 代码高亮库缺失：确认项目依赖中包含了如prismjs或highlight.js这类库，并且相关CSS样式文件已被正确引入。

6.5 如何同时支持多个模型并快速切换？

问题：按照上文修改代码后，每次切换模型都需要修改.env文件并重启服务，不够方便。

进阶解决方案：实现一个简单的模型选择器。

  1. 前端添加下拉菜单：在聊天界面添加一个<select>下拉框，选项包括 “GPT-4o”, “Ollama Llama3”, “Groq Llama3-70B” 等。
  2. 修改API请求：前端发送消息时，将选中的模型标识（如provider: 'groq', model: 'llama3-70b-8192'）作为一个额外的字段或请求头（如X-AI-Provider）发送到/api/chat。
  3. 后端动态路由：在chat.js中，不再依赖环境变量，而是从请求体或请求头中读取客户端传来的模型标识，然后动态创建对应的OpenAI客户端实例。

这样，你就可以在网页上点点鼠标，实时切换不同的AI后端，体验它们在同一任务下的表现差异，这非常有助于模型对比和评估。

http://www.jsqmd.com/news/817481/

相关文章：

  • 2026年5月深度解析义乌实木/原木/多层实木/兔宝宝/定制衣柜供应格局与领军者 - 2026年企业推荐榜
  • ARM有符号加载指令LDRSB/LDRSH详解与应用
  • AIGS：软件正在被AI重新定义一遍
  • 5月13日AI生态大变局：购物Agent、隐私革命与算力危机
  • 基于Nuxt 3与Shadcn/UI的现代化全栈仪表盘开发实践
  • Cerebras $488亿IPO：晶圆级芯片挑战英伟达AI算力霸权
  • 基于Robei与FPGA：构建Lora无线通讯的机器人控制核心
  • 独立开发者如何利用 Taotoken 以更低成本试验多种大模型
  • 【限时解锁】Midjourney私有风格库构建术：仅限Pro+账户可用的--style-ref隐式调用协议与本地化缓存加速秘技
  • 3分钟掌握Navicat密码找回：免费开源工具的终极使用指南
  • Harbor私有仓库从入门到精通：不只是安装，还有多节点登录配置与日常运维命令
  • 数据分析：Pandas与数据清洗实战
  • 英雄联盟智能战绩查询工具Seraphine：免费终极助手提升你的游戏决策能力
  • OpenViking：基于文件系统的AI智能体轻量级记忆与上下文管理方案
  • Hadoop 3.3.1实战：用Java API搞定HDFS文件读写，附Eclipse完整项目配置与常见报错解决
  • 手把手教你用STM32 GPIO安全控制MP2451负压电路（附保护电路设计）
  • 告别IP焦虑：用luci-app-aliddns打造永不离线的智能家居网络
  • STM32H7串口接收别再轮询了！用DMA+空闲中断实现零CPU占用的‘双缓冲’接收方案
  • 【Vue工程师AI协作者准入清单】：7类高危Prompt陷阱、4种Claude微调配置，团队已禁用3种低效用法
  • 采购全靠经验和人脉？这几个痛点你肯定中招了
  • 别再只画线了！HDMI PCB布局的差分信号、阻抗控制与等长布线实战避坑指南
  • 书匠策AI：一个让你“毕业不秃头“的论文神器，到底藏了什么黑科技？
  • 新手注册Taotoken后快速获取并测试首个API Key
  • PPT一键生成怎么做？2026年最全教程：工具对比 + 实操步骤一篇搞定
  • L-PCN加速器：优化点云网络计算冗余的创新方案
  • 从ESC社交胸牌看无线Mesh网络在物联网与开源硬件中的实践
  • Create 2026百度AI开发者大会：模型退居幕后，智能体集体上场
  • 告别盲调！用IDA Pro调试Android so库的保姆级避坑指南（附ARM指令速查）
  • 别再纠结了！Fluent计算精度选单精度还是双精度？一个案例告诉你答案
  • Navicat密码解密：当数据库连接密码从记忆中消失时的技术救赎