用JS调个AI聊天机器人有多简单？我差点被自己蠢哭

2026-05-07 448 AI链物

说实话，我一直觉得前端调AI接口这事儿挺唬人的，网上看了一堆教程，一会儿说要装这个库，一会儿说要配那个环境，搞得跟要造火箭似的，结果前两天项目赶进度，硬着头皮试了一把，才发现……嗯,真香。

先说清楚，我这人技术底子一般，JS能写，但不是什么大神，你要是跟我差不多水平,那这篇文章应该挺对胃口的。

第一步，搞个API Key

别笑，这是最卡人的地方，我当初脑子一抽，跑去各种平台注册，结果发现好多都要绑信用卡，还要等审核，后来同事甩了一条链接过来——去一些大厂的开放平台注册个账号，新用户一般都有免费额度，我选的是硅基流动的那个API，因为它家送的钱多（这理由是不是很真实？）。

注册完拿到Key，记得存好，我第一个坑就踩在这儿——直接明文写代码里了,结果推Git的时候差点社死。

第二步，写个最简单的调用

说实话，真正写代码的时候反而没那么难，核心就一个fetch请求的事儿，我直接复制一段我当时写的demo给你们看，别嫌弃代码丑,能用就行：

async function chatWithAI(userMessage) {
  const response = await fetch('https://api.siliconflow.cn/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer 你的key放这里'
    },
    body: JSON.stringify({
      model: 'Qwen/Qwen2-7B-Instruct',
      messages: [
        {role: 'user', content: userMessage}
      ]
    })
  });
  const data = await response.json();
  return data.choices[0].message.content;
}

就这么几行，真的，我当时写完自己都愣了——就这？然后兴冲冲跑去控制台试了一下，打了个“你好”，等了大概两秒钟，对面回了一句“你好！有什么可以帮助你的吗？”

那一刻，我感觉自己像造了个赛博生命体（夸张了）。

第三步，加个UI让它能看

光在控制台里玩没啥意思，我决定做个聊天框，说实话，这部分反而比调接口更费时间——因为丑。

我写了个最简单的输入框加按钮，JS那边监听点击事件，把用户输入扔给上面那个函数，再把返回内容插到聊天记录里,大概长这样：

document.getElementById('sendBtn').addEventListener('click', async () => {
  const input = document.getElementById('userInput').value;
  const reply = await chatWithAI(input);
  document.getElementById('chatLog').innerHTML += `<p>AI说：${reply}</p>`;
});

样式？别问了，丑得我妈都不想看，但功能是真的跑起来了，我还特意测试了一轮——让它写诗、编段子、假装自己是客服,玩得不亦乐乎。