7 天，做出你的第一个 LLM 聊天应用

npm create vite@latest llm-chat -- --template react-ts
cd llm-chat
npm install
npm install express cors dotenv
npm install -D tsx @types/express @types/cors
mkdir server

DEEPSEEK_API_KEY=替换成你的密钥

# 让当前终端加载 .env.local，再执行请求
set -a
source .env.local
set +a

curl https://api.deepseek.com/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $DEEPSEEK_API_KEY" \
  -d '{
    "model": "deepseek-chat",
    "messages": [
      {"role": "system", "content": "你是一个简洁的编程助教。"},
      {"role": "user", "content": "用一句话解释什么是 token。"}
    ],
    "stream": false
  }'

ollama pull qwen2.5:3b
ollama run qwen2.5:3b "用一句话解释什么是 token"

# 查看本地 OpenAI 兼容接口是否可用
curl http://localhost:11434/api/chat \
  -d '{"model":"qwen2.5:3b","messages":[{"role":"user","content":"你好"}]}'

import express from "express";
import cors from "cors";
import dotenv from "dotenv";

dotenv.config({ path: ".env.local" });
const app = express();
app.use(cors());
app.use(express.json());

app.post("/api/chat", async (req, res) => {
  try {
    const upstream = await fetch(
      "https://api.deepseek.com/chat/completions",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.DEEPSEEK_API_KEY}`,
        },
        body: JSON.stringify({
          model: "deepseek-chat",
          messages: req.body.messages,
          stream: true,
        }),
      }
    );

    if (!upstream.ok || !upstream.body) {
      return res.status(upstream.status).send(await upstream.text());
    }

    res.setHeader("Content-Type", "text/event-stream");
    const reader = upstream.body.getReader();
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      res.write(Buffer.from(value));
    }
    res.end();
  } catch (error) {
    res.status(500).json({ error: "代理请求失败" });
  }
});

app.listen(3001, () => console.log("API: http://localhost:3001"));

async function streamReply(messages: Message[], onToken: (t: string) => void) {
  const response = await fetch("http://localhost:3001/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ messages }),
  });
  if (!response.ok || !response.body) throw new Error("请求失败");

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let buffer = "";

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
    const lines = buffer.split("\n");
    buffer = lines.pop() ?? "";

    for (const line of lines) {
      if (!line.startsWith("data: ")) continue;
      const data = line.slice(6);
      if (data === "[DONE]") return;
      const token = JSON.parse(data).choices[0]?.delta?.content;
      if (token) onToken(token);
    }
  }
}

import { useState, type FormEvent } from "react";

type Message = {
  role: "system" | "user" | "assistant";
  content: string;
};

async function streamReply(messages: Message[], onToken: (token: string) => void) {
  const response = await fetch("http://localhost:3001/api/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ messages }),
  });
  if (!response.ok || !response.body) throw new Error("请求失败");

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let buffer = "";
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });
    const lines = buffer.split("\n");
    buffer = lines.pop() ?? "";
    for (const line of lines) {
      if (!line.startsWith("data: ")) continue;
      const data = line.slice(6);
      if (data === "[DONE]") return;
      const token = JSON.parse(data).choices[0]?.delta?.content;
      if (token) onToken(token);
    }
  }
}

export default function App() {
  const [messages, setMessages] = useState<Message[]>([
    { role: "system", content: "你是简洁、准确的编程助教。" },
  ]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  async function send(event: FormEvent) {
    event.preventDefault();
    const text = input.trim();
    if (!text || loading) return;

    const userMessage: Message = { role: "user", content: text };
    const next: Message[] = [...messages, userMessage];
    setInput("");
    setError("");
    setLoading(true);
    setMessages([...next, { role: "assistant", content: "" }]);

    try {
      await streamReply(next, (token) => {
        setMessages((current) => current.map((message, index) =>
          index === current.length - 1
            ? { ...message, content: message.content + token }
            : message
        ));
      });
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "未知错误");
    } finally {
      setLoading(false);
    }
  }

  return (
    <main>
      {messages.filter((message) => message.role !== "system").map((message, index) => (
        <p key={index}><b>{message.role}:</b> {message.content}</p>
      ))}
      {error && <p role="alert">{error}</p>}
      <form onSubmit={send}>
        <input value={input} onChange={(event) => setInput(event.target.value)} disabled={loading} />
        <button disabled={loading || !input.trim()}>{loading ? "生成中…" : "发送"}</button>
      </form>
    </main>
  );
}

export const systemPrompt = `你是 TypeScript 编程助教。
任务：解释用户给出的代码问题，并给出可运行的最小修改。
约束：不猜测缺失信息；不确定时明确说明；不暴露密钥。
输出：先给结论，再给代码，最后列出 1 条验证命令。`;

const tools = [{
  type: "function",
  function: {
    name: "calculate",
    description: "计算两个数字的加减乘除",
    parameters: {
      type: "object",
      properties: {
        a: { type: "number" },
        b: { type: "number" },
        operation: {
          type: "string",
          enum: ["add", "subtract", "multiply", "divide"]
        }
      },
      required: ["a", "b", "operation"]
    }
  }
}];