Agent 全栈开发实战：构建智能助手从后端到前端

用户浏览器（React） 
    ↓ HTTP/WebSocket
FastAPI 后端 
    ↓ 调用
LangChain Agent（核心推理循环）
    ↓ 按需调用
工具（天气查询、计算器、数据库查询）

pip install langchain langchain-openai fastapi uvicorn python-dotenv

from langchain.tools import Tool
from langchain_community.utilities import OpenWeatherMapAPIWrapper
import requests

# 自定义计算工具
def calculator(expression: str) -> str:
    try:
        result = eval(expression)  # 生产环境应使用安全解析
        return f"计算结果: {result}"
    except Exception as e:
        return f"计算错误: {str(e)}"

calculator_tool = Tool(
    name="Calculator",
    func=calculator,
    description="当需要进行数学计算时使用，输入数学表达式字符串"
)

# 天气查询工具（需设置OPENWEATHERMAP_API_KEY）
weather = OpenWeatherMapAPIWrapper()
weather_tool = Tool(
    name="Weather",
    func=weather.run,
    description="当询问天气时使用，输入城市名称"
)

tools = [calculator_tool, weather_tool]

from langchain_openai import ChatOpenAI
from langchain.agents import AgentExecutor, create_openai_tools_agent
from langchain.prompts import ChatPromptTemplate, MessagesPlaceholder
import os
from dotenv import load_dotenv

load_dotenv()

llm = ChatOpenAI(model="gpt-3.5-turbo", temperature=0)

prompt = ChatPromptTemplate.from_messages([
    ("system", "你是一个乐于助人的智能助手，可以使用工具来回答问题。"),
    ("user", "{input}"),
    MessagesPlaceholder(variable_name="agent_scratchpad"),
])

agent = create_openai_tools_agent(llm, tools, prompt)
agent_executor = AgentExecutor(agent=agent, tools=tools, verbose=True)

from fastapi import FastAPI
from pydantic import BaseModel
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

class Query(BaseModel):
    message: str

@app.post("/api/chat")
async def chat(query: Query):
    try:
        response = agent_executor.invoke({"input": query.message})
        return {"reply": response["output"]}
    except Exception as e:
        return {"reply": f"出错了: {str(e)}"}

uvicorn main:app --reload --port 8000

npm create vite@latest client -- --template react
cd client && npm install axios

import React, { useState } from 'react';
import axios from 'axios';

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

  const sendMessage = async () => {
    if (!input.trim()) return;
    const userMsg = { role: 'user', content: input };
    setMessages([...messages, userMsg]);
    setInput('');
    setLoading(true);
    try {
      const res = await axios.post('http://localhost:8000/api/chat', {
        message: input
      });
      setMessages([...messages, userMsg, { role: 'assistant', content: res.data.reply }]);
    } catch (err) {
      setMessages([...messages, userMsg, { role: 'assistant', content: '请求失败，请稍后重试' }]);
    }
    setLoading(false);
  };

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
      <h1>AI 智能助手</h1>
      <div style={{ height: '400px', overflowY: 'auto', border: '1px solid #ccc', padding: '10px' }}>
        {messages.map((msg, idx) => (
          <div key={idx} style={{ textAlign: msg.role === 'user' ? 'right' : 'left', margin: '5px' }}>
            <span style={{ background: msg.role === 'user' ? '#007bff' : '#f1f1f1', color: msg.role === 'user' ? '#fff' : '#000', padding: '8px', borderRadius: '8px', display: 'inline-block' }}>
              {msg.content}
            </span>
          </div>
        ))}
        {loading && <div>思考中...</div>}
      </div>
      <div style={{ display: 'flex', marginTop: '10px' }}>
        <input
          style={{ flex: 1, padding: '8px' }}
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          placeholder="请输入问题..."
        />
        <button onClick={sendMessage} style={{ padding: '8px 15px' }}>发送</button>
      </div>
    </div>
  );
}

export default App;

npm run dev