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

2026 AI实战react19.2+deepseek v4+arco-design网页pc版智能AI聊天助手。

react19-webseek：基于react19.2+react-router7+zustand5+openai接入deepseek-v4-flash智能大模型。支持浅色+深色主题、代码高亮/复制代码、深度思考链、katex公式、mermaid渲染、echarts图表展示，本地存储会话等功能。

未标题-5-1

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

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

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

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

tauri2.10+deepseek v4+vite7客户端ai系统|Tauri2+Vue3.5桌面AI程序Exe

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

p2

🚀技术栈

  • 编码工具：Vscode
  • 技术框架：react^19.2.7+react-router^7.18.1
  • AI智能模型：DeepSeek-V4-Flash + OpenAI
  • 组件库：@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

p3

p8-2

🤡项目特色

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

p8-4

p8-5

360截图20260727105914539

🤖项目框架目录

react19-deepseek-webai使用vite8创建项目模板，采用 react hooks 编码页面。

360截图20260726211037305

react19-web-deepseek网页版AI问答系统已经发布到我的原创作品集。

React19+DeepSeek-V4+ArcoDesign网页版AI流式问答模板

项目运行配置

首先申请一个deepseek apikey，替换掉项目根目录下.env文件里的key。

image

# 项目名称
VITE_APPNAME = 'React19-Web-DeepSeek'

# 运行端口 默认http://localhost:5173/
VITE_PORT = 3001

# 运行 yarn dev 时自动打开浏览器
VITE_OPEN = true

# 开启https
VITE_HTTPS = false

# 是否删除生产环境console
VITE_DROP_CONSOLE = true

# DeepSeek API配置
VITE_DEEPSEEK_API_KEY = 替换为你的 API Key
VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

安装项目依赖，运行

yarn install
yarn dev

未标题-3

未标题-5

路由/布局模板

image

整个项目分为侧边栏+顶部导航条+AI对话内容区三个板块。

360截图20260727111225929

react-router7路由配置

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 /> },
]

image   image

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

001360截图20260726102348805

001360截图20260726102406253

002360截图20260726201332207

002360截图20260726201039532

002360截图20260726201207244

002360截图20260726205709474

002360截图20260726201912797

004360截图20260726202421978

006360截图20260726202646609

007360截图20260726202848378

007360截图20260726202953321

008360截图20260726203456816

008360截图20260726203308657

008360截图20260726213129446

008360截图20260726212934662

009360截图20260726203810161

009360截图20260726204448119

009360截图20260726203919756

010360截图20260726205354739

011360截图20260726205457950

012360截图20260726205755277

AI对话输入框

image

image

image

image

封装在components目录下chateditor组件。

image

return (
  <div {...rest} className={clsx('rai__inputbox flexbox flex-col', className)}>
    {/* 编辑栏 */}
    <div className='rai__editor flexbox'>
      <Input.TextArea
        value={editorText}
        autoSize={autoSize}
        spellCheck={false}
        placeholder='有问题，尽管问'
        onChange={handleInput}
      />
    </div>
    {/* 操作栏 */}
    <div className='rai__tools flexbox flex-alignc'>
      <div className='option flex1 flexbox'>
        <Tooltip content='先思考后回答，解决推理问题' mini trigger={'click'}>
          <div className={clsx('btn', {'active': thinkingEnabled})} onClick={() => updateField({thinkingEnabled: !thinkingEnabled})}><i className='iconfont ai-deepthink fs-14'></i> 深度思考</div>
        </Tooltip>
        <div className={clsx('btn', {'active': searchEnabled})} onClick={() => updateField({searchEnabled: !searchEnabled})}><i className='iconfont ai-network fs-14'></i> 联网</div>
        {skillbar &&
          <Dropdown
            trigger='click'
            droplist={
              <Menu>
                ...
              </Menu>
            }
          >
            <div className='btn'><IconCommon /> 技能</div>
          </Dropdown>
        }
      </div>
      <Dropdown
        position='top'
        droplist={
          <Menu style={{minWidth: 160}}>
            <Menu.ItemGroup title='从网盘添加'>
              <Menu.Item>选择网盘文件</Menu.Item>
            </Menu.ItemGroup>
            <Menu.ItemGroup title='从本地添加'>
              <Menu.Item>上传文件</Menu.Item>
              <Menu.SubMenu title='上传代码' triggerProps={{position: 'rb'}}>
                <Menu.Item><IconFile /> 代码文件</Menu.Item>
                <Menu.Item><IconFile /> 代码文件夹</Menu.Item>
                <Menu.Item><IconFile /> Github仓库</Menu.Item>
              </Menu.SubMenu>
            </Menu.ItemGroup>
          </Menu>
        }
      >
        <Button className='icon-btn' shape='circle' icon={<IconAttachment style={{fontSize: 16}} />} />
      </Dropdown>
      <Tooltip content='添加图片' mini>
        <Button className='icon-btn' shape='circle' icon={<IconImage style={{fontSize: 16}} />} />
      </Tooltip>
      <Dropdown
        position='top'
        droplist={
          <Menu style={{minWidth: 120}}>
            <Menu.Item><IconFile /> 图片识文字</Menu.Item>
            <Menu.Item><IconFile /> 文件</Menu.Item>
            <Menu.Item><IconFile /> 网页分析</Menu.Item>
            <Menu.Item><IconFile /> Word总结</Menu.Item>
          </Menu>
        }
      >
        <Button className='icon-btn' shape='circle' icon={<IconPlus style={{fontSize: 16}} />} />
      </Dropdown>
      {!loading ?
        <Button className='btn-submit' type='primary' shape='circle' disabled={!editorText?.trim() || loading} onClick={handleSubmit}><IconArrowUp style={{fontSize: 18}} /></Button>
        :
        <Button className='btn-submit' type='primary' shape='circle' onClick={handleStopStream}><div style={{background: '#fff', height: 10, width: 10}}></div></Button>
      }
    </div>
  </div>
)

p8-3

React19集成DeepSeek-V4 API

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循环逐行处理流式返回片段。

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()
    }
  }
}

综上就是React19接入DeepSeek V4搭建Web版流式生成AI对话系统的一些实战分享，希望对大家有所帮助！

bilibili-mall

附上一些最新进阶项目实例

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

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

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

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系统

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

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

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

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

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

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

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

s13.sinaimg

 

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