纯前端调用 deepseek v3 模型，流式返回，支持 md 文本、table、代码等

0背景 & 技术栈

大模型如火如荼，作为公司的边角料、一个不起眼的小渣渣前端切图仔，我们如何在不启动后端服务的情况下快速入门调用大模型？本文就是来扫盲的，文章末尾有源码可以自行查看。

我制作的 demo 比较简陋，也就不到半天时间，基于 react@18、tailwindcss@3、vite、react-markdown 等来搞的。代码简单，主要是熟悉流程。

1demo 功能介绍

• 流式调用 deepseek v3；
• 增加会话历史、主页面等布局；
• 支持 md 文本展示；
• 支持 table、ul、link 等特殊 md 展示；
• 支持 html 结构回显；
• 封装了包括 chat-input、用户问答、AI 回复、md 展示等组件；
• 优化了支持 html 的空白间隙问题；
• 代码的 copy 功能。

2实现步骤：注册 key 到跑起来

1. 注册 deepseek api key：前往 deepseek API 开放平台，充值至少十块钱；
2. 写入 api key：clone 代码后，将 .env 文件的 VITE_DEEPSEEK_KEY 替换成你自己的；
3. 项目启动：

npm i
npm run dev

测试问答：你可以在问答框输入以下问题，看支持的情况如何：

• 你是什么模型 —— 测试 md 纯文本的；
• 写一段 js 去重的代码 —— 测试代码块的；
• 帮我生成一个三行三列的表格，用于计算姓名和成绩 —— 测试表格的。

3核心代码：openai SDK 免后端直连

任何大模型的接口都兼容 openai 的规范，我们可以借助 openai SDK 来实现 deepseek 模型的请求。打开 dangerouslyAllowBrowser 属性，可以在浏览器中调用：

import OpenAI from "openai";

const initOpenAI = () => {
    openaiRef.current = new OpenAI({
        baseURL: "https://api.deepseek.com",
        apiKey: GlobalAPI.config?.VITE_DEEPSEEK_KEY,
        dangerouslyAllowBrowser: true,   // 浏览器中调用（仅 demo！）
    });
};

4核心代码：markdown-ai 渲染组件

采用 react-markdown 及配套实现了样式、md 文本、table、html 标签等支持，详情请看具体代码：

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import remarkGfm from "remark-gfm";
import rehypeHighlight from 'rehype-highlight'; // 代码高亮
import 'highlight.js/styles/github.css';

<ReactMarkdown
    remarkPlugins={[remarkGfm, remarkMath]}
    rehypePlugins={[rehypeRaw, rehypeHighlight, removeExtraWhitespace]}
    components={components as any}
>
    {markdownstr}
</ReactMarkdown>

5核心代码：代码 copy 组件

借助 react-markdown 自定义标签的方式，自定义了 <pre> 标签，借助 rehype-highlight + copy-to-clipboard 来实现代码的高亮及复制：

import PreWithCopy from "./copycode.tsx";

// 自定义渲染器
const components = {
    pre: PreWithCopy,
};

<ReactMarkdown
    remarkPlugins={[remarkGfm, remarkMath]}
    rehypePlugins={[rehypeRaw, rehypeHighlight, removeExtraWhitespace]}
    components={components as any}
>
    {markdownstr}
</ReactMarkdown>

6核心代码：html 渲染空白行处理

react-markdown 开启 rehypePlugins rehypeRaw 的时候，大多数情况由于模型返回的 \n 太多，页面会间距过大，尤其是表格等，我们需要单独做空白行处理：

// 消除空格，解决 html 渲染的问题
const removeExtraWhitespace = () => {
    return (tree: any) => {
        const removeWhitespace = (node: any) => {
            if (node.tagName === "pre") {
                return;                    // 代码块跳过，保留原样
            }
            if (node.type === "text") {
                node.value = node.value.replace(/\s+/g, " ");  // 多余空白合并为单空格
            }
            if (node.children) {
                node.children = node.children.filter((child: any) => {
                    if (child.type === "text") {
                        return child.value.trim() !== "";      // 去掉纯空白文本节点
                    }
                    removeWhitespace(child);
                    return true;
                });
            }
        };
        removeWhitespace(tree);
        return tree;
    };
};

7总结 & 术语表 & 附录

7.1 总结

以上就是 demo 版本的主要功能和技术实现细节，详情请查看代码（gitee 仓库地址见原文）。作者基于 react 写的，如果需要 vue 版本的，可以留言，抽时间做一套 vue 的。

术语表

附录 A：最小可运行骨架（纯前端调用 + 渲染）

// ========== 安装依赖 ==========
// npm i openai react-markdown remark-gfm remark-math rehype-raw rehype-highlight highlight.js -S
// 在 .env 里配置：VITE_DEEPSEEK_KEY=sk-xxxxxxxx

import OpenAI from "openai";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import rehypeHighlight from "rehype-highlight";
import 'highlight.js/styles/github.css';

// 1. 初始化客户端（纯前端，仅 demo）
const client = new OpenAI({
    baseURL: "https://api.deepseek.com",
    apiKey: import.meta.env.VITE_DEEPSEEK_KEY,
    dangerouslyAllowBrowser: true,
});

// 2. 流式调用
async function chat(question, onDelta) {
    const stream = await client.chat.completions.create({
        model: "deepseek-chat",
        messages: [{ role: "user", content: question }],
        stream: true,                       // 开启流式
    });
    for await (const chunk of stream) {
        const delta = chunk.choices[0]?.delta?.content || "";
        if (delta) onDelta(delta);          // 每段增量交给渲染
    }
}

// 3. 渲染：react-markdown 全家桶
// <ReactMarkdown
//   remarkPlugins={[remarkGfm, remarkMath]}
//   rehypePlugins={[rehypeRaw, rehypeHighlight]}
//   components={{ pre: PreWithCopy }}
// >{markdownstr}</ReactMarkdown>