Video 6- Building a ChatGPT Clone with Build Space; QA

来源:AI时代学习营 · AI Builder 课程 · 在学习书房阅读原版(含图)

学生门户登录

  • 首次登录流程:点击提供的链接进入学习平台
  • 输入与Maven账号关联的邮箱地址
  • 点击”重置密码”按钮(系统100%会发送邮件至垃圾邮件文件夹)
  • 从垃圾邮件中获取重置链接并设置新密码
  • 返回登录页面使用新密码登录
  • 平台功能说明:提供多种学习功能模块
  • 核心功能是API密钥管理(首次登录时显示为空列表)
  • 支持创建新项目和配置
  • 登录注意事项:使用Google服务时邮件可能被自动归类为垃圾邮件
  • 账户由教学团队预先配置
  • 必须使用分配的个人邮箱和密码登录

AI建造者平台

创建API键

  • 功能定位:提供统一API密钥来集成多个AI平台功能,避免重复注册不同服务账户
  • 创建方式:通过”Create Key”按钮生成新的API密钥
    • 管理特性:支持查看当前活跃密钥
    • 可生成多个密钥并管理其使用状态
    • 提供用量统计功能监控API调用情况

API的作用

  • 核心价值:作为AI代理的中枢接口,使开发者能够快速构建各类AI工具
    • 工作模式:通过调用现有API(如OpenAI)实现功能,无需重复开发基础能力
    • 支持多代理协同工作模式
    • 典型功能:在线搜索能力
    • 多风格响应生成
    • 对话历史编辑
    • 自动生成会话标题

例题:ChatGPT复制所需时间

  • 题目解析开发范围:仅复制UI界面功能,不包括底层模型训练
  • 难度评估:
  • 基础功能实现约30分钟
    • 完整功能复制需1个月关键组件:
  • 侧边栏模型选择器
  • 多代理响应系统
    • 会话历史管理系统易错点:低估自动标题生成等辅助功能的开发复杂度

模型选择

  • 交互设计:通过侧边栏实现模型快速切换
    • 功能特点:支持多种预训练模型并行调用
    • 不同模型可产生风格化响应
    • 开发者可灵活组合不同模型能力
  • 实现原理:通过统一API路由分发请求到不同模型端点

所需时间

  • 传统开发周期:在AI时代之前,一个团队可能需要一周时间完成的项目
  • AI辅助效率:借助AI工具,现在可以在五分钟内完成相同任务
  • 关键优势:整个开发过程不需要使用者具备专业开发知识

成为开发专家

  • 非专家开发:明确强调使用者”不需要成为开发方面的专家”
    • 学生配额:初始额度:100美元API调用额度
    • 用途说明:主要用于API调用和搜索引擎工具调用
    • 扩展建议:如需更多额度可联系管理员
    • 使用场景建议:简历展示项目:现有额度完全足够
    • 产品级开发:建议先与管理员沟通配额需求
  • 费用提醒:当部署产品供他人使用时,调用量会计入个人配额

API探索

  • 密钥获取方式:通过登录页面的”Reset password”功能发送恢复邮件获取API密钥
  • 密钥状态显示:界面会明确显示当前是否已分配平台API密钥
  • 密钥操作:提供创建新密钥(Create Key)和取消操作(Cancel)的按钮
  • 平台特性:通过单一API即可调用多种模型,无需分别访问Anthropic、DeepSeek等各平台获取独立API
  • 使用场景:适用于需要集成多模型API的产品开发场景

chat与GBT的区别

  • 产品定位差异:Chat产品:是面向终端用户的完整产品(如ChatGPT)
  • API服务:是面向开发者的编程接口,两者具有独立的用户管理系统
  • 账户体系:拥有Chat产品订阅账户不代表自动获得API访问权限
  • API使用需要单独申请和管理密钥
  • 模型支持:deepseek-chat:始终可用(DeepSeek Chat专用)
  • gpt-5:通过OpenAI兼容提供商可用
  • grok-fast:需要X_AI_API_KEY访问X.AI的Grok API
  • secondmind-agent-vles:多功能代理工具,需同时具备X_AT_APT_KEY和Google API密钥
  • gandai-2.5-pro:需要Google API密钥
  • 技术实现:所有模型都支持OpenAI兼容的补全API调用
  • 模型列表会根据账户API密钥动态更新
  • 产品开发建议:使用该API平台可以构建替代Chat产品的自定义解决方案
  • 实际效果需通过具体产品开发验证
  • 建议从克隆Chat产品GUI开始实践API集成

API的分析

  • 基本概念:API是计算机之间通信的方式,提供OpenAI兼容的接口标准
    • 认证机制:密钥必要性:必须使用API Key进行身份验证,否则平台会拒绝服务
    • 密钥管理:建议在设置中第一时间创建密钥,密钥不会永久显示,需要及时记录
    • 使用方式:密钥创建后会弹出显示,可以复制使用,只要不点击登出就会保留
    • 接口功能:/v1/chat/completions: 聊天补全功能
    • /v1/embeddings:文本嵌入功能
    • /v1/audio/transcriptions: 音频转录功能
    • /v1/usage/summary: 使用情况查询
    • /v1/models:模型管理
    • /v1/deployments: 部署管理

模型上下文粒子

  • 核心功能:知识注入:MCP(Model Context Particle)是帮助AI理解构建空间知识的工具
  • 应用场景:适用于Cursor、Cloud Code或CodeX等开发工具
  • 工作原理:通过自然语言查询,AI就能知道如何构建项目
  • 配置要点:令牌设置:AI Builder Token必须填入有效的API Key才能正常工作
  • 认证机制:该令牌是平台认证的关键凭证
  • 安装方式:提供现成的命令行代码,可直接复制到Cursor等工具中使用
  • 技术背景:开放协议:MCP基于开放协议,被广泛用于为AI添加工具调用能力
  • 平台集成:在本场景中,MCP集成了构建平台的功能

应用案例

例题:GBT克隆示例

  • MCP服务器配置方法:在Cursor设置中找到MCP选项卡
  • 点击”New MCP Server”按钮
  • 将配置JSON复制粘贴到配置文件中
  • 示例配置包含:
  • 服务器名称:“ai-builders-coach”
  • 核心参数:“ape”
  • 环境变量:AI_BUILDER_TOKEN
    • 配置注意事项:配置文件可能看起来很复杂,但只需复制模板即可
    • 系统会要求确认配置,因为MCP JSON通常位于用户文件夹
    • 配置完成后需要确保”AI builder’s coach”选项已启用
    • 使用优势:无需频繁复制粘贴提示词
    • 安装后可直接使用AI功能
    • 简化了开发环境设置流程
    • 详细配置参数:“composer”:“ape” - 指定使用的模型
    • “args”:[“-y”] - 包含-y标志的命令参数
    • “default”:“terse-ncs-coach-server” - 默认服务器设置
    • “env”:{“AI_BUILDER_TOKEN”:“sk_3c7c10…”} - 必要的认证令牌
    • 配置后操作:需要重启Cursor或重新加载MCP服务器使更改生效
    • 配置通常保存在/.cursor/mcp.json或类似路径
    • 平台特定设置:不同操作系统可能需要调整路径格式
    • 可通过命令行直接添加配置:claude ncp add-json “ai-builders-coach”
    • 提示词重要性:与AI沟通时需要提供详细清晰的提示
    • 明确的沟通是AI高效产出的前提
    • 确保包含所有必要的上下文和需求说明
    • 良好的提示词可以显著提高代码生成质量

语音识别工具的使用

语音识别构建ChatGPT界面

  • 工具开发:已自行开发语音识别工具,通过点击”开始”按钮即可启动口述功能
  • 界面设计:采用两栏式布局,左栏显示对话记录,右栏为可输入内容的聊天界面
  • 技术选型:建议使用Next.js框架开发,但也可选择FastAPI等其他框架,具体取决于开发者偏好

  • API集成:系统能自动调用AI构建API,无需手动配置
  • 模型选择:可使用GPT或其他AI模型,推荐使用Grok模型以获得更快响应
  • 开发效率:语音识别能立即识别口述内容并生成相应代码模板

语音识别自动生成模板

  • 模板生成:系统会根据模糊的语音描述自动创建项目脚手架
  • 自动配置:工具能自动处理API调用等基础配置,无需开发者干预
  • 开发流程:语音描述需求→系统生成模板→自动配置基础环境→准备开发

语音识别启动服务器

  • 快捷启动:可通过语音指令”启动服务器”自动完成服务部署
  • 访问方式:系统会生成本地访问URL(如http://localhost:3000),可直接点击跳转
  • 界面布局:成功启动后显示标准两栏式聊天界面,左侧为对话列表,右侧为聊天区域
  • 状态验证:系统会自动检查服务器是否成功启动
  • 错误处理:若启动失败会显示相应错误信息,如”Server may still be starting”

语音识别配置AI builder token

  • 常见错误:未配置AI builder token时会提示”AI builder token is not config”
  • 错误表现:发送消息会返回错误而非正常响应
  • 配置位置:需要在MCP设置中添加AI builder token
  • 配置内容:包括API密钥等认证信息,格式为JSON
    • 配置流程:复制配置JSON
    • 添加到项目设置文件(如package.json)
    • 重启服务器使配置生效
  • 注意事项:直接复制粘贴token存在安全风险,后续会介绍更安全的配置方式
  • 调试技巧:当遇到不明错误时,可尝试重启服务器解决临时性问题

快速演示结束

错误排查与解决

  • 错误类型识别:系统返回”Method Not Allowed”错误,表明请求方法不正确或API端点有误
  • 环境变量配置:需要正确设置AI_BUILDER_TOKEN环境变量,若修改后需重启开发服务器使变更生效
  • 模型备用机制:应用默认使用grok-4-fast模型,当不可用时会自动尝试其他模型如deeeseck、seconawind-agent-y、genii-2.5-pre等

API端点更新

  • URL重定向问题:旧版API端点(https://www.ai-builders.com/resources/students- backend/v1/chat/completions)已失效,导致405错误
  • 新版端点配置:正确端点应为https://space.ai- builders.com/backend/v1/chat/completions
  • 请求头设置:需要包含正确的Content-Type(application/json)和Authorization(Bearer token)头部
  • 调试技巧:通过详细日志可以查看请求/响应详情,帮助定位问题

功能验证

  • 成功响应特征:系统返回”我在这里帮你进行信息花园研究”表明API连接正常
  • 模型切换验证:演示中成功从默认模型切换到grok-4-fast模型
  • 交互连续性:无需重启服务即可继续对话,系统能保持上下文连贯性

功能丰富

多行输入

  • 实现方式:将单行文本框替换为textarea组件,支持Shift+Enter换行
    • 交互优化:按Enter键发送消息
    • 按Shift+Enter添加新行
    • 自动调整高度(最大200px),发送后重置高度
  • 用户体验:解决了之前只能输入单行文本的限制,使对话输入更自然

编辑功能

  • 位置设计:位于用户消息右侧(蓝色气泡旁)
  • 默认50%透明度,悬停时变为完全不透明
  • 使用流程:查看任意用户消息右侧的小铅笔图标
  • 悬停时图标更明显
  • 点击进入编辑模式
  • 编辑后点击”保存并重新生成”
  • 限制:仅适用于用户消息,不显示在AI回复上

选择模型

  • 实现步骤:为对话添加模型字段
  • 创建模型选择UI
  • 更新API调用使用所选模型
  • 支持模型:grok-4-fast(默认)
  • secondmind-agent-v1(多工具代理)
  • 存储方式:模型选择按对话保存

使用不同的模型

  • grok-4-fast特点:快速响应
  • 成本效益高
  • 默认模型
  • secondmind-agent-v1特点:多工具代理
  • 支持网页搜索
  • 适合复杂任务
  • 切换体验:实时切换无需刷新页面,对话历史保持不变

自然对话系统消息

  • 实现方式:自动在每次API调用中添加”Not Chat”系统消息
    • 优势:提高回复质量
    • 仅添加一次(检查现有系统消息)
    • 包含在标题生成提示中
  • 效果:使AI回复更自然,更像对话而非机械应答

编辑按钮的位置问题

  • 常见问题:用户可能找不到编辑按钮
    • 解决方案:增加按钮可见性
    • 添加悬停效果
    • 在文档中明确说明位置
  • 设计考量:平衡界面简洁性和功能可发现性

代码调试与部署

Docker部署流程

  • 部署准备:需要创建Dockerfile并修改配置,确保PORT环境变量正确设置
  • 自动引导:Cursor可以引导完成整个部署过程,若缺少信息会主动询问
  • 测试建议:部署完成后建议测试Docker容器,确保应用正常运行

企业AI发展趋势

  • 基础设施投资:Anthropic宣布50亿美元数据中心扩建计划,满足下一代AI算力需求
  • 模型竞争:中国AI模型在关键基准测试中表现优异,挑战行业领导者地位
  • 企业应用焦点:AI代理系统成为企业应用重点,帮助克服数据孤岛问题

MCP技术优势

  • 上下文管理:传统方式:需手动收集API规范、token等信息并构造提示词
  • MCP方式:AI自动管理上下文,按需调用所需信息
  • 适用场景:特别适用于消费第三方API服务(如AI Builder API)的场景
  • 技术无关性:不特定支持Next.js或FastAPI,主要解决后端服务消费问题

部署状态检查

  • 自动部署机制:推送新commit到GitHub会自动触发部署
    • 状态验证:访问GitHub仓库的Deployments页面
    • 红色叉号表示失败,绿色对勾表示成功
  • 错误排查:当前阶段无法直接获取详细错误信息,需通过其他方式诊断

实际部署演示

  • 仓库创建:通过Cursor创建名为”duckchat”的GitHub仓库
  • 完整流程:包含Docker构建、测试、容器运行等完整步骤
  • 结果验证:成功部署后会生成可访问的URL,但初始可能显示404直到部署完成

常⻅问题解答

  • MCP必要性:不使用MCP:需手动管理所有API交互上下文
  • 使用MCP:AI自动管理所需上下文信息
  • 部署等待:首次部署需要5-10分钟完成资源调配
  • 命令行工具:安装GitHub CLI可让Cursor直接创建和管理仓库

部署平台

  • 平台特性:部署在Cursor平台而非GitHub
  • 提供一站式部署解决方案
  • 底层使用Koyabed服务器(类似Cloudflare的服务提供商)

实验性部署功能

  • 核心价值:允许用户展示个人项目
  • 提供AI辅助部署准备
  • 创建开源仓库可添加到简历中
  • 操作流程:一键部署到Space平台
  • 支持分享工作成果
  • 限制说明:免费托管期限:12个月
  • 服务上限:每个用户最多10个服务
  • 需要管理服务资源使用

部署管理

  • 查看方式:在”部署”页面可见两个位置显示
  • 显示首次部署时间、更新时间、到期时间
  • 技术优势:30分钟即可完成生产级网站部署
  • 相比传统部署流程大幅简化
  • 平台承担所有服务器费用
  • 实际应用:可公开访问的网站
  • 可放入简历或分享给朋友
  • 类似90%AI初创公司的技术架构(调用大语言模型+定制UI)

与传统部署对比

  • 传统方式:需要配置服务器环境
  • 手动设置域名和SSL证书
  • 持续维护服务器安全
  • 承担服务器费用
  • 平台优势:自动化部署流程
  • 免费托管服务
  • 内置监控和管理工具
  • 无需基础设施维护

传统部署方式

  • 操作步骤:租用VPS(虚拟专用服务器)
  • 上传代码到Linux虚拟机
  • 手动配置反向代理和负载均衡
  • 设置监控系统
  • 主要缺点:需要大量底层手动操作
  • 调试耗时且容易出错
  • 需要专业技术背景才能完成
  • 适用场景:适合有工程背景的专业人员

搭建项目原因

  • 核心优势:统一API集成多个平台模型
  • 避免重复注册不同服务账号
  • 简化开发流程,提高效率
  • 技术实现:通过单一API密钥调用所有功能
  • 自动处理底层配置
  • 支持快速部署测试
  • 用户价值:非技术人员也能轻松分享项目
  • 节省90%以上的配置时间
  • 避免多平台切换的复杂性

  • 服务限制:免费托管期限:首年免费
  • 最大服务数:10个/用户
  • 服务管理:需联系管理员调整
  • 关键创新:实验性部署功能
  • 自动检查仓库准备状态
  • AI辅助解决部署问题

使用便捷性

  • 开发环境搭建:使用Next.js 14作为前端框架
  • 包含React 19.2.0等核心依赖
  • 配置了TypeScript 4.4和Tailwind CSS 4.0等工具链
  • Docker集成:通过docker build命令构建镜像
  • 测试容器运行状态:docker run -d -p 3001:3000
  • 验证应用可访问性:curl -5 http://localhost:3000
  • 自动化流程:配置了git自动提交命令
  • 包含代码质量检查工具ESLint
  • 部署脚本支持开发和生产环境构建

  • 本地开发优势:快速启动:Ready in 32s的快速开发服务器
  • 实时刷新:支持配置热更新(fast refresh)
  • 简化流程:自动处理大量底层配置
  • 部署特性:实验性功能:提供展示创新项目的平台
  • AI辅助:Cursor工具自动生成约20,000行基础代码
  • 免费托管:包含12个月的免费部署期
  • 服务限制:资源限制:最多10个并行服务
  • 访问控制:本地开发默认为localhost访问
  • 团队协作:需要额外配置才能实现项目共享

平台行数

  • 开发规模:该平台包含约20,000行代码,大幅降低了用户开发门槛
    • 核心优势:免模板开发:用户无需从头编写样板代码
    • 成本节约:避免重复开发基础功能,节省大量开发成本
    • 典型应用:AI创业公司:许多初创企业仅需基于此平台开发简单的Web界面
    • 聊天UI:内置完善的聊天界面组件,可直接用于AI产品开发
    • 技术特点:快速部署:支持5-10分钟内完成服务部署
    • 免费托管:提供12个月的免费托管服务
    • 服务限制:每个用户最多可创建10个服务实例

初创公司典型产品模型

  • 核心优势:相比大模型,创业公司的优势在于垂直领域应用场景的深度定制
    • 实现路径:领域专家可将专业知识注入模型(如宠物训练咨询领域)
    • 开发特定用户界面满足专业场景需求
  • 产品定位:不需要做成ChatGPT克隆,关键在于发挥创意解决特定用户问题
  • 技术支撑:提供基础模型作为开发骨架,简化模型调用和部署流程
  • 应用示例:同样技术框架可应用于游戏开发等不同领域

自定义域名

  • 配置原则:支持使用已购买的独立域名
  • 需通过域名服务商(如GoDaddy、Namecheap)进行配置
  • 技术限制:MCP服务不提供自动部署功能
  • 操作建议:可通过咨询Cursor获取具体配置指南

调试过程注意要点

  • 核心挑战:确保AI输出符合预期效果
    • 调试要素:需要建立系统化的评估指标(如任务成功率)
    • 应分析API返回的完整日志和响应数据
    • 重点关注关键推理决策链和错误类型
  • 优化方法:通过迭代式prompt工程调整输出效果

费用问题

  • 成本特征:演示项目30天总费用约3美元
  • 单次成本:典型操作消耗不足10美分
  • 成本优势:验证性开发具有显著的经济性

成功率的运用

  • 评估体系:需要设计多维度评估指标(含成功率等核心指标)
  • 应构建标准化的测试数据集
  • 包含任务完成度等关键评估维度
  • 实施建议:通过专项评估项目系统化验证模型效果
  • 进阶内容:完整评估方案将在后续课程中详细演示

账户API键管理

API密钥使用规范

  • 密钥唯一性:每个API密钥在创建后仅显示一次,若丢失需重新创建
  • 密钥关联性:若密钥已被用于项目,删除或禁用该密钥将导致依赖项目无法正常工作
  • 安全实践:建议立即保存新创建的API密钥,系统不会保留密钥副本

多密钥管理策略

  • 密钥轮换:标准安全实践要求定期更换API密钥
  • 项目隔离:不同项目建议使用独立密钥,便于权限管理和故障隔离
  • 密钥禁用:发现可疑活动时应立即禁用相关密钥而非删除,避免影响关联服务

密钥部署要求

  • 必要参数:GitHub仓库URL(需公开仓库)
  • 唯一服务名称(3-32字符,仅含小写字母、数字和连字符)
  • 指定部署分支(如main或master)
  • 环境配置:需包含完整的package.json和Dockerfile
    • 限制说明:免费托管期限:12个月
    • 最大服务数:10个/用户
    • 服务管理:默认配置不可修改运行时环境变量

多模型协作方案

  • 模型选择:首选Cursor Composer(速度优势,性能优于Claude 4.5 Sonnet)
  • 复杂场景使用GPT-5.1 Kodak(支持16小时持续工作)
  • 协作机制:不同模型擅长不同任务(如搜索功能偏好差异)
  • 可构建多智能体系统整合各模型优势
  • 演进能力:通过指标跟踪可实现模型自我优化

知识小结知识点 核心内容 关键功能/工具 难度系数AI构建平 提供60页阅读材料和实践平 AI Builder Space、学生 ⭐⭐台介绍 台,帮助构建真实项目 门户API密钥 单一API密钥集成多平台功 API Key生成系统 ⭐⭐⭐管理 能,避免重复注册MCP协议 通过配置实现AI自动调用工 Cursor IDE集成、模型上 ⭐⭐⭐⭐应用 具,简化开发流程 下文管理聊天机器 五分钟快速构建ChatGPT风 Next.js框架、多模型支 ⭐⭐⭐人克隆 格界面 持在线搜索 通过代理模型实现实时网络 Second Mind V1代理、 ⭐⭐⭐⭐功能 信息检索 Tavily搜索引擎部署流程 自动化GitHub部署到Koyak Docker容器化、持续集 ⭐⭐⭐⭐平台 成多代理系 不同模型协同处理复杂任务 Grok-4-fast与Gemini组 ⭐⭐⭐⭐统 合调试技巧 错误信息可视化与交互式问 详细日志输出 ⭐⭐⭐⭐题诊断配额管理 100美元初始信用额度分配 API调用计费系统 ⭐⭐模型选择 根据任务特性匹配最佳模型 Composer1 vs ⭐⭐⭐策略 Claude4.5