AI导哈

AI协议训练营

一个涵盖三种前沿AI协议（MCP、A2A、A2UI）的实践训练营，提供本地可运行的项目、实时演示和详细文档。

  • by Kartikk-26
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 Kartikk-26/KVGAI-Tech-BITS-Bootcamp

使用说明

下一代人工智能协议训练营

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 5173

A2A（多代理系统）

cd A2A/backend && npm install && npm start
# Backend -> port 8000

# Open A2A/frontend/index.html in browser

A2UI（动态表单）

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技术比特训练营


相关 MCP