在这个 AI 大模型如雨后春笋般涌现的时代，让前端应用与本地大模型来一场 "亲密接触"，就像给你的 React 应用装上一个 "本地智囊团"。今天，我们就来实现一个看似高深实则简单的需求：用 React 对接本地 Ollama 服务。这就好比教两个素未谋面的朋友打招呼，Ollama 是守在本地的 "AI 达人"，React 则是活泼的 "前端信使"，我们要做的就是搭建它们之间的沟通桥梁。
底层原理：通信的奥秘
在开始编码前，我们得先搞明白这两个 "朋友" 是如何交流的。Ollama 作为本地运行的大模型服务，会在你的电脑上开启一个 "通信窗口"------ 也就是 HTTP 服务器，默认情况下这个窗口的地址是 http://localhost:11434。而 React 应用要做的，就是通过 HTTP 协议向这个窗口发送 "消息"（请求），并等待 "回复"（响应）。
这就像你去餐厅吃饭，Ollama 是后厨的厨师，React 是前厅的服务员，http://localhost:11434 就是厨房的传菜口。服务员把顾客的订单（请求）通过传菜口递给厨师，厨师做好菜后再通过传菜口把菜（响应）送回给服务员。
准备工作：工具就位
在正式开始前，我们需要准备好 "食材" 和 "厨具"：
- 安装 Ollama：去 Ollama 官网下载并安装，这一步就像把厨师请到厨房里。安装完成后，打开命令行，输入 ollama run llama3 来启动一个基础模型，这里我们用 llama3 作为示例，你也可以换成其他喜欢的模型。
- 创建 React 应用：如果你还没有 React 项目，可以用 Create React App 快速创建一个，命令是 npx create-react-app ollama-demo，这就像搭建好前厅的场地。
代码实现：搭建沟通桥梁
一切准备就绪，现在我们来编写核心代码，实现 React 与 Ollama 的通信。
首先，我们需要一个发送请求的函数。在 React 组件中，我们可以用 fetch API 来发送 HTTP 请求到 Ollama 的 API 端点。Ollama 的聊天接口是 http://localhost:11434/api/chat，我们需要向这个接口发送包含模型名称和消息内容的 JSON 数据。
javascript
import { useState } from 'react';
function OllamaChat() {
const [message, setMessage] = useState('');
const [response, setResponse] = useState('');
const sendMessage = async () => {
try {
// 构建请求体，指定模型和消息
const requestBody = {
model: 'llama3',
messages: [{ role: 'user', content: message }],
stream: false // 不使用流式响应，等待完整回复
};
// 发送 POST 请求到 Ollama 的聊天接口
const response = await fetch('http://localhost:11434/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
});
// 解析响应数据
const data = await response.json();
// 提取并显示 AI 的回复
if (data.message && data.message.content) {
setResponse(data.message.content);
}
} catch (error) {
console.error('与 Ollama 通信出错：', error);
setResponse('抱歉，无法连接到 AI 服务，请检查 Ollama 是否正在运行。');
}
};
return (
<div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
<h2>React × Ollama 聊天 Demo</h2>
<div style={{ marginBottom: '20px' }}>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="输入你的问题..."
style={{ width: '70%', padding: '8px', marginRight: '10px' }}
/>
<button onClick={sendMessage} style={{ padding: '8px 16px' }}>
发送
</button>
</div>
<div style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '4px' }}>
<h3>AI 回复：</h3>
<p>{response}</p>
</div>
</div>
);
}
export default OllamaChat;代码解析：庖丁解牛
让我们来仔细看看这段代码的工作原理，就像拆解一台精密的机器。
- 状态管理：我们用 useState 钩子创建了两个状态变量，message 用来存储用户输入的消息，response 用来存储 AI 的回复。这就像两个储物盒，分别存放要发送的消息和收到的回复。
- 发送消息函数：sendMessage 是核心函数，它通过 fetch 发送请求到 Ollama。请求体中指定了要使用的模型（llama3）和用户的消息。这里的 stream: false 表示我们希望一次性收到完整的回复，而不是逐字接收。
- 处理响应：当 Ollama 处理完请求后，会返回一个 JSON 格式的响应。我们从中提取出 AI 的回复内容，并更新 response 状态，这样页面上就会显示出 AI 的回答了。
- 错误处理：如果通信过程中出现错误（比如 Ollama 没有运行），我们会捕获错误并显示友好的提示信息。
运行测试：见证奇迹的时刻
现在，让我们来测试一下这个 Demo 是否能正常工作。
- 确保 Ollama 正在运行：打开命令行，输入 ollama run llama3，等待模型加载完成。
- 启动 React 应用：在项目目录下运行 npm start，打开浏览器访问 http://localhost:3000。
- 发送消息：在输入框中输入一个问题，比如 "你好，Ollama！"，然后点击 "发送" 按钮。稍等片刻，你应该就能看到 AI 的回复了。
如果一切顺利，你会看到 React 应用和 Ollama 成功 "牵手"，完成了一次愉快的对话。如果遇到问题，先检查 Ollama 是否正在正常运行，模型名称是否正确，网络连接是否通畅。
进阶思考：拓展可能性
这个简单的 Demo 只是一个开始，就像我们只是搭建了一座简陋的小桥。你可以基于这个基础进行很多拓展：
- 实现流式响应：将 stream 设置为 true，然后处理流式响应，让 AI 的回复像打字一样逐字显示，提升用户体验。
- 增加聊天历史：用状态管理存储聊天记录，让对话可以上下文连贯。
- 切换不同模型：在界面上增加模型选择功能，让用户可以根据需要切换不同的 Ollama 模型。
- 优化错误处理：增加更详细的错误提示，帮助用户排查问题。
总结：本地 AI 的魅力
通过这个 Demo，我们展示了 React 对接本地 Ollama 服务的全过程。相比于调用云端的 AI 服务，本地部署的 Ollama 具有隐私性好、响应速度快、无需网络连接等优点，就像把 AI 助手请到了自己家里，随时可以交流。
希望这篇文章能帮助你理解 React 与本地 AI 服务对接的原理和方法。现在，你可以基于这个基础，开发出更强大、更有趣的本地 AI 应用了。让我们一起探索前端与 AI 结合的无限可能吧！