From 1b84ccac4f64a11eead4865521b9b23703060487 Mon Sep 17 00:00:00 2001 From: "molecule-ai[bot]" <276602405+molecule-ai[bot]@users.noreply.github.com> Date: Tue, 21 Apr 2026 02:34:41 +0000 Subject: [PATCH] docs: add quickstart guide + Chrome DevTools MCP setup guide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../docs/guides/chrome-devtools-mcp-setup.md | 85 +++++++++++++++++++ content/docs/guides/index.md | 16 ++++ content/docs/quickstart.md | 81 ++++++++++++++++++ 3 files changed, 182 insertions(+) create mode 100644 content/docs/guides/chrome-devtools-mcp-setup.md create mode 100644 content/docs/guides/index.md create mode 100644 content/docs/quickstart.md diff --git a/content/docs/guides/chrome-devtools-mcp-setup.md b/content/docs/guides/chrome-devtools-mcp-setup.md new file mode 100644 index 0000000..7ebba03 --- /dev/null +++ b/content/docs/guides/chrome-devtools-mcp-setup.md @@ -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). diff --git a/content/docs/guides/index.md b/content/docs/guides/index.md new file mode 100644 index 0000000..22cc6ce --- /dev/null +++ b/content/docs/guides/index.md @@ -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. diff --git a/content/docs/quickstart.md b/content/docs/quickstart.md new file mode 100644 index 0000000..980c5f4 --- /dev/null +++ b/content/docs/quickstart.md @@ -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.