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?
MonthlyYearly

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
/
Build Interactive Agents with Generative UI
  • All Courses
DeepLearning.AI
/
Build Interactive Agents with Generative UI
  • All Courses
DeepLearning.AIAll Courses
Build Interactive Agents with Generative UI
DeepLearning.AI
Build Interactive Agents with Generative UI

Course Syllabus

Elevate Your Career with Full Learning Experience

Unlock Plus AI learning and gain exclusive insights from industry leaders

Access exclusive features like graded notebooks and quizzes
Earn unlimited certificates to enhance your resume
Starting at $1 USD/mo after a free trial โ€“ cancel anytime
I'm excited to welcome you to this course on building Interactive Agents with generative UI. Built in partnership with Kilpatrick. Building a capable agent is hard work, but once you've done that, you get a new challenge getting it to users in a way that they enjoy interacting with it, which may require much more than building yet another chat bot interface. Think about what a good agent interface might look like. Instead of outputting long paragraphs of text. Maybe the user would rather just give a simple form to felt or chat to interact with. The agent doesn't just answer in plain text and give the user something to see or act on. In this course, you learn to build that interface using three approaches to generative UI where the UI, the user interfaces generate it. The first approach is controlled components, where you define exactly what the agent can show. The second is declarative UI with the framework a2 UI, which is an open spec originated by Google and co-developed with Copilot, where the agent generates layouts from a schema. The third is open ended UI with MCP apps, where the agent surface is full interactive experiences like whiteboards and approval flows directly inside your product. Your instructor is a tie. The guy who is co-founder of copilot, the team behind the AG UI protocol that this course is built on. Thank you Andrew. That's exactly the problem we built. Copilot gets to solve every interaction between people and technology is increasingly mediated by agents. And yet, as we film this course, most agents still talk to users in plaintext, which is a lot like the command line and mS-DOS era of personal computing. Powerful for early adopters, but not yet built for mass adoption. The Windows and Mac era changed that and brought full featured applications that anybody could use. AI is going through the same transition now and all UI is becoming AI. When a user asks for a report, the agent should build it. When they need to approve something, the agent should show them a form. When they need to explore data, the agent should render a chart. You'll start by connecting a lane change agent to a react front end using Copilot kits and ag UI. From there, you'll build across the full generative UI spectrum from controlled generative UI with handcrafted components that render demand to declarative generative UI, where the agent assembles UI from a component catalog of building blocks to open ended generative UI with app experiences powered first by MCP apps and then by full app sandboxes. By the end of this course, you had built a full stack agent app that renders charts and cards on demand, surfaces, a live wipe through MCP apps, and keeps a share. To do this, in sync between the agent and the UI. Copilot Kit is open source and supports all three of the major generative UI patterns in one framework. It also has first party integrations with line Graph, Google Cloud, AWS, Microsoft Azure, and others. Many people have worked to create this course. I'd like to thank from copilot Kit Hoodie by Kai and Tyler Slayton from DeepMind. AI. Summer Rae also worked on this course in lesson one. You walk through the three major pillars of the generative UI spectrum side by side. What makes each one different and when you use each one? By the end, you'll have the mental model for everything you're going to build in this course. So let's jump in and get interactive.
course detail
Build Interactive Agents with Generative UI
  • Introduction
    Video
    ใƒป
    3m
  • Lesson 1: Intro to Generative UI
    Video
    ใƒป
    11m
  • Lesson 2: Agent Chat
    Video with Code Example
    ใƒป
    11m
  • Lesson 3: Controlled Generative UI
    Video with Code Example
    ใƒป
    11m
  • Lesson 4: Declarative Generative UI
    Video with Code Example
    ใƒป
    16m
  • Lesson 5: Open Generative UI
    Video with Code Example
    ใƒป
    9m
  • Lesson 6: Canvas Applications
    Video with Code Example
    ใƒป
    12m
  • Conclusion
    Video
    ใƒป
    1m
  • Quiz

    GradedใƒปQuiz

    ใƒป
    10m
  • Accomplishment
    Course Details