【智能体开发】智能体前后端开发方案

setMessages(prev => [...prev, { text: '抱歉，服务暂时不可用', isBot: true }]);return responses[message] || responses['默认'];placeholder="输入你的消息..."'默认': '我还在学习中，暂时无法回答这个问题。'推荐电影': '推荐您观看《肖申克的救赎》','天气': '今天是晴天，气温

meisongqing

1060人浏览 · 2025-04-09 14:14:38

meisongqing · 2025-04-09 14:14:38 发布

以下是一个基于React前端 + Node.js(Express)后端的智能体系统实现方案，包含详细代码和运行说明：

一、前端部分（使用React）

创建项目：

bash

复制

npx create-react-app ai-agent-frontend
cd ai-agent-frontend

修改src/App.js：

jsx

复制

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!input.trim()) return;

    // 添加用户消息
    setMessages(prev => [...prev, { text: input, isBot: false }]);
    
    try {
      const response = await axios.post('http://localhost:5000/api/chat', {
        message: input
      });
      
      // 添加AI回复
      setMessages(prev => [...prev, { text: response.data.reply, isBot: true }]);
    } catch (error) {
      console.error('Error:', error);
      setMessages(prev => [...prev, { text: '抱歉，服务暂时不可用', isBot: true }]);
    }
    
    setInput('');
  };

  return (
    <div className="app">
      <div className="chat-container">
        <div className="messages">
          {messages.map((msg, index) => (
            <div key={index} className={`message ${msg.isBot ? 'bot' : 'user'}`}>
              {msg.text}
            </div>
          ))}
        </div>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="输入你的消息..."
          />
          <button type="submit">发送</button>
        </form>
      </div>
    </div>
  );
}

export default App;

修改src/App.css：

css

复制

.app {
  display: flex;
  justify-content: center;
  padding: 20px;
  min-height: 100vh;
  background-color: #f0f2f5;
}

.chat-container {
  width: 600px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.messages {
  height: 500px;
  overflow-y: auto;
  padding: 20px;
}

.message {
  margin: 10px 0;
  padding: 10px 15px;
  border-radius: 20px;
  max-width: 80%;
}

.user {
  background: #007bff;
  color: white;
  margin-left: auto;
}

.bot {
  background: #e9ecef;
  color: black;
  margin-right: auto;
}

form {
  display: flex;
  padding: 20px;
  border-top: 1px solid #ddd;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

安装axios：

bash

复制

npm install axios

二、后端部分（使用Node.js + Express）

创建项目：

bash

复制

mkdir ai-agent-backend
cd ai-agent-backend
npm init -y
npm install express cors axios body-parser

创建server.js：

javascript

复制

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();

// 中间件
app.use(bodyParser.json());
app.use(cors());

// 模拟AI回复
function getAIReply(message) {
  const responses = {
    '你好': '你好！有什么可以帮您的吗？',
    '天气': '今天是晴天，气温25℃左右。',
    '推荐电影': '推荐您观看《肖申克的救赎》',
    '默认': '我还在学习中，暂时无法回答这个问题。'
  };

  return responses[message] || responses['默认'];
}

// API路由
app.post('/api/chat', (req, res) => {
  const userMessage = req.body.message;
  
  // 模拟处理延迟
  setTimeout(() => {
    const reply = getAIReply(userMessage);
    res.json({ reply });
  }, 800);
});

// 启动服务
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

三、运行说明

启动后端服务：

bash

复制

cd ai-agent-backend
node server.js

启动前端应用：

bash

复制

cd ai-agent-frontend
npm start

访问应用：
打开浏览器访问 http://localhost:3000

四、功能扩展建议

接入真实AI API：

javascript

复制

// 在server.js中添加：
const axios = require('axios');

async function getRealAIResponse(message) {
  try {
    const response = await axios.post('https://api.openai.com/v1/chat/completions', {
      model: "gpt-3.5-turbo",
      messages: [{role: "user", content: message}]
    }, {
      headers: {
        'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
        'Content-Type': 'application/json'
      }
    });
    
    return response.data.choices[0].message.content;
  } catch (error) {
    console.error('API Error:', error);
    return '抱歉，暂时无法处理您的请求';
  }
}

添加数据库支持（使用MongoDB示例）：

javascript

复制

// 安装mongoose
npm install mongoose

// 在server.js中添加：
const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/chatDB', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const chatSchema = new mongoose.Schema({
  message: String,
  response: String,
  timestamp: { type: Date, default: Date.now }
});

const Chat = mongoose.model('Chat', chatSchema);

// 修改API路由保存数据
app.post('/api/chat', async (req, res) => {
  const userMessage = req.body.message;
  const reply = getAIReply(userMessage);
  
  const chat = new Chat({
    message: userMessage,
    response: reply
  });
  
  await chat.save();
  
  res.json({ reply });
});

这个全栈解决方案包含：