手把手教你免费获取豆包 AI API Key 并接入前端项目

文章目录

手把手教你免费获取豆包 AI API Key 并接入前端项目(超详细图文版)

大家好,最近在做 Vue 前端项目时,需要做一个在线智能客服功能,直接接入了字节的豆包 AI,体验非常流畅。很多同学问我豆包 AI 的 API Key 到底怎么拿,今天就出一篇保姆级教程,从零到一教会你,全程免费、可直接用于项目开发。


一、先说清楚:豆包 AI API 在哪里申请?

豆包 AI 的大模型能力,统一在 火山引擎·火山方舟(ARK) 平台开放。
✅ 个人可申请
✅ 支持实名认证
✅ 新用户有免费调用额度
✅ 支持前端直接调用(配合代理更安全)


二、准备工作(2 分钟完成)

  1. 打开火山引擎官网:https://www.volcengine.com/
  2. 手机号注册并登录
  3. 进入右上角「账号管理」→ 完成实名认证(个人即可,秒通过)
不实名认证无法使用 API 能力。

三、正式获取 API Key(5 分钟搞定)

步骤 1:进入火山方舟平台

登录后,顶部搜索框搜:火山方舟
或直接访问:https://console.volcengine.com/ark

在这里插入图片描述

步骤 2:创建 API Key(最重要)

  1. 左侧菜单找到:API 密钥管理
  2. 点击 创建 API Key
  3. 起个名字,例如:my-doubao-customer-service

创建成功后,立即复制保存 API Key
这个 key 只会显示一次!

在这里插入图片描述

格式示例:

ek-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 

步骤 3:开通豆包 AI 模型

  1. 进入 模型管理中心
  2. 找到 豆包系列
  3. 推荐开通:
    • Doubao-lite-128k(轻量、免费额度足、适合客服)
    • Doubao-pro-256k(效果更好)

点击开通即可,无需复杂配置。

在这里插入图片描述

步骤 4:创建「推理接入点」获取 Endpoint ID

这是很多人卡壳的地方,我讲清楚:
API Key 是身份凭证
Endpoint ID 是你要调用的模型地址

  1. 点击 创建推理接入点
  2. 填写名称:doubao-chat
  3. 选择刚才开通的豆包模型
  4. 地区选择:cn-beijing

创建 → 等待状态变为 运行中

在这里插入图片描述

左侧进入:在线推理

在这里插入图片描述

创建完成后,复制:

ep-xxxxxxxxxxxxxxx 

这就是你的 Endpoint ID。


四、拿到这两个东西就成功了

你最终会获得:

  1. API Key
  2. Endpoint ID

把它们填进前端代码就能直接调用豆包 AI!


五、前端接入代码示例(Vue3 可直接用)

// 豆包 AI 接口请求constreplyFromDoubaoAI=async(userText)=>{try{const res =await axios.post('https://ark.cn-beijing.volces.com/api/v3/chat/completions',{model:"你的EndpointID",messages:[{role:"user",content: userText }]},{headers:{"Content-Type":"application/json","Authorization":"Bearer 你的APIKey"}})return res.data.choices[0].message.content }catch(err){return'AI 服务暂时不可用'}}

六、常见问题(必看)

1. 调用报错 401

API Key 错误、未复制全、未开通模型。

2. 报错 404 / Model not found

Endpoint ID 不对,或模型未运行。

3. 免费额度能用多久?

个人新用户一般足够开发与小型项目使用

4. 可以直接前端调用吗?

学习、演示可以;
正式上线建议 通过后端中转,避免 API Key 泄露。


七、总结

今天这篇文章带你完成了:
✅ 了解豆包 AI API 申请平台
✅ 5 分钟获取 API Key
✅ 开通豆包模型
✅ 创建推理接入点
✅ 获取 Endpoint ID
✅ 前端接入代码示例

整个流程非常简单,只要跟着做,10 分钟内一定能跑通!


Read more

【避坑指南】部署 Open WebUI 报错:ModuleNotFoundError: No module named ‘pkg_resources‘ 彻底解决方法

【避坑指南】部署 Open WebUI 报错:ModuleNotFoundError: No module named ‘pkg_resources‘ 彻底解决方法

目录 【避坑指南】部署 Open WebUI 报错:ModuleNotFoundError: No module named 'pkg_resources' 彻底解决方法 前言 问题描述 环境背景 原因分析 解决方案 第一步:补齐基础依赖 第二步:彻底解决(推荐) 第三步:验证修复 进阶:针对 Open WebUI 的额外提示 总结 【避坑指南】部署 Open WebUI 报错:ModuleNotFoundError: No module named 'pkg_resources' 彻底解决方法 前言 最近在本地环境(Windows

【前端Vue】如何快速直观地查看引入的前端依赖?名称版本、仓库地址、开源协议、作者、依赖介绍、关系树...(Node Modules Inspector)

【前端Vue】如何快速直观地查看引入的前端依赖?名称版本、仓库地址、开源协议、作者、依赖介绍、关系树...(Node Modules Inspector)

想要快速直观地查看前端引入依赖的各项信息,传统方式是通过命令行(如 npm ls、pnpm why)查看,信息显示单一且碎片化,没有足够的信息和美观的页面,操作繁琐,而通过Vue 团队成员 antfu 带来的Node Modules Inspector可以实现近乎完美的依赖信息展示效果,只需要简单一条命令就可以查看丰富的依赖相关信息。该工具无需安装,直接在命令行运行即可,使用npx启动: # 适用于 npm 项目 npx node-modules-inspector # 适用于 pnpm 项目(推荐) pnpx node-modules-inspector 执行后,浏览器会自动打开本地可视化界面,默认端口为 3000。如果端口被占用,工具会提示可用端口。 页面左上角有操作栏,可以切换依赖显示的效果 树形视图 以下是依赖的树形结构展示效果 树形结构可以看到父子组件之间的引用依赖关系 网格视图 上方标签栏可以进行分类规则切换,分别为深度/层级、模块类型、依赖环境(开发/

正点原子lwIP实战解析——基于CGI与SSI的嵌入式WebServer开发

1. 嵌入式WebServer:让开发板变身迷你网站服务器 大家好,我是老张,在嵌入式这行摸爬滚打十几年了,从51单片机到现在的各种ARM核,项目做了不少。今天想和大家聊聊一个特别有意思、也特别实用的技术:用你手边的正点原子开发板,搭建一个属于自己的嵌入式Web服务器。听起来是不是有点酷?你可能会想,开发板不就是跑跑控制逻辑、读读传感器吗?怎么还能当服务器?没错,这就是lwIP协议栈和HTTP协议结合带来的魔力。 简单来说,嵌入式WebServer就是在你的STM32这类资源有限的微控制器上,运行一个轻量级的网络服务程序。它能够理解来自电脑或手机浏览器的HTTP请求,并返回一个网页。通过这个网页,你就能远程监控开发板的状态,比如实时查看温湿度传感器的读数,或者直接点击网页上的按钮来控制板子上的LED灯开关、蜂鸣器鸣叫。这就像是给你的硬件设备开了一个“管理后台”,而且这个后台是跨平台的,任何有浏览器的设备都能访问。 这个功能的应用场景非常广泛。比如说,你可以做一个智能家居的控制器,通过网页配置Wi-Fi参数、查看室内环境数据;或者做一个工业数据采集终端,现场人员用手机扫个码就能看到

跨平台文件传输:WebDAV + Rclone

在集成流水线时,我曾遇到需要跨平台传输文件的场景(服务器需要与其他平台进行文件交互)。虽然 OpenSSH(scp/sftp)是最简便的方案,但公司出于安全策略,禁止机器间通过 OpenSSH 进行文件传输。因此我尝试了 NFS/SMB、临时 HTTP 共享等多种方式,但均因安全策略限制或配置复杂未能落地。         最终我采用了 WebDAV + rclone 的组合方案实现跨平台文件传输: * 使用 WebDAV 共享目标机器的目录; * 通过 rclone 对共享目录进行稳定的读写操作。         该方案适用于内部工具场景,非部署生产环境。实际使用中,我以测试机/工作机(macOS/Windows)作为 WebDAV 服务端,在另一台 macOS 服务器上通过 rclone 对测试机进行文件的上传、下载与管理,实现了稳定、轻量、符合公司安全规范的跨平台文件互通。 实现步骤 Apache