Agent核心前端

适用于 AWS Bedrock AgentCore 的完整管理系统 - 无需访问 AWS 控制台即可创建、管理和监控 AI 代理、知识库（RAG）、MCP 服务器和 A2A 集成。

📋 索引

概览
功能
建筑
技术
先决条件
安装
配置
使用
项目结构
API和集成
分析和监控
开发
附加文档
许可证

🎯 概览

哦 Agent核心前端 这是一个完整的 Web 平台，允许开发人员使用 AWS Bedrock AgentCore 创建、管理和监控 AI 代理，而无需直接与 AWS 控制台交互。该系统为所有 AgentCore 操作提供了直观和现代化的界面，包括：

代理人管理创建、配置和调用多框架代理（LangGraph、CrewAI、Strands）
知识库（RAG）文档上传、自动索引和增强生成检索
MCP服务器注册和集成模型上下文协议服务器
A2A（代理人对代理人）导入和外部代理之间的通信
分析完成跟踪互动、成本、NPS、反馈和绩效指标
内存系统对话记录存储（短期和长期）

✨ 功能

🤖 代理人管理

✅ 通过 AWS Bedrock Agent API 创建代理
✅ 支持多语言框架（LangGraph、CrewAI、Strands、自定义）
✅ 自动代理准备（PrepareAgent）
✅ 自动创建别名
✅ 通过响应流调用代理
✅ 与 AWS 上的现有代理同步
✅ 具有详细指标的单个代理仪表板

📚 知识库和RAG

✅ 使用矢量商店（OpenSearch，Pinecone等）创建知识库
✅ 上传S3的文档格式（PDF、TXT、docx）
✅ 自动创建数据源
✅ 进度监控的摄入工作
✅ Retrieve：文档中的语义搜索
✅ 检索和生成：RAG完全引用
✅ 索引文档管理

🔐 AWS 凭据

✅ AWS 凭据安全注册
✅ Criptografia AES-256解密访问密钥
✅ 通过 STS GetCallerIdentity 验证凭据
✅ 每个用户支持多个凭据
✅ 表单凭据选择器
✅ 用于验证的“ 测试连接” 按钮

📊 分析和监控

✅ 自动跟踪所有互动
✅ 每个令牌的实时成本计算
✅ 趋势图表（成本、延迟、数量）
✅ 综合指标仪表板
✅ CSV 报告导出
✅ 高级过滤器（按代理、框架、状态）
✅ 交互后反馈 Widget
✅ NPS系统

💰 预算和警报

✅ 按代理设置预算警报
✅ 实时通知（投票30s）
✅ 超出预算时自动暂停代理
✅ 多期（每日、每周、每月）
✅ 历史触发警报

🧠 内存系统

✅ 对话记录存储
✅ 短期记忆（会话）
✅ 长期记忆体（资料库）
✅ 每次交互时自动保存
✅ 继续聊天的 sessionId 支持

🔌 集成

✅ MCP 服务器：注册和测试连接
✅ A2A 服务器：导入外部代理
✅ Agent-to-Agent通信
✅ 通过 StoragePut 将文件上传到 S3

🏗️ 建筑

该系统采用现代三层架构：

┌─────────────────────────────────────────────────────────────┐
│                    FRONTEND (React 19)                      │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐     │
│  │  Dashboard   │  │    Agents    │  │  Knowledge   │     │
│  │   Analytics  │  │  Credentials │  │     Bases    │     │
│  └──────────────┘  └──────────────┘  └──────────────┘     │
│                         ↓ tRPC                              │
└─────────────────────────────────────────────────────────────┘
                          ↓
┌─────────────────────────────────────────────────────────────┐
│              BACKEND (Node.js + Express)                    │
│  ┌──────────────────────────────────────────────────────┐  │
│  │              tRPC Routers (Type-Safe)                │  │
│  │  agents | credentials | knowledge | analytics | ...  │  │
│  └──────────────────────────────────────────────────────┘  │
│                         ↓                                   │
│  ┌──────────────────────────────────────────────────────┐  │
│  │           Python Bridge (child_process)              │  │
│  │         Node.js ↔ Python Communication               │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                          ↓
┌─────────────────────────────────────────────────────────────┐
│            PYTHON SERVICES (Boto3 + AWS SDK)                │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  bedrock_agent_service.py                            │  │
│  │  bedrock_runtime_service.py                          │  │
│  │  knowledge_base_service.py                           │  │
│  │  config.py (AWS clients + test_credentials)          │  │
│  └──────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘
                          ↓
┌─────────────────────────────────────────────────────────────┐
│                  AWS BEDROCK AGENTCORE                      │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐     │
│  │   Agents     │  │   Knowledge  │  │   Runtime    │     │
│  │     API      │  │   Bases API  │  │     API      │     │
│  └──────────────┘  └──────────────┘  └──────────────┘     │
└─────────────────────────────────────────────────────────────┘

数据流

前端用户与 React 界面交互
瞬时受体电位通道 → Chamadas类型安全做前端对后端
后端 Node.js路由器处理请求
巨蟒桥 通过JSON与Python服务进行通信
Boto3 Python 服务调用 AWS API
AWS代理核心 → Bedrock AgentCore中的实际操作

🛠️ 技术

前端

反应19 -框架UI
TypeScript 5 -类型安全
顺风CSS 4 -造型
shadcn/ui -UI组件
tRPC 11 -类型安全的API客户端
Recharts - 图表和视图
React Dropzone - 文件上传
沃特 - 路由
松纳 -吐司通知

后端

Node.js 22 -运行时间
快递4 -Web框架
tRPC 11 -类型安全的API服务器
淋ORM -数据库ORM
MySQL/TiDB -数据库
SuperJSON 数据序列化
加密 - 凭据加密

Python/AWS

Python 3.11 -运行时Python
Boto3 1.40 -AWS SDK
AWS基岩代理 -代理人管理
AWS基岩运行时 调用代理人
AWS S3 - 文件存储
AWS-STS - 凭据验证

开发运维

维特 -构建工具
pnpm -包管理器
TSX -TypeScript执行
esbuild -Bundler

📦 先决条件

Node.js >= 22.0.0
python >= 3.11
pnpm >= 9.0.0
MySQL 哦 TiDB （数据库）
AWS 凭据 有权限：

- AmazonBedrockFullAccess - AmazonS3FullAccess - AmazonOpenSearchServiceFullAccess

🚀 安装

1. 克隆仓库

git clone https://github.com/seu-usuario/agentcore_frontend.git
cd agentcore_frontend

2. 安装依赖关系

# Instalar dependências Node.js
pnpm install

# Instalar dependências Python
python3.11 -m pip install boto3

3. 设置环境变量

该系统已预先配置，自动注入环境变量。主要有：

DATABASE_URL MySQL/TiDB连接字符串
JWT_SECRET -秘密饼干de sessão
VITE_APP_TITLE 应用程序标题
CREDENTIAL_ENCRYPTION_KEY - 凭据加密密钥

4. 配置数据库

# Aplicar schema ao banco de dados
pnpm db:push

5. 启动开发服务器

pnpm dev

系统将可在 http://localhost:3000

⚙️ 配置

注册 AWS 凭据

访问 /credentials
点击“添加凭据”
Preencha：

- 凭据名称 - 访问密钥ID - 秘密访问密钥 - AWS 区域

点击“测试”进行验证
保存凭证

创建第一个代理

访问 /agents/new
选择 AWS 凭据
配置：

- 代理名称 - 描述 - 模特（克劳德等） - 框架（LangGraph、CrewAI等） - 角色ARN

点击“创建代理”

系统自动：

在 AWS Bedrock 中创建代理
准备代理（PrepareAgent）
创建默认别名
保存到数据库

创建知识库

访问 /knowledge/new
选择 AWS 凭据
配置：

- 名称：KB - 描述 - 嵌入模型 - 矢量存储（OpenSearch等） - 角色ARN

点击“创建知识库”

上传文件

访问 /knowledge/:id/documents
拖放文件或单击以选择
拼写支持：PDF、TXT、docx
最大文件大小：每个文件 10MB
系统自动：

- FAZ已上传至S3 - Cria数据源 - Inicia摄入工作 - 监视进度

📖 使用

调用代理

// Via tRPC no frontend
const invokeMutation = trpc.agents.invoke.useMutation();

invokeMutation.mutate({
  agentId: 1,
  input: "Olá, como você pode me ajudar?",
  sessionId: "session-123", // Opcional: para continuar conversa
});

检索（RAG）

// Buscar documentos relevantes
const retrieveMutation = trpc.knowledge.retrieve.useMutation();

retrieveMutation.mutate({
  knowledgeBaseId: 1,
  query: "Como configurar agentes?",
  maxResults: 5,
});

检索和生成（RAG Completo）

// Buscar + Gerar resposta
const ragMutation = trpc.knowledge.retrieveAndGenerate.useMutation();

ragMutation.mutate({
  knowledgeBaseId: 1,
  input: "Explique como funciona o RAG",
});

📁 项目结构

agentcore_frontend/
├── client/                    # Frontend React
│   ├── public/               # Assets estáticos
│   └── src/
│       ├── components/       # Componentes reutilizáveis
│       │   ├── ui/          # shadcn/ui components
│       │   ├── DashboardLayout.tsx
│       │   ├── FeedbackWidget.tsx
│       │   └── Map.tsx
│       ├── pages/           # Páginas da aplicação
│       │   ├── Home.tsx
│       │   ├── Agents.tsx
│       │   ├── AgentForm.tsx
│       │   ├── AgentTest.tsx
│       │   ├── AgentDashboard.tsx
│       │   ├── KnowledgeBases.tsx
│       │   ├── KnowledgeBaseForm.tsx
│       │   ├── KnowledgeDocuments.tsx
│       │   ├── Credentials.tsx
│       │   ├── Analytics.tsx
│       │   ├── BudgetAlerts.tsx
│       │   ├── MCPServers.tsx
│       │   ├── A2AServers.tsx
│       │   └── Documentation.tsx
│       ├── hooks/           # Custom hooks
│       │   └── useBudgetAlerts.ts
│       ├── lib/
│       │   └── trpc.ts      # tRPC client
│       ├── App.tsx          # Rotas principais
│       ├── main.tsx         # Entry point
│       └── index.css        # Estilos globais
├── server/                   # Backend Node.js
│   ├── _core/               # Core framework
│   │   ├── index.ts         # Express server
│   │   ├── trpc.ts          # tRPC setup
│   │   ├── context.ts       # Request context
│   │   ├── cookies.ts       # Session management
│   │   ├── llm.ts           # LLM integration
│   │   └── oauth.ts         # OAuth flow
│   ├── python/              # Python services
│   │   ├── __init__.py
│   │   ├── config.py        # AWS clients + test_credentials
│   │   ├── utils.py
│   │   ├── bedrock_agent_service.py
│   │   ├── bedrock_runtime_service.py
│   │   └── knowledge_base_service.py
│   ├── services/            # Node.js services
│   │   ├── python-bridge.ts # Python communication
│   │   ├── analytics-tracker.ts
│   │   └── report-exporter.ts
│   ├── routers/             # tRPC routers
│   │   ├── agents.ts
│   │   ├── credentials.ts
│   │   ├── knowledge.ts
│   │   ├── mcp.ts
│   │   ├── a2a.ts
│   │   ├── analytics.ts
│   │   └── budget.ts
│   ├── db.ts                # Database helpers
│   └── routers.ts           # Router aggregation
├── drizzle/                 # Database schema
│   └── schema.ts            # 22 tabelas
├── shared/                  # Shared types
│   └── const.ts
├── ARCHITECTURE.md          # Arquitetura detalhada
├── INTEGRATION_ANALYSIS.md  # Análise de integração
├── ANALYTICS_SCHEMA.md      # Schema de analytics
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

🔌 API和集成

AWS基岩代理API

该系统与以下 AWS Bedrock AgentCore API 集成：

控制面（基岩介质）

CreateAgent 创建代理
UpdateAgent 更新代理
DeleteAgent 删除代理
GetAgent 获取代理人的详细信息
ListAgents -列出代理
PrepareAgent -准备使用的制剂
CreateAgentAlias - 创建别名
ListAgentAliases -Listar别名
CreateKnowledgeBase 创建知识库
DeleteKnowledgeBase -Deletar知识库
GetKnowledgeBase 从 KB 获取详细信息
ListKnowledgeBases -列表KB
CreateDataSource - 创建数据源
StartIngestionJob - 开始索引
GetIngestionJob 索引状态

数据平面（基岩代理运行时）

InvokeAgent 调用代理
Retrieve -搜索文档
RetrieveAndGenerate -全拉格

STS（安全令牌服务）

GetCallerIdentity - 验证凭据

tRPC端点

所有端点都是类型安全且自动记录的：

// Agentes
trpc.agents.list.useQuery()
trpc.agents.create.useMutation()
trpc.agents.update.useMutation()
trpc.agents.delete.useMutation()
trpc.agents.sync.useMutation()
trpc.agents.invoke.useMutation()

// Credenciais
trpc.credentials.list.useQuery()
trpc.credentials.create.useMutation()
trpc.credentials.test.useMutation()
trpc.credentials.delete.useMutation()

// Knowledge Bases
trpc.knowledge.list.useQuery()
trpc.knowledge.create.useMutation()
trpc.knowledge.delete.useMutation()
trpc.knowledge.retrieve.useMutation()
trpc.knowledge.retrieveAndGenerate.useMutation()
trpc.knowledge.uploadDocument.useMutation()

// Analytics
trpc.analytics.getDashboard.useQuery()
trpc.analytics.getCostTrends.useQuery()
trpc.analytics.getLatencyTrends.useQuery()
trpc.analytics.getInteractionTrends.useQuery()
trpc.analytics.getAgentMetrics.useQuery()
trpc.analytics.exportCSV.useMutation()

// Budget
trpc.budget.list.useQuery()
trpc.budget.create.useMutation()
trpc.budget.update.useMutation()
trpc.budget.delete.useMutation()
trpc.budget.checkAlerts.useMutation()

📊 分析和监控

分析表

该系统有7个专门用于分析的表：

代理交互 与代理商的所有互动
代理_反馈 - 用户反馈
nps分数 -NPS得分
代理成本 每个代理人的费用
token_usage -使用代币
代理信息 -性能度量
代理错误 - 错误日志

自动跟踪

每次自动调用代理：

记录交互在 agent_interactions
根据代币计算成本
更新延迟指标
保存对话历史
预算警报验证

成本计算

系统使用 AWS Bedrock 模型的定价表：

const BEDROCK_PRICING = {
  'anthropic.claude-3-sonnet': {
    inputTokens: 0.003 / 1000,   // $0.003 per 1K tokens
    outputTokens: 0.015 / 1000,  // $0.015 per 1K tokens
  },
  // ... outros modelos
};

成本实时计算：

custo = (inputTokens * preçoInput) + (outputTokens * preçoOutput)

🔧 开发

可用的命令

# Desenvolvimento
pnpm dev              # Inicia dev server

# Build
pnpm build            # Build para produção
pnpm preview          # Preview do build

# Database
pnpm db:push          # Aplicar schema ao banco
pnpm db:studio        # Abrir Drizzle Studio

# Testes
pnpm test             # Rodar testes (se configurado)

# Linting
pnpm lint             # Lint do código

添加新表格

编辑 drizzle/schema.ts:

export const minhaTabela = mysqlTable("minha_tabela", {
  id: int("id").autoincrement().primaryKey(),
  nome: varchar("nome", { length: 255 }).notNull(),
  createdAt: timestamp("createdAt").defaultNow().notNull(),
});

申请银行：

pnpm db:push

添加新 tRPC 路由器

创建 server/routers/meuRouter.ts:

import { z } from "zod";
import { protectedProcedure, router } from "../_core/trpc";

export const meuRouter = router({
  list: protectedProcedure.query(async ({ ctx }) => {
    // Lógica aqui
  }),
});

import { meuRouter } from "./routers/meuRouter";

export const appRouter = router({
  // ... outros routers
  meu: meuRouter,
});

不使用前端：

const { data } = trpc.meu.list.useQuery();

添加新页面

创建 client/src/pages/MinhaPage.tsx:

import DashboardLayout from "@/components/DashboardLayout";

export default function MinhaPage() {
  return (
    
      
Minha Página

    
  );
}

添加路线到 client/src/App.tsx:

import MinhaPage from "./pages/MinhaPage";

📚 附加文档

建筑.md 详细的系统架构
集成_分析.md 完整的整合分析
分析_SCHEMA.md -模式去分析
/docs 系统中的交互式文档

🤝 贡献

欢迎捐款！请：

分叉工程
为您的功能创建一个分支（git checkout -b feature/MinhaFeature)
提交您的更改（git commit -m 'Adiciona MinhaFeature')
推动一个分支(git push origin feature/MinhaFeature)
Abra um Pull请求

📄 许可证

这个项目是MIT许可的。查看文件许可证了解更多详情。

🙏 致谢

AWS基岩代理核心团队
tRPC 社区
shadcn/ui
所有贡献者

📞 支持

有关问题和支持：

打开一个问题
通过联系我们电子邮件

______________________________________________________________________

开发于❤️ 简化AI代理开发

Agentcore Frontend

快速接入

详细介绍

Agent核心前端

📋 索引

🎯 概览

✨ 功能

🤖 代理人管理

📚 知识库和RAG

🔐 AWS 凭据

📊 分析和监控

💰 预算 和 警报

🧠 内存系统

🔌 集成

🏗️ 建筑

数据流

🛠️ 技术

前端

后端

Python/AWS

开发运维

📦 先决条件

🚀 安装

1. 克隆仓库

2. 安装依赖关系

3. 设置环境变量

4. 配置数据库

5. 启动开发服务器

⚙️ 配置

注册 AWS 凭据

创建第一个代理

创建知识库

上传文件

📖 使用

调用代理

检索（RAG）

检索和生成（RAG Completo）

📁 项目结构

🔌 API和集成

AWS基岩代理API

控制面（基岩介质）

数据平面（基岩代理运行时）

STS（安全令牌服务）

tRPC端点

📊 分析和监控

分析表

自动跟踪

成本计算

🔧 开发

可用的命令

添加新表格

添加新 tRPC 路由器

添加新页面

📚 附加文档

🤝 贡献

📄 许可证

🙏 致谢

📞 支持

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

💰 预算和警报