# Builder.io (Visual CMS) MCP for AI Agents AI Agent Connect

> Builder.io (Visual CMS) MCP lets your AI agent manage your headless content and media library directly. You can fetch entries, update data, and run GraphQL queries without leaving your IDE or chat interface. It handles everything from content creation to asset management and personalized targeting.

## Overview
- **Category:** developer-tools
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_BaHSKC3ZETZTkdvXPuAkkFjYR9nD48mwy05iFJqw/ai-agent-connect
- **Tags:** visual-cms, graphql, content-api, asset-management, digital-experience

## Description

Stop jumping between your CMS dashboard and your code editor. This Connector lets you talk to your Builder.io space as if it were a direct extension of your chat window. You can tell your agent to pull specific content pieces for a project, update text across multiple entries at once, or check how a component will actually render in the browser. If you need to manage your media, you can have the agent handle the uploads or clean up old assets by URL. It even handles the heavy lifting of complex GraphQL queries, so you don't have to write out every single parameter manually. Whether you're pulling data for a layout or pushing updates to a live site, this connection makes the CMS feel like a local folder. It's one of the many tools available in the Vinkius catalog that bridges the gap between your content strategy and your actual development workflow.

## Tools

### create_content
Create a new content entry in your Builder.io space. This is useful for adding new pages or components via your agent.

### delete_content
Delete a specific content entry from a model. Use this to quickly clean up outdated content from your CMS.

### get_content
Get content from a Builder.io model. This lets your agent pull the latest data for your frontend components.

### get_html
Get pre-rendered HTML for a Builder.io model. Use this to verify how your content actually looks in the browser.

### query_graphql
Query Builder.io content using GraphQL. This lets you perform complex data fetches that go beyond standard models.

### update_content
Update an existing content entry. This is the primary way to modify live site text or data through your agent.

### upload_asset
Upload an asset like an image or video. This lets you populate your media library without manual uploads.

### admin_graphql
Execute an Admin API GraphQL query or mutation. Use this for high-level administrative tasks and complex updates.

### delete_asset_by_url
Delete an asset by its URL. This makes it easy to remove specific media items from your library.

## Prompt Examples

**Prompt:** 
```
Find the homepage content and tell me what the main headline says.
```

**Response:** 
```
I've checked your homepage model. Here are the current content details:

| Section | Content |
| :--- | :--- |
| **Hero** | "Welcome to our new store!"
| **Promo** | "Get 20% off today only."

Would you like me to update any of these for you?
```

**Prompt:** 
```
Update the 'Summer Sale' banner to say 'Winter Sale' and change the date.
```

**Response:** 
```
I've updated the 'Summer Sale' banner entry for you. The text now reads **"Winter Sale"** and the date has been updated to **December 1st**. The change is live in your Builder space.
```

**Prompt:** 
```
Give me the HTML for the 'Contact Us' section so I can check the tags.
```

**Response:** 
```
Here is the pre-rendered HTML for the Contact Us component:

```html
<section class="contact-us">
  <h1>Get in Touch</h1>
  <p>Contact us at support@example.com</p>
  <form>...</form>
</section>
```
```

## Capabilities

### Fetch content entries
Pull data from any specific model in your Builder.io space.

### Retrieve pre-rendered HTML
Get the actual HTML output for any component to check your layout.

### Create and update content
Add new entries or modify existing data using natural language instructions.

### Execute GraphQL queries
Run complex queries against the Content API to get exactly the data you need.

### Manage media assets
Upload new images and videos or remove old assets by their URL.

### Query content variants
Fetch specific content based on user attributes and MongoDB-style queries.

## Use Cases

### Bulk Text Updates
A content manager needs to change a sale date on 50 different pages. They ask the agent to use `update_content` to swap the date across all entries.

### SEO Audit
A marketing lead wants to see how a component renders. They ask the agent to run `get_html` to check for correct header tags.

### Rapid Asset Management
A dev needs to add 10 images to a gallery. They provide the URLs and have the agent use `upload_asset` to populate the CMS.

### Custom Data Fetching
A developer needs specific data that doesn't fit a standard model. They ask the agent to run a `query_graphql` to get the exact JSON they need.

## Benefits

- Stop switching tabs by managing content directly in your AI client.
- Update multiple content entries at once using `update_content` for faster workflows.
- Verify SEO and layout accuracy by grabbing pre-rendered HTML with `get_html`.
- Handle media management by uploading files or removing them with `delete_asset_by_url`.
- Run complex data fetches using `query_graphql` without writing manual code.
- Target specific content variants based on user attributes using MongoDB-style queries.

## How It Works

The bottom line is you get a direct conversational bridge to your CMS data.

1. Get your Public and Private API keys from your Builder.io space settings.
2. Add the keys to your AI client configuration to connect the Connector.
3. Ask your agent to perform tasks like fetching content or updating a specific entry.

## Frequently Asked Questions

**Can I use Builder.io (Visual CMS) to manage my content without leaving my code editor?**
Yes. This Connector connects your CMS to your AI client, allowing you to fetch, create, and update content directly through your chat or IDE interface.

**How does Builder.io (Visual CMS) help with bulk content updates?**
You can give your agent natural language instructions to update multiple entries at once. It handles the repetitive work of modifying each record for you.

**Can I upload images to my CMS using this Connector?**
Yes. You can provide an image or video URL to your agent, and it will use the Connector to upload that asset directly into your Builder.io media library.

**Will Builder.io (Visual CMS) help me check my SEO HTML?**
It can. You can ask your agent to retrieve the pre-rendered HTML for any component, making it easy to verify that your tags and content are rendering correctly.

**Can I use it to fetch specific content based on user roles?**
Yes. This Connector supports querying content variants based on user attributes, allowing you to manage personalized content experiences easily.

**Is it possible to delete old assets from my library?**
Yes. You can ask your agent to remove specific media assets from your library by providing their URLs, helping you keep your media library clean.

**Can I fetch pre-rendered HTML for my components instead of raw JSON?**
Yes! Use the `get_html` tool. It returns pre-rendered HTML for a specific model and URL, which is perfect for quick inspections or server-side integrations.

**Do I need a Private API Key to use this server?**
A Public Key is required for all read operations (`get_content`, `query_graphql`). However, a Private Key is mandatory for write operations like `create_content`, `update_content`, or `admin_graphql`.

**Can I perform administrative tasks like managing Spaces or Models?**
Yes, the `admin_graphql` tool allows you to execute administrative queries and mutations against the Builder Admin API, provided you have supplied a Private API Key.