Files
2026-09-13 21:55:56 +00:00

7587 lines
150 KiB
HTML

<!--
Copyright 2026 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Build powerful multi-agent systems with Agent Development Kit (ADK)">
<link rel="canonical" href="https://adk.dev/integrations/copilotkit/">
<link rel="icon" href="../../assets/agent-development-kit.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.0">
<title>CopilotKit user interface for ADK - Agent Development Kit (ADK)</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.618322db.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.ab4e12ef.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../stylesheets/custom.css">
<link rel="stylesheet" href="../../stylesheets/language-tags.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<script id="__analytics">function __md_analytics(){function e(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],e("js",new Date),e("config","G-DKHZS27PHP"),document.addEventListener("DOMContentLoaded",(function(){document.forms.search&&document.forms.search.query.addEventListener("blur",(function(){this.value&&e("event","search",{search_term:this.value})}));document$.subscribe((function(){var t=document.forms.feedback;if(void 0!==t)for(var a of t.querySelectorAll("[type=submit]"))a.addEventListener("click",(function(a){a.preventDefault();var n=document.location.pathname,d=this.getAttribute("data-md-value");e("event","feedback",{page:n,data:d}),t.firstElementChild.disabled=!0;var r=t.querySelector(".md-feedback__note [data-md-value='"+d+"']");r&&(r.hidden=!1)})),t.hidden=!1})),location$.subscribe((function(t){e("config","G-DKHZS27PHP",{page_path:t.pathname})}))}));var t=document.createElement("script");t.async=!0,t.src="https://www.googletagmanager.com/gtag/js?id=G-DKHZS27PHP",document.getElementById("__analytics").insertAdjacentElement("afterEnd",t)}</script>
<script>if("undefined"!=typeof __md_analytics){var consent=__md_get("__consent");consent&&consent.analytics&&__md_analytics()}</script>
<!-- HTML Meta Tags -->
<title>Agent Development Kit (ADK)</title>
<meta name="description" content="Build powerful multi-agent systems with Agent Development Kit (ADK)">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://adk.dev">
<meta property="og:type" content="website">
<meta property="og:title" content="Agent Development Kit (ADK)">
<meta property="og:description" content="Build powerful multi-agent systems with Agent Development Kit (ADK)">
<meta property="og:image" content="https://adk.dev/assets/adk-social-card.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="adk.dev">
<meta property="twitter:url" content="https://adk.dev">
<meta name="twitter:title" content="Agent Development Kit (ADK)">
<meta name="twitter:description" content="Build powerful multi-agent systems with Agent Development Kit (ADK)">
<meta name="twitter:image" content="https://adk.dev/assets/adk-social-card.png">
<!-- Pagefind search UI. hooks/pagefind.py builds the index and guards both
filenames, so a third asset added here needs adding there too. -->
<link rel="stylesheet" href="../../pagefind/pagefind-component-ui.css">
<script type="module" src="../../pagefind/pagefind-component-ui.js"></script>
<!-- `| url` covers only the assets above. document.currentScript is null in a
module script, so the bundle always fetches its index from the origin
root: correct at a root domain, wrong under a subpath. -->
<!-- Raise termSimilarity so "LlmAgent" beats pages that merely say "agent"
often. Set on pagefindOptions, which is read lazily; configureInstance()
is ignored once the components create the instance on connect. -->
<script type="module">
window.PagefindComponents
.getInstanceManager()
.getInstance("default")
.pagefindOptions.ranking = { termSimilarity: 2.0 };
</script>
<!-- Mirror Material's data-md-color-scheme onto data-pf-theme, the only
thing that switches Pagefind's dark palette. -->
<script>
(function () {
var sync = function () {
var root = document.documentElement;
if (document.body.getAttribute("data-md-color-scheme") === "slate") {
root.setAttribute("data-pf-theme", "dark");
} else {
root.removeAttribute("data-pf-theme");
}
};
document.addEventListener("DOMContentLoaded", function () {
sync();
new MutationObserver(sync).observe(document.body, {
attributes: true,
attributeFilter: ["data-md-color-scheme"],
});
});
})();
</script>
<!-- Upstream bug: reset-on-close clears the results but never the input, so
the next keystroke appends to the old query. Writing through the native
setter keeps the component in step. Delete this once Pagefind fixes it. -->
<script>
(function () {
document.addEventListener("DOMContentLoaded", function () {
var modal = document.querySelector("pagefind-modal");
// Bind once: the modal outlives instant navigation.
if (!modal || modal.dataset.adkPfClearOnClose) return;
modal.dataset.adkPfClearOnClose = "1";
modal.addEventListener(
"close",
function () {
var input =
modal.querySelector("input") ||
(modal.shadowRoot && modal.shadowRoot.querySelector("input"));
if (!input || !input.value) return;
Object.getOwnPropertyDescriptor(
HTMLInputElement.prototype,
"value",
).set.call(input, "");
input.dispatchEvent(
new Event("input", { bubbles: true, composed: true }),
);
},
true, // `close` does not bubble, but capture still reaches it.
);
});
})();
</script>
<!-- Result links are light DOM, so navigation.instant swaps the page without
unloading the header and the modal stays open. document$ emits after every
swap; close() no-ops when the modal is already closed. -->
<script>
(function () {
document.addEventListener("DOMContentLoaded", function () {
if (!window.document$ || window.__adkPagefindCloseOnNav) return;
window.__adkPagefindCloseOnNav = true;
window.document$.subscribe(function () {
var modal = document.querySelector("pagefind-modal");
if (modal && typeof modal.close === "function") modal.close();
});
});
})();
</script>
<!-- Restore the `/` and `s` shortcuts lost with Material's search plugin;
Pagefind's trigger parses one binding only, already spent on mod+k.
Ignore them with a modifier held, while typing, or while already open. -->
<script>
(function () {
if (window.__adkPagefindSearchKeys) return;
window.__adkPagefindSearchKeys = true;
document.addEventListener("keydown", function (event) {
if (event.key !== "/" && event.key !== "s") return;
if (event.ctrlKey || event.metaKey || event.altKey) return;
var target = event.target;
if (target instanceof Element) {
if (target.isContentEditable) return;
if (target.closest("input, textarea, select")) return;
}
var modal = document.querySelector("pagefind-modal");
if (!modal || typeof modal.open !== "function") return;
var dialog = modal.querySelector("dialog");
if (dialog && dialog.open) return;
event.preventDefault();
modal.open();
});
})();
</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="white" data-md-color-accent="white">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#copilotkit-user-interface-for-adk" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
<aside class="md-banner">
<div class="md-banner__inner md-grid md-typeset">
<span class="announce-item">
<strong>Released!</strong>
<a href="/2.0/">
ADK TypeScript 2.0 GA
</a>
is now available with graph workflows support! <a href="/graphs/#typescript">Get started</a>
</span>
</div>
</aside>
</div>
<!--
Copyright 2025 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!-- Determine classes -->
<!-- Header -->
<header class="md-header" data-md-component="header">
<nav
class="md-header__inner md-grid"
aria-label="Header"
>
<!-- Link to home -->
<a
href="../.."
title="Agent Development Kit (ADK)"
class="md-header__button md-logo"
aria-label="Agent Development Kit (ADK)"
data-md-component="logo"
>
<img src="../../assets/agent-development-kit.png" alt="logo">
</a>
<!-- Button to open drawer -->
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<!-- Header title -->
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
<a
href="../.."
title="Agent Development Kit (ADK)"
aria-label="Agent Development Kit (ADK)"
data-md-component="logo"
>
Agent Development Kit (ADK)
</a>
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
CopilotKit user interface for ADK
</a>
</span>
</div>
</div>
</div>
<!-- Language SDK repository links -->
<div class="lang-header-repos">
<div class="lang-repos">
<a href="https://github.com/google/adk-python"
title="adk-python on GitHub"
class="lang-item">
<img src="/assets/icon-python.svg"
alt="Python" class="lang-icon" width="24" height="24" />
<span class="lang-label">Python</span>
</a>
<a href="https://github.com/google/adk-js"
title="adk-js on GitHub"
class="lang-item">
<img src="/assets/icon-typescript.svg"
alt="TypeScript" class="lang-icon" width="24" height="24" />
<span class="lang-label">JS</span>
</a>
<a href="https://github.com/google/adk-go"
title="adk-go on GitHub"
class="lang-item">
<img src="/assets/icon-go.svg"
alt="Go" class="lang-icon" width="24" height="24" />
<span class="lang-label">Go</span>
</a>
<a href="https://github.com/google/adk-java"
title="adk-java on GitHub"
class="lang-item">
<img src="/assets/icon-java.svg"
alt="Java" class="lang-icon" width="24" height="24" />
<span class="lang-label">Java</span>
</a>
<a href="https://github.com/google/adk-kotlin"
title="adk-kotlin on GitHub"
class="lang-item">
<img src="/assets/icon-kotlin.svg"
alt="Kotlin" class="lang-icon" width="24" height="24" />
<span class="lang-label">Kotlin</span>
</a>
</div>
</div>
<!-- Color palette toggle -->
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="white" data-md-color-accent="white" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="grey" data-md-color-accent="grey" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12z"/></svg>
</label>
</form>
<!-- User preference: color palette -->
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<!-- Site language selector -->
<!-- Pagefind search. Both live in the header nav, which survives
navigation.instant DOM swaps, so the modal keeps its state. -->
<pagefind-modal-trigger placeholder="Search"></pagefind-modal-trigger>
<pagefind-modal reset-on-close></pagefind-modal>
</nav>
<!-- Navigation tabs (sticky) -->
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../get-started/" class="md-tabs__link">
Build Agents
</a>
</li>
<li class="md-tabs__item">
<a href="../../runtime/" class="md-tabs__link">
Run Agents
</a>
</li>
<li class="md-tabs__item">
<a href="../../get-started/about/" class="md-tabs__link">
Components
</a>
</li>
<li class="md-tabs__item">
<a href="../" class="md-tabs__link">
Integrations
</a>
</li>
<li class="md-tabs__item">
<a href="../../api-reference/" class="md-tabs__link">
Reference
</a>
</li>
<li class="md-tabs__item">
<a href="../../community/" class="md-tabs__link">
Community
</a>
</li>
<li class="md-tabs__item">
<a href="../../2.0/" class="md-tabs__link">
ADK 2.0
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<!--
Copyright (c) 2016-2025 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!-- Determine classes -->
<!-- Navigation -->
<nav
class="md-nav md-nav--primary md-nav--lifted"
aria-label="Navigation"
data-md-level="0"
>
<!-- Repository information -->
<div class="md-nav__source">
<div class="lang-repos">
<a href="https://github.com/google/adk-python"
title="adk-python on GitHub"
class="lang-item">
<img src="/assets/icon-python.svg"
alt="Python" class="lang-icon" width="24" height="24" />
<span class="lang-label">Python</span>
</a>
<a href="https://github.com/google/adk-js"
title="adk-js on GitHub"
class="lang-item">
<img src="/assets/icon-typescript.svg"
alt="TypeScript" class="lang-icon" width="24" height="24" />
<span class="lang-label">JS</span>
</a>
<a href="https://github.com/google/adk-go"
title="adk-go on GitHub"
class="lang-item">
<img src="/assets/icon-go.svg"
alt="Go" class="lang-icon" width="24" height="24" />
<span class="lang-label">Go</span>
</a>
<a href="https://github.com/google/adk-java"
title="adk-java on GitHub"
class="lang-item">
<img src="/assets/icon-java.svg"
alt="Java" class="lang-icon" width="24" height="24" />
<span class="lang-label">Java</span>
</a>
<a href="https://github.com/google/adk-kotlin"
title="adk-kotlin on GitHub"
class="lang-item">
<img src="/assets/icon-kotlin.svg"
alt="Kotlin" class="lang-icon" width="24" height="24" />
<span class="lang-label">Kotlin</span>
</a>
</div>
</div>
<!-- Navigation list -->
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Build Agents
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Build Agents
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
<div class="md-nav__link md-nav__container">
<a href="../../get-started/" class="md-nav__link ">
<span class="md-ellipsis">
Get Started
</span>
</a>
<label class="md-nav__link " for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
Get Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../get-started/python/" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../get-started/typescript/" class="md-nav__link">
<span class="md-ellipsis">
TypeScript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../get-started/go/" class="md-nav__link">
<span class="md-ellipsis">
Go
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../get-started/java/" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../get-started/kotlin/" class="md-nav__link">
<span class="md-ellipsis">
Kotlin
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../get-started/agents-cli/" class="md-nav__link">
<span class="md-ellipsis">
Agents CLI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../get-started/installation/" class="md-nav__link">
<span class="md-ellipsis">
Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../get-started/google-cloud/" class="md-nav__link">
<span class="md-ellipsis">
Google Cloud
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../get-started/migrate/" class="md-nav__link">
<span class="md-ellipsis">
Migrate to ADK
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" >
<div class="md-nav__link md-nav__container">
<a href="../../tutorials/" class="md-nav__link ">
<span class="md-ellipsis">
Build your Agent
</span>
</a>
<label class="md-nav__link " for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
Build your Agent
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../tutorials/multi-tool-agent/" class="md-nav__link">
<span class="md-ellipsis">
Multi-tool agent
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorials/agent-team/" class="md-nav__link">
<span class="md-ellipsis">
Agent team
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorials/coding-with-ai/" class="md-nav__link">
<span class="md-ellipsis">
Code with AI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/config/" class="md-nav__link">
<span class="md-ellipsis">
Agent Config
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_3" >
<div class="md-nav__link md-nav__container">
<a href="../../agents/" class="md-nav__link ">
<span class="md-ellipsis">
Agents
</span>
</a>
<label class="md-nav__link " for="__nav_2_3" id="__nav_2_3_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_3">
<span class="md-nav__icon md-icon"></span>
Agents
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../agents/llm-agents/" class="md-nav__link">
<span class="md-ellipsis">
Simple agents
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/managed-agents/" class="md-nav__link">
<span class="md-ellipsis">
Managed agents
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_4" >
<div class="md-nav__link md-nav__container">
<a href="../../graphs/" class="md-nav__link ">
<span class="md-ellipsis">
Graph Workflows
</span>
</a>
<label class="md-nav__link " for="__nav_2_4" id="__nav_2_4_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_4">
<span class="md-nav__icon md-icon"></span>
Graph Workflows
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../graphs/routes/" class="md-nav__link">
<span class="md-ellipsis">
Graph routes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../graphs/data-handling/" class="md-nav__link">
<span class="md-ellipsis">
Data handling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../graphs/human-input/" class="md-nav__link">
<span class="md-ellipsis">
Human input
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../graphs/dynamic/" class="md-nav__link">
<span class="md-ellipsis">
Dynamic workflows
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5" >
<div class="md-nav__link md-nav__container">
<a href="../../workflows/" class="md-nav__link ">
<span class="md-ellipsis">
Multi-Agent Workflows
</span>
</a>
<label class="md-nav__link " for="__nav_2_5" id="__nav_2_5_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_5">
<span class="md-nav__icon md-icon"></span>
Multi-Agent Workflows
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../workflows/collaboration/" class="md-nav__link">
<span class="md-ellipsis">
Collaborative workflows
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_5_3" >
<div class="md-nav__link md-nav__container">
<a href="../../agents/workflow-agents/" class="md-nav__link ">
<span class="md-ellipsis">
Template workflows
</span>
</a>
<label class="md-nav__link " for="__nav_2_5_3" id="__nav_2_5_3_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_5_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_5_3">
<span class="md-nav__icon md-icon"></span>
Template workflows
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../agents/workflow-agents/sequential-agents/" class="md-nav__link">
<span class="md-ellipsis">
Sequential workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/workflow-agents/loop-agents/" class="md-nav__link">
<span class="md-ellipsis">
Loop workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/workflow-agents/parallel-agents/" class="md-nav__link">
<span class="md-ellipsis">
Parallel workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/custom-agents/" class="md-nav__link">
<span class="md-ellipsis">
Custom template workflows
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../agents/routing/" class="md-nav__link">
<span class="md-ellipsis">
Agent routing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../workflows/patterns/" class="md-nav__link">
<span class="md-ellipsis">
Workflow patterns
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_6" >
<div class="md-nav__link md-nav__container">
<a href="../../agents/models/" class="md-nav__link ">
<span class="md-ellipsis">
Models for Agents
</span>
</a>
<label class="md-nav__link " for="__nav_2_6" id="__nav_2_6_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_6">
<span class="md-nav__icon md-icon"></span>
Models for Agents
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../agents/models/google-gemini/" class="md-nav__link">
<span class="md-ellipsis">
Gemini
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/google-gemma/" class="md-nav__link">
<span class="md-ellipsis">
Gemma
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/anthropic/" class="md-nav__link">
<span class="md-ellipsis">
Claude
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/agent-platform/" class="md-nav__link">
<span class="md-ellipsis">
Agent Platform hosted
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/apigee/" class="md-nav__link">
<span class="md-ellipsis">
Apigee AI Gateway
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/routing/" class="md-nav__link">
<span class="md-ellipsis">
Model routing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/openai/" class="md-nav__link">
<span class="md-ellipsis">
OpenAI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/ollama/" class="md-nav__link">
<span class="md-ellipsis">
Ollama
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/vllm/" class="md-nav__link">
<span class="md-ellipsis">
vLLM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/litellm/" class="md-nav__link">
<span class="md-ellipsis">
LiteLLM
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../agents/models/litert-lm/" class="md-nav__link">
<span class="md-ellipsis">
LiteRT-LM
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Run Agents
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Run Agents
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_1" >
<div class="md-nav__link md-nav__container">
<a href="../../runtime/" class="md-nav__link ">
<span class="md-ellipsis">
Agent Runtime
</span>
</a>
<label class="md-nav__link " for="__nav_3_1" id="__nav_3_1_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_1">
<span class="md-nav__icon md-icon"></span>
Agent Runtime
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_1_2" >
<div class="md-nav__link md-nav__container">
<a href="../../runtime/web-interface/" class="md-nav__link ">
<span class="md-ellipsis">
Web Interface
</span>
</a>
<label class="md-nav__link " for="__nav_3_1_2" id="__nav_3_1_2_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_1_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_1_2">
<span class="md-nav__icon md-icon"></span>
Web Interface
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../visual-builder/" class="md-nav__link">
<span class="md-ellipsis">
Visual Builder
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../runtime/command-line/" class="md-nav__link">
<span class="md-ellipsis">
Command Line
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../runtime/api-server/" class="md-nav__link">
<span class="md-ellipsis">
API Server
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../runtime/ambient-agents/" class="md-nav__link">
<span class="md-ellipsis">
Ambient Agents
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../runtime/resume/" class="md-nav__link">
<span class="md-ellipsis">
Resume Agents
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../runtime/cancel/" class="md-nav__link">
<span class="md-ellipsis">
Cancel Agent Runs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../runtime/runconfig/" class="md-nav__link">
<span class="md-ellipsis">
Runtime Config
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../runtime/event-loop/" class="md-nav__link">
<span class="md-ellipsis">
Event Loop
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2" >
<div class="md-nav__link md-nav__container">
<a href="../../deploy/" class="md-nav__link ">
<span class="md-ellipsis">
Deployment
</span>
</a>
<label class="md-nav__link " for="__nav_3_2" id="__nav_3_2_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_2">
<span class="md-nav__icon md-icon"></span>
Deployment
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2_2" >
<div class="md-nav__link md-nav__container">
<a href="../../deploy/agent-runtime/" class="md-nav__link ">
<span class="md-ellipsis">
Agent Runtime
</span>
</a>
<label class="md-nav__link " for="__nav_3_2_2" id="__nav_3_2_2_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_2_2">
<span class="md-nav__icon md-icon"></span>
Agent Runtime
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../deploy/agent-runtime/deploy/" class="md-nav__link">
<span class="md-ellipsis">
Standard deployment
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deploy/agent-runtime/agents-cli/" class="md-nav__link">
<span class="md-ellipsis">
agents-cli
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deploy/agent-runtime/test/" class="md-nav__link">
<span class="md-ellipsis">
Test deployed agents
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../deploy/cloud-run/" class="md-nav__link">
<span class="md-ellipsis">
Cloud Run
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../deploy/gke/" class="md-nav__link">
<span class="md-ellipsis">
GKE
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_3" >
<div class="md-nav__link md-nav__container">
<a href="../../observability/" class="md-nav__link ">
<span class="md-ellipsis">
Observability
</span>
</a>
<label class="md-nav__link " for="__nav_3_3" id="__nav_3_3_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_3">
<span class="md-nav__icon md-icon"></span>
Observability
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../observability/logging/" class="md-nav__link">
<span class="md-ellipsis">
Logging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../observability/metrics/" class="md-nav__link">
<span class="md-ellipsis">
Metrics
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../observability/traces/" class="md-nav__link">
<span class="md-ellipsis">
Traces
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_4" >
<div class="md-nav__link md-nav__container">
<a href="../../evaluate/" class="md-nav__link ">
<span class="md-ellipsis">
Evaluation
</span>
</a>
<label class="md-nav__link " for="__nav_3_4" id="__nav_3_4_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_4">
<span class="md-nav__icon md-icon"></span>
Evaluation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../evaluate/criteria/" class="md-nav__link">
<span class="md-ellipsis">
Criteria
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../evaluate/user-sim/" class="md-nav__link">
<span class="md-ellipsis">
User Simulation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../evaluate/environment_simulation/" class="md-nav__link">
<span class="md-ellipsis">
Environment Simulation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../evaluate/custom_metrics/" class="md-nav__link">
<span class="md-ellipsis">
Custom Metrics
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../optimize/" class="md-nav__link">
<span class="md-ellipsis">
Optimization
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5" >
<div class="md-nav__link md-nav__container">
<a href="../../safety/" class="md-nav__link ">
<span class="md-ellipsis">
Safety and Security
</span>
</a>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_5">
<span class="md-nav__icon md-icon"></span>
Safety and Security
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Components
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Components
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../get-started/about/" class="md-nav__link">
<span class="md-ellipsis">
Technical Overview
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" >
<div class="md-nav__link md-nav__container">
<a href="../../tools-custom/" class="md-nav__link ">
<span class="md-ellipsis">
Custom Tools
</span>
</a>
<label class="md-nav__link " for="__nav_4_2" id="__nav_4_2_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_2">
<span class="md-nav__icon md-icon"></span>
Custom Tools
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2_2" >
<label class="md-nav__link" for="__nav_4_2_2" id="__nav_4_2_2_label" tabindex="0">
<span class="md-ellipsis">
Function tools
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_2_2">
<span class="md-nav__icon md-icon"></span>
Function tools
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../tools-custom/function-tools/" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tools-custom/performance/" class="md-nav__link">
<span class="md-ellipsis">
Tool performance
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tools-custom/confirmation/" class="md-nav__link">
<span class="md-ellipsis">
Action confirmations
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../tools-custom/mcp-tools/" class="md-nav__link">
<span class="md-ellipsis">
MCP tools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tools-custom/openapi-tools/" class="md-nav__link">
<span class="md-ellipsis">
OpenAPI tools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tools-custom/authentication/" class="md-nav__link">
<span class="md-ellipsis">
Authentication
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../tools/limitations/" class="md-nav__link">
<span class="md-ellipsis">
Tool limitations
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3" >
<div class="md-nav__link md-nav__container">
<a href="../../artifacts/" class="md-nav__link ">
<span class="md-ellipsis">
Artifacts
</span>
</a>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_3">
<span class="md-nav__icon md-icon"></span>
Artifacts
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_4" >
<div class="md-nav__link md-nav__container">
<a href="../../skills/" class="md-nav__link ">
<span class="md-ellipsis">
Skills for Agents
</span>
</a>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_4">
<span class="md-nav__icon md-icon"></span>
Skills for Agents
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_5" >
<div class="md-nav__link md-nav__container">
<a href="../../apps/" class="md-nav__link ">
<span class="md-ellipsis">
App management
</span>
</a>
<label class="md-nav__link " for="__nav_4_5" id="__nav_4_5_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_5">
<span class="md-nav__icon md-icon"></span>
App management
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_5_2" >
<div class="md-nav__link md-nav__container">
<a href="../../callbacks/" class="md-nav__link ">
<span class="md-ellipsis">
Callbacks
</span>
</a>
<label class="md-nav__link " for="__nav_4_5_2" id="__nav_4_5_2_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_5_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_5_2">
<span class="md-nav__icon md-icon"></span>
Callbacks
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../callbacks/types-of-callbacks/" class="md-nav__link">
<span class="md-ellipsis">
Types of callbacks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../callbacks/design-patterns-and-best-practices/" class="md-nav__link">
<span class="md-ellipsis">
Callback patterns
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../plugins/" class="md-nav__link">
<span class="md-ellipsis">
Plugins
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_6" >
<div class="md-nav__link md-nav__container">
<a href="../../context/" class="md-nav__link ">
<span class="md-ellipsis">
Agent context
</span>
</a>
<label class="md-nav__link " for="__nav_4_6" id="__nav_4_6_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_6">
<span class="md-nav__icon md-icon"></span>
Agent context
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../sessions/" class="md-nav__link">
<span class="md-ellipsis">
Conversational context
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_6_3" >
<div class="md-nav__link md-nav__container">
<a href="../../sessions/session/" class="md-nav__link ">
<span class="md-ellipsis">
Sessions
</span>
</a>
<label class="md-nav__link " for="__nav_4_6_3" id="__nav_4_6_3_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_6_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_6_3">
<span class="md-nav__icon md-icon"></span>
Sessions
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../sessions/session/rewind/" class="md-nav__link">
<span class="md-ellipsis">
Rewind sessions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../sessions/session/migrate/" class="md-nav__link">
<span class="md-ellipsis">
Migrate sessions
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../sessions/state/" class="md-nav__link">
<span class="md-ellipsis">
State
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../events/" class="md-nav__link">
<span class="md-ellipsis">
Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../sessions/memory/" class="md-nav__link">
<span class="md-ellipsis">
Memory
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../context/compaction/" class="md-nav__link">
<span class="md-ellipsis">
Context compression
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../context/caching/" class="md-nav__link">
<span class="md-ellipsis">
Model context caching
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" >
<div class="md-nav__link md-nav__container">
<a href="../../mcp/" class="md-nav__link ">
<span class="md-ellipsis">
MCP
</span>
</a>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_7">
<span class="md-nav__icon md-icon"></span>
MCP
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8" >
<div class="md-nav__link md-nav__container">
<a href="../../a2a/" class="md-nav__link ">
<span class="md-ellipsis">
A2A Protocol
</span>
</a>
<label class="md-nav__link " for="__nav_4_8" id="__nav_4_8_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8">
<span class="md-nav__icon md-icon"></span>
A2A Protocol
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../a2a/intro/" class="md-nav__link">
<span class="md-ellipsis">
Introduction to A2A
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_3" >
<label class="md-nav__link" for="__nav_4_8_3" id="__nav_4_8_3_label" tabindex="0">
<span class="md-ellipsis">
A2A Quickstart (Exposing)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_3">
<span class="md-nav__icon md-icon"></span>
A2A Quickstart (Exposing)
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../a2a/quickstart-exposing/" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../a2a/quickstart-exposing-go/" class="md-nav__link">
<span class="md-ellipsis">
Go
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../a2a/quickstart-exposing-java/" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8_4" >
<label class="md-nav__link" for="__nav_4_8_4" id="__nav_4_8_4_label" tabindex="0">
<span class="md-ellipsis">
A2A Quickstart (Consuming)
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_8_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_8_4">
<span class="md-nav__icon md-icon"></span>
A2A Quickstart (Consuming)
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../a2a/quickstart-consuming/" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../a2a/quickstart-consuming-go/" class="md-nav__link">
<span class="md-ellipsis">
Go
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../a2a/quickstart-consuming-java/" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../a2a/quickstart-consuming-kotlin/" class="md-nav__link">
<span class="md-ellipsis">
Kotlin
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../a2a/a2a-extension/" class="md-nav__link">
<span class="md-ellipsis">
A2A Extension
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9" >
<div class="md-nav__link md-nav__container">
<a href="../../live/" class="md-nav__link ">
<span class="md-ellipsis">
Live and Voice Agents
</span>
</a>
<label class="md-nav__link " for="__nav_4_9" id="__nav_4_9_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9">
<span class="md-nav__icon md-icon"></span>
Live and Voice Agents
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_2" >
<div class="md-nav__link md-nav__container">
<a href="../../live/get-started/" class="md-nav__link ">
<span class="md-ellipsis">
Get started
</span>
</a>
<label class="md-nav__link " for="__nav_4_9_2" id="__nav_4_9_2_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_2">
<span class="md-nav__icon md-icon"></span>
Get started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../live/get-started/streaming-python/" class="md-nav__link">
<span class="md-ellipsis">
Python
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../live/get-started/streaming-java/" class="md-nav__link">
<span class="md-ellipsis">
Java
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_3" >
<label class="md-nav__link" for="__nav_4_9_3" id="__nav_4_9_3_label" tabindex="0">
<span class="md-ellipsis">
Building
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_3">
<span class="md-nav__icon md-icon"></span>
Building
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../live/workflows/" class="md-nav__link">
<span class="md-ellipsis">
Workflows
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../live/tools/" class="md-nav__link">
<span class="md-ellipsis">
Tools
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../live/sessions/" class="md-nav__link">
<span class="md-ellipsis">
Sessions
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../live/events/" class="md-nav__link">
<span class="md-ellipsis">
Events
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../live/audio-video/" class="md-nav__link">
<span class="md-ellipsis">
Audio and video
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../live/configuration/" class="md-nav__link">
<span class="md-ellipsis">
Configuration
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9_4" >
<label class="md-nav__link" for="__nav_4_9_4" id="__nav_4_9_4_label" tabindex="0">
<span class="md-ellipsis">
Production
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_4_9_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_9_4">
<span class="md-nav__icon md-icon"></span>
Production
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../live/evaluation/" class="md-nav__link">
<span class="md-ellipsis">
Evaluation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../live/custom-server/" class="md-nav__link">
<span class="md-ellipsis">
Build a custom server
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../live/models/" class="md-nav__link">
<span class="md-ellipsis">
Supported models
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_10" >
<div class="md-nav__link md-nav__container">
<a href="../../grounding/" class="md-nav__link ">
<span class="md-ellipsis">
Grounding
</span>
</a>
<label class="md-nav__link " for="__nav_4_10" id="__nav_4_10_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4_10">
<span class="md-nav__icon md-icon"></span>
Grounding
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../grounding/google_search_grounding/" class="md-nav__link">
<span class="md-ellipsis">
Google Search Grounding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../grounding/grounding_with_search/" class="md-nav__link">
<span class="md-ellipsis">
Grounding with Search
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
<div class="md-nav__link md-nav__container">
<a href="../" class="md-nav__link ">
<span class="md-ellipsis">
Integrations
</span>
</a>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
Integrations
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
Reference
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
Reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1" >
<div class="md-nav__link md-nav__container">
<a href="../../api-reference/" class="md-nav__link ">
<span class="md-ellipsis">
API Reference
</span>
</a>
<label class="md-nav__link " for="__nav_6_1" id="__nav_6_1_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_1">
<span class="md-nav__icon md-icon"></span>
API Reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../api-reference/python/" class="md-nav__link">
<span class="md-ellipsis">
Python ADK
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../api-reference/typescript/" class="md-nav__link">
<span class="md-ellipsis">
TypeScript ADK
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_1_4" >
<label class="md-nav__link" for="__nav_6_1_4" id="__nav_6_1_4_label" tabindex="0">
<span class="md-ellipsis">
Go ADK
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_6_1_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6_1_4">
<span class="md-nav__icon md-icon"></span>
Go ADK
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="https://pkg.go.dev/google.golang.org/adk/v2" target="_blank" class="md-nav__link">
<span class="md-ellipsis">
Go v2.x
</span>
</a>
</li>
<li class="md-nav__item">
<a href="https://pkg.go.dev/google.golang.org/adk" target="_blank" class="md-nav__link">
<span class="md-ellipsis">
Go v1.x
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../api-reference/java/" class="md-nav__link">
<span class="md-ellipsis">
Java ADK
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../api-reference/kotlin/" class="md-nav__link">
<span class="md-ellipsis">
Kotlin ADK
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../api-reference/cli/" class="md-nav__link">
<span class="md-ellipsis">
CLI Reference
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../api-reference/agentconfig/" class="md-nav__link">
<span class="md-ellipsis">
Agent Config Reference
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../api-reference/rest/" class="md-nav__link">
<span class="md-ellipsis">
REST API
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../release-notes/" class="md-nav__link">
<span class="md-ellipsis">
Release Notes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
<div class="md-nav__link md-nav__container">
<a href="../../community/" class="md-nav__link ">
<span class="md-ellipsis">
Community
</span>
</a>
<label class="md-nav__link " for="__nav_7" id="__nav_7_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
Community
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../community/contributing-guide/" class="md-nav__link">
<span class="md-ellipsis">
Contributing Guide
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" >
<div class="md-nav__link md-nav__container">
<a href="../../2.0/" class="md-nav__link ">
<span class="md-ellipsis">
ADK 2.0
</span>
</a>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_8">
<span class="md-nav__icon md-icon"></span>
ADK 2.0
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#use-cases" class="md-nav__link">
<span class="md-ellipsis">
Use cases
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#prerequisites" class="md-nav__link">
<span class="md-ellipsis">
Prerequisites
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#installation" class="md-nav__link">
<span class="md-ellipsis">
Installation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#use-with-agent" class="md-nav__link">
<span class="md-ellipsis">
Use with agent
</span>
</a>
<nav class="md-nav" aria-label="Use with agent">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-expose-the-agent-over-ag-ui" class="md-nav__link">
<span class="md-ellipsis">
1. Expose the agent over AG-UI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-register-the-endpoint-with-copilotkit-runtime" class="md-nav__link">
<span class="md-ellipsis">
2. Register the endpoint with CopilotKit Runtime
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-render-chat" class="md-nav__link">
<span class="md-ellipsis">
3. Render chat
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-add-a-frontend-tool" class="md-nav__link">
<span class="md-ellipsis">
4. Add a frontend tool
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#available-hooks" class="md-nav__link">
<span class="md-ellipsis">
Available hooks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#other-clients" class="md-nav__link">
<span class="md-ellipsis">
Other clients
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#messaging-channels" class="md-nav__link">
<span class="md-ellipsis">
Messaging channels
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#additional-resources" class="md-nav__link">
<span class="md-ellipsis">
Additional resources
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset" data-pagefind-body>
<a href="https://github.com/google/adk-docs/edit/main/docs/integrations/copilotkit.md" title="Edit this page on GitHub" class="md-content__button md-icon" rel="edit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg>
</a>
<a href="./index.md" title="View this page as Markdown" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg>
</a>
<button id="copy-page-btn" class="md-content__button md-icon" title="Copy page as Markdown" data-url="./index.md">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z"/></svg>
</button>
<h1 id="copilotkit-user-interface-for-adk">CopilotKit user interface for ADK<a class="headerlink" href="#copilotkit-user-interface-for-adk" title="Permanent link">&para;</a></h1>
<div class="language-support-tag">
<span class="lst-supported">Supported in ADK</span><span class="lst-python">Python</span>
</div>
<p><a href="https://github.com/CopilotKit/CopilotKit">CopilotKit</a> is an open source set of
frontend libraries and a runtime that connect applications to agents over
<a href="/integrations/ag-ui/">AG-UI</a>. With ADK, the <code>ag-ui-adk</code> package exposes your
agent as an AG-UI endpoint, and CopilotKit gives that endpoint a chat surface,
frontend tools, generative UI, and human-in-the-loop controls in React, Angular,
Vue, React Native, or Slack.</p>
<p>The <a href="/integrations/ag-ui/">AG-UI integration page</a> covers the protocol and a
<code>create</code> command that scaffolds a full-stack sample. This page shows how to add
CopilotKit to an existing ADK project.</p>
<h2 id="use-cases">Use cases<a class="headerlink" href="#use-cases" title="Permanent link">&para;</a></h2>
<ul>
<li><strong>Chat surface</strong>: Stream an ADK agent's messages, tool calls, and reasoning
into a packaged chat component for web or mobile apps.</li>
<li><strong>Frontend tools</strong>: Let the agent call functions that run in the browser, such
as navigating, opening a record, or reading application state.</li>
<li><strong>Generative UI</strong>: Render tool calls and results with application components
instead of plain text.</li>
<li><strong>Human-in-the-loop</strong>: Pause an agent run until the user approves, edits, or
rejects a proposed action, then resume with the answer.</li>
<li><strong>Messaging channels</strong>: Run the same agent in Slack with the open source
Channels SDK.</li>
</ul>
<h2 id="prerequisites">Prerequisites<a class="headerlink" href="#prerequisites" title="Permanent link">&para;</a></h2>
<ul>
<li>Python 3.10 to 3.14 and Node.js 18 or later</li>
<li>A Gemini API key from <a href="https://aistudio.google.com/app/apikey">Google AI Studio</a>,
exported as <code>GOOGLE_API_KEY</code></li>
<li>A React application, such as Next.js, for the frontend steps below</li>
</ul>
<h2 id="installation">Installation<a class="headerlink" href="#installation" title="Permanent link">&para;</a></h2>
<p>Install the backend packages:</p>
<div class="language-bash highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a>pip<span class="w"> </span>install<span class="w"> </span>google-adk<span class="w"> </span>ag-ui-adk<span class="w"> </span>fastapi<span class="w"> </span><span class="s2">"uvicorn[standard]"</span>
</span></code></pre></div>
<p>Install the frontend packages in your web application:</p>
<div class="language-bash highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a>npm<span class="w"> </span>install<span class="w"> </span>@copilotkit/react-core<span class="w"> </span>@copilotkit/runtime<span class="w"> </span>@ag-ui/client<span class="w"> </span>hono<span class="w"> </span>zod
</span></code></pre></div>
<h2 id="use-with-agent">Use with agent<a class="headerlink" href="#use-with-agent" title="Permanent link">&para;</a></h2>
<h3 id="1-expose-the-agent-over-ag-ui">1. Expose the agent over AG-UI<a class="headerlink" href="#1-expose-the-agent-over-ag-ui" title="Permanent link">&para;</a></h3>
<div class="language-python highlight"><span class="filename">agent.py</span><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="kn">from</span><span class="w"> </span><span class="nn">fastapi</span><span class="w"> </span><span class="kn">import</span> <span class="n">FastAPI</span>
</span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="kn">from</span><span class="w"> </span><span class="nn">google.adk.agents</span><span class="w"> </span><span class="kn">import</span> <span class="n">Agent</span>
</span><span id="__span-2-3"><a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a><span class="kn">from</span><span class="w"> </span><span class="nn">google.adk.apps</span><span class="w"> </span><span class="kn">import</span> <span class="n">App</span><span class="p">,</span> <span class="n">ResumabilityConfig</span>
</span><span id="__span-2-4"><a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a>
</span><span id="__span-2-5"><a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a><span class="kn">from</span><span class="w"> </span><span class="nn">ag_ui_adk</span><span class="w"> </span><span class="kn">import</span> <span class="n">ADKAgent</span><span class="p">,</span> <span class="n">AGUIToolset</span><span class="p">,</span> <span class="n">add_adk_fastapi_endpoint</span>
</span><span id="__span-2-6"><a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a>
</span><span id="__span-2-7"><a id="__codelineno-2-7" name="__codelineno-2-7" href="#__codelineno-2-7"></a><span class="n">root_agent</span> <span class="o">=</span> <span class="n">Agent</span><span class="p">(</span>
</span><span id="__span-2-8"><a id="__codelineno-2-8" name="__codelineno-2-8" href="#__codelineno-2-8"></a> <span class="n">model</span><span class="o">=</span><span class="s2">"gemini-flash-latest"</span><span class="p">,</span>
</span><span id="__span-2-9"><a id="__codelineno-2-9" name="__codelineno-2-9" href="#__codelineno-2-9"></a> <span class="n">name</span><span class="o">=</span><span class="s2">"copilotkit_agent"</span><span class="p">,</span>
</span><span id="__span-2-10"><a id="__codelineno-2-10" name="__codelineno-2-10" href="#__codelineno-2-10"></a> <span class="n">instruction</span><span class="o">=</span><span class="p">(</span>
</span><span id="__span-2-11"><a id="__codelineno-2-11" name="__codelineno-2-11" href="#__codelineno-2-11"></a> <span class="s2">"You are a helpful assistant. Use the frontend tools when they fit "</span>
</span><span id="__span-2-12"><a id="__codelineno-2-12" name="__codelineno-2-12" href="#__codelineno-2-12"></a> <span class="s2">"the request."</span>
</span><span id="__span-2-13"><a id="__codelineno-2-13" name="__codelineno-2-13" href="#__codelineno-2-13"></a> <span class="p">),</span>
</span><span id="__span-2-14"><a id="__codelineno-2-14" name="__codelineno-2-14" href="#__codelineno-2-14"></a> <span class="n">tools</span><span class="o">=</span><span class="p">[</span><span class="n">AGUIToolset</span><span class="p">()],</span>
</span><span id="__span-2-15"><a id="__codelineno-2-15" name="__codelineno-2-15" href="#__codelineno-2-15"></a><span class="p">)</span>
</span><span id="__span-2-16"><a id="__codelineno-2-16" name="__codelineno-2-16" href="#__codelineno-2-16"></a>
</span><span id="__span-2-17"><a id="__codelineno-2-17" name="__codelineno-2-17" href="#__codelineno-2-17"></a><span class="n">adk_app</span> <span class="o">=</span> <span class="n">App</span><span class="p">(</span>
</span><span id="__span-2-18"><a id="__codelineno-2-18" name="__codelineno-2-18" href="#__codelineno-2-18"></a> <span class="n">name</span><span class="o">=</span><span class="s2">"copilotkit_app"</span><span class="p">,</span>
</span><span id="__span-2-19"><a id="__codelineno-2-19" name="__codelineno-2-19" href="#__codelineno-2-19"></a> <span class="n">root_agent</span><span class="o">=</span><span class="n">root_agent</span><span class="p">,</span>
</span><span id="__span-2-20"><a id="__codelineno-2-20" name="__codelineno-2-20" href="#__codelineno-2-20"></a> <span class="n">resumability_config</span><span class="o">=</span><span class="n">ResumabilityConfig</span><span class="p">(</span><span class="n">is_resumable</span><span class="o">=</span><span class="kc">True</span><span class="p">),</span>
</span><span id="__span-2-21"><a id="__codelineno-2-21" name="__codelineno-2-21" href="#__codelineno-2-21"></a><span class="p">)</span>
</span><span id="__span-2-22"><a id="__codelineno-2-22" name="__codelineno-2-22" href="#__codelineno-2-22"></a>
</span><span id="__span-2-23"><a id="__codelineno-2-23" name="__codelineno-2-23" href="#__codelineno-2-23"></a><span class="n">ag_ui_agent</span> <span class="o">=</span> <span class="n">ADKAgent</span><span class="o">.</span><span class="n">from_app</span><span class="p">(</span>
</span><span id="__span-2-24"><a id="__codelineno-2-24" name="__codelineno-2-24" href="#__codelineno-2-24"></a> <span class="n">adk_app</span><span class="p">,</span>
</span><span id="__span-2-25"><a id="__codelineno-2-25" name="__codelineno-2-25" href="#__codelineno-2-25"></a> <span class="n">user_id</span><span class="o">=</span><span class="s2">"local_user"</span><span class="p">,</span>
</span><span id="__span-2-26"><a id="__codelineno-2-26" name="__codelineno-2-26" href="#__codelineno-2-26"></a> <span class="n">use_in_memory_services</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
</span><span id="__span-2-27"><a id="__codelineno-2-27" name="__codelineno-2-27" href="#__codelineno-2-27"></a><span class="p">)</span>
</span><span id="__span-2-28"><a id="__codelineno-2-28" name="__codelineno-2-28" href="#__codelineno-2-28"></a>
</span><span id="__span-2-29"><a id="__codelineno-2-29" name="__codelineno-2-29" href="#__codelineno-2-29"></a><span class="n">app</span> <span class="o">=</span> <span class="n">FastAPI</span><span class="p">()</span>
</span><span id="__span-2-30"><a id="__codelineno-2-30" name="__codelineno-2-30" href="#__codelineno-2-30"></a><span class="n">add_adk_fastapi_endpoint</span><span class="p">(</span><span class="n">app</span><span class="p">,</span> <span class="n">ag_ui_agent</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="s2">"/ag-ui"</span><span class="p">)</span>
</span></code></pre></div>
<p>The <code>AGUIToolset()</code> toolset makes tools registered in the frontend callable by
the agent. Creating the middleware with <code>ADKAgent.from_app()</code> and
<code>ResumabilityConfig</code> lets a run pause on a frontend tool call and resume when
the result arrives.</p>
<p>Start the backend:</p>
<div class="language-bash highlight"><pre><span></span><code><span id="__span-3-1"><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a>uvicorn<span class="w"> </span>agent:app<span class="w"> </span>--reload<span class="w"> </span>--port<span class="w"> </span><span class="m">8000</span>
</span></code></pre></div>
<h3 id="2-register-the-endpoint-with-copilotkit-runtime">2. Register the endpoint with CopilotKit Runtime<a class="headerlink" href="#2-register-the-endpoint-with-copilotkit-runtime" title="Permanent link">&para;</a></h3>
<p>CopilotKit Runtime runs inside your web application and forwards AG-UI runs to
the ADK endpoint. In a Next.js app, add a route:</p>
<div class="language-typescript highlight"><span class="filename">app/api/copilotkit/[[...slug]]/route.ts</span><pre><span></span><code><span id="__span-4-1"><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">HttpAgent</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@ag-ui/client"</span><span class="p">;</span>
</span><span id="__span-4-2"><a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-4-3"><a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a><span class="w"> </span><span class="nx">CopilotRuntime</span><span class="p">,</span>
</span><span id="__span-4-4"><a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a><span class="w"> </span><span class="nx">InMemoryAgentRunner</span><span class="p">,</span>
</span><span id="__span-4-5"><a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a><span class="w"> </span><span class="nx">createCopilotEndpoint</span><span class="p">,</span>
</span><span id="__span-4-6"><a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@copilotkit/runtime/v2"</span><span class="p">;</span>
</span><span id="__span-4-7"><a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">handle</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"hono/vercel"</span><span class="p">;</span>
</span><span id="__span-4-8"><a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a>
</span><span id="__span-4-9"><a id="__codelineno-4-9" name="__codelineno-4-9" href="#__codelineno-4-9"></a><span class="kd">const</span><span class="w"> </span><span class="nx">runtime</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">CopilotRuntime</span><span class="p">({</span>
</span><span id="__span-4-10"><a id="__codelineno-4-10" name="__codelineno-4-10" href="#__codelineno-4-10"></a><span class="w"> </span><span class="nx">agents</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-4-11"><a id="__codelineno-4-11" name="__codelineno-4-11" href="#__codelineno-4-11"></a><span class="w"> </span><span class="nx">default</span><span class="o">:</span><span class="w"> </span><span class="kt">new</span><span class="w"> </span><span class="nx">HttpAgent</span><span class="p">({</span>
</span><span id="__span-4-12"><a id="__codelineno-4-12" name="__codelineno-4-12" href="#__codelineno-4-12"></a><span class="w"> </span><span class="nx">url</span><span class="o">:</span><span class="w"> </span><span class="kt">process.env.ADK_AG_UI_URL</span><span class="w"> </span><span class="o">??</span><span class="w"> </span><span class="s2">"http://localhost:8000/ag-ui"</span><span class="p">,</span>
</span><span id="__span-4-13"><a id="__codelineno-4-13" name="__codelineno-4-13" href="#__codelineno-4-13"></a><span class="w"> </span><span class="p">}),</span>
</span><span id="__span-4-14"><a id="__codelineno-4-14" name="__codelineno-4-14" href="#__codelineno-4-14"></a><span class="w"> </span><span class="p">},</span>
</span><span id="__span-4-15"><a id="__codelineno-4-15" name="__codelineno-4-15" href="#__codelineno-4-15"></a><span class="w"> </span><span class="nx">runner</span><span class="o">:</span><span class="w"> </span><span class="kt">new</span><span class="w"> </span><span class="nx">InMemoryAgentRunner</span><span class="p">(),</span>
</span><span id="__span-4-16"><a id="__codelineno-4-16" name="__codelineno-4-16" href="#__codelineno-4-16"></a><span class="p">});</span>
</span><span id="__span-4-17"><a id="__codelineno-4-17" name="__codelineno-4-17" href="#__codelineno-4-17"></a>
</span><span id="__span-4-18"><a id="__codelineno-4-18" name="__codelineno-4-18" href="#__codelineno-4-18"></a><span class="kd">const</span><span class="w"> </span><span class="nx">app</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">createCopilotEndpoint</span><span class="p">({</span>
</span><span id="__span-4-19"><a id="__codelineno-4-19" name="__codelineno-4-19" href="#__codelineno-4-19"></a><span class="w"> </span><span class="nx">runtime</span><span class="p">,</span>
</span><span id="__span-4-20"><a id="__codelineno-4-20" name="__codelineno-4-20" href="#__codelineno-4-20"></a><span class="w"> </span><span class="nx">basePath</span><span class="o">:</span><span class="w"> </span><span class="s2">"/api/copilotkit"</span><span class="p">,</span>
</span><span id="__span-4-21"><a id="__codelineno-4-21" name="__codelineno-4-21" href="#__codelineno-4-21"></a><span class="p">});</span>
</span><span id="__span-4-22"><a id="__codelineno-4-22" name="__codelineno-4-22" href="#__codelineno-4-22"></a>
</span><span id="__span-4-23"><a id="__codelineno-4-23" name="__codelineno-4-23" href="#__codelineno-4-23"></a><span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">GET</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">handle</span><span class="p">(</span><span class="nx">app</span><span class="p">);</span>
</span><span id="__span-4-24"><a id="__codelineno-4-24" name="__codelineno-4-24" href="#__codelineno-4-24"></a><span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">POST</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">handle</span><span class="p">(</span><span class="nx">app</span><span class="p">);</span>
</span><span id="__span-4-25"><a id="__codelineno-4-25" name="__codelineno-4-25" href="#__codelineno-4-25"></a><span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">PATCH</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">handle</span><span class="p">(</span><span class="nx">app</span><span class="p">);</span>
</span><span id="__span-4-26"><a id="__codelineno-4-26" name="__codelineno-4-26" href="#__codelineno-4-26"></a><span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">DELETE</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">handle</span><span class="p">(</span><span class="nx">app</span><span class="p">);</span>
</span></code></pre></div>
<h3 id="3-render-chat">3. Render chat<a class="headerlink" href="#3-render-chat" title="Permanent link">&para;</a></h3>
<p>Mount the provider once near the root of the React tree, then place the chat
component anywhere below it:</p>
<div class="language-tsx highlight"><span class="filename">app/providers.tsx</span><pre><span></span><code><span id="__span-5-1"><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="s2">"use client"</span><span class="p">;</span>
</span><span id="__span-5-2"><a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a>
</span><span id="__span-5-3"><a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">CopilotKit</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@copilotkit/react-core/v2"</span><span class="p">;</span>
</span><span id="__span-5-4"><a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="k">import</span><span class="w"> </span><span class="s2">"@copilotkit/react-core/v2/styles.css"</span><span class="p">;</span>
</span><span id="__span-5-5"><a id="__codelineno-5-5" name="__codelineno-5-5" href="#__codelineno-5-5"></a>
</span><span id="__span-5-6"><a id="__codelineno-5-6" name="__codelineno-5-6" href="#__codelineno-5-6"></a><span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">Providers</span><span class="p">({</span><span class="w"> </span><span class="nx">children</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">children</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ReactNode</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-5-7"><a id="__codelineno-5-7" name="__codelineno-5-7" href="#__codelineno-5-7"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-5-8"><a id="__codelineno-5-8" name="__codelineno-5-8" href="#__codelineno-5-8"></a><span class="w"> </span><span class="p">&lt;</span><span class="nt">CopilotKit</span><span class="w"> </span><span class="na">runtimeUrl</span><span class="o">=</span><span class="s">"/api/copilotkit"</span><span class="w"> </span><span class="na">useSingleEndpoint</span><span class="o">=</span><span class="p">{</span><span class="kc">false</span><span class="p">}&gt;</span>
</span><span id="__span-5-9"><a id="__codelineno-5-9" name="__codelineno-5-9" href="#__codelineno-5-9"></a><span class="w"> </span><span class="p">{</span><span class="nx">children</span><span class="p">}</span>
</span><span id="__span-5-10"><a id="__codelineno-5-10" name="__codelineno-5-10" href="#__codelineno-5-10"></a><span class="w"> </span><span class="p">&lt;/</span><span class="nt">CopilotKit</span><span class="p">&gt;</span>
</span><span id="__span-5-11"><a id="__codelineno-5-11" name="__codelineno-5-11" href="#__codelineno-5-11"></a><span class="w"> </span><span class="p">);</span>
</span><span id="__span-5-12"><a id="__codelineno-5-12" name="__codelineno-5-12" href="#__codelineno-5-12"></a><span class="p">}</span>
</span></code></pre></div>
<div class="language-tsx highlight"><span class="filename">app/page.tsx</span><pre><span></span><code><span id="__span-6-1"><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="s2">"use client"</span><span class="p">;</span>
</span><span id="__span-6-2"><a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a>
</span><span id="__span-6-3"><a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">CopilotChat</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@copilotkit/react-core/v2"</span><span class="p">;</span>
</span><span id="__span-6-4"><a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a>
</span><span id="__span-6-5"><a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">Page</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-6-6"><a id="__codelineno-6-6" name="__codelineno-6-6" href="#__codelineno-6-6"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-6-7"><a id="__codelineno-6-7" name="__codelineno-6-7" href="#__codelineno-6-7"></a><span class="w"> </span><span class="p">&lt;</span><span class="nt">main</span><span class="w"> </span><span class="na">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="s2">"100vh"</span><span class="w"> </span><span class="p">}}&gt;</span>
</span><span id="__span-6-8"><a id="__codelineno-6-8" name="__codelineno-6-8" href="#__codelineno-6-8"></a><span class="w"> </span><span class="p">&lt;</span><span class="nt">CopilotChat</span><span class="w"> </span><span class="na">agentId</span><span class="o">=</span><span class="s">"default"</span><span class="w"> </span><span class="p">/&gt;</span>
</span><span id="__span-6-9"><a id="__codelineno-6-9" name="__codelineno-6-9" href="#__codelineno-6-9"></a><span class="w"> </span><span class="p">&lt;/</span><span class="nt">main</span><span class="p">&gt;</span>
</span><span id="__span-6-10"><a id="__codelineno-6-10" name="__codelineno-6-10" href="#__codelineno-6-10"></a><span class="w"> </span><span class="p">);</span>
</span><span id="__span-6-11"><a id="__codelineno-6-11" name="__codelineno-6-11" href="#__codelineno-6-11"></a><span class="p">}</span>
</span></code></pre></div>
<p>The <code>CopilotChat</code> component handles message state, streaming, tool call
display, attachments, and suggestions.</p>
<h3 id="4-add-a-frontend-tool">4. Add a frontend tool<a class="headerlink" href="#4-add-a-frontend-tool" title="Permanent link">&para;</a></h3>
<p>Register a tool in the browser. The <code>AGUIToolset()</code> on the ADK side exposes it
to the agent on every run:</p>
<div class="language-tsx highlight"><span class="filename">app/SearchTool.tsx</span><pre><span></span><code><span id="__span-7-1"><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="s2">"use client"</span><span class="p">;</span>
</span><span id="__span-7-2"><a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a>
</span><span id="__span-7-3"><a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useFrontendTool</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@copilotkit/react-core/v2"</span><span class="p">;</span>
</span><span id="__span-7-4"><a id="__codelineno-7-4" name="__codelineno-7-4" href="#__codelineno-7-4"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">z</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"zod"</span><span class="p">;</span>
</span><span id="__span-7-5"><a id="__codelineno-7-5" name="__codelineno-7-5" href="#__codelineno-7-5"></a>
</span><span id="__span-7-6"><a id="__codelineno-7-6" name="__codelineno-7-6" href="#__codelineno-7-6"></a><span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">SearchTool</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-7-7"><a id="__codelineno-7-7" name="__codelineno-7-7" href="#__codelineno-7-7"></a><span class="w"> </span><span class="nx">useFrontendTool</span><span class="p">({</span>
</span><span id="__span-7-8"><a id="__codelineno-7-8" name="__codelineno-7-8" href="#__codelineno-7-8"></a><span class="w"> </span><span class="nx">name</span><span class="o">:</span><span class="w"> </span><span class="s2">"searchDocs"</span><span class="p">,</span>
</span><span id="__span-7-9"><a id="__codelineno-7-9" name="__codelineno-7-9" href="#__codelineno-7-9"></a><span class="w"> </span><span class="nx">description</span><span class="o">:</span><span class="w"> </span><span class="s2">"Search the current application documentation."</span><span class="p">,</span>
</span><span id="__span-7-10"><a id="__codelineno-7-10" name="__codelineno-7-10" href="#__codelineno-7-10"></a><span class="w"> </span><span class="nx">parameters</span><span class="o">:</span><span class="w"> </span><span class="kt">z.object</span><span class="p">({</span>
</span><span id="__span-7-11"><a id="__codelineno-7-11" name="__codelineno-7-11" href="#__codelineno-7-11"></a><span class="w"> </span><span class="nx">query</span><span class="o">:</span><span class="w"> </span><span class="kt">z.string</span><span class="p">(),</span>
</span><span id="__span-7-12"><a id="__codelineno-7-12" name="__codelineno-7-12" href="#__codelineno-7-12"></a><span class="w"> </span><span class="p">}),</span>
</span><span id="__span-7-13"><a id="__codelineno-7-13" name="__codelineno-7-13" href="#__codelineno-7-13"></a><span class="w"> </span><span class="nx">handler</span><span class="o">:</span><span class="w"> </span><span class="kt">async</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="nx">query</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-7-14"><a id="__codelineno-7-14" name="__codelineno-7-14" href="#__codelineno-7-14"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">response</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">fetch</span><span class="p">(</span><span class="sb">`/api/search?q=</span><span class="si">${</span><span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
</span><span id="__span-7-15"><a id="__codelineno-7-15" name="__codelineno-7-15" href="#__codelineno-7-15"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">response</span><span class="p">.</span><span class="nx">text</span><span class="p">();</span>
</span><span id="__span-7-16"><a id="__codelineno-7-16" name="__codelineno-7-16" href="#__codelineno-7-16"></a><span class="w"> </span><span class="p">},</span>
</span><span id="__span-7-17"><a id="__codelineno-7-17" name="__codelineno-7-17" href="#__codelineno-7-17"></a><span class="w"> </span><span class="p">});</span>
</span><span id="__span-7-18"><a id="__codelineno-7-18" name="__codelineno-7-18" href="#__codelineno-7-18"></a>
</span><span id="__span-7-19"><a id="__codelineno-7-19" name="__codelineno-7-19" href="#__codelineno-7-19"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span>
</span><span id="__span-7-20"><a id="__codelineno-7-20" name="__codelineno-7-20" href="#__codelineno-7-20"></a><span class="p">}</span>
</span></code></pre></div>
<p>Render <code>&lt;SearchTool /&gt;</code> below the provider, next to <code>&lt;CopilotChat /&gt;</code>.</p>
<h2 id="available-hooks">Available hooks<a class="headerlink" href="#available-hooks" title="Permanent link">&para;</a></h2>
<table>
<thead>
<tr>
<th>Hook</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>useFrontendTool</code></td>
<td>Register a tool that executes in the browser and returns its result to the agent</td>
</tr>
<tr>
<td><code>useRenderTool</code></td>
<td>Render progress and results for a backend tool by name</td>
</tr>
<tr>
<td><code>useComponent</code></td>
<td>Register a render-only component the agent can place in the chat</td>
</tr>
<tr>
<td><code>useHumanInTheLoop</code></td>
<td>Register a tool whose UI must call <code>respond()</code> before the run continues</td>
</tr>
<tr>
<td><code>useAgentContext</code></td>
<td>Share application state with the agent as context on every run</td>
</tr>
<tr>
<td><code>useAgent</code></td>
<td>Read messages, state, and run status when building a custom chat surface</td>
</tr>
</tbody>
</table>
<p>All hooks are exported from <code>@copilotkit/react-core/v2</code>. See the
<a href="https://docs.copilotkit.ai/reference/hooks/useFrontendTool">CopilotKit hook reference</a>
for parameters and return values.</p>
<h2 id="other-clients">Other clients<a class="headerlink" href="#other-clients" title="Permanent link">&para;</a></h2>
<p>The same CopilotKit Runtime route and ADK endpoint serve every CopilotKit
client:</p>
<ul>
<li><strong>Angular</strong>: the <code>@copilotkit/angular</code> package with <code>provideCopilotKit()</code> and
the <code>&lt;copilot-chat&gt;</code> component. See the
<a href="https://docs.copilotkit.ai/angular">Angular guide</a>.</li>
<li><strong>Vue</strong>: the <code>@copilotkit/vue</code> package with <code>CopilotKitProvider</code> and
<code>CopilotChat</code>. See the <a href="https://docs.copilotkit.ai/vue">Vue guide</a>.</li>
<li><strong>React Native</strong>: the <code>@copilotkit/react-native</code> package with headless hooks
and an optional packaged chat under <code>@copilotkit/react-native/components</code>.
See the <a href="https://docs.copilotkit.ai/react-native">React Native guide</a>.</li>
</ul>
<h2 id="messaging-channels">Messaging channels<a class="headerlink" href="#messaging-channels" title="Permanent link">&para;</a></h2>
<p>The open source Channels SDK connects a Slack workspace directly to the
<code>ag-ui-adk</code> endpoint. It does not need the CopilotKit Runtime route:</p>
<div class="language-bash highlight"><pre><span></span><code><span id="__span-8-1"><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a>npm<span class="w"> </span>install<span class="w"> </span>@copilotkit/bot<span class="w"> </span>@copilotkit/bot-slack<span class="w"> </span>@copilotkit/bot-ui
</span></code></pre></div>
<div class="language-typescript highlight"><span class="filename">slack-bot.ts</span><pre><span></span><code><span id="__span-9-1"><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">createBot</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@copilotkit/bot"</span><span class="p">;</span>
</span><span id="__span-9-2"><a id="__codelineno-9-2" name="__codelineno-9-2" href="#__codelineno-9-2"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-9-3"><a id="__codelineno-9-3" name="__codelineno-9-3" href="#__codelineno-9-3"></a><span class="w"> </span><span class="nx">defaultSlackContext</span><span class="p">,</span>
</span><span id="__span-9-4"><a id="__codelineno-9-4" name="__codelineno-9-4" href="#__codelineno-9-4"></a><span class="w"> </span><span class="nx">defaultSlackTools</span><span class="p">,</span>
</span><span id="__span-9-5"><a id="__codelineno-9-5" name="__codelineno-9-5" href="#__codelineno-9-5"></a><span class="w"> </span><span class="nx">SanitizingHttpAgent</span><span class="p">,</span>
</span><span id="__span-9-6"><a id="__codelineno-9-6" name="__codelineno-9-6" href="#__codelineno-9-6"></a><span class="w"> </span><span class="nx">slack</span><span class="p">,</span>
</span><span id="__span-9-7"><a id="__codelineno-9-7" name="__codelineno-9-7" href="#__codelineno-9-7"></a><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">"@copilotkit/bot-slack"</span><span class="p">;</span>
</span><span id="__span-9-8"><a id="__codelineno-9-8" name="__codelineno-9-8" href="#__codelineno-9-8"></a>
</span><span id="__span-9-9"><a id="__codelineno-9-9" name="__codelineno-9-9" href="#__codelineno-9-9"></a><span class="kd">const</span><span class="w"> </span><span class="nx">bot</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">createBot</span><span class="p">({</span>
</span><span id="__span-9-10"><a id="__codelineno-9-10" name="__codelineno-9-10" href="#__codelineno-9-10"></a><span class="w"> </span><span class="nx">adapters</span><span class="o">:</span><span class="w"> </span><span class="p">[</span>
</span><span id="__span-9-11"><a id="__codelineno-9-11" name="__codelineno-9-11" href="#__codelineno-9-11"></a><span class="w"> </span><span class="nx">slack</span><span class="p">({</span>
</span><span id="__span-9-12"><a id="__codelineno-9-12" name="__codelineno-9-12" href="#__codelineno-9-12"></a><span class="w"> </span><span class="nx">botToken</span><span class="o">:</span><span class="w"> </span><span class="kt">process.env.SLACK_BOT_TOKEN</span><span class="o">!</span><span class="p">,</span>
</span><span id="__span-9-13"><a id="__codelineno-9-13" name="__codelineno-9-13" href="#__codelineno-9-13"></a><span class="w"> </span><span class="nx">appToken</span><span class="o">:</span><span class="w"> </span><span class="kt">process.env.SLACK_APP_TOKEN</span><span class="o">!</span><span class="p">,</span>
</span><span id="__span-9-14"><a id="__codelineno-9-14" name="__codelineno-9-14" href="#__codelineno-9-14"></a><span class="w"> </span><span class="p">}),</span>
</span><span id="__span-9-15"><a id="__codelineno-9-15" name="__codelineno-9-15" href="#__codelineno-9-15"></a><span class="w"> </span><span class="p">],</span>
</span><span id="__span-9-16"><a id="__codelineno-9-16" name="__codelineno-9-16" href="#__codelineno-9-16"></a><span class="w"> </span><span class="nx">agent</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">threadId</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-9-17"><a id="__codelineno-9-17" name="__codelineno-9-17" href="#__codelineno-9-17"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">agent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">SanitizingHttpAgent</span><span class="p">({</span>
</span><span id="__span-9-18"><a id="__codelineno-9-18" name="__codelineno-9-18" href="#__codelineno-9-18"></a><span class="w"> </span><span class="nx">url</span><span class="o">:</span><span class="w"> </span><span class="kt">process.env.ADK_AG_UI_URL</span><span class="w"> </span><span class="o">??</span><span class="w"> </span><span class="s2">"http://localhost:8000/ag-ui"</span><span class="p">,</span>
</span><span id="__span-9-19"><a id="__codelineno-9-19" name="__codelineno-9-19" href="#__codelineno-9-19"></a><span class="w"> </span><span class="p">});</span>
</span><span id="__span-9-20"><a id="__codelineno-9-20" name="__codelineno-9-20" href="#__codelineno-9-20"></a><span class="w"> </span><span class="nx">agent</span><span class="p">.</span><span class="nx">threadId</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">threadId</span><span class="p">;</span>
</span><span id="__span-9-21"><a id="__codelineno-9-21" name="__codelineno-9-21" href="#__codelineno-9-21"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">agent</span><span class="p">;</span>
</span><span id="__span-9-22"><a id="__codelineno-9-22" name="__codelineno-9-22" href="#__codelineno-9-22"></a><span class="w"> </span><span class="p">},</span>
</span><span id="__span-9-23"><a id="__codelineno-9-23" name="__codelineno-9-23" href="#__codelineno-9-23"></a><span class="w"> </span><span class="nx">tools</span><span class="o">:</span><span class="w"> </span><span class="p">[...</span><span class="nx">defaultSlackTools</span><span class="p">],</span>
</span><span id="__span-9-24"><a id="__codelineno-9-24" name="__codelineno-9-24" href="#__codelineno-9-24"></a><span class="w"> </span><span class="nx">context</span><span class="o">:</span><span class="w"> </span><span class="p">[...</span><span class="nx">defaultSlackContext</span><span class="p">],</span>
</span><span id="__span-9-25"><a id="__codelineno-9-25" name="__codelineno-9-25" href="#__codelineno-9-25"></a><span class="p">});</span>
</span><span id="__span-9-26"><a id="__codelineno-9-26" name="__codelineno-9-26" href="#__codelineno-9-26"></a>
</span><span id="__span-9-27"><a id="__codelineno-9-27" name="__codelineno-9-27" href="#__codelineno-9-27"></a><span class="nx">bot</span><span class="p">.</span><span class="nx">onMention</span><span class="p">(({</span><span class="w"> </span><span class="nx">thread</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">thread</span><span class="p">.</span><span class="nx">runAgent</span><span class="p">());</span>
</span><span id="__span-9-28"><a id="__codelineno-9-28" name="__codelineno-9-28" href="#__codelineno-9-28"></a>
</span><span id="__span-9-29"><a id="__codelineno-9-29" name="__codelineno-9-29" href="#__codelineno-9-29"></a><span class="k">await</span><span class="w"> </span><span class="nx">bot</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
</span></code></pre></div>
<p>The adapter runs in Socket Mode by default, so local development needs an
app-level token but no public URL. Each Slack thread maps to one AG-UI thread,
and Block Kit rendering, interactions, and approvals are handled by the
adapter. See the <a href="https://docs.copilotkit.ai/slack">Channels documentation</a>
for Slack app settings and self-hosted deployment.</p>
<h2 id="additional-resources">Additional resources<a class="headerlink" href="#additional-resources" title="Permanent link">&para;</a></h2>
<ul>
<li><a href="https://docs.copilotkit.ai/adk">CopilotKit documentation for ADK</a></li>
<li><a href="https://github.com/CopilotKit/CopilotKit">CopilotKit on GitHub</a></li>
<li><a href="https://pypi.org/project/ag-ui-adk/">ADK middleware for AG-UI (<code>ag-ui-adk</code>) on PyPI</a></li>
<li><a href="https://github.com/ag-ui-protocol/ag-ui/tree/main/integrations/adk-middleware">ADK middleware source</a></li>
<li><a href="https://dojo.ag-ui.com">AG-UI Dojo</a> with live ADK examples</li>
</ul>
</article>
</div>
<script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright Google 2026&nbsp;&nbsp;|&nbsp;&nbsp;<a href="//github.com/google/adk-docs/blob/main/LICENSE">License</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="//policies.google.com/privacy">Privacy</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#__consent">Manage cookies</a>
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<div class="md-progress" data-md-component="progress" role="progressbar"></div>
<div class="md-consent" data-md-component="consent" id="__consent" hidden>
<div class="md-consent__overlay"></div>
<aside class="md-consent__inner">
<form class="md-consent__form md-grid md-typeset" name="consent">
<h4>Cookie consent</h4>
<p>We use cookies to recognize repeated visits and preferences, as well as to measure the effectiveness of our documentation and whether users find the information they need. With your consent, you're helping us to make our documentation better.</p>
<input class="md-toggle" type="checkbox" id="__settings" >
<div class="md-consent__settings">
<ul class="task-list">
<li class="task-list-item">
<label class="task-list-control">
<input type="checkbox" name="analytics" checked>
<span class="task-list-indicator"></span>
Google Analytics
</label>
</li>
<li class="task-list-item">
<label class="task-list-control">
<input type="checkbox" name="github" checked>
<span class="task-list-indicator"></span>
GitHub
</label>
</li>
</ul>
</div>
<div class="md-consent__controls">
<button class="md-button md-button--primary">Accept</button>
<label class="md-button" for="__settings">Manage settings</label>
</div>
</form>
</aside>
</div>
<script>var consent=__md_get("__consent");if(consent)for(var input of document.forms.consent.elements)input.name&&(input.checked=consent[input.name]||!1);else"file:"!==location.protocol&&setTimeout((function(){document.querySelector("[data-md-component=consent]").hidden=!1}),250);var form=document.forms.consent;for(var action of["submit","reset"])form.addEventListener(action,(function(e){if(e.preventDefault(),"reset"===e.type)for(var n of document.forms.consent.elements)n.name&&(n.checked=!1);__md_set("__consent",Object.fromEntries(Array.from(new FormData(form).keys()).map((function(e){return[e,!0]})))),location.hash="",location.reload()}))</script>
<script id="__config" type="application/json">{"annotate": null, "base": "../..", "features": ["content.action.edit", "content.action.view", "content.code.copy", "content.tabs.link", "content.tooltips", "navigation.indexes", "navigation.instant", "navigation.instant.progress", "navigation.path", "navigation.sections", "navigation.top", "navigation.tabs", "toc.follow"], "search": "../../assets/javascripts/workers/search.7a47a382.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../../assets/javascripts/bundle.e71a0d61.min.js"></script>
<script src="../../javascript/copy-page.js"></script>
</body>
</html>