Generative UI Development
This course is for developers who have completed the LLM Basic, RAG, and Agent in Depth training, and want to learn the design concepts and implementation methods of generative user interfaces. From theoretical foundations to practical applications, this course helps students master the core skills of how Agents and UIs work together to build intelligent user interaction experiences.
Day 1: Generative UI Theory and Ecology
Comprehensive Understanding from Concept to Tools
Study Content +
1.1 Generative UI Overview
What is Generative UI? Definition and core concepts
Advantages and typical application scenarios of generative UI
How UI and Agent work together: analysis of integration methods combined with LangChain / LangGraph
1.2 Mainstream Ecology and Tools
In-depth analysis of the principles and application scenarios of the AG-UI framework
Introduction and capability overview of CopilotKit
Core design patterns and system architecture of generative UI
1.3 Case Demonstration
Demonstrate the basic capabilities of generative UI based on AG-UI or CopilotKit
Demonstrate a typical Agent + UI interaction process
Learning Objectives +
- โ In-depth understanding of the core concepts and value of generative UI
- โ Master the characteristics and selection criteria of mainstream frameworks
- โ Understand the mechanism of collaboration between Agent and UI
- โ Establish intuitive cognition through case demonstrations
Day 2: Practical and Comprehensive Exercises
Complete Development from Theory to Practice
Study Content +
2.1 Practice Preparation
Development environment setup instructions and dependency configuration
Project structure explanation and course objective import
2.2 Experiment 1: Agent + Weather UI
Implementation: Agent-driven weather query interface
Learning points: front-end and back-end data interaction and Agent request link analysis
2.3 Experiment 2: Agent + Confirmation Button
Implementation: Agent interaction process with confirmation mechanism
Learning points: user experience optimization and interaction security design
2.4 Experiment 3: Agent + Action (Front-end/Back-end)
Implementation: Agent can actively trigger front-end or back-end operations
Learning points: modeling operation process combined with LangChain/LangGraph
2.5 Experiment 4: Agent + Authentication
Implementation: Agent UI integrated with user identity authentication mechanism
Learning points: authentication process design and permission control strategy
2.6 Experiment 5: Agent + Guardrail
Implementation: Integrate Guardrails to improve system security
Learning points: risk identification, content filtering and protection mechanism
2.7 Experiment 6: Agent + Canvas (ChatGPT style)
Implementation: Agent-driven visual Canvas component (such as the multi-step collaborative editing canvas in ChatGPT)
Learning points: complex interaction process modeling, multi-module collaborative UI architecture design
2.8 Summary and Q&A
Review course content and key knowledge points
Answer frequently asked questions
Recommend subsequent learning routes and materials
Learning Objectives +
- โ Master the complete development process of generative UI
- โ Proficient in using various interaction modes of Agent and UI collaboration
- โ Understand key technical points such as authentication and security protection
- โ Possess the practical ability to build complex generative UI applications
- โ Establish a complete generative UI development skill system