-
Notifications
You must be signed in to change notification settings - Fork 359
Add AG-UI adk-middleware tutorial #743
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
+116
−0
Merged
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
afc1555
Add AG-UI adk-middleware tutorial
maxkorp cbee470
Significantly trim down docs
maxkorp d796c13
Change some headers
maxkorp 0a498d7
Add AG-UI page to nav
koverholt 9e4addd
Shorten description on tutorials page
koverholt d180bf4
Edits throughout tutorial
koverholt File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
koverholt marked this conversation as resolved.
Show resolved
Hide resolved
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
# Building chat experiences with AG-UI and CopilotKit | ||
|
||
## Overview | ||
|
||
As an agent builder, you want users to interact with your agents through a rich | ||
and responsive interface. Building UIs from scratch requires a lot of effort, | ||
especially to support streaming events and client state. That's exactly what | ||
[AG-UI](https://docs.ag-ui.com/) was designed for - rich user experiences | ||
directly connected to an agent. | ||
|
||
[AG-UI](https://github.com/ag-ui-protocol/ag-ui) provides a consistent interface | ||
to empower rich clients across technology stacks, from mobile to the web and | ||
even the command line. There are a number of different clients that support | ||
AG-UI: | ||
|
||
- [CopilotKit](https://copilotkit.ai) provides tooling and components to tightly integrate your agent with web applications | ||
- Clients for [Kotlin](https://github.com/ag-ui-protocol/ag-ui/tree/main/sdks/community/kotlin), [Java](https://github.com/ag-ui-protocol/ag-ui/tree/main/sdks/community/java), [Go](https://github.com/ag-ui-protocol/ag-ui/tree/main/sdks/community/go/example/client), and [CLI implementations](https://github.com/ag-ui-protocol/ag-ui/tree/main/apps/client-cli-example/src) in TypeScript | ||
|
||
This tutorial uses CopilotKit to create a sample app backed by an ADK agent that | ||
demonstrates some of the features supported by AG-UI. | ||
|
||
## Quickstart | ||
|
||
To get started, let's create a sample application with an ADK agent and a simple | ||
web client: | ||
|
||
``` | ||
npx create-ag-ui-app@latest --adk | ||
``` | ||
|
||
### Chat | ||
|
||
Chat is a familiar interface for exposing your agent, and AG-UI handles | ||
streaming messages between your users and agents: | ||
|
||
```tsx title="src/app/page.tsx" | ||
<CopilotSidebar | ||
clickOutsideToClose={false} | ||
defaultOpen={true} | ||
labels={{ | ||
title: "Popup Assistant", | ||
initial: "👋 Hi, there! You're chatting with an agent. This agent comes with a few tools to get you started..." | ||
}} | ||
/> | ||
``` | ||
|
||
Learn more about the chat UI | ||
[in the CopilotKit docs](https://docs.copilotkit.ai/adk/agentic-chat-ui). | ||
|
||
### Tool Based Generative UI (Rendering Tools) | ||
|
||
AG-UI lets you share tool information with a Generative UI so that it can be | ||
displayed to users: | ||
|
||
```tsx title="src/app/page.tsx" | ||
useCopilotAction({ | ||
name: "get_weather", | ||
description: "Get the weather for a given location.", | ||
available: "disabled", | ||
parameters: [ | ||
{ name: "location", type: "string", required: true }, | ||
], | ||
render: ({ args }) => { | ||
return <WeatherCard location={args.location} themeColor={themeColor} /> | ||
}, | ||
}); | ||
``` | ||
|
||
Learn more about the Tool-based Generative UI | ||
[in the CopilotKit docs](https://docs.copilotkit.ai/adk/generative-ui/tool-based). | ||
|
||
### Shared State | ||
|
||
ADK agents can be stateful, and synchronizing that state between your agents and | ||
your UIs enables powerful and fluid user experiences. State can be synchronized | ||
both ways so agents are automatically aware of changes made by your user or | ||
other parts of your application: | ||
|
||
```tsx title="src/app/page.tsx" | ||
const { state, setState } = useCoAgent<AgentState>({ | ||
name: "my_agent", | ||
initialState: { | ||
proverbs: [ | ||
"CopilotKit may be new, but its the best thing since sliced bread.", | ||
], | ||
}, | ||
}) | ||
``` | ||
|
||
Learn more about shared state | ||
[in the CopilotKit docs](https://docs.copilotkit.ai/adk/shared-state). | ||
|
||
### Try it out! | ||
|
||
``` | ||
npm install && npm run dev | ||
``` | ||
|
||
## Resources | ||
|
||
To see what other features you can build into your UI with AG-UI, refer to the CopilotKit docs: | ||
|
||
- [Agentic Generative UI](https://docs.copilotkit.ai/adk/generative-ui/agentic) | ||
- [Human in the Loop](https://docs.copilotkit.ai/adk/human-in-the-loop/agent) | ||
- [Frontend Actions](https://docs.copilotkit.ai/adk/frontend-actions) | ||
|
||
Or try them out in the [AG-UI Dojo](https://dojo.ag-ui.com). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.