2026/7正式版deepseek-v4+react19仿豆包/kimi网页版ai智能对话系统

2026-07-29 0

上一周有开发一款react19+deepseek搭建h5版流式智能ai助手。今天来分享最新研发的react19+arco-design+zustand5+deepseek-v4搭建web网页版智能ai对话系统ReactWebAI。

面向h5版智能ai对话模板实战，采用DeepSeek-V4+React19+Zustand5+Arco+Markdown

浅色+深色界面、深度思考链，以及katex公式、mermaid和echarts图表展示等功能，均由深度接入deepseek-v4-flash大模型的react19-webai支持。

实现技术

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

项目框架结构

环境变量的react配置

# 项目名称VITE_APPNAME = 'React19-Web-DeepSeek'# 运行端口默认http://localhost:5173/VITE_PORT = 3001# 运行 yarn dev 时自动打开浏览器VITE_OPEN = true# 开启httpsVITE_HTTPS = false# 是否删除生产环境consoleVITE_DROP_CONSOLE = true# DeepSeek API配置VITE_DEEPSEEK_API_KEY = 替换为你的 API KeyVITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

布局模板react19-webai

react-router v7路由管理

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 }// 延迟加载const Lazyload = (children) => {return }>{children}}// 路由鉴权验证const RouterAuth = ({children}) => {const appState = appStore()return appState.isLogged ? (children) : ()}// 路由占位模板const RouterLayout = () => (

{/* 侧边栏 */}

{ Lazyload() }

)const routes = [{path: '/',element: ,children: [// 首页{ index: true, element: },// ai导航{ path: '/aihub', element: },// 我的模块{ path: '/setting', element: },// 错误模块{ path: '*', element: },]},// 登录/注册{ path: '/login', element: },{ path: '/register', element: },]

入口文件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