2026/7原创实战react19.2+deepseek-v4-flash+arco-mobile+openai智能ai聊天对话模板React19DeepSeek。

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 (
    <>
      <HashRouter>
        <Router />
      </HashRouter>
    </>
  )
}

export default App

项目布局模板

return (
  <>
    <div className='flexbox flex-col' style={{height: '100%'}}>
      <Toolbar title={chatSession()?.title} />
      
      <div className='rai__scrollview flex1'>
        {chatSession() && !isEmpty(chatSession().data) ?
          <>
            {/* Chat对话 */}
            <div ref={scrollRef} className='rai__chatbot' onScroll={onScroll} onWheel={onWheel}>
              <div className='rai__chatbot-sessions'>
                ...
              </div>
              {/* 滚动到底部 */}
              <div className='rai__scrollbottom' onClick={scrollToBottom}><i className='iconfont ai-arrD'></i></div>
            </div>
          </>
          :
          <>
            {/* 开始 */}
            <div className='rai__chatbot-intro'>
              <div className='flexbox flex-alignc' style={{ gap: '15px' }}>
                <img src="react.svg" style={{ height: '35px' }} alt="react" />
                <span className="c-999 ff-ar fs-18">+</span>
                <i className='logo iconfont ai-deepseek'></i>
              </div>
              <h3 className='name'><span className='txt text-gradient'>React19-DeepSeek</span></h3>
              <p className='desc'>你身边的智能小帮手，我可以帮你搜索、答疑、写作，请把你的任务交给我吧~</p>
              <div className='prompt'>
                <p className='tip flex-c'><span className='flex1'>推荐问题</span><a onClick={refreshPrompt}>换一换<IconRefresh /></a></p>
                <ul className='list'>
                  {
                    promptList.map((item, index) => (
                      <li key={index}>
                        <div className='txt' onClick={() => changePrompt(item.prompt)}>{item.emoji} {item.prompt} ➝</div>
                      </li>
                    ))
                  }
                </ul>
              </div>
            </div>
          </>
        }
      </div>

      {/* 编辑器 */}
      <ChatEditor value={promptValue} onChange={v => setPromptValue(v)} scrollBottom={scrollToBottom} />
    </div>
  </>
)

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 (
    <ReactMarkdown
      children={processedContent}
      components={{
        // 自定义代码块，所有代码都会被pre包裹
        pre(props) {
          const { children, node, ...rest } = props
          // 从 children 中提取 code 元素的信息
          const codeElement = children?.props?.children
          const className = children?.props?.className || ''
          const match = /language-(\w+)/.exec(className || '')
          const language = match ? match[1] : 'plaintext'

          // 渲染mermaid
          if (language === 'mermaid') {
            return (　　　　　　　　　　<MermaidBlock code={codeElement} scrollToBottom={scrollToBottom} />            )
          }

          return (
            <div className="md-code-block">
              ...
            </div>
          )
        },
        // 自定义a渲染
        a({ href, children, node, ...rest}) {
          return <a {...rest} href={href} target='_blank'>{children}</a>
        },
        // 自定义img渲染
        img({ src, children, node, ...rest}) {
          return <img {...rest} src={src} onClick={() => handleImageClick(src)} />
        }
      }}
      remarkPlugins={[remarkGfm, remarkMath]}
      rehypePlugins={[
        rehypeKatex,
        [
          rehypeHighlight,
          {
            aliases: {xml: ['vue']}, // 支持vue语法
          }
        ],
      ]}
    />
  )
})

基于react19+deepseek api搭建h5版智能ai对话模板，就分享到这里。

扫一扫，更多精选优质项目。

花3天手撸升级vite8+vue3+arco网页版webos系统

Vite8-Vue3-Admin网页版前端后台管理系统解决方案

Electron38.2实战客户端OS系统|vite7+vue3+electron仿mac/wins桌面

2025最新款Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe

最新研发vite7.0+electron38客户端仿微信EXE聊天软件

Vite8-Naive-Admin高颜值web版通用后台管理模板

2026/6升级版Flutter3.41.5桌面级OS管理系统

最新款uni-app+vue3+mp-html快速对接deepseek-v4-pro跨三端ai智能助手

Flutter3.41实战抖音直播+短视频+聊天

基于Flutter3.41+DeepSeek+Dio+Get搭建APP版智能生成式AI助手

基于vite8.0+electron41+deepseek跨平台ai桌面助手

首发vite8.0+vue3+deepseek+markdown手搓网页版ai流式生成模板