Interactive Walkthrough

Getting Started with the Web Agent API

Step through the basics: detect the API, get permission, and make your first AI-powered tool call.

1
Detect Web Agent API
Check if the Web Agent API is available in the page
// Check for Web Agent API availability
if (window.ai && window.agent) {
  console.log('Web Agent API is ready!');
}
2
Request Permission
Ask the user for permission to use AI and tools
const result = await window.agent.requestPermissions({
  scopes: [
    'model:prompt',
    'model:tools',
    'mcp:tools.list',
    'mcp:tools.call'
  ],
  reason: 'Getting Started demo'
});

if (result.granted) {
  console.log('Permission granted!');
}
3
Check Available Tools
List MCP tools from connected servers
const tools = await window.agent.tools.list();

console.log(`Found ${tools.length} tools:`);
tools.forEach(t => console.log(`  • ${t.name}`));
4
Ask "What time is it?"
Run an AI agent that can use tools to answer
for await (const event of window.agent.run({
  task: 'What is the current time?',
  maxToolCalls: 3
})) {
  if (event.type === 'tool_call') {
    console.log('Using tool:', event.tool);
  }
  if (event.type === 'final') {
    console.log('Response:', event.output);
  }
}
5
Display Response
Show the AI's response
// The agent's final response from the previous step
console.log(response);