首发React19+DeepSeek V4+Arco网页版AI智能系统模板

历时一周左右爆肝原创研发 react19.2+arcoDesign+openai 集成 deepseek-v4-flash 实战网页版ai对话助手。新增代码高亮复制、katex公式+mermaid图表解析、Echarts图表展示等功能。

react19-deepseek-webai支持浅色+深色主题、代码高亮/复制代码、深度思考链、katex公式、mermaid渲染、echarts图表展示，本地存储会话等功能。

技术栈

• 编辑器：vscode
• 技术框架：react^19.2.7+react-router^7.18.1
• ai大模型：DeepSeek-V4-Flash + OpenAI
• ui组件库：@arco-design/mobile-react^2.39.1
• 状态管理：zustand^5.0.14
• markdown解析：react-markdown^10.1.0
• echarts图表：echarts^6.1.0
• 高亮插件：rehype-highlight^7.0.2
• katex渲染：rehype-katex^7.0.1

功能特性

1. React19.x构建，接入DeepSeek-V4模型，流式打字、性能更优、对话丝滑流畅
2. 支持亮色+暗黑主题界面，收缩侧边栏
3. 支持丰富markdown，代码高亮/复制代码/下载
4. 支持深度思考链模式
5. 支持输出Katex数学公式
6. 支持渲染Mermaid图表(流程图/类图/饼图/甘特图)
7. 支持Echarts图表展示
8. 采用ArcoDesign组件库，保持UI风格一致性

项目结构目录

项目入口

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

react环境变量.env配置

只需替换上图  .env 文件里的key，即可畅快体验流式输出对话功能。

React-WebAI路由配置/布局模板

页面布局分为侧边栏+顶部导航条+AI对话内容区三个板块。

import { lazy, Suspense } from 'react'
import { useRoutes, Navigate, Outlet } from 'react-router-dom'
import { Spin } from '@arco-design/web-react'

import { appStore } from '@/store/app'

// 引入路由页面
import Login from '@views/auth/login'
import Register from '@views/auth/register'
const Index = lazy(() => import('@views/index'))
const Aihub = lazy(() => import('@views/aihub'))
const Setting = lazy(() => import('@views/setting'))
const Error404 = lazy(() => import('@views/error/404'))

import Sidebar from '@/layouts/sidebar'

// 加载提示
const SpinLoading = () => {
  return <Spin tip='loading...' style={{width: '100%'}} />
}

// 延迟加载
const Lazyload = (children) => {
  return <Suspense fallback={<SpinLoading />}>{children}</Suspense>
}

// 路由鉴权验证
const RouterAuth = ({children}) => {
  const appState = appStore()
  return appState.isLogged ? (children) : (<Navigate to='/login' replace />)
}

// 路由占位模板
const RouterLayout = () => (
  <div className='rai__container'>
    <div className='rai__layout flexbox flex-col'>
      <div className='rai__layout-body flex1 flexbox'>
        {/* 侧边栏 */}
        <Sidebar />

        <div className='rai__layout-main flex1'>
          { Lazyload(<Outlet />) }
        </div>
      </div>
    </div>
  </div>
)

const routes = [
  {
    path: '/',
    element: <RouterAuth><RouterLayout /></RouterAuth>,
    children: [
      // 首页
      { index: true, element: <Index /> },
      // ai导航
      { path: '/aihub', element: <Aihub /> },
      // 我的模块
      { path: '/setting', element: <Setting /> },

      // 错误模块
      { path: '*', element: <Error404 /> },
    ]
  },
  // 登录/注册
  { path: '/login', element: <Login /> },
  { path: '/register', element: <Register /> },
]

return (
  <>
    <div className={clsx('rai__sidebar', {'collapsed': collapsed})}>
      <Button className='rai__sidebar-collapse' shape='circle' onClick={handleCollapse}><div className='flex-c'><IconLayout style={{fontSize: 16}} /></div></Button>
      <aside className='rai__sidebar-aside flex1 flexbox flex-col'>
        <div className='rai__aside-head'>
          <div className='logo flexbox flex-alignc' onClick={()=>navigate('/')}><i className='iconfont ai-deepseek' style={{fontSize: 28}}></i><span className='fw-700 ff-ar' style={{fontSize: 16}}>react19-webseek</span></div>
          <div className='btn-create flex-c' onClick={handleCreate}><i className='iconfont ai-newchat'></i>新建对话<span className='shortkey'>(Ctrl+K)</span></div>
        </div>
        <div className='rai__aside-navwrap flexbox flex-col'>
          <div className={clsx('rai__aside-navitem', {'active': pathname == '/aihub'})} onClick={()=>navigate('/aihub')}><span className='icon'><IconCompass /></span><div className='title'>AI 导航</div></div>
          <Dropdown
            position='rt'
            droplist={
              <Menu style={{minWidth: 150, marginLeft: 10}}>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-aisousou'></i>AI搜索</div></Menu.Item>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-fanyi'></i>快速翻译</div></Menu.Item>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-xiezuo'></i>帮我写作</div></Menu.Item>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-tuxiang'></i>图像生成</div></Menu.Item>
                <Menu.Item><div className='flexbox flex-alignc' style={{gap: 5}}><i className='iconfont ai-aicode'></i>AI编程</div></Menu.Item>
              </Menu>
            }
          >
            <div className='rai__aside-navitem'><span className='icon'><IconCommand /></span><div className='title'>AI 技能</div><IconRight /></div>
          </Dropdown>
        </div>
        {/* 对话列表 */}
        <div className='rai__aside-sessions flex1 flexbox flex-col'>
          <div className='rai__aside-navwrap' style={{paddingTop: 0, paddingBottom: 0}}>
            <div className='rai__aside-navitem plain'><span className='icon'><IconHistory /></span><div className='title'>最近对话</div><i className='clean iconfont ai-clean' onClick={handleClean}></i></div>
          </div>
          <div className='rai__sessionwrap flex1'>
            <Rscroll size={5}>
              {sessions.length ?
                <ul className='rai__sessionlist'>
                  ...
                </ul>
                :
                <Empty icon={<IconEmpty style={{fontSize: 32}} />} description='暂无对话' />
              }
            </Rscroll>
          </div>
        </div>
        {/* 底部 */}
        <div className='rai__aside-navwrap'>
          ...
        </div>
      </aside>
    </div>
  </>
)

react19+deepseek多轮对话和流式输出

const completion = await openai.chat.completions.create({
  // 多轮会话
  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)
})

流式处理返回片段。

for await (const chunk of completion) {
  const content = chunk.choices[0]?.delta?.content || ''
  // 获取推理内容
  const reasoningContent = chunk.choices[0]?.delta?.reasoning_content || ''

  if(content || reasoningContent) {
    answerText += content
    reasoningText += reasoningContent

    ...
  }
  if(chunk.choices[0]?.finish_reason === 'stop') {
    // 确保最终内容完整更新
    updateSession(uniKey, {content: answerText, reasoning_content: reasoningText, loading: false})
    if(chatStore.getState().reachBottom) {
      scrollBottom()
    }
  }
}

2026实战React19接入DeepSeek搭建web版流式ai模板就分享到这里，希望对大家有所帮助！

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

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

uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板

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

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

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

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

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

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

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

最新研发flutter3.41+bitsdojo_window+getx客户端仿微信聊天Exe应用

Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

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