Skip to content

feat(examples): add browser-based agent example #384

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.

Sign up for GitHub

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

Open
michaelruelas wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(examples): add browser-based agent example #384

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b7c5828
feat(examples): add browser-based agent example
michaelruelas Jan 7, 2026
c6a18c0
feat: Add Bedrock model support, enhance canvas tool with generic sty…
michaelruelas Jan 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,10 @@ For detailed guidance, tutorials, and concept overviews, please visit:
- **[Official Documentation](https://strandsagents.com/)**: Comprehensive guides and tutorials
- **[API Reference](https://strandsagents.com/latest/documentation/docs/api-reference/typescript/)**: Complete API documentation
- **[Examples](./examples/)**: Sample applications
- **[First Agent](./examples/first-agent/)**: Basic Node.js agent
- **[MCP](./examples/mcp/)**: MCP integration example
- **[Browser Agent](./examples/browser-agent/)**: Browser-based agent with DOM manipulation

- **[Contributing Guide](CONTRIBUTING.md)**: Development setup and guidelines

---
Expand Down
38 changes: 38 additions & 0 deletions examples/browser-agent/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
# Browser Agent Example

This example demonstrates how to run the Strands Agent directly in a browser environment using Vite.

The agent uses the OpenAI model provider (via API Key) and has access to a tool (`update_canvas`) that allows it to modify the DOM elements on the page.

## Prerequisites

- Node.js 20+
- An OpenAI API Key (you will be prompted to enter this in the browser)

## Setup

1. Install dependencies from the root of the repo:
```bash
npm install
```

## Running the Example

1. Navigate to this directory:
```bash
cd examples/browser-agent
```

2. Start the development server:
```bash
npm run dev
```

3. Open the URL shown in the terminal (usually `http://localhost:5173`).

4. Enter your OpenAI API Key when prompted.

5. Interact with the agent! Try commands like:
- "Change the background color to soft blue"
- "Make the canvas a circle"
- "Change the text to Hello Strands!"
140 changes: 140 additions & 0 deletions examples/browser-agent/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Strands Browser Agent Example</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background-color: #f5f5f7;
color: #1d1d1f;
}
h1 {
margin-bottom: 2rem;
font-weight: 600;
}
#canvas {
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #d2d2d7;
border-radius: 12px;
margin-bottom: 2rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
text-align: center;
padding: 1rem;
}
#chat-container {
width: 100%;
max-width: 600px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
height: 500px;
overflow: hidden;
}
#messages {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.message {
padding: 0.75rem 1rem;
border-radius: 18px;
max-width: 80%;
line-height: 1.4;
}
.user {
background-color: #0071e3;
color: white;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.agent {
background-color: #f5f5f7;
color: #1d1d1f;
align-self: flex-start;
border-bottom-left-radius: 4px;
}
#input-area {
display: flex;
padding: 1rem;
border-top: 1px solid #e5e5e5;
background-color: white;
}
#user-input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid #d2d2d7;
border-radius: 20px;
margin-right: 0.75rem;
font-size: 1rem;
outline: none;
transition: border-color 0.2s;
}
#user-input:focus {
border-color: #0071e3;
}
button {
padding: 0.5rem 1.25rem;
background-color: #0071e3;
color: white;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: background-color 0.2s;
}
button:hover {
background-color: #0077ed;
}
button:disabled {
background-color: #d2d2d7;
cursor: not-allowed;
}
.setup-hint {
margin-top: 1rem;
font-size: 0.875rem;
color: #86868b;
}
</style>
</head>
<body>
<h1>Browser Agent Example</h1>

<div id="canvas">
I am a canvas. change me!
</div>

<div id="chat-container">
<div id="messages">
<div class="message agent">Hello! I can modify the canvas above. Try asking me "change background to blue" or "make it a circle".</div>
</div>
<form id="input-area">
<input type="text" id="user-input" placeholder="Message the agent..." autocomplete="off">
<button type="submit" id="send-btn">Send</button>
</form>
</div>
<div class="setup-hint">
Note: Requires OpenAI API Key. You will be prompted on load if not saved.
</div>

<script type="module" src="/src/index.ts"></script>
</body>
</html>
Loading
Loading