divebell

KO | EN

gitlite — search

#ai #graphql #windows #ai-agent #developer-tools #devops #python #linux #automation #computer-vision

(★ 9)

An extensible web development and debugging tool for coding agents.

File Explorer

ZIP Download

- config.json
- - ci.yml
  - pages.yml
  - pkg-pr-new.yml
  - prepare-release.yml
  - release.yml
- divebell.png
- mf-module-perf-timeline.png
- - index.html
  - package.json
  - README.md
  - rsbuild.config.ts
- - command.mjs
  - hooks.mjs
  - index.mjs
  - package.json
  - README.md
  - test.mjs
- - module-federation.config.ts
  - package.json
  - README.md
  - rslib.config.ts
  - tsconfig.json
- - modern.config.ts
  - package.json
  - README.md
  - tsconfig.json
- - modern.config.ts
  - package.json
  - README.md
  - tsconfig.json
- - modern.config.ts
  - package.json
  - README.md
  - tsconfig.json
- - index.html
  - package.json
  - pages-root.html
  - README.md
  - rsbuild.config.ts
- - README.md
  - scenarios.json
- - code-usage-page-experience-report.png
- agent-devloop.md
- browser-auth.md
- browser-proxy-and-request-rules.md
- cli-automation-scripts.md
- cli-extensions.md
- cli-reference.md
- code-usage-analysis.md
- extension-api.md
- extensions.md
- memory-analysis.md
- modernjs-integration.md
- module-federation-observability.md
- record-browser-workflows.md
- release.md
- runtime-connections.md
- runtime-core-api.md
- runtime-sdk-api.md
- temporary-agent-browser-fork.md
- webmcp-showcase-tour.md
- webmcp.md
- - package.json
  - README.md
  - tsconfig.json
  - tsconfig.test.json
- - package.json
  - tsconfig.json
- - package.json
  - README.md
  - tsconfig.json
  - tsconfig.test.json
- - package.json
  - rstest.config.ts
  - tsconfig.json
  - tsconfig.test.json
- - package.json
  - README.md
  - tsconfig.json
  - tsconfig.test.json
- - package.json
  - README.md
  - tsconfig.json
  - tsconfig.test.json
- - package.json
  - README.md
  - tsconfig.json
- build-recording-skill-runtime.mjs
- bump-recording-skill-runtime.mjs
- check-package-versions.mjs
- clean.mjs
- divebell-release-packages.mjs
- divebell-release-packages.test.mjs
- evaluate-stage6.mjs
- extension-browser-raw-reference.test.mjs
- generate-release-pr-body.mjs
- npm-release-utils.mjs
- npm-release-utils.test.mjs
- npm-release.mjs
- release-change-files.mjs
- release-change-files.test.mjs
- release-pr-body-utils.mjs
- release-pr-body-utils.test.mjs
- release-workflow.test.mjs
- sync-divebell-cli-docs.mjs
- sync-extension-browser-raw-reference.mjs
- update-agent-browser.mjs
- update-agent-browser.test.mjs
- validate-command-output.mjs
- validate-divebell-release-state.mjs
- validate-divebell-release-state.test.mjs
- validate-divebell-release.mjs
- verify-recording-skill-runtime.mjs
- verify-stage7-release.mjs
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - SKILL.md
- - e2e.test.ts
  - tsconfig.json
.gitignore
.node-version
.npmrc
.nvmrc
AGENTS.md
CONTRIBUTING.md
divebell
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
rslint.config.mjs
tsconfig.base.json
tsconfig.json

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Divebell</h1>

<p align="center">
<b>Go below the surface.</b>
<br/>
An extensible toolkit for coding agents to debug, understand, and verify real web applications.
</p>

---

Agent entry point: [Divebell Skill](./skills/divebell/SKILL.md)

Divebell is an **extensible toolkit for coding agents to debug, understand, and verify real web applications**.

Divebell makes the web page the coding agent's point of entry. It connects page context, browser capabilities, and the team's existing development and debugging tools so the agent can reproduce, diagnose, and verify issues directly in real web scenarios.

Starting from the current page, an agent can call existing SDKs, OpenAPIs, CLIs, and diagnostic capabilities without requiring a person to extract page information and connect the tools first.

The coding agent reads and modifies code. Divebell prepares reusable browser context and exposes page operations, browser diagnostics, and result verification as directly callable capabilities. Teams can use Extensions to connect their own accounts, environments, internal platforms, focused diagnostics, and verification workflows.

---

## Quick Start

Install the Divebell CLI globally once:

```bash
npm install --global @divebell/cli
divebell setup
```

### Explore WebMCP from any coding agent

Divebell lets a coding agent discover and call the WebMCP tools exposed by the
current page. It launches local Chrome with the experimental WebMCP features
enabled, so there are no browser flags or protocol wiring to configure first.

Try it with OpenAI's Margin Editor showcase:

```bash
divebell open https://margin-local-docs.openai.chatgpt.site/ \
  --ui \
  --no-default-profile
divebell webmcp list --json
divebell webmcp call create_document \
  --input '{"title":"Divebell WebMCP demo","content":"Created through WebMCP."}' \
  --json
```

The same discovery and invocation capabilities are available to Extensions
through `divebell.browser.webmcp`, where teams can add policy, validation,
diagnostics, and acceptance checks.

[WebMCP guide](./docs/webmcp.md) ·
[Exploring the WebMCP showcase with Divebell](./docs/webmcp-showcase-tour.md)

### Visualize Module Federation Resource Timing

Install the Module Federation Extension, open the public playground with MF
diagnostics enabled, and render its observed module loading directly in the
terminal:

```bash
divebell extensions add @divebell/extension-mf
divebell open https://module-federation.io/playground/index.html --mf
divebell mf module-perf --report --view timeline
```

Example output (the observed timings vary between navigations):

![Module Federation performance timeline](https://raw.githubusercontent.com/2heal1/divebell/main/assets/mf-module-perf-timeline.png)

`divebell setup` checks the environment and repairs browser startup only when
needed. Its browser probe runs in a temporary session and cleans that session up
when setup finishes.

In a coding-agent sandbox, Divebell automatically moves its own files and the
bundled browser's files to private temporary directories when the normal user
directories are read-only. Set `DIVEBELL_HOME` and `AGENT_BROWSER_HOME` only
when those files need specific durable writable locations.

Install the [Divebell Skill](./skills/divebell/SKILL.md) in your agent.

## Why Divebell

Coding agents can already read and modify code, and they can call many development tools. But real web development issues usually happen in the page itself: users see a page, while diagnosing the problem requires its state, runtime environment, business context, and the team's existing diagnostic capabilities.

That information and those capabilities are usually scattered across:

- User actions and runtime state on the page
- Browser diagnostics such as Console and Network
- Existing SDKs, OpenAPIs, CLIs, and internal platforms

An agent often still needs a person to explain what the current page represents and which capability to call next.

Divebell makes the web page the agent's point of entry, connecting page context, browser diagnostics, and the team's existing tools so the agent can reproduce, diagnose, and verify issues directly in the real scenario.

Teams can use Extensions to bring existing capabilities into the current page scenario without rebuilding a separate tool system for agents. Once a workflow works, other agents and CI can keep using it as a durable team asset.

## Core Capabilities

| Module | Responsibility | Entry point | Page integration required |
| --- | --- | --- | --- |
| Web Context & Diagnostics | Make a real web page the agent's point of entry and provide page context, browser diagnostics, and same-scenario verification | Divebell CLI | No |
| Extensions | Connect the web page with the team's existing development and debugging capabilities | CLI commands, Extension API | No |
| Runtime SDK | Expose application-internal facts that cannot be observed from the page without polluting the runtime environment | `@divebell/core`, framework plugins | Yes |

### Web Context & Diagnostics

Divebell makes a real web page the agent's point of entry, providing page context, page operations, browser diagnostics, and same-scenario verification after a code change.

These capabilities include the current page and user journey, page operations such as `click`, `fill`, and `eval`, diagnostic evidence from Console, Network, Screenshot, and Coverage, and page-declared WebMCP tools. Divebell enables Chrome's experimental WebMCP support for local Chrome launches by default, and Agents can call the tools directly through the Divebell CLI without Runtime SDK.

[CLI Reference](./docs/cli-reference.md) · [WebMCP](./docs/webmcp.md)

[Browser proxy and request rules](./docs/browser-proxy-and-request-rules.md)

For protected pages, Divebell uses a read-only copy of the current OS user's most recently used Chrome Profile by default. An explicitly supplied Profile, browser state, restore context, restricted-domain mode, or external browser takes precedence. Divebell always works within the selected account's existing permissions.

When no local Chrome Profile is available, Divebell falls back to project-scoped automatic Restore State. Restore State contains cookies, localStorage, and sessionStorage rather than a complete Chrome Profile. Divebell saves it once after a newly opened page is quiet for about two seconds and again before close, while periodic saving is disabled by default. Pass `--no-default-profile` for one `open`, or set `DIVEBELL_DEFAULT_CHROME_PROFILE=off` persistently, to use Restore State instead of automatic Profile selection.

[Browser Authentication and State](./docs/browser-auth.md)

When a script must manage the complete browser flow, see [Automating with Divebell CLI](./docs/cli-automation-scripts.md).

### Extensions

Extensions are the mechanism for connecting a web page with the team's existing development capabilities.

An Extension can identify applications, environments, and resources from the current page, call existing SDKs, OpenAPIs, CLIs, or internal platforms, and expose diagnostic and verification workflows that previously required a person to connect them.

[Using Extensions](./docs/extensions.md) · [CLI Extension Development](./docs/cli-extensions.md) · [Extension API Reference](./docs/extension-api.md)

#### Official Extensions

Focused CLI capabilities are published as optional packages and installed only when needed.

##### CLI Extensions

These packages are installed into Divebell and add top-level commands:

| Package | Entry | Purpose | Guide |
| --- | --- | --- | --- |
| `@divebell/extension-memory` | `divebell memory` | Repeat a real page journey and check memory, DOM-node, and listener growth. | [Memory Analysis](./docs/memory-analysis.md) |
| `@divebell/extension-code-usage` | `divebell code-usage` | Map recorded code execution back to chunks, source files, and dependencies. | [Code-Usage Analysis](./docs/code-usage-analysis.md) |
| `@divebell/extension-imitate` | `divebell record` | Record, review, supplement, and verify an authenticated browser workflow before generating its JavaScript replay. | [Record Browser Workflows](./docs/record-browser-workflows.md) |
| `@divebell/extension-mf` | `divebell mf` | Inspect Module Federation instances, remotes, shared dependencies, module performance, Bridge operations, and loading traces. | [MF Extension](./packages/extensions/mf/README.md) |
| `@divebell/extension-rstack` | `divebell rstack` | Detect and observe Rspack HMR, page reloads, and optional React Refresh through compiled-JavaScript evidence; MF ownership evidence is optional. | [Rstack HMR Extension](./packages/extensions/rstack/README.md) |

Install a CLI Extension with:

```bash
divebell extensions add @divebell/extension-memory
```

Installed Extension commands appear in `divebell --help` and run through the same CLI, browser sessions, and login state as the built-in commands.

### Runtime SDK

Runtime SDK is an optional page-side API. When the DOM, Console, Network, and other browser information cannot represent application state reliably, Runtime SDK can expose more granular application-internal facts to the agent.

It supports registering Targets, updating Snapshots, recording Events, declaring Actions, and running `waitFor`. Divebell works without Runtime SDK, and regular pages do not need to integrate it.

[Runtime SDK API](./docs/runtime-sdk-api.md)

## Contribution

Please read the [contributing guide](./CONTRIBUTING.md) and let's build Divebell together.

## Credits

Divebell uses [agent-browser](https://github.com/vercel-labs/agent-browser) as its default browser execution layer. Thanks to the agent-browser authors and contributors.

Extensions execute local code. Install and load only trusted content. Login-state files contain sensitive data and should remain in trusted environments.

## License

Divebell is [MIT licensed](./LICENSE).

divebell

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README