爆肝原创DeepSeek-V4+React19+Zustand5+Arco+Markdown智能AI聊天模板

2026年7月，一款基于React 19.2 + DeepSeek V4 Flash + Arco Mobile + OpenAI的智能AI聊天对话模板正式发布。该模板深度对接DeepSeek V4大模型，支持暗黑与亮色主题切换、深度思考模式、代码高亮与复制下载、LaTeX数学公式渲染、Mermaid图表渲染、本地会话存储等功能。虽然是同类项目中的探索者，但在整合度与完成度上进行了充分打磨，以下为实际效果展示。

react19-deepseek-ai智能对话系统深度对接DeepSeek V4大模型，支持暗黑与亮色主题、深度思考、代码高亮与复制下载、LaTeX数学公式渲染、Mermaid图表渲染、本地会话存储等核心功能。

项目技术栈

• 编辑器：VScode
• 技术框架：React^19.2.7 + react-router^7.18.1
• 大模型框架：deepseek-v4 + openai
• UI组件库：@arco-design/mobile-react^2.39.1
• 状态管理：zustand^5.0.14
• markdown解析：react-markdown^10.1.0
• 代码高亮与katex渲染：rehype-highlight + rehype-katex

功能特性

1. 支持亮色与暗黑主题切换
2. 支持深度思考模式
3. 支持katex数学公式渲染
4. 支持渲染mermaid图表（拖拽、缩放放大与缩小及重置、下载）
5. 支持代码块顶部sticky粘性、横向滚动、代码复制与下载
6. 支持上下文多轮对话及本地存储对话
7. 支持链接跳转、图片展示

项目框架目录

基于vite8构建React 19项目模板，采用react hooks进行页面编码。

项目入口模板App.jsx

import { HashRouter } from 'react-router-dom'
import { appStore } from '@/store/app'
// 引入路由配置
import Router from './router'

function App() {
  const appState = appStore()
  appState.updateTheme()
  return (
    <>
      
        
      
    >
  )
}
export default App

项目布局模板

return (
  <>
    

      
      

        {chatSession() && !isEmpty(chatSession().data)  (
          <>
            {/* Chat对话 */}
            

              
...
              {/* 滚动到底部 */}
              

                
              
            
          >
        ) : (
          <>
            {/* 开始 */}
            

              

                
                +
                
              
              

                React19-DeepSeek
              
              
你身边的智能小帮手，我可以帮你搜索、答疑、写作，请把你的任务交给我吧~
              

                

                  推荐问题
                  换一换
                
                

                  {promptList.map((item, index) => (
                    

                      
 changePrompt(item.prompt)}>
                        {item.emoji} {item.prompt} 
                      
                    
                  ))}
                
              
            
          >
        )}
      
      {/* 编辑器 */}
       setPromptValue(v)} scrollBottom={scrollToBottom} />
    
  >
)

react渲染katex公式与mermaid图表

// 支持删除线、表格、任务列表和网址等GitHub Flavored Markdown
import remarkGfm from 'remark-gfm'
// 代码高亮
import rehypeHighlight from 'rehype-highlight'
import 'highlight.js/styles/atom-one-light.css'
import xml from 'highlight.js/lib/languages/xml'
// 支持数学公式
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import 'katex/dist/katex.min.css'
// 渲染mermaid图表
import MermaidBlock from './mermaidBlock'

封装Markdown组件。

const Markdown = memo(({ source, scrollToBottom }) => {
  const processedContent = useMemo(() => {
    return preprocessMath(source || '')
  }, [source])
  return (
    
            )
          }
          return (
            
...
          )
        },
        // 自定义a渲染
        a({ href, children, node, ...rest}) {
          return {children}
        },
        // 自定义img渲染
        img({ src, children, node, ...rest}) {
          return  handleImageClick(src)} />
        }
      }}
      remarkPlugins={[remarkGfm, remarkMath]}
      rehypePlugins={[
        rehypeKatex,
        [rehypeHighlight, {
          aliases: {xml: ['vue']}, // 支持vue语法
        }],
      ]}
    />
  )
})

基于React 19与DeepSeek API搭建的H5版智能AI对话模板，至此分享完毕。以上为实际项目中的核心代码与界面展示，希望能为有类似需求的朋友提供参考。