前端界面示例(React)
// frontend/src/components/Chat.jsx import React, { useState, useRef, useEffect } from ‘react’; import { Send, Bot, User, AlertCircle } from ‘lucide-react’; import { sendMessage, getChatHistory } from ‘../api/chat’; const Chat = ({ userToken }) => { const [messages, setMessages] = useState([]); const [input, setInput] = useState(”); const [loading, setLoading] = useState(false); const [sessionId, setSessionId] = useState(null); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: ‘smooth’ }); }; useEffect(() => { scrollToBottom(); }, [messages]); const handleSend = async () => { if (!input.trim()) return; const userMessage = { role: ‘user’, content: input }; setMessages(prev => […prev, userMessage]); setInput(”); setLoading(true); try { const response = await sendMessage({ message: input, session_id: sessionId }, userToken); if (response.session_id) { setSessionId(response.session_id); } const assistantMessage = { role: ‘assistant’, content: response.response, metadata: { agentType: response.agent_type, model: response.used_model, cost: response.cost, fromCache: response.from_cache, warnings: response.warnings } }; setMessages(prev => […prev, assistantMessage]); } catch (error) { setMessages(prev => […prev, { role: ‘error’, content: ‘发送消息失败,请重试’ }]); } finally { setLoading(false); } }; return (
{/* 消息列表 */}
{messages.map((msg, idx) => (
{msg.role === ‘user’ ?:} {msg.role === ‘user’ ? ‘我’ : ‘AI助手’}
{msg.content}
{/* 元信息 */} {msg.metadata && (
模型: {msg.metadata.model} | 成本: ${msg.metadata.cost?.toFixed(4)} {msg.metadata.fromCache && (缓存)}
)} {/* 警告 */} {msg.metadata?.warnings?.length > 0 && (
)}
))}{/* 输入框 */}
setInput(e.target.value)} onKeyPress={(e) => e.key === ‘Enter’ && handleSend()} placeholder=”输入消息…” className=”flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500″ disabled={loading} />
); }; export default Chat;
🚀 第六部分:生产环境部署
Docker Compose部署配置
# docker-compose.yml version: ‘3.8’ services: # 主应用 app: build: . ports: – “8000:8000” environment: – DATABASE_URL=postgresql+asyncpg://postgres:postgres@db:5432/ai_assistant – REDIS_URL=redis://redis:6379/0 – OPENAI_API_KEY=${OPENAI_API_KEY} depends_on: – db – redis – milvus volumes: – ./data:/app/data restart: unless-stopped deploy: resources: limits: cpus: ‘2’ memory: 4G # 任务队列Worker worker: build: . command: celery -A tasks worker –loglevel=info environment: – DATABASE_URL=postgresql+asyncpg://postgres:postgres@db:5432/ai_assistant – REDIS_URL=redis://redis:6379/0 depends_on: – db – redis restart: unless-stopped # 定时任务 scheduler: build: . command: celery -A tasks beat –loglevel=info environment: – REDIS_URL=redis://redis:6379/0 depends_on: – redis restart: unless-stopped # PostgreSQL数据库 db: image: postgres:15-alpine environment: – POSTGRES_USER=postgres – POSTGRES_PASSWORD=postgres – POSTGRES_DB=ai_assistant volumes: – postgres_data:/var/lib/postgresql/data ports: – “5432:5432” restart: unless-stopped # Redis缓存 redis: image: redis:7-alpine ports: – “6379:6379” volumes: – redis_data:/data restart: unless-stopped # Milvus向量数据库 milvus: image: milvusdb/milvus:v2.3.3 ports: – “19530:19530” – “9091:9091” volumes: – milvus_data:/var/lib/milvus restart: unless-stopped # Nginx反向代理 nginx: image: nginx:alpine ports: – “80:80” – “443:443” volumes: – ./deployments/nginx/nginx.conf:/etc/nginx/nginx.conf – ./deployments/nginx/ssl:/etc/nginx/ssl depends_on: – app restart: unless-stopped # 前端 frontend: build: ./frontend ports: – “3000:80” depends_on: – app restart: unless-stopped volumes: postgres_data: redis_data: milvus_data:
# Dockerfile FROM python:3.11-slim WORKDIR /app # 安装系统依赖 RUN apt-get update && apt-get install -y \ gcc \ postgresql-client \ && rm -rf /var/lib/apt/lists/* # 安装Python依赖 COPY requirements.txt . RUN pip install –no-cache-dir -r requirements.txt # 复制代码 COPY app/ ./app/ COPY core/ ./core/ COPY services/ ./services/ COPY models/ ./models/ # 非root用户运行 RUN useradd -m -u 1000 appuser && chown -R appuser:appuser /app USER appuser EXPOSE 8000 CMD [“uvicorn”, “app.main:app”, “–host”, “0.0.0.0”, “–port”, “8000”, “–workers”, “4”]
监控与告警配置
# core/monitoring/metrics.py from prometheus_client import Counter, Histogram, Gauge, Info import time # 定义指标 REQUEST_COUNT = Counter( ‘http_requests_total’, ‘Total HTTP requests’, [‘method’, ‘endpoint’, ‘status’] ) REQUEST_LATENCY = Histogram( ‘http_request_duration_seconds’, ‘HTTP request latency’, [‘method’, ‘endpoint’] ) LLM_COST = Counter( ‘llm_cost_dollars_total’, ‘Total LLM API cost’, [‘model’, ‘user_id’] ) LLM_TOKENS = Counter( ‘llm_tokens_total’, ‘Total LLM tokens used’, [‘model’, ‘type’] # type: input/output ) CACHE_HIT = Counter( ‘cache_hits_total’, ‘Total cache hits’, [‘cache_type’] ) SECURITY_EVENTS = Counter( ‘security_events_total’, ‘Total security events’, [‘event_type’, ‘severity’] ) ACTIVE_SESSIONS = Gauge( ‘active_sessions’, ‘Number of active sessions’ ) APP_INFO = Info(‘app’, ‘Application information’) class MetricsCollector: “””指标收集器””” @staticmethod def record_request(endpoint: str, latency_ms: int, success: bool): “””记录请求指标””” REQUEST_COUNT.labels( method=’POST’, endpoint=endpoint, status=’success’ if success else ‘error’ ).inc() REQUEST_LATENCY.labels( method=’POST’, endpoint=endpoint ).observe(latency_ms / 1000) @staticmethod def record_llm_usage(model: str, user_id: str, input_tokens: int, output_tokens: int, cost: float): “””记录LLM使用情况””” LLM_COST.labels(model=model, user_id=user_id).inc(cost) LLM_TOKENS.labels(model=model, type=’input’).inc(input_tokens) LLM_TOKENS.labels(model=model, type=’output’).inc(output_tokens) @staticmethod def record_cache_hit(cache_type: str = ‘llm’): “””记录缓存命中””” CACHE_HIT.labels(cache_type=cache_type).inc() @staticmethod def record_security_event(event_type: str, severity: str): “””记录安全事件””” SECURITY_EVENTS.labels(event_type=event_type, severity=severity).inc() @staticmethod def record_error(endpoint: str, error_type: str): “””记录错误””” REQUEST_COUNT.labels( method=’POST’, endpoint=endpoint, status=’error’ ).inc() # 初始化应用信息 APP_INFO.info({‘version’: ‘1.0.0’, ‘name’: ‘Enterprise AI Assistant’})
✍️ 写在最后:完整系列回顾
至此,Agent系列文章正式完结。五篇文章,带你从0到1构建企业级AI助手:
📚 系列文章回顾:
1️⃣ 《谷歌Agent Smith完整解析》 —— 理解Agent原理,激发想象力
2️⃣ 《多Agent协作》 —— 从单兵作战到团队协作,能力倍增
3️⃣ 《性能优化》 —— 降低80%成本,让项目可持续发展
4️⃣ 《安全实战》 —— 防范Prompt注入与数据泄露,守住底线
5️⃣ 《落地实战》 —— 从零搭建企业级系统,真正投入使用
核心收获:
✅ 掌握了Agent系统的完整架构设计
✅ 学会了多Agent协作的实现方法
✅ 了解了成本优化的7大策略
✅ 建立了安全防护体系
✅ 拥有了一套可直接部署的代码
“AI时代已经到来,Agent是连接大模型与业务的桥梁。希望这套教程能帮助你在这个时代抢占先机。”
后续规划:
• 开源代码仓库(GitHub):整理后开放完整代码
• 视频教程:配合代码讲解
• 社区交流:建立技术交流群
如果你有任何问题或建议,欢迎在评论区留言!
👇 完结撒花 👇
5篇文章,你最喜欢哪一篇?你在搭建过程中遇到什么困难?或者,你已经成功部署了自己的Agent系统?
💬 写评论👍 点赞⭐ 收藏系列
📌 感谢陪伴!如果这个系列对你有帮助,欢迎分享给更多朋友🔔 未来会持续分享AI实战干货,保持关注哦~
— 本文由 织美 原创出品,转载请联系授权 —📅 2026年4月22日