文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >一人即军团：多 Agent + React 19 + Elysia + DevOps 实战指南

一人即军团：多 Agent + React 19 + Elysia + DevOps 实战指南

原创
作者头像
用户12502882
发布于 2026-07-04 18:12:17
发布于 2026-07-04 18:12:17
1210
举报

一人即军团：多 Agent + React 19 + Elysia + DevOps 实战指南

在 AI 时代，单人全栈开发的边界正在被重新定义。本文将带你从一个空仓库出发，构建一个由多 Agent 协作驱动的全栈应用——前端用 React 19，后端用 Bun + Elysia，再用一套轻量级 DevOps 流水线完成交付。

写在前面

过去我们谈“全栈”，指的是一个人能写前端、后端、数据库和部署脚本。今天，当大模型以 Agent 形态介入开发流程后，“全栈”的内涵发生了质变——你不再只是写代码的人，更是 Agent 系统的架构师与协调者。

本文的实战目标很具体：用一个人、一台电脑、一个周末，交付一个可运行的 AI 原生全栈应用。

技术选型上，我们不搞大杂烩，而是精挑一套“少而强”的现代栈：

  • 前端：React 19（Actions + useOptimistic + Server Components 全量启用）
  • 后端：Bun 运行时 + Elysia 框架（类型安全、性能极致）
  • AI 层：多 Agent 协作（Orchestrator + Worker Agents）
  • DevOps：Docker + GitHub Actions + VPS 一键部署

读完本文，你将收获：

  1. 一套可复用的多 Agent 协作架构模板
  2. React 19 与服务端 Actions 的最佳实践
  3. Elysia + Bun 的高性能后端设计
  4. 单人 DevOps 的“够用就好”策略

第一部分：架构总览 —— 不先画图，就是耍流氓

在写任何代码之前，我们先明确系统的边界与交互方式。

1.1 系统架构图（逻辑视角）

代码语言：javascript
复制
┌─────────────────────────────────────────────────────────────┐
│                        前端层 (React 19)                    │
│  ┌──────────┐  ┌──────────┐  ┌──────────────────────────┐ │
│  │   UI 组件  │←→│  Actions │←→│ useOptimistic / useForm │ │
│  └──────────┘  └──────────┘  └──────────────────────────┘ │
└──────────────────────────┬──────────────────────────────────┘
                           │ HTTP (REST + SSE)
┌──────────────────────────▼──────────────────────────────────┐
│                       API 网关 (Elysia)                      │
│  ┌────────────────────────────────────────────────────────┐ │
│  │  /api/chat    →  Agent Orchestrator                    │ │
│  │  /api/task    →  任务管理                              │ │
│  │  /api/stream  →  SSE 流式输出                         │ │
│  └────────────────────────────────────────────────────────┘ │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                  多 Agent 协作层 (核心)                      │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐    │
│  │ Orchestrator │─→│  Worker A    │  │  Worker B    │    │
│  │  (调度器)     │  │ (代码生成)   │  │ (代码审查)   │    │
│  └──────────────┘  └──────────────┘  └──────────────┘    │
│           │              │                 │               │
│           └──────────────┴─────────────────┘               │
│                          │                                  │
│                  ┌───────▼───────┐                         │
│                  │  LLM 网关层   │                         │
│                  │ (OpenAI/本地) │                         │
│                  └───────────────┘                         │
└─────────────────────────────────────────────────────────────┘

1.2 数据流（关键路径）

用户在前端输入一个 Prompt → React Action 发起请求 → Elysia 路由转发至 Orchestrator Agent → Orchestrator 拆解任务并分发给多个 Worker Agents → 各 Worker 并行/串行执行 → 结果聚合 → 通过 SSE 流式回传前端 → React 利用 useOptimistic 即时更新 UI。

核心设计原则：

  • 单向数据流：UI → Action → API → Agent → 响应
  • 流式优先：所有 Agent 输出均以流式（Streaming）返回，提升用户体验
  • 类型安全：从数据库到前端，全程 TypeScript 覆盖

第二部分：后端基石 —— Bun + Elysia 的极简主义

为什么选 Bun + Elysia？在 Node.js 生态里，Bun 提供了开箱即用的 TypeScript 支持和惊人的启动速度；Elysia 则是一个“E2E 类型安全”的框架，其 Eden 插件能直接从前端调用后端 API 时获得完整类型提示。

2.1 项目初始化

代码语言：javascript
复制
mkdir ai-fullstack && cd ai-fullstack
bun init -y
bun add elysia @elysiajs/cors @elysiajs/stream
bun add -d @types/bun

2.2 定义类型安全的 Agent 协议

首先，我们定义 Agent 之间的通信契约：

代码语言：javascript
复制
// src/types/agent.ts
export interface AgentMessage {
  id: string;
  role: 'user' | 'assistant' | 'system' | 'worker';
  content: string;
  metadata?: Record<string, any>;
}

export interface AgentTask {
  id: string;
  type: 'code_generation' | 'code_review' | 'summarization' | 'translation';
  input: string;
  context?: Record<string, any>;
}

export interface AgentResult {
  taskId: string;
  output: string;
  confidence?: number;
  tokensUsed?: number;
}

2.3 实现 LLM 网关（支持多 Provider）

为了不绑定单一模型，我们抽象一层 LLM Gateway：

代码语言：javascript
复制
// src/llm/gateway.ts
export interface LLMProvider {
  chat(messages: AgentMessage[], options?: any): AsyncIterable<string>;
}

export class OpenAIGateway implements LLMProvider {
  constructor(private apiKey: string, private model = 'gpt-4o-mini') {}

  async *chat(messages: AgentMessage[]): AsyncIterable<string> {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${this.apiKey}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        model: this.model,
        messages: messages.map(m => ({ role: m.role, content: m.content })),
        stream: true,
      }),
    });

    const reader = response.body?.getReader();
    const decoder = new TextDecoder();

    while (reader) {
      const { done, value } = await reader.read();
      if (done) break;
      const chunk = decoder.decode(value);
      const lines = chunk.split('\n').filter(line => line.startsWith('data: '));
      for (const line of lines) {
        const payload = line.replace('data: ', '');
        if (payload === '[DONE]') continue;
        try {
          const parsed = JSON.parse(payload);
          const content = parsed.choices?.[0]?.delta?.content;
          if (content) yield content;
        } catch (e) {
          // 忽略解析错误
        }
      }
    }
  }
}

2.4 构建 Orchestrator Agent（核心调度器）

Orchestrator 是整个系统的“大脑”。它接收用户请求，决定调用哪些 Worker，并聚合结果。

代码语言：javascript
复制
// src/agents/orchestrator.ts
import { AgentMessage, AgentTask, AgentResult } from '../types/agent';
import { LLMProvider } from '../llm/gateway';

export class OrchestratorAgent {
  constructor(private llm: LLMProvider) {}

  async *execute(userInput: string): AsyncIterable<string> {
    // Step 1: 意图识别与任务拆解
    const tasks = await this.decomposeTask(userInput);
    yield `[系统] 已将任务拆解为 ${tasks.length} 个子任务\n`;

    // Step 2: 分发任务给 Workers（并行执行）
    const workerPromises = tasks.map(task => this.runWorker(task));
    const results = await Promise.all(workerPromises);

    // Step 3: 聚合结果
    const aggregated = results.map(r => r.output).join('\n');
    yield `[系统] 所有子任务已完成，正在聚合...\n`;

    // Step 4: 最终润色
    const finalResponse = await this.polishResult(userInput, aggregated);
    for await (const chunk of finalResponse) {
      yield chunk;
    }
  }

  private async decomposeTask(input: string): Promise<AgentTask[]> {
    // 这里调用 LLM 进行任务拆解，返回结构化任务列表
    // 实际实现中会用 JSON Mode 或 Function Calling
    return [
      { id: crypto.randomUUID(), type: 'code_generation', input: '生成 React 组件' },
      { id: crypto.randomUUID(), type: 'code_review', input: '审查生成的代码' },
    ];
  }

  private async runWorker(task: AgentTask): Promise<AgentResult> {
    // 根据 task.type 路由到不同的 Worker
    // 这里简化处理，直接调用 LLM
    let output = '';
    for await (const chunk of this.llm.chat([
      { id: '1', role: 'system', content: `你是一个${task.type}专家` },
      { id: '2', role: 'user', content: task.input },
    ])) {
      output += chunk;
    }
    return { taskId: task.id, output };
  }

  private async *polishResult(input: string, aggregated: string): AsyncIterable<string> {
    const messages: AgentMessage[] = [
      { id: '1', role: 'system', content: '请将以下内容润色为面向用户的友好回复' },
      { id: '2', role: 'user', content: `原始需求：${input}\n\n聚合结果：${aggregated}` },
    ];
    for await (const chunk of this.llm.chat(messages)) {
      yield chunk;
    }
  }
}

2.5 Elysia 应用入口与 SSE 流式响应

代码语言：javascript
复制
// src/index.ts
import { Elysia, t } from 'elysia';
import { cors } from '@elysiajs/cors';
import { stream } from '@elysiajs/stream';
import { OrchestratorAgent } from './agents/orchestrator';
import { OpenAIGateway } from './llm/gateway';

const app = new Elysia()
  .use(cors())
  .use(stream())
  .decorate('orchestrator', new OrchestratorAgent(new OpenAIGateway(process.env.OPENAI_API_KEY!)))

  .post('/api/chat', async ({ body, orchestrator, set }) => {
    const { message } = body as { message: string };
    set.headers['Content-Type'] = 'text/event-stream';

    return stream(async (stream) => {
      for await (const chunk of orchestrator.execute(message)) {
        stream.send(chunk);
      }
      stream.send('[DONE]');
    });
  }, {
    body: t.Object({ message: t.String() }),
  })

  .get('/health', () => ({ status: 'ok' }))
  .listen(3000);

console.log(`🦊 Elysia running at http://localhost:3000`);

关键点：使用 @elysiajs/stream 插件，我们可以轻松将 Agent 的异步生成器（AsyncGenerator）转换为 SSE 流，前端可以逐字接收。

第三部分：前端体验 —— React 19 的 AI 原生交互

React 19 带来的最大变化是 Actions 和 useOptimistic 的深度融合，这让 AI 应用的交互体验上了一个台阶——用户提交 Prompt 后，UI 可以立即进入“乐观更新”状态，无需等待服务端响应。

3.1 项目初始化（Vite + React 19）

代码语言：javascript
复制
cd frontend
bun create vite . --template react-ts
bun add react@rc react-dom@rc
bun add -D @types/react@npm:types-react@rc

3.2 使用 React 19 Actions 封装 API 调用

React 19 的 useActionState 和 useFormStatus 让表单处理变得异常简洁：

代码语言：javascript
复制
// src/hooks/useChat.ts
import { useActionState, useOptimistic, useRef } from 'react';

type ChatState = {
  messages: Array<{ role: 'user' | 'assistant'; content: string }>;
  isStreaming: boolean;
};

export function useChat() {
  const [state, setState] = useActionState(
    async (prevState: ChatState, formData: FormData) => {
      const userMessage = formData.get('message') as string;
      if (!userMessage) return prevState;

      // 添加用户消息
      const newMessages = [...prevState.messages, { role: 'user', content: userMessage }];
      setState((prev) => ({ ...prev, messages: newMessages, isStreaming: true }));

      // 发起 SSE 请求
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: userMessage }),
      });

      const reader = response.body?.getReader();
      const decoder = new TextDecoder();
      let assistantContent = '';

      while (reader) {
        const { done, value } = await reader.read();
        if (done) break;
        const chunk = decoder.decode(value);
        const lines = chunk.split('\n').filter(line => line.startsWith('data: '));
        for (const line of lines) {
          const payload = line.replace('data: ', '');
          if (payload === '[DONE]') {
            setState((prev) => ({ ...prev, isStreaming: false }));
            continue;
          }
          assistantContent += payload;
          // 实时更新消息列表
          setState((prev) => ({
            ...prev,
            messages: [
              ...prev.messages.slice(0, -1),
              { role: 'assistant', content: assistantContent },
            ],
          }));
        }
      }

      return {
        messages: [...newMessages, { role: 'assistant', content: assistantContent }],
        isStreaming: false,
      };
    },
    { messages: [], isStreaming: false }
  );

  return state;
}

注意：由于 useActionState 目前对异步迭代器的支持有限，上述代码中我们在 Action 内部手动处理 SSE 流，并通过多次 setState 实现逐字渲染。

3.3 配合 useOptimistic 实现即时反馈

在 AI 对话场景中，用户提交消息后，我们希望在服务端响应之前，UI 立即显示“思考中...”状态：

代码语言：javascript
复制
// src/components/ChatBox.tsx
import { useOptimistic, useRef } from 'react';
import { useChat } from '../hooks/useChat';

export function ChatBox() {
  const { messages, isStreaming } = useChat();
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage: string) => [...state, { role: 'user', content: newMessage, isOptimistic: true }]
  );

  const formRef = useRef<HTMLFormElement>(null);

  const handleSubmit = (formData: FormData) => {
    const message = formData.get('message') as string;
    if (!message) return;
    // 乐观更新：立即在 UI 中显示用户消息
    addOptimisticMessage(message);
    // 实际提交由 useActionState 处理
    formRef.current?.submit();
  };

  return (
    <div>
      <div className="messages">
        {optimisticMessages.map((msg, idx) => (
          <div key={idx} className={msg.role}>
            {msg.content}
            {msg.isOptimistic && <span className="spinner">⏳</span>}
          </div>
        ))}
        {isStreaming && <div className="assistant typing">正在思考...</div>}
      </div>
      <form ref={formRef} action={handleSubmit}>
        <input name="message" placeholder="输入你的需求..." />
        <button type="submit" disabled={isStreaming}>发送</button>
      </form>
    </div>
  );
}

3.4 类型安全的前后端通信（Eden 插件）

Elysia 的 Eden 插件可以让前端直接获得后端 API 的类型定义，实现真正的端到端类型安全：

代码语言：javascript
复制
// frontend/src/api/client.ts
import { treaty } from '@elysiajs/eden';
import type { App } from '../../backend/src/index'; // 引用后端类型

export const client = treaty<App>('http://localhost:3000');

// 使用时
const { data, error } = await client.api.chat.post({ message: 'Hello' });

第四部分：多 Agent 深度协作 —— 不只是“调 API”

很多人把“多 Agent”简单理解为多次调用 LLM，但这远远不够。真正有生产力的多 Agent 系统需要具备：

  1. 任务拆解能力（Decomposition）
  2. 依赖管理（Dependency Graph）
  3. 结果验证与回退（Validation & Fallback）

4.1 引入 LangGraph 风格的状态机

我们不需要完整引入 LangChain，而是借鉴其 Graph 思想，实现一个轻量级的 Agent 状态机：

代码语言：javascript
复制
// src/agents/graph.ts
export type AgentNode = {
  id: string;
  execute: (input: any) => Promise<any>;
  dependencies?: string[];
};

export class AgentGraph {
  private nodes: Map<string, AgentNode> = new Map();

  addNode(node: AgentNode) {
    this.nodes.set(node.id, node);
  }

  async execute(entryNodeId: string, initialInput: any): Promise<Map<string, any>> {
    const results = new Map<string, any>();
    const visited = new Set<string>();

    const dfs = async (nodeId: string) => {
      if (visited.has(nodeId)) return;
      visited.add(nodeId);

      const node = this.nodes.get(nodeId);
      if (!node) throw new Error(`Node ${nodeId} not found`);

      // 先执行依赖节点
      if (node.dependencies) {
        for (const depId of node.dependencies) {
          await dfs(depId);
        }
      }

      // 收集依赖的输出作为输入
      const input = node.dependencies
        ? Object.fromEntries(node.dependencies.map(depId => [depId, results.get(depId)]))
        : initialInput;

      const output = await node.execute(input);
      results.set(nodeId, output);
    };

    await dfs(entryNodeId);
    return results;
  }
}

4.2 定义具体的 Worker Agents

代码语言：javascript
复制
// src/agents/workers.ts
export const codeGeneratorWorker: AgentNode = {
  id: 'code_generator',
  dependencies: [],
  async execute(input: { requirement: string }) {
    // 调用 LLM 生成代码
    return { code: '...', language: 'typescript' };
  },
};

export const codeReviewerWorker: AgentNode = {
  id: 'code_reviewer',
  dependencies: ['code_generator'],
  async execute(input: { code_generator: { code: string } }) {
    // 审查生成的代码
    return { feedback: '...', score: 85 };
  },
};

export const testGeneratorWorker: AgentNode = {
  id: 'test_generator',
  dependencies: ['code_generator'],
  async execute(input: { code_generator: { code: string } }) {
    // 生成单元测试
    return { tests: '...' };
  },
};

4.3 Orchestrator 集成 Graph

代码语言：javascript
复制
// src/agents/orchestrator.ts (增强版)
export class OrchestratorAgent {
  private graph = new AgentGraph();

  constructor(private llm: LLMProvider) {
    this.graph.addNode(codeGeneratorWorker);
    this.graph.addNode(codeReviewerWorker);
    this.graph.addNode(testGeneratorWorker);
  }

  async *execute(userInput: string): AsyncIterable<string> {
    // 用 LLM 解析用户意图，决定执行哪个 Graph 入口
    const entryNode = await this.selectEntryNode(userInput);
    const results = await this.graph.execute(entryNode, { requirement: userInput });

    // 格式化输出
    for (const [nodeId, result] of results) {
      yield `[${nodeId}] ${JSON.stringify(result)}\n`;
    }
  }
}

第五部分：DevOps —— 一个人的“足够好”实践

单人全栈最容易踩的坑就是“过度工程化 DevOps”。我的策略是：用最少工具覆盖核心需求。

5.1 Dockerfile（多阶段构建）

代码语言：javascript
复制
# Dockerfile
FROM oven/bun:latest AS builder
WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile
COPY . .
RUN bun run build

FROM oven/bun:latest AS runner
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY package.json ./
ENV NODE_ENV=production
EXPOSE 3000
CMD ["bun", "run", "dist/index.js"]

5.2 Docker Compose（本地编排）

代码语言：javascript
复制
# docker-compose.yml
version: '3.8'
services:
  backend:
    build: .
    ports:
      - "3000:3000"
    environment:
      - OPENAI_API_KEY=${OPENAI_API_KEY}
    restart: unless-stopped

  frontend:
    build: ./frontend
    ports:
      - "5173:5173"
    depends_on:
      - backend
    environment:
      - VITE_API_URL=http://backend:3000

5.3 GitHub Actions 自动化部署

代码语言：javascript
复制
# .github/workflows/deploy.yml
name: Deploy to VPS

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Bun
        uses: oven-sh/setup-bun@v1
        
      - name: Install dependencies
        run: bun install
        
      - name: Run tests
        run: bun test
        
      - name: Build
        run: bun run build
        
      - name: Deploy to VPS
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.VPS_HOST }}
          username: ${{ secrets.VPS_USER }}
          key: ${{ secrets.VPS_SSH_KEY }}
          source: "dist/,package.json,bun.lockb,Dockerfile,docker-compose.yml"
          target: "/app/ai-fullstack"
          
      - name: Restart service
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.VPS_HOST }}
          username: ${{ secrets.VPS_USER }}
          key: ${{ secrets.VPS_SSH_KEY }}
          script: |
            cd /app/ai-fullstack
            docker-compose down
            docker-compose up -d --build

5.4 监控与日志（轻量级）

单人项目不需要 Prometheus + Grafana 的重型组合。用 bun:serve 的内置日志 + 简单的健康检查即可：

代码语言：javascript
复制
// 在 Elysia 中添加健康检查和内存监控
app.get('/metrics', () => ({
  memory: process.memoryUsage(),
  uptime: process.uptime(),
}));

配合 cron 定时任务做简单告警（通过 Telegram Bot 推送）。

第六部分：性能优化与陷阱规避

6.1 Agent 并发控制

当多个 Worker 同时调用 LLM API 时，容易触发速率限制（Rate Limit）。解决方案：引入一个简单的 Semaphore（信号量）：

代码语言：javascript
复制
// src/utils/semaphore.ts
export class Semaphore {
  private permits: number;
  private queue: Array<() => void> = [];

  constructor(permits: number) {
    this.permits = permits;
  }

  async acquire(): Promise<void> {
    if (this.permits > 0) {
      this.permits--;
      return;
    }
    return new Promise(resolve => this.queue.push(resolve));
  }

  release() {
    this.permits++;
    const next = this.queue.shift();
    if (next) next();
  }
}

// 使用：全局限制并发为 5
const llmSemaphore = new Semaphore(5);

6.2 前端流式渲染的防抖

逐字渲染虽然体验好，但如果 LLM 输出过快（比如 100 tokens/s），频繁的 setState 会导致掉帧。解决方案：使用 requestAnimationFrame 节流：

代码语言：javascript
复制
let pendingUpdate = false;
const throttledSetState = (newContent: string) => {
  if (!pendingUpdate) {
    pendingUpdate = true;
    requestAnimationFrame(() => {
      setState(prev => ({ ...prev, content: newContent }));
      pendingUpdate = false;
    });
  }
};

6.3 缓存策略（减少 API 费用）

相同或相似的 Prompt 不应该重复调用 LLM。使用 node-cache 做简单的内容缓存：

代码语言：javascript
复制
import NodeCache from 'node-cache';
const cache = new NodeCache({ stdTTL: 3600 });

// 在 LLM Gateway 中
async *chat(messages: AgentMessage[]): AsyncIterable<string> {
  const cacheKey = JSON.stringify(messages);
  const cached = cache.get<string>(cacheKey);
  if (cached) {
    yield cached;
    return;
  }
  // ... 调用 API，并将完整结果缓存
}

第七部分：测试策略 —— 没有测试，重构就是噩梦

AI 应用的测试不同于传统应用，我们主要关注：

  1. Agent 输出结构的确定性（使用 Zod 验证）
  2. 流式响应的完整性
  3. 降级策略（LLM API 不可用时怎么办）

7.1 单元测试示例（Bun Test）

代码语言：javascript
复制
// test/agents/orchestrator.test.ts
import { describe, expect, test, mock } from 'bun:test';
import { OrchestratorAgent } from '../../src/agents/orchestrator';

describe('OrchestratorAgent', () => {
  test('应该正确拆解任务', async () => {
    const mockLLM = {
      chat: mock(async function* () {
        yield '拆解为 2 个任务';
      }),
    };
    const orchestrator = new OrchestratorAgent(mockLLM as any);
    let result = '';
    for await (const chunk of orchestrator.execute('生成一个登录页面')) {
      result += chunk;
    }
    expect(result).toContain('2 个子任务');
  });
});

7.2 集成测试（端到端）

代码语言：javascript
复制
// test/e2e/chat-flow.test.ts
import { describe, expect, test } from 'bun:test';

describe('E2E Chat Flow', () => {
  test('完整对话流程', async () => {
    const response = await fetch('http://localhost:3000/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: 'Hello' }),
    });
    expect(response.status).toBe(200);
    expect(response.headers.get('content-type')).toContain('text/event-stream');
  });
});

写在最后：单人全栈的“杠杆效应”

在 AI 时代，“一人全栈”不再意味着你要成为所有领域的专家，而是你要懂得：

  1. 用 Agent 放大自己的生产力——把重复性、探索性的工作交给 AI
  2. 用现代工具链压缩认知负担——TypeScript 的全栈覆盖、Elysia 的类型安全、React 19 的 Actions，这些工具让你用更少的代码做更多的事
  3. 用“够用”的 DevOps 策略——不要追求 99.99% 的可用性，先追求 95% 的自动化

本文构建的系统只是一个起点。你可以在它的基础上继续扩展：

  • 接入本地模型（Ollama + Llama 3.1）
  • 增加 RAG 检索能力
  • 引入 Agent 记忆机制（向量数据库）

真正的全栈，不是“什么都会”，而是“知道如何用工具和 AI 把事做成”。

参考资料

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

agent

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

agent
# React 19
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 一人即军团：多 Agent + React 19 + Elysia + DevOps 实战指南
    • 写在前面
    • 第一部分：架构总览 —— 不先画图，就是耍流氓
      • 1.1 系统架构图（逻辑视角）
      • 1.2 数据流（关键路径）
    • 第二部分：后端基石 —— Bun + Elysia 的极简主义
      • 2.1 项目初始化
      • 2.2 定义类型安全的 Agent 协议
      • 2.3 实现 LLM 网关（支持多 Provider）
      • 2.4 构建 Orchestrator Agent（核心调度器）
      • 2.5 Elysia 应用入口与 SSE 流式响应
    • 第三部分：前端体验 —— React 19 的 AI 原生交互
      • 3.1 项目初始化（Vite + React 19）
      • 3.2 使用 React 19 Actions 封装 API 调用
      • 3.3 配合 useOptimistic 实现即时反馈
      • 3.4 类型安全的前后端通信（Eden 插件）
    • 第四部分：多 Agent 深度协作 —— 不只是“调 API”
      • 4.1 引入 LangGraph 风格的状态机
      • 4.2 定义具体的 Worker Agents
      • 4.3 Orchestrator 集成 Graph
    • 第五部分：DevOps —— 一个人的“足够好”实践
      • 5.1 Dockerfile（多阶段构建）
      • 5.2 Docker Compose（本地编排）
      • 5.3 GitHub Actions 自动化部署
      • 5.4 监控与日志（轻量级）
    • 第六部分：性能优化与陷阱规避
      • 6.1 Agent 并发控制
      • 6.2 前端流式渲染的防抖
      • 6.3 缓存策略（减少 API 费用）
    • 第七部分：测试策略 —— 没有测试，重构就是噩梦
      • 7.1 单元测试示例（Bun Test）
      • 7.2 集成测试（端到端）
    • 写在最后：单人全栈的“杠杆效应”
    • 参考资料
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2026 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论