手把手教你免费获取豆包 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

前端文件上传方案:别再只用input type=file了

前端文件上传方案:别再只用input type=file了

前端文件上传方案:别再只用input type=file了 毒舌时刻 这代码写得跟网红滤镜似的——仅供参考。 各位前端同行,咱们今天聊聊前端文件上传。别告诉我你还在用原生的input上传大文件,那感觉就像在用小水管灌满游泳池——慢得让人绝望。 为什么你需要文件上传方案 最近看到一个项目,上传100MB的文件直接卡死浏览器,没有任何进度提示,我差点当场去世。我就想问:你是在做上传还是在做浏览器杀手? 反面教材 <!-- 反面教材:原生文件上传 --> <input type="file" onchange="uploadFile(this.files[0])" /> <script> function uploadFile(file) { const formData = new FormData(

微信 H5 缓存控制:后端重定向 & 前端强制刷新

在 Web 开发中,缓存是一把双刃剑。对于静态资源,它能极大提升加载速度;但对于业务逻辑频繁变动的 H5 页面(如支付、订单页),缓存往往会导致用户看到过期的数据或界面。最近在维护一个 uni-app 项目时,遇到了一段关于 H5 缓存控制的逻辑,引发了我对于“后端重定向加时间戳”和“前端 JS 加时间戳”这两种方案的思考。虽然两者的最终目的一致,但在 Hash 模式下,它们的实现原理和效果有着本质的区别。 一、 问题背景 在应用启动的生命周期中,通常会有这样一段逻辑:当用户访问特定的关键页面(如支付、订单页)时,如果当前 URL 中缺少时间戳参数,前端会自动解析 URL,追加当前时间戳,并强制页面刷新。 这就引出了一个问题:为什么不直接在后端重定向时加时间戳?这两种方式有什么区别? 二、 核心区别:

前端国际化实现:别再只支持中文了

前端国际化实现:别再只支持中文了

前端国际化实现:别再只支持中文了 毒舌时刻 这代码写得跟网红滤镜似的——仅供参考。 各位前端同行,咱们今天聊聊前端国际化。别告诉我你的应用只支持中文,那感觉就像只卖一种口味的冰淇淋——单调又无趣。 为什么你需要国际化 最近看到一个项目,所有文本都硬编码在代码里,要支持英文时傻眼了,我差点当场去世。我就想问:你是在开发应用还是在开发中文专用软件? 反面教材 // 反面教材:硬编码文本 function LoginForm() { return ( <form> <h1>登录</h1> <input placeholder="请输入邮箱" /> <input placeholder="请输入密码" type="password"

这才是 AI 编程的正确打开方式,VSCode + Claude Code 让写代码快到飞起!

点击上方卡片关注我 设置星标 学习更多项目 随着 AI 辅助编程工具的兴起,开发体验正被彻底改变,Claude 作为一款强大的大语言模型,不仅能够理解上下文,还能给出贴合需求的代码和优化建议。 把 Claude 无缝接入到 VSCode 这样主流的编辑器中,就等于为开发过程装上了“智能外挂”。本篇文章将带你快速完成 VSCode 与 Claude Code 的配置,让你的开发效率实现质的飞跃。 准备工作 1、安装VSCode 在开始配置之前,需要先把基本的环境准备好。首先要安装好 VSCode(最新版),建议提前更新到最新版本,以避免兼容性问题。 VSCode下载地址:https://code.visualstudio.com/,点击链接下载安装即可。 2、Claude Code账号 准备好一个Claude code的账号,并获取对应的 API Key,这是