# Notte — Browser Automation MCP for AI Agents

> MCP server that turns web browsers into AI agent tools. Notte provides structured browser actions like click, type, navigate, and extract for LLM-driven automation.

## Install

Merge the JSON below into your `.mcp.json`:

## Quick Use

```bash
pip install notte-mcp
```

```json
// claude_desktop_config.json
{
  "mcpServers": {
    "notte": {
      "command": "uvx",
      "args": ["notte-mcp"],
      "env": {
        "NOTTE_API_KEY": "your-key"
      }
    }
  }
}
```

Now ask your AI agent:
```
"Go to Hacker News and find the top 3 stories about AI"
"Fill out the contact form on example.com with my details"
"Take a screenshot of the dashboard after logging in"
```

## What is Notte?

Notte is an MCP server that gives AI agents structured browser automation capabilities. Instead of raw DOM manipulation, Notte provides high-level actions (click, type, navigate, extract, screenshot) that LLMs can call naturally. It handles the complexity of modern web pages — dynamic content, SPAs, popups, and authentication flows — so the AI agent can focus on the task.

**Answer-Ready**: Notte is a browser automation MCP server for AI agents. Provides structured actions (click, type, navigate, extract) that LLMs call naturally. Handles JavaScript rendering, SPAs, and auth flows. Alternative to Playwright MCP with higher-level abstractions. Growing community.

**Best for**: AI agents needing web interaction beyond scraping. **Works with**: Claude Code, Claude Desktop, Cursor, any MCP client. **Setup time**: Under 3 minutes.

## Core Tools

### 1. navigate
Go to any URL with full JavaScript rendering.

```
Agent: navigate("https://news.ycombinator.com")
```

### 2. observe
Get a structured view of the current page — clickable elements, text content, form fields.

```
Agent: observe() → returns structured page elements with IDs
```

### 3. click / type / select
Interact with page elements by ID.

```
Agent: click(element_id="submit-button")
Agent: type(element_id="search-box", text="AI tools")
Agent: select(element_id="dropdown", value="option-2")
```

### 4. extract
Pull structured data from the current page.

```
Agent: extract(schema={"title": "string", "url": "string", "points": "number"})
```

### 5. screenshot
Capture the current page state.

```
Agent: screenshot() → returns base64 image
```

## Use Cases

| Use Case | Example |
|----------|---------|
| Research | Browse sites, extract data, compile reports |
| Form Filling | Auto-fill applications, registrations |
| Testing | Navigate user flows, verify UI states |
| Data Entry | Transfer data between web applications |
| Monitoring | Check dashboards, capture status |

## Notte vs Other Browser MCPs

| Feature | Notte | Playwright MCP | Puppeteer MCP | Stagehand |
|---------|-------|----------------|---------------|-----------|
| Abstraction | High-level | Low-level | Low-level | High-level |
| observe() | Yes | No | No | Yes |
| AI-native | Yes | No | No | Yes |
| Form handling | Smart | Manual | Manual | Smart |
| Auth flows | Managed | Manual | Manual | Partial |

## FAQ

**Q: How does it handle login/auth?**
A: Notte manages browser sessions with cookies and can handle login flows. You can also pre-authenticate and reuse sessions.

**Q: Does it work with SPAs (React, Vue)?**
A: Yes, Notte waits for dynamic content to load before observing or interacting with elements.

**Q: How is it different from Playwright MCP?**
A: Playwright MCP exposes low-level browser APIs (selectors, DOM). Notte provides high-level actions that LLMs understand naturally, with built-in page observation.

## Source & Thanks

> Created by [Notte AI](https://github.com/nottelabs). Licensed under Apache 2.0.
>
> [nottelabs/notte](https://github.com/nottelabs/notte) — Browser automation for AI agents

<!-- ZH -->

## 快速使用

```json
{"mcpServers": {"notte": {"command": "uvx", "args": ["notte-mcp"]}}}
```

让 AI Agent 像人一样操作浏览器。

## 什么是 Notte？

Notte 是浏览器自动化 MCP 服务器，为 AI Agent 提供结构化浏览器操作（点击/输入/导航/提取）。处理 SPA、动态内容和认证流程。

**一句话总结**：浏览器自动化 MCP，AI Agent 通过高级操作（点击/输入/导航/截图）与网页交互，处理 SPA 和认证，Playwright MCP 的高层替代。

**适合人群**：需要网页交互的 AI Agent 用户。

## 核心工具

### 1. navigate — 导航到 URL
### 2. observe — 获取页面结构
### 3. click/type — 元素交互
### 4. extract — 结构化数据提取
### 5. screenshot — 页面截图

## 常见问题

**Q: 支持 SPA？**
A: 支持，等待动态内容加载完成。

**Q: 和 Playwright MCP 区别？**
A: Notte 提供高级抽象，LLM 自然理解；Playwright MCP 偏底层 DOM 操作。

## 来源与致谢

> [nottelabs/notte](https://github.com/nottelabs/notte) — Apache 2.0

---
Source: https://tokrepo.com/en/workflows/6f8e3905-ab83-458b-9ca4-0de24b9b0450
Author: MCP Hub