Try Skill Builder

Try Skill Builder

Have a friendly voice chat about how you're using AI, get feedback on your skills, and find out what to learn or build next.
Take Me There

Quick Guide & Tips

💻   Accessing Utils File and Helper Functions

In each notebook on the top menu:

1:   Click on "File"

2:   Then, click on "Open"

You will be able to see all the notebook files for the lesson, including any helper functions used in the notebook on the left sidebar. See the following image for the steps above.

🔄   Reset User Workspace

If you need to reset your workspace to its original state, follow these quick steps:

1:   Access the Menu: Look for the three-dot menu (⋮) in the top-right corner of the notebook toolbar.

2:   Restore Original Version: Click on "Restore Original Version" from the dropdown menu.

For more detailed instructions, please visit our Reset Workspace Guide.

💻   Downloading Notebooks

In each notebook on the top menu:

1:   Click on "File"

2:   Then, click on "Download as"

3:   Then, click on "Notebook (.ipynb)"

💻   Uploading Your Files

After following the steps shown in the previous section ("File" => "Open"), then click on "Upload" button to upload your files.

📗   See Your Progress

Once you enroll in this course—or any other short course on the DeepLearning.AI platform—and open it, you can click on 'My Learning' at the top right corner of the desktop view. There, you will be able to see all the short courses you have enrolled in and your progress in each one.

Additionally, your progress in each short course is displayed at the bottom-left corner of the learning page for each course (desktop view).

📱   Features to Use

🎞   Adjust Video Speed: Click on the gear icon (⚙) on the video and then from the Speed option, choose your desired video speed.

🗣   Captions (English and Spanish): Click on the gear icon (⚙) on the video and then from the Captions option, choose to see the captions either in English or Spanish.

🔅   Video Quality: If you do not have access to high-speed internet, click on the gear icon (⚙) on the video and then from Quality, choose the quality that works the best for your Internet speed.

🖥   Picture in Picture (PiP): This feature allows you to continue watching the video when you switch to another browser tab or window. Click on the small rectangle shape on the video to go to PiP mode.

√   Hide and Unhide Lesson Navigation Menu: If you do not have a large screen, you may click on the small hamburger icon beside the title of the course to hide the left-side navigation menu. You can then unhide it by clicking on the same icon again.

🧑   Efficient Learning Tips

The following tips can help you have an efficient learning experience with this short course and other courses.

🧑   Create a Dedicated Study Space: Establish a quiet, organized workspace free from distractions. A dedicated learning environment can significantly improve concentration and overall learning efficiency.

📅   Develop a Consistent Learning Schedule: Consistency is key to learning. Set out specific times in your day for study and make it a routine. Consistent study times help build a habit and improve information retention.

Tip: Set a recurring event and reminder in your calendar, with clear action items, to get regular notifications about your study plans and goals.

☕   Take Regular Breaks: Include short breaks in your study sessions. The Pomodoro Technique, which involves studying for 25 minutes followed by a 5-minute break, can be particularly effective.

💬   Engage with the Community: Participate in forums, discussions, and group activities. Engaging with peers can provide additional insights, create a sense of community, and make learning more enjoyable.

✍   Practice Active Learning: Don't just read or run notebooks or watch the material. Engage actively by taking notes, summarizing what you learn, teaching the concept to someone else, or applying the knowledge in your practical projects.

📚   Enroll in Other Short Courses

Keep learning by enrolling in other short courses. We add new short courses regularly. Visit DeepLearning.AI Short Courses page to see our latest courses and begin learning new topics. 👇

👉👉 🔗 DeepLearning.AI – All Short Courses [+]

🙂   Let Us Know What You Think

Your feedback helps us know what you liked and didn't like about the course. We read all your feedback and use them to improve this course and future courses. Please submit your feedback by clicking on "Course Feedback" option at the bottom of the lessons list menu (desktop view).

Also, you are more than welcome to join our community 👉👉 🔗 DeepLearning.AI Forum

Sign in

Or, sign in with your email
Email
Password
Forgot password?
Don't have an account? Create account
By signing up, you agree to our Terms Of Use and Privacy Policy

Create Your Account

Or, sign up with your email
Email Address

Already have an account? Sign in here!

By signing up, you agree to our Terms Of Use and Privacy Policy

Choose Your Plan

Planning for more users?

Change Your Plan

Your subscription plan will change at the end of your current billing period. You'll continue to have access to your current plan until then.

Learn More

Welcome back!

Hi ,

We'd like to know you better so we can create more relevant courses. What do you do for work?

Join Team Success

You have successfully joined undefined

You now have access to all Pro features. Click below to start learning!

Session Expired

Session expired — please return to Cornerstone to restart the session and complete the course.

DeepLearning.AI
Short CourseBeginner1h28m

Build Interactive Agents with Generative UI

Instructor: Atai Barkai

CopilotKit logo

Earn an accomplishment with PRO

Build Interactive Agents with Generative UI

  • Beginner
  • 1h28m
  • 8 Video Lessons
  • 5 Code Examples
  • 1 Graded AssignmentPRO
  • Earn an accomplishment withPRO
  • Instructor: Atai Barkai
  • CopilotKit
    CopilotKit
  • Learn more about Membership PRO Plan

What you'll learn

  • Understand the three approaches to building agent interfaces on the Generative UI Spectrum: Controlled, Declarative, and Open-Ended Gen UI, and when to use each.

  • Build a fullstack agent app by connecting a LangChain agent to a React frontend using CopilotKit and the AG-UI protocol, with agents that render charts, cards, and forms on demand.

  • Use MCP Apps to connect your agent to third-party applications, then go beyond the chat window and build products where the agent and user work on the same data, side by side.

About this course

Introducing Build Interactive Agents with Generative UI, taught by Atai Barkai, co-founder of CopilotKit, the team behind the AG-UI protocol.

Most agents today still talk to users in plain text. But users don’t just want to read a response, they want something to see and act on. This course teaches you to build that interactivity: a fullstack agent interface where the agent renders charts, forms, whiteboards, and interactive components on demand.

You’ll work across the full Generative UI Spectrum, from hand-crafted components you control precisely, to declarative layouts the agent assembles from building blocks, all the way to open-ended experiences powered by MCP Apps. You’ll finish by building a canvas application where the agent works alongside the user on shared data. By the end, you’ll have a production-ready fullstack agent built on CopilotKit and AG-UI, an open protocol with first-party integrations across LangGraph, Google, AWS, Microsoft, and more.

In detail, you’ll:

  • Learn the three pillars of the Generative UI Spectrum and when to use each.
  • Connect a LangChain Deep Agent and a Google ADK Agent to a React frontend using CopilotKit and AG-UI.
  • Build Controlled Generative UI: define custom components like pie charts and flight cards that the agent renders on demand.
  • Use A2UI, an open spec co-developed with Google, to let your agent assemble layouts from a catalog of reusable building blocks.
  • Connect your agent to MCP Apps and explore fully open-ended interfaces the agent creates from scratch.
  • Build a canvas app where the agent and frontend share live state, beyond the chat window.

Throughout the course, you’ll build on the open-source AG-UI protocol — so these skills travel with you across the agentic ecosystem.

Who should join?

Developers building AI agents who want to create richer, more interactive user experiences. Comfort with React and Python is recommended, along with basic familiarity with AI agents or LLM application development. Useful for fullstack developers, AI engineers, and frontend-leaning builders shipping agent features into production apps.

Course Outline

8 Lessons・5 Code Examples

Instructor

Atai Barkai

Atai Barkai

Course access is free for a limited time during the DeepLearning.AI learning platform beta!

Want to learn more about Generative AI?

Keep learning with updates on curated AI news, courses, and events, as well as Andrew Ng’s thoughts from DeepLearning.AI!