一周爆肝一款ai对话助手，react19.2接入deepseek-v4-flash流式输出ai模板，完结了。
使用技术
- 开发工具：vscode
- 技术框架：React^19.2.7+react-router^7.18.1
- 大模型框架：deepseek-v4 + openai
- 组件库：@arco-design/mobile-react^2.39.1
- 状态管理：zustand^5.0.14
- markdown解析：react-markdown^10.1.0
- 代码高亮：rehype-highlight
- katex渲染：rehype-katex
项目功能性
- 基于React19集成DeepSeek-V4模型，性能更优，对话丝滑流畅
- 支持代码高亮/复制代码/下载代码，方便展示和分享代码片段
- 支持Katex数学公式、Mermaid图表渲染(拖拽/缩放/下载)
- 使用arco-mobile组件库，风格统一，时尚大气
- 支持移动端+PC端750px像素适配
项目框架结构
React19+DeepSeek V4+Arco智能聊天AI流式对话模板
react19配置.env环境变量
替换下构目录.env文件里面的apikey即可畅快体验ai对话功能。
项目入口模板
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+deepseek自定义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语法
}
],
]}
/>
)
})
运行到pc端，以750px宽度显示布局。
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)
})
往期推荐文章
uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板
vite8-webos网页版os管理|Vue3+Vite8.0+ArcoDesign搭建pc端os桌面系统
Vite8+DeepSeek网页版AI助手|vue3+arco本地web版ai流式打字问答系统
Flutter3.41+DeepSeek智能AI应用|flutter3+getx+dio流式ai对话app模板
Electron41+Vite8.0+DeepSeek桌面端AI助手|electron+vue3流式ai系统
最新版Flutter3.41+Dart3.11仿写抖音APP直播+短视频+聊天应用程序
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
Flutter3-MacOS桌面OS系统|flutter3.41+window_manager客户端OS模板
最新研发flutter3.41+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
