Skip to content

Commit b2febea

Browse files
ranst91ranst91
authored
docs(aws-strands): add TypeScript code samples (CopilotKit#5033)
## What does this PR do? Add complimentary TypeScript examples now that the TypeScript Strands integration (`@ag-ui/aws-strands`) has been published. ## Related PRs and Issues - ag-ui-protocol/ag-ui#1681 ## Checklist - [x] I have read the [Contribution Guide](https://github.com/copilotkit/copilotkit/blob/master/CONTRIBUTING.md) - [x] If the PR changes or adds functionality, I have updated the relevant documentation - [x] "Allow edits by maintainers" is checked (lets us help iterate on your PR directly — faster turnaround for everyone)
2 parents ce87d91 + ede4cd1 commit b2febea

12 files changed

Lines changed: 1200 additions & 522 deletions

File tree

‎docs/content/docs/integrations/aws-strands/frontend-tools.mdx‎

Lines changed: 87 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ icon: "lucide/Wrench"
44
description: Create frontend tools and use them within your Strands agent.
55
---
66
import { IframeSwitcher } from "@/components/content"
7+
import { Tabs, Tab } from "fumadocs-ui/components/tabs";
78
import RunAndConnect from "@/snippets/integrations/aws-strands/run-and-connect.mdx"
89

910
<IframeSwitcher
@@ -46,49 +47,94 @@ Check out the [Frontend Tools overview](/aws-strands/frontend-tools) to understa
4647
<Step>
4748
### Register the frontend tool in your agent
4849

49-
In your Strands agent, define a tool that returns `None`. This registers the tool with the LLM so it knows about it,
50+
In your Strands agent, define a tool that returns a null value. This registers the tool with the LLM so it knows about it,
5051
but the actual execution will happen on the frontend.
5152

52-
```python title="main.py"
53-
import os
54-
from strands import Agent, tool
55-
from strands.models.openai import OpenAIModel
56-
from ag_ui_strands import StrandsAgent, create_strands_app
57-
58-
@tool
59-
def change_background(background: str):
60-
"""
61-
Change the background color of the chat. Can be anything that CSS accepts.
62-
63-
Args:
64-
background: The background color or gradient. Prefer gradients.
65-
66-
Returns:
67-
None - execution happens on the frontend
68-
"""
69-
# Return None - frontend will handle execution
70-
return None # [!code highlight]
71-
72-
api_key = os.getenv("OPENAI_API_KEY", "")
73-
model = OpenAIModel(
74-
client_args={"api_key": api_key},
75-
model_id="gpt-5.4",
76-
)
77-
78-
agent = Agent(
79-
model=model,
80-
tools=[change_background], # [!code highlight]
81-
system_prompt="You are a helpful assistant.",
82-
)
83-
84-
agui_agent = StrandsAgent(
85-
agent=agent,
86-
name="my_agent",
87-
description="A helpful assistant",
88-
)
89-
90-
app = create_strands_app(agui_agent, "/")
91-
```
53+
<Tabs groupId="language_strands_agent" items={['Python', 'TypeScript']} persist>
54+
<Tab value="Python">
55+
```python title="main.py"
56+
import os
57+
from strands import Agent, tool
58+
from strands.models.openai import OpenAIModel
59+
from ag_ui_strands import StrandsAgent, create_strands_app
60+
61+
@tool
62+
def change_background(background: str):
63+
"""
64+
Change the background color of the chat. Can be anything that CSS accepts.
65+
66+
Args:
67+
background: The background color or gradient. Prefer gradients.
68+
69+
Returns:
70+
None - execution happens on the frontend
71+
"""
72+
# Return None - frontend will handle execution
73+
return None # [!code highlight]
74+
75+
api_key = os.getenv("OPENAI_API_KEY", "")
76+
model = OpenAIModel(
77+
client_args={"api_key": api_key},
78+
model_id="gpt-5.4",
79+
)
80+
81+
agent = Agent(
82+
model=model,
83+
tools=[change_background], # [!code highlight]
84+
system_prompt="You are a helpful assistant.",
85+
)
86+
87+
agui_agent = StrandsAgent(
88+
agent=agent,
89+
name="my_agent",
90+
description="A helpful assistant",
91+
)
92+
93+
app = create_strands_app(agui_agent, "/")
94+
```
95+
</Tab>
96+
<Tab value="TypeScript">
97+
```typescript title="main.ts"
98+
import { Agent, tool } from "@strands-agents/sdk";
99+
import { OpenAIModel } from "@strands-agents/sdk/models/openai";
100+
import { StrandsAgent } from "@ag-ui/aws-strands";
101+
import { createStrandsApp } from "@ag-ui/aws-strands/server";
102+
import { z } from "zod";
103+
104+
// Return null — the frontend handles execution.
105+
const changeBackground = tool({
106+
name: "change_background",
107+
description: "Change the background color of the chat. Can be anything that CSS accepts.",
108+
inputSchema: z.object({
109+
background: z.string().describe("The background color or gradient. Prefer gradients."),
110+
}),
111+
callback: () => null, // [!code highlight]
112+
});
113+
114+
const model = new OpenAIModel({
115+
apiKey: process.env.OPENAI_API_KEY ?? "",
116+
modelId: "gpt-5.4",
117+
});
118+
119+
const agent = new Agent({
120+
model,
121+
tools: [changeBackground], // [!code highlight]
122+
systemPrompt: "You are a helpful assistant.",
123+
});
124+
125+
await agent.initialize();
126+
127+
const aguiAgent = new StrandsAgent({
128+
agent,
129+
name: "my_agent",
130+
description: "A helpful assistant",
131+
});
132+
133+
const app = await createStrandsApp(aguiAgent, { path: "/" });
134+
app.listen(8000);
135+
```
136+
</Tab>
137+
</Tabs>
92138
</Step>
93139

94140
<Step>

‎docs/content/docs/integrations/aws-strands/generative-ui/state-rendering.mdx‎

Lines changed: 119 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -38,65 +38,125 @@ is a situation where a user and an agent are working together to solve a problem
3838

3939
Configure your Strands agent to maintain state. Here's an example that tracks searches:
4040

41-
```python title="agent/main.py"
42-
import os
43-
import json
44-
from ag_ui_strands import StrandsAgent, StrandsAgentConfig, ToolBehavior, create_strands_app
45-
from strands import Agent, tool
46-
from strands.models.openai import OpenAIModel
47-
48-
# Create tool that updates state
49-
@tool
50-
def add_search(query: str):
51-
"""Add a search to the agent's list of searches.
52-
53-
Args:
54-
query: The search query to add
55-
56-
Returns:
57-
Success status and query
58-
"""
59-
return json.dumps({"success": True, "query": query})
60-
61-
# Extract state from tool arguments
62-
async def searches_state_from_args(context):
63-
try:
64-
tool_input = context.tool_input
65-
if isinstance(tool_input, str):
66-
tool_input = json.loads(tool_input)
67-
query = tool_input.get("query", "")
68-
return {"searches": [{"query": query, "done": True}]}
69-
except Exception:
70-
return None
71-
72-
config = StrandsAgentConfig(
73-
tool_behaviors={
74-
"add_search": ToolBehavior(
75-
state_from_args=searches_state_from_args,
76-
),
77-
},
78-
)
79-
80-
model = OpenAIModel(
81-
client_args={"api_key": os.getenv("OPENAI_API_KEY", "")},
82-
model_id="gpt-4o",
83-
)
84-
85-
strands_agent = Agent(
86-
model=model,
87-
system_prompt="You are a helpful assistant for storing searches. Use the add_search tool to add searches.",
88-
tools=[add_search],
89-
)
90-
91-
agui_agent = StrandsAgent(
92-
agent=strands_agent,
93-
name="strands_agent",
94-
description="A helpful assistant for storing searches",
95-
config=config,
96-
)
97-
98-
app = create_strands_app(agui_agent)
99-
```
41+
<Tabs groupId="language_strands_agent" items={['Python', 'TypeScript']} persist>
42+
<Tab value="Python">
43+
```python title="agent/main.py"
44+
import os
45+
import json
46+
from ag_ui_strands import StrandsAgent, StrandsAgentConfig, ToolBehavior, create_strands_app
47+
from strands import Agent, tool
48+
from strands.models.openai import OpenAIModel
49+
50+
# Create tool that updates state
51+
@tool
52+
def add_search(query: str):
53+
"""Add a search to the agent's list of searches.
54+
55+
Args:
56+
query: The search query to add
57+
58+
Returns:
59+
Success status and query
60+
"""
61+
return json.dumps({"success": True, "query": query})
62+
63+
# Extract state from tool arguments
64+
async def searches_state_from_args(context):
65+
try:
66+
tool_input = context.tool_input
67+
if isinstance(tool_input, str):
68+
tool_input = json.loads(tool_input)
69+
query = tool_input.get("query", "")
70+
return {"searches": [{"query": query, "done": True}]}
71+
except Exception:
72+
return None
73+
74+
config = StrandsAgentConfig(
75+
tool_behaviors={
76+
"add_search": ToolBehavior(
77+
state_from_args=searches_state_from_args,
78+
),
79+
},
80+
)
81+
82+
model = OpenAIModel(
83+
client_args={"api_key": os.getenv("OPENAI_API_KEY", "")},
84+
model_id="gpt-4o",
85+
)
86+
87+
strands_agent = Agent(
88+
model=model,
89+
system_prompt="You are a helpful assistant for storing searches. Use the add_search tool to add searches.",
90+
tools=[add_search],
91+
)
92+
93+
agui_agent = StrandsAgent(
94+
agent=strands_agent,
95+
name="strands_agent",
96+
description="A helpful assistant for storing searches",
97+
config=config,
98+
)
99+
100+
app = create_strands_app(agui_agent)
101+
```
102+
</Tab>
103+
<Tab value="TypeScript">
104+
```typescript title="agent/main.ts"
105+
import { Agent, tool } from "@strands-agents/sdk";
106+
import { OpenAIModel } from "@strands-agents/sdk/models/openai";
107+
import { StrandsAgent, type StrandsAgentConfig } from "@ag-ui/aws-strands";
108+
import { createStrandsApp } from "@ag-ui/aws-strands/server";
109+
import { z } from "zod";
110+
111+
// Create tool that updates state
112+
const addSearch = tool({
113+
name: "add_search",
114+
description: "Add a search to the agent's list of searches.",
115+
inputSchema: z.object({
116+
query: z.string().describe("The search query to add"),
117+
}),
118+
callback: ({ query }) => JSON.stringify({ success: true, query }),
119+
});
120+
121+
const config: StrandsAgentConfig = {
122+
toolBehaviors: {
123+
add_search: {
124+
// Extract state from tool arguments
125+
stateFromArgs: async (ctx) => {
126+
const args = ctx.toolInput as { query?: string };
127+
const query = args?.query ?? "";
128+
return { searches: [{ query, done: true }] };
129+
},
130+
},
131+
},
132+
};
133+
134+
const model = new OpenAIModel({
135+
apiKey: process.env.OPENAI_API_KEY ?? "",
136+
modelId: "gpt-4o",
137+
});
138+
139+
const strandsAgent = new Agent({
140+
model,
141+
systemPrompt:
142+
"You are a helpful assistant for storing searches. Use the add_search tool to add searches.",
143+
tools: [addSearch],
144+
});
145+
146+
await strandsAgent.initialize();
147+
148+
const aguiAgent = new StrandsAgent({
149+
agent: strandsAgent,
150+
name: "strands_agent",
151+
description: "A helpful assistant for storing searches",
152+
config,
153+
});
154+
155+
const app = await createStrandsApp(aguiAgent);
156+
app.listen(8000);
157+
```
158+
</Tab>
159+
</Tabs>
100160

101161
</Step>
102162
<Step>

0 commit comments

Comments
 (0)