React19+DeepSeek-V4智能聊天AI助手|react19.2+zustand流式输出ai模板

2026/7重磅新作react19+deepseek-v4-flash+arco+openai流式输出ai会话模板。

react-deepseek-chat：基于react19.2+react-router7+zustand5+markdown深度对接deepseek v4构建H5版ai对话助手。支持暗黑+亮色主题、深度思考、代码高亮/复制/下载、latex/mermaid渲染、本地存储会话等功能。

未标题-2

p1  p1-1

react19-webai网页版AI模板|DeepSeek-V4+React19+Arco智能ai系统

uniapp+deepseek-v4-flash+vue3跨端流式ai应用模板【h5+小程序+app端】

Vite8+DeepSeek-V4网页版AI助手|vue3+arco本地web版ai流式问答系统

Flutter3.41+DeepSeek V4智能AI应用|flutter3+getx+dio流式ai对话app模板

Electron41+Vite8+DeepSeek-V4桌面端AI助手|electron+vue3流式ai系统

技术栈

  • 编辑器：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

p2-1

p2-2

功能特性

  1. 最新版react19全家桶技术
  2. 基于React19集成DeepSeek-V4模型，性能更优，对话丝滑流畅
  3. 支持代码高亮/复制代码/下载代码，方便展示和分享代码片段
  4. 支持Katex数学公式、Mermaid图表渲染(拖拽/缩放/下载)
  5. 使用arco-mobile组件库，风格统一，时尚大气
  6. 支持移动端+PC端750px像素适配

p2-3

未标题-f

image

未标题-p5

项目结构目录

使用vite8构建工具搭建react19项目模板。采用react hooks语法开发。

360截图20260719224400500

React19-DeepSeek智能AI流式对话模板同步到原创作品集，感谢支持~

React19+DeepSeek V4+Arco智能聊天AI流式对话模板

react19配置环境变量.env

项目构目录下新建.env文件。替换里面的apikey即可畅快体验ai对话功能。

image

项目入口模板

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

未标题-g

未标题-d

项目布局模板

image

页面结构分为顶部导航栏+聊天会话区+底部编辑栏三个模块。

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>
  </>
)

image

image

自定义katex公式和mermaid渲染图表

引入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语法
          }
        ],
      ]}
    />
  )
})

image

002360截图20260719072817244

002360截图20260719075154103

002360截图20260719090914605

image

002360截图20260719092818251

002360截图20260719093035211

004360截图20260719093948956

image

008360截图20260719095821404

003360截图20260719093414937

003360截图20260719093457468

008360截图20260719100117859

009360截图20260719100323947

012360截图20260719100919158

013360截图20260719101007561

011360截图20260719100806234

支持运行到pc端，以750px宽度排版页面布局。

014360截图20260719101306184

014360截图20260719101425833

015360截图20260719101607459

015360截图20260719101649784

017360截图20260719102121689

019360截图20260719102534913

react19接入deepseek v4流式输出

// 调用deepseek接口
const completion = await openai.chat.completions.create({
  // 单一会话
  /* messages: [
    {role: 'user', content: editorValue}
  ], */
  // 多轮会话
  messages: multiConversation ? historySession() : [{role: 'user', content: editorValue}],
  // 对话模型(快速模式deepseek-v4-flash 专家模式deepseek-v4-pro)
  model: 'deepseek-v4-flash',
  // 是否深度思考
  thinking: {'type': thinkingEnabled ? 'enabled' : 'disabled'},
  stream: true, // 流式输出
  max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
  temperature: 0.4, // 严谨采样 越低越严谨(默认1)
})

以上就是react19+deepseek搭建h5流式打字输出ai模板的一些项目分享，希望对大家有点帮助~

扫一扫，获取最新实战项目

a88e58ebeaaf5f5a09a52686a388ed71_1289798-20251223105825806-389288273

往期热门文章推荐

uniapp+deepseek-v4-flash+vue3跨端流式ai应用模板【h5+小程序+app端】

Vite8+DeepSeek-V4网页版AI助手|vue3+arco本地web版ai流式问答系统

Flutter3.41+DeepSeek智能AI应用|flutter3+getx+dio流式ai对话app模板

最新版Flutter3.41+Dart3.11仿写抖音APP直播+短视频+聊天应用程序

Vite8-Vue3-Admin网页版后台模板|vue3.5+pinia3+echarts后台管理系统

vite8-webos网页版os管理|Vue3+Vite8.0+ArcoDesign搭建pc端os桌面系统

React19-Admin后台管理系统|vite8+react19+arco+zustand通用后台模板

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序

Flutter3-MacOS桌面OS系统|flutter3.41+window_manager客户端OS模板

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

dn.sohucs

 

posted @ 2026-07-20 11:21  xiaoyan2017  阅读(27)  评论(0)    收藏  举报
友情链接： UP主小店B站