feat(examples): add browser-based agent example #384
Conversation
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 commit adds a new example in that demonstrates how to use the SDK in a browser environment. It includes: - A simple HTML UI with a chat interface and a modifiable canvas. - An agent configured with and a custom tool. - Vite configuration for development and building. - README documentation for the example. Updates root README to link to the new example.
michaelruelas
requested a deployment
to
manual-approval
GitHub Actions
Waiting
cagataycali
reviewed
Jan 11, 2026
Member
cagataycali
left a comment
cagataycali
left a comment
There was a problem hiding this comment.
👀 Initial Review - Browser Agent Example
Summary
Great example demonstrating browser-based Strands agents! This addresses the "good first issue" #382 nicely.
What I Like
- ✅ Clear PR description with all checklist items completed
- ✅ Proper documentation (README in example + root README update)
- ✅ Demonstrates real DOM manipulation (
update_canvastool) - ✅ Uses
dangerouslyAllowBrowser: truecorrectly with OpenAI - ✅ Vite integration for modern development workflow
Observations
The CI is still pending (waiting for integration tests). Once CI passes, this looks ready for maintainer review.
Questions for Maintainers
- Is the
dangerouslyAllowBrowserapproach acceptable, or should there be additional warnings in the docs about API key security? - Any concerns about the Vite path alias configuration linking to local SDK source?
Looking forward to seeing this merged - it will be a valuable example for the community! 🦆
Unshure
reviewed
Jan 12, 2026
examples/browser-agent/src/index.ts
Outdated
| // Initialize model | ||
| // Note: In a production app, you should proxy requests to avoid exposing keys, | ||
| // or use a provider that supports browser-safe authentication. | ||
| const model = new OpenAIModel({ |
Member
There was a problem hiding this comment.
Can you make this configurable between bedrock or openAI?
Member
There was a problem hiding this comment.
Do we need this file? I tested locally after removing this file, and it worked for me. I want to remove as much unnecessary code as possible so this is really easy to replicate
|
|
||
| // We will update this div as tokens come in | ||
| for await (const event of agent.stream(text)) { | ||
| if (event.type === 'modelContentBlockDeltaEvent' && event.delta.type === 'textDelta') { |
Member
There was a problem hiding this comment.
nit: Can we add some sort of message to indicate what the toolUse was in the chat ui?
…le updates, improve streaming UI for tool calls, and simplify build configuration.
michaelruelas
requested a deployment
to
manual-approval
GitHub Actions
Waiting
Member
|
I just tried running this example, and it seems like the chat experience is broken now? Im getting this error when I try to send a message: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
Description
This PR adds a new example in
examples/browser-agentthat demonstrates how to implement a Strands Agent in a browser environment.The example includes:
OpenAIModelwithdangerouslyAllowBrowser: trueto run client-side.update_canvasto demonstrate how agents can interact with the webpage DOM.Related Issues
Closes #382
Documentation PR
N/A
Type of Change
Testing
I manually verified the example by running it locally and interacting with the agent to request UI changes. I captured a demonstration of the agent successfully modifying the canvas based on natural language commands.
I also verified the build pipeline:
npm run buildinexamples/browser-agent(verified passing with aligned dependencies)npm run check(SDK root tests passing)Checklist
examples/browser-agent/README.mdand updated root README)