From 19c4a3d8dbe52e1c7e7f383974439a4987f9e83a Mon Sep 17 00:00:00 2001 From: Max Korp Date: Tue, 2 Dec 2025 19:09:52 -0700 Subject: [PATCH 1/5] Add ag-ui to docs --- docs/community/tools/ag-ui.md | 108 ++++++++++++++++++++++++++++++++++ mkdocs.yml | 1 + 2 files changed, 109 insertions(+) create mode 100644 docs/community/tools/ag-ui.md diff --git a/docs/community/tools/ag-ui.md b/docs/community/tools/ag-ui.md new file mode 100644 index 00000000..f070a91e --- /dev/null +++ b/docs/community/tools/ag-ui.md @@ -0,0 +1,108 @@ +# Build chat experiences with AG-UI and CopilotKit + +{{ community_contribution_banner }} + +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 a Strands agent that +demonstrates some of the features supported by AG-UI. + +## Quickstart + +To get started, let's create a sample application with a Strands agent and a simple +web client: + +``` +npx create-ag-ui-app@latest --strands +``` + +### Chat + +Chat is a familiar interface for exposing your agent, and AG-UI handles +streaming messages between your users and agents: + +```jsx title="src/app/page.tsx" +const 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/strands/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: + +```jsx 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 + }, +}); +``` + +Learn more about the Tool-based Generative UI +[in the CopilotKit docs](https://docs.copilotkit.ai/strands/generative-ui/tool-based). + +### Shared State + +Strands agents are 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: + +```jsx +const { state, setState } = useCoAgent({ + 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/strands/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/strands/generative-ui/agentic) +- [Human in the Loop](https://docs.copilotkit.ai/strands/human-in-the-loop/agent) +- [Frontend Actions](https://docs.copilotkit.ai/strands/frontend-actions) + +Or try them out in the [AG-UI Dojo](https://dojo.ag-ui.com). diff --git a/mkdocs.yml b/mkdocs.yml index cf14a1a2..47af6887 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -158,6 +158,7 @@ nav: - Community Packages: community/community-packages.md - Tools: - UTCP: community/tools/utcp.md + - AG-UI: community/tools/ag-ui.md - Model Providers: - Cohere: community/model-providers/cohere.md - CLOVA Studio: community/model-providers/clova-studio.md From 274456d852172c33777be136690f96cd10b75093 Mon Sep 17 00:00:00 2001 From: Max Korp Date: Tue, 2 Dec 2025 19:16:24 -0700 Subject: [PATCH 2/5] update docs and cli from `strands` to `aws-strands-py` --- docs/community/tools/ag-ui.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/community/tools/ag-ui.md b/docs/community/tools/ag-ui.md index f070a91e..57ba8feb 100644 --- a/docs/community/tools/ag-ui.md +++ b/docs/community/tools/ag-ui.md @@ -25,7 +25,7 @@ To get started, let's create a sample application with a Strands agent and a sim web client: ``` -npx create-ag-ui-app@latest --strands +npx create-ag-ui-app@latest --aws-strands-py ``` ### Chat @@ -46,7 +46,7 @@ const labels = { ``` Learn more about the chat UI -[in the CopilotKit docs](https://docs.copilotkit.ai/strands/agentic-chat-ui). +[in the CopilotKit docs](https://docs.copilotkit.ai/aws-strands-py/agentic-chat-ui). ### Tool Based Generative UI (Rendering Tools) @@ -68,7 +68,7 @@ useCopilotAction({ ``` Learn more about the Tool-based Generative UI -[in the CopilotKit docs](https://docs.copilotkit.ai/strands/generative-ui/tool-based). +[in the CopilotKit docs](https://docs.copilotkit.ai/aws-strands-py/generative-ui/tool-based). ### Shared State @@ -89,7 +89,7 @@ const { state, setState } = useCoAgent({ ``` Learn more about shared state -[in the CopilotKit docs](https://docs.copilotkit.ai/strands/shared-state). +[in the CopilotKit docs](https://docs.copilotkit.ai/aws-strands-py/shared-state). ### Try it out! @@ -101,8 +101,8 @@ npm install && npm run dev 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/strands/generative-ui/agentic) -- [Human in the Loop](https://docs.copilotkit.ai/strands/human-in-the-loop/agent) -- [Frontend Actions](https://docs.copilotkit.ai/strands/frontend-actions) +- [Agentic Generative UI](https://docs.copilotkit.ai/aws-strands-py/generative-ui/agentic) +- [Human in the Loop](https://docs.copilotkit.ai/aws-strands-py/human-in-the-loop/agent) +- [Frontend Actions](https://docs.copilotkit.ai/aws-strands-py/frontend-actions) Or try them out in the [AG-UI Dojo](https://dojo.ag-ui.com). From 822003cbda4e717a4d75cc894522da20b7dd11c6 Mon Sep 17 00:00:00 2001 From: Max Korp Date: Wed, 3 Dec 2025 08:43:45 -0700 Subject: [PATCH 3/5] Change docs path for ag-ui --- docs/community/tools/ag-ui.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/community/tools/ag-ui.md b/docs/community/tools/ag-ui.md index 57ba8feb..2709b4ff 100644 --- a/docs/community/tools/ag-ui.md +++ b/docs/community/tools/ag-ui.md @@ -46,7 +46,7 @@ const labels = { ``` Learn more about the chat UI -[in the CopilotKit docs](https://docs.copilotkit.ai/aws-strands-py/agentic-chat-ui). +[in the CopilotKit docs](https://docs.copilotkit.ai/aws-strands/agentic-chat-ui). ### Tool Based Generative UI (Rendering Tools) @@ -68,7 +68,7 @@ useCopilotAction({ ``` Learn more about the Tool-based Generative UI -[in the CopilotKit docs](https://docs.copilotkit.ai/aws-strands-py/generative-ui/tool-based). +[in the CopilotKit docs](https://docs.copilotkit.ai/aws-strands/generative-ui/tool-based). ### Shared State @@ -89,7 +89,7 @@ const { state, setState } = useCoAgent({ ``` Learn more about shared state -[in the CopilotKit docs](https://docs.copilotkit.ai/aws-strands-py/shared-state). +[in the CopilotKit docs](https://docs.copilotkit.ai/aws-strands/shared-state). ### Try it out! @@ -101,8 +101,8 @@ npm install && npm run dev 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/aws-strands-py/generative-ui/agentic) -- [Human in the Loop](https://docs.copilotkit.ai/aws-strands-py/human-in-the-loop/agent) -- [Frontend Actions](https://docs.copilotkit.ai/aws-strands-py/frontend-actions) +- [Agentic Generative UI](https://docs.copilotkit.ai/aws-strands/generative-ui/agentic) +- [Human in the Loop](https://docs.copilotkit.ai/aws-strands/human-in-the-loop/agent) +- [Frontend Actions](https://docs.copilotkit.ai/aws-strands/frontend-actions) Or try them out in the [AG-UI Dojo](https://dojo.ag-ui.com). From 4e5399673babd3d53a024d9db630181b729ce5f7 Mon Sep 17 00:00:00 2001 From: Max Korp Date: Wed, 3 Dec 2025 09:24:07 -0700 Subject: [PATCH 4/5] move ag-ui from tools to integrations --- docs/community/{tools => integrations}/ag-ui.md | 0 mkdocs.yml | 3 ++- 2 files changed, 2 insertions(+), 1 deletion(-) rename docs/community/{tools => integrations}/ag-ui.md (100%) diff --git a/docs/community/tools/ag-ui.md b/docs/community/integrations/ag-ui.md similarity index 100% rename from docs/community/tools/ag-ui.md rename to docs/community/integrations/ag-ui.md diff --git a/mkdocs.yml b/mkdocs.yml index 47af6887..f1ff043d 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -158,7 +158,8 @@ nav: - Community Packages: community/community-packages.md - Tools: - UTCP: community/tools/utcp.md - - AG-UI: community/tools/ag-ui.md + - Integrations: + - AG-UI: community/integrations/ag-ui.md - Model Providers: - Cohere: community/model-providers/cohere.md - CLOVA Studio: community/model-providers/clova-studio.md From 0edaf722fdefb02061e93f1ac2a2d757095d8cdc Mon Sep 17 00:00:00 2001 From: Max Korp Date: Wed, 3 Dec 2025 09:32:28 -0700 Subject: [PATCH 5/5] fix docs command --- docs/community/integrations/ag-ui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/community/integrations/ag-ui.md b/docs/community/integrations/ag-ui.md index 2709b4ff..b2760558 100644 --- a/docs/community/integrations/ag-ui.md +++ b/docs/community/integrations/ag-ui.md @@ -25,7 +25,7 @@ To get started, let's create a sample application with a Strands agent and a sim web client: ``` -npx create-ag-ui-app@latest --aws-strands-py +npx copilotkit create -f aws-strands-py ``` ### Chat