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构建react19项目模板，采用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 Fla vored 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组件封装

封装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语法
        }],
      ]}
    />
  )
})

基于react19+deepseek api搭建h5版智能ai对话模板，就分享到这里。以上是实际项目中的核心代码与界面展示，希望能给有类似需求的朋友提供一些参考。

《夸克》非常好用的免费AI浏览器

下载APP查看