下一代人工智能协议训练营
KVGAI x BITS皮拉尼
2026年，每个人工智能开发人员都需要的3种协议，你将在一个晚上学会所有这些协议。
*一个实践训练营，涵盖三种尖端的人工智能协议，以及功能齐全、可在本地运行的项目。* *每种协议都附带了实时演示、文档、代码片段和分步设置指南。*
______________________________________________________________________
你将学到什么
主控程序
模型上下文协议
通过标准化协议将AI模型连接到外部工具、数据源和服务
A2A
代理人对代理人
使多个AI代理能够相互通信、协作和委派任务
A2UI
代理到UI
AI基于自然语言从JSON模式动态生成用户界面
______________________________________________________________________
项目演示
1.MCP-算法可视化工具
使用AI驱动的算法可视化 真实模型上下文协议
- MCP服务器公开了3个工具：
list_algorithms,get_algorithm_info,visualize_algorithm - 后端充当 MCP客户端，通过连接 stdio传输
- Groq LLM（Llama 3.1 8B）理解自然语言并调用MCP工具
- 交互式 逐步可视化 22+算法
- 带速度调节的播放/暂停/步进控制
类别： 排序|搜索|DP|数组|树|图
User: "Show me bubble sort"
|
[Groq LLM] -- understands intent
|
[MCP Client] -- callTool()
|
[MCP Server] -- visualize_algorithm
|
[AlgoCanvas] -- animated bars技术栈：
2.A2A-多代理系统
两个AI代理 （阿特拉斯密码） 通过Agent到Agent协议进行通信
- 阿特拉斯 （总代理）-处理一般查询，决定何时委托
- 密码 （专业代理）-加密、解密、哈希、编码
- 实时 双向通信 代理之间的通信
- 显示A2A协议流程的可视化工作流程图
- 基于查询分析的自动委托
能力： AES加密|SHA-256哈希|Base64|凯撒密码
User: "Encrypt hello with AES"
|
[Atlas Agent] -- analyzes query
|
"Crypto task detected!"
|
[WebSocket] -- delegates
|
[Cipher Agent] -- processes
|
[Combined Response] -- back to user技术栈：
3.A2UI-动态预订表格
AI代理 生成动态UI 从自然语言
- 用户用简单的英语描述要预订的内容
- AI生成 JSON 模式 定义表单字段和验证
- 前端 动态渲染 模式中的表单
- 8级管道：
IDLE->THINKING->UI_GENERATED->FILLING->CONFIRMED - 支持：文本、电子邮件、电话、日期、时间、号码、选择、文本区域
示例： 酒店预订|航班预订|餐厅|医生预约
User: "Book a hotel room"
|
[Groq LLM] -- generates schema
|
{
"title": "Hotel Booking",
"fields": [
{ "type": "text", "label": "Name" },
{ "type": "date", "label": "Check-in" },
{ "type": "select", "label": "Room" }
]
}
|
[React Form] -- renders dynamically技术栈：
______________________________________________________________________
文件夹结构
KVGAI_Tech_Bits_Bootcamp/
|
|--- MCP/ # Model Context Protocol
| |--- mcp-server/ # MCP Server (3 tools, 22+ algorithms)
| |--- backend/ # Express + MCP Client + Groq LLM
| |--- frontend/ # React visualization app
| |--- documentation.md # Detailed docs with code snippets
| |--- instructions.md # Step-by-step setup guide
| |--- README.md # Project overview
|
|--- A2A/ # Agent-to-Agent Protocol
| |--- backend/ # Express + WebSocket + Dual Agents
| |--- frontend/ # Chat UI with delegation visualization
| |--- documentation.md # Detailed docs with code snippets
| |--- instructions.md # Step-by-step setup guide
| |--- README.md # Project overview
|
|--- A2UI/ # Agent-to-UI Protocol
| |--- backend/ # Express + Groq LLM
| |--- frontend/ # React dynamic form renderer
| |--- documentation.md # Detailed docs with code snippets
| |--- instructions.md # Step-by-step setup guide
| |--- README.md # Project overview
|
|--- README.md # You are here______________________________________________________________________
每个文件夹里面有什么
Resource Description
Presentation slides for the bootcamp session
Complete project documentation with architecture diagrams, code snippets, and explanations
Step-by-step guide to install, configure, and run the project locally with troubleshooting
Quick project overview with tech stack and setup commands
Fully functional backend + frontend code ready to run
______________________________________________________________________
快速开始
先决条件
获取您的免费Groq API密钥 console.groq.com
MCP（算法可视化器）
cd MCP/backend && npm install && npm run dev
# Backend + MCP Server -> port 3006
cd MCP/frontend && npm install && npm run dev
# Frontend -> port 5173A2A（多代理系统）
cd A2A/backend && npm install && npm start
# Backend -> port 8000
# Open A2A/frontend/index.html in browserA2UI（动态表单）
cd A2UI/backend && npm install && npm run dev
# Backend -> port 3004
cd A2UI/frontend && npm install && npm run dev
# Frontend -> port 5173重要提示： 添加您的GROQ_API_KEY在每个项目的backend/.env文件运行前。
______________________________________________________________________
体系结构比较
Protocol Flow
User -> React Frontend -> Express Backend (MCP Client) -> MCP Server (stdio) -> Algorithm Tools -> Visualization
User -> Chat UI -> Atlas Agent -> [WebSocket Delegation] -> Cipher Agent -> Combined Response
User -> Chat UI -> Groq LLM -> JSON Schema -> Dynamic React Form -> Booking Confirmation______________________________________________________________________
涵盖的关键概念
AI协议
AI系统如何与工具、代理和UI通信
LLM集成
通过Groq使用Llama模型进行快速推理
全栈开发
使用React 19和Express 5构建现代web应用程序
实时通信
代理到代理和客户端-服务器通信
______________________________________________________________________
由KVGAI组织的BITS Pilani技术比特训练营
