Tools: MCP & Browser

MCP: Model Context Protocol

MCP (Model Context Protocol) is a standard that connects the AI agent with external tools and data sources. Think of it as “plugins” for the agent.

What MCP Enables

Without MCP, the agent can only read files and run commands. With MCP, it can:

Query databases directly (Supabase, PostgreSQL)
Deploy functions to cloud platforms
Search documentation in real-time
Manage infrastructure (create projects, configure services)
Access APIs (GitHub, Jira, Slack)

Configuring MCP Servers

MCP servers are configured in your project settings. Each server provides specific tools:

{
  "mcp": {
    "servers": {
      "supabase": {
        "command": "npx",
        "args": ["supabase-mcp-server"]
      },
      "context7": {
        "command": "npx",
        "args": ["@context7/mcp-server"]
      }
    }
  }
}

Real Example: Supabase MCP

With the Supabase MCP server, you can say:

You: "Create a users table with email, name, and avatar columns"

Agent uses MCP to:
1. apply_migration → Creates the table
2. execute_sql → Verifies it exists
3. generate_typescript_types → Updates TypeScript types
4. get_advisors → Checks for security issues (RLS)

No switching between your code and the Supabase dashboard. Everything happens in one conversation.

Real Example: Context7 MCP

Context7 provides up-to-date documentation for any library:

You: "How do I set up authentication in Next.js 16?"

Agent uses Context7 to:
1. resolve-library-id → Finds Next.js docs
2. query-docs → Gets latest auth patterns
3. Responds with current, accurate information

This solves the “stale training data” problem — the agent always gets fresh docs.

Browser Subagent

The Browser subagent gives the AI the ability to interact with web pages — clicking, typing, scrolling, and taking screenshots.

What It Can Do

Navigate to URLs and read page content
Click buttons and links
Type into forms and search fields
Take screenshots for visual verification
Record browser sessions as video

When to Use Browser vs URL Reading

Scenario	Tool
Read static docs	`read_url_content` (faster)
Interact with web apps	Browser subagent
Fill forms, click buttons	Browser subagent
Take screenshots for proof	Browser subagent
Test your deployed app	Browser subagent

Real Example: Visual Testing

You: "Check if the login page looks correct on mobile"

Agent:
1. Opens browser to your dev server
2. Resizes window to mobile dimensions
3. Takes a screenshot
4. Analyzes the layout
5. Reports any visual issues

Chrome Extension

Antigravity includes a Chrome Extension for browsing:

Allowlist/Denylist — Control which sites the agent can access
Separate Chrome Profile — Isolate agent browsing from your personal browsing
Session management — The agent can use authenticated sessions

Combining MCP + Browser

The real power emerges when you combine tools:

You: "Set up a Supabase project and deploy my app"

Agent combines:
├── Supabase MCP
│   ├── Create project
│   ├── Set up database schema
│   ├── Configure RLS policies
│   └── Get API keys
├── Terminal
│   ├── Install dependencies
│   ├── Build the app
│   └── Deploy to Cloudflare
└── Browser
    ├── Navigate to deployed URL
    ├── Test the login flow
    └── Screenshot the result

One conversation. Multiple tools. Complete workflow.

Best Practices

Start with minimal MCP — Add servers as you need them
Use allowlists — Limit browser access to necessary sites
Combine tools — The agent shines when tools work together
Verify outputs — Always review MCP mutations (DB changes, deployments)
Document your MCP setup — Include in project README for team members

What’s Next

Now let’s explore Artifacts — the documents the agent creates to communicate its work, preserve knowledge, and provide proof of what it did.