🎨

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.

Syllabus

📦 Appendix

📋 Recommended learning materials and development tools

📋 Reference projects and open source code repository links

Day 1: Generative UI Theory and Ecology

Comprehensive Understanding from Concept to Tools

🎨

📚 Today's 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

💻

📚 Today's 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

📦 Appendix

📋Recommended learning materials and development tools

📋Reference projects and open source code repository links