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

RaNER模型WebUI高级功能:自定义实体类型识别

RaNER模型WebUI高级功能:自定义实体类型识别 1. 引言:AI 智能实体侦测服务的演进与挑战 随着自然语言处理(NLP)技术的快速发展,命名实体识别(Named Entity Recognition, NER)已成为信息抽取、知识图谱构建和智能搜索等应用的核心支撑技术。尤其在中文语境下,由于缺乏明显的词边界、实体形态多样,传统规则方法难以满足高精度识别需求。 基于此背景,达摩院推出的 RaNER(Robust Named Entity Recognition)模型应运而生。该模型通过引入对抗训练机制,在噪声数据中仍能保持稳定性能,显著提升了中文实体识别的鲁棒性。然而,标准的人名(PER)、地名(LOC)、机构名(ORG)三类识别已无法满足日益复杂的业务场景——例如金融领域需识别“股票代码”、“公司简称”,医疗文本中要提取“疾病名称”、“药品剂量”。 为此,本项目在 RaNER 基础上深度集成 Cyberpunk

前端请求后端返回404/405/500状态码:完整排查与解决指南

前端请求后端接口返回 404 / 405 / 500 是开发中最常见的三大“拦路虎”。以下是2026年实战中最完整的排查与解决指南,按状态码分类,结合真实项目经验(axios/fetch + Spring/Node.js/Go 等常见后端)整理成分层排查流程。 通用排查前置步骤(适用于所有状态码,先做这几步能排除80%问题) 1. 浏览器 Network 面板第一眼看什么 * 请求完整的 URL(含域名、路径、query params) * 请求方法(GET/POST/PUT/DELETE/…) * 请求头(尤其是 Content-Type、Authorization、Origin) * 请求体(Payload / Form Data)是否正确序列化 * 响应头中是否有 X-Error-Code、X-Message 等自定义错误信息

基于Leaflet和天地图的免费运动场所WebGIS可视化-以长沙市为例

基于Leaflet和天地图的免费运动场所WebGIS可视化-以长沙市为例

目录 前言 一、免费运动场所数据整理 1、本地宝数据简介 2、Java后台数据解析 二、Leaflet前端地图展示 1、基础数据准备 2、具体位置及属性标记 三、成果展示 1、空间位置分布 2、东风路立交桥运动公园 3、芙蓉区花侯路浏阳河大桥下方 4、梅岭国际小区 5、湖南大学附属中学对面 6、湘府路大桥西 7、静园山庄 四、总结 前言         在当今快节奏的现代生活中,人们对于健康生活方式的追求愈发强烈,运动健身成为众多市民日常生活的重要组成部分。长沙市作为湖南省的省会城市,拥有众多的运动场所,从专业的体育场馆到社区内的小型健身场地,种类丰富。然而,对于广大市民而言,如何快速、便捷地找到身边的免费运动场所,以及了解这些场所的相关信息,如位置、设施、开放时间等,一直是一个难题。WebGIS(

【前端高频面试题】 - TypeScript 篇

【前端高频面试题】 - TypeScript 篇 1. 请解释 TypeScript 是什么?它与 JavaScript 的核心区别是什么? 面试回答需突出 TS 的核心价值(类型安全)和与 JS 的关键差异,结构清晰: * TypeScript 定义:TS 是 JavaScript 的超集(Superset),在 JS 语法基础上增加了静态类型系统,最终会编译为纯 JS 运行(支持所有 JS 环境),核心目标是提升代码可维护性、减少运行时错误。 * 与 JavaScript 的核心区别(分点对比): 1. 类型系统:TS 有静态类型(编译阶段检查类型,变量声明时需指定/推断类型);JS 是动态类型(