docs: add quickstart guide + Chrome DevTools MCP setup guide
Adds two guide pages referenced by the Chrome DevTools MCP blog post: - docs/guides/chrome-devtools-mcp-setup.md — browser automation MCP setup - docs/quickstart.md — 5-minute agent deployment quickstart - docs/guides/index.md — guide index Fixes broken links in the Chrome DevTools MCP marketing blog post CTAs: - /getting-started → /docs/quickstart - MCP Marketplace → /docs/mcp-server
This commit is contained in:
molecule-ai[bot]
GitHub
parent
6ff0a3bc81
commit
1b84ccac4f
85
content/docs/guides/chrome-devtools-mcp-setup.md
Normal file
85
content/docs/guides/chrome-devtools-mcp-setup.md
Normal file
@ -0,0 +1,85 @@
|
||||
---
|
||||
title: "Chrome DevTools MCP Server Setup"
|
||||
description: "Connect a Chrome DevTools MCP server to Molecule AI for browser automation in AI agents."
|
||||
tags: [MCP, browser-automation, guides]
|
||||
---
|
||||
|
||||
# Chrome DevTools MCP Server Setup
|
||||
|
||||
Chrome DevTools Protocol (CDP) gives AI agents a real browser — navigate, query, screenshot, and interact with any web page using MCP tool calls.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Google Chrome (desktop) or Chromium
|
||||
- A Molecule AI workspace
|
||||
|
||||
## Start Chrome with Remote Debugging
|
||||
|
||||
Chrome exposes CDP over a WebSocket at a configurable port. Start Chrome with remote debugging enabled:
|
||||
|
||||
```bash
|
||||
# macOS
|
||||
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
|
||||
--remote-debugging-port=9222 \
|
||||
--user-data-dir=/tmp/chrome-debug
|
||||
|
||||
# Linux
|
||||
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
|
||||
|
||||
# Windows
|
||||
chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\\tmp\\chrome-debug"
|
||||
```
|
||||
|
||||
To run headless (no visible window):
|
||||
|
||||
```bash
|
||||
google-chrome \
|
||||
--headless \
|
||||
--remote-debugging-port=9222 \
|
||||
--user-data-dir=/tmp/chrome-headless
|
||||
```
|
||||
|
||||
**Note:** Ensure no other Chrome instance is already using port 9222.
|
||||
|
||||
## Connect via Workspace Config
|
||||
|
||||
In Canvas: **Workspace → Config → MCP Servers → Add browser MCP server**.
|
||||
|
||||
Or via API:
|
||||
|
||||
```bash
|
||||
curl -X PATCH https://your-platform.molecule.ai/workspaces/${WORKSPACE_ID}/config \
|
||||
-H "Authorization: Bearer ${WORKSPACE_TOKEN}" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"mcp_servers": {
|
||||
"browser": {
|
||||
"type": "streamable_http",
|
||||
"url": "http://localhost:9223/mcp"
|
||||
}
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
Replace `http://localhost:9223/mcp` with your MCP server URL — for example, a Cloudflare Workers-deployed CDP bridge, or the Chrome DevTools MCP bridge from the [Chrome DevTools MCP blog post](/blog/chrome-devtools-mcp).
|
||||
|
||||
## Available MCP Tools
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `browser_navigate` | Navigate to a URL |
|
||||
| `dom_query` | Query DOM elements via CSS selector |
|
||||
| `page_screenshot` | Capture a screenshot (PNG) |
|
||||
| `dom_evaluate` | Execute JavaScript in the page context |
|
||||
|
||||
Agents access these tools the same way as any other MCP tool — typed, session-aware, and registered at the workspace level.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Port 9222 in use:** Find and kill the process with `lsof -i :9222` (macOS/Linux) or `netstat -ano | findstr :9222` (Windows).
|
||||
|
||||
**Chrome closes immediately:** Run with `--user-data-dir=/tmp/chrome-debug` to isolate the debugging session from your normal browser profile.
|
||||
|
||||
**WebSocket connection refused:** Ensure the MCP server URL is reachable from your Molecule AI deployment.
|
||||
|
||||
For full browser automation examples, see the [Chrome DevTools MCP blog post](/blog/chrome-devtools-mcp).
|
||||
16
content/docs/guides/index.md
Normal file
16
content/docs/guides/index.md
Normal file
@ -0,0 +1,16 @@
|
||||
# Guides
|
||||
|
||||
Step-by-step guides for common Molecule AI integrations and configurations.
|
||||
|
||||
## Browser Automation
|
||||
|
||||
- [Chrome DevTools MCP Server Setup](/docs/guides/chrome-devtools-mcp-setup) — Connect a Chrome DevTools MCP server to Molecule AI for browser automation in AI agents.
|
||||
|
||||
## Getting Started
|
||||
|
||||
- [Quickstart](/docs/quickstart) — Deploy your first AI agent in under 5 minutes.
|
||||
|
||||
## Integrations
|
||||
|
||||
- [MCP Server Reference](/docs/mcp-server) — Full reference for all supported MCP servers.
|
||||
- [External Agent Registration](/docs/external-agents) — Register agents from other platforms (Google ADK, OpenCode) in Molecule AI workspaces.
|
||||
81
content/docs/quickstart.md
Normal file
81
content/docs/quickstart.md
Normal file
@ -0,0 +1,81 @@
|
||||
---
|
||||
title: "Quickstart: Deploy Your First AI Agent"
|
||||
description: "Get a Molecule AI workspace running in under 5 minutes. Deploy an agent, connect a channel, and send your first task."
|
||||
tags: [quickstart, getting-started]
|
||||
---
|
||||
|
||||
# Quickstart: Deploy Your First AI Agent
|
||||
|
||||
Get a Molecule AI workspace running in under five minutes.
|
||||
|
||||
## 1. Install Molecule AI
|
||||
|
||||
```bash
|
||||
git clone https://github.com/Molecule-AI/molecule-core.git
|
||||
cd molecule-core
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
Or use the hosted version at your-platform.molecule.ai.
|
||||
|
||||
## 2. Create a Workspace
|
||||
|
||||
In Canvas: **Workspaces → New Workspace**. Give it a name and connect your first channel.
|
||||
|
||||
Or via API:
|
||||
|
||||
```bash
|
||||
curl -X POST https://your-platform.molecule.ai/workspaces \
|
||||
-H "Authorization: Bearer ${YOUR_API_KEY}" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "my-first-agent",
|
||||
"description": "Competitive research assistant"
|
||||
}'
|
||||
```
|
||||
|
||||
## 3. Configure an MCP Server
|
||||
|
||||
For browser automation or custom tool integrations, add an MCP server via Canvas: **Workspace → Config → MCP Servers → Add**.
|
||||
|
||||
Or via API:
|
||||
|
||||
```bash
|
||||
curl -X PATCH https://your-platform.molecule.ai/workspaces/${WORKSPACE_ID}/config \
|
||||
-H "Authorization: Bearer ${WORKSPACE_TOKEN}" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"mcp_servers": {
|
||||
"browser": {
|
||||
"type": "streamable_http",
|
||||
"url": "http://localhost:9223/mcp"
|
||||
}
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
## 4. Connect a Channel
|
||||
|
||||
Connect Discord, Telegram, or Slack via the **Channels** tab in Canvas. Paste a webhook URL or bot token — your agent is now accessible from your team's existing communication tools.
|
||||
|
||||
## 5. Send Your First Task
|
||||
|
||||
```bash
|
||||
curl -X POST https://your-platform.molecule.ai/workspaces/${WORKSPACE_ID}/tasks \
|
||||
-H "Authorization: Bearer ${WORKSPACE_TOKEN}" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"task": "Summarize the last 24 hours of deployment events"
|
||||
}'
|
||||
```
|
||||
|
||||
Or type `/ask what's our deployment status?` in your connected Discord channel.
|
||||
|
||||
## What's Next
|
||||
|
||||
- [Connect MCP servers for browser automation](/docs/guides/chrome-devtools-mcp-setup)
|
||||
- [Configure org-scoped API keys for team access](/blog/org-api-keys)
|
||||
- [Review the full REST API reference](/docs/mcp-server)
|
||||
- [Set up the agent hierarchy — Community Manager + sub-agents](/docs/architecture)
|
||||
|
||||
Explore the [GitHub repo](https://github.com/Molecule-AI/molecule-core) for self-hosting options, or visit [moleculesai.app](https://moleculesai.app) for the hosted platform.
|
||||
Loading…
Reference in New Issue
Block a user