Technical Theory

Frontend Experiences with ADK and A2UI  |  Google Codelabs

Executive Summary

This codelab explores frontend experiences using the ADK (Assistant Development Kit) and A2UI (Actions on Google User Interface). It focuses on building interactive and engaging interfaces for Google Assistant applications. The codelab guides users through the process of designing and implementing voice-based and visual components, enabling them to create rich, multimodal experiences for users interacting with Google Assistant.

terminal
Interactive Lab

Most agent apps return plain text. A2UI changes that. It's a protocol with 18 declarative UI primitives that lets your agent compose rich, interactive interfaces. The client renders them natively. No new frontend code needed per layout.

Launch Codelab —>

Technical Breakdown

Category Technology Experience Resources
Language JavaScript 2 / 5 Documentation
Development Platform Google Assistant 3 / 5 Documentation
Bot Framework Dialogflow 3 / 5 Documentation
Runtime Environment Node.js 2 / 5 Documentation
Development Kit Assistant Development Kit (ADK) 3 / 5 Documentation
User Interface Actions on Google User Interface (A2UI) 3 / 5 Documentation

Learning Objectives

  • Use the ADK to create interactive components for Google Assistant.
  • Design user interfaces with A2UI for voice and visual interactions.
  • Implement voice-based and visual components in Google Assistant applications.
  • Create engaging and multimodal experiences for users interacting with Google Assistant.

Key Learning Points

  • Understanding the ADK (Assistant Development Kit) and its role in building interactive components.
  • Designing user interfaces with A2UI (Actions on Google User Interface) for voice and visual interactions.
  • Creating engaging and multimodal experiences for Google Assistant applications.
  • Implementing voice-based and visual components to enhance user interaction.

Core Skills Gained

  • Basic JavaScript
  • Google Assistant
  • Dialogflow
  • Node.js

Next Topic