Prerequisites

1 Create a Visimade Account

Sign up at visimade.com if you don't have an account.

2 Create a Page

Create a new page from the Visimade dashboard. This will be the page your blog lives on. Note the page's slug (e.g., agent-blog) — you'll use it later.

Enable CMS Data storage on the page by going to the page settings and enabling the CMS storage mode.

3 Generate an API Token

Go to your account settings and create a new API token. The token will look like:

vm_your_api_token_here

Save this token — you'll provide it to the coding agent.

Step 1: Create the Blog Page

Open a terminal, create a new folder for your project, and start your coding agent. Then give it the following prompt, replacing the token and page details with your own:

My Visimade API token is: vm_YOUR_TOKEN_HERE

Read these two pages for API reference:
  https://visimade.com/developers/api
  https://visimade.com/developers/api/examples/cms-images

Build a Visimade page that uses CmsData to create a publication-style
site with articles. Articles should have:
  - A category
  - A headline
  - A summary
  - A full article body stored as markdown (rendered to HTML on display)
  - Images served via a provided URL (uploaded through Page Assets API)

Requirements:
  - Clicking the logo/masthead in the header returns to the home page view
  - The URL should change when viewing an article using a query parameter
    (e.g., ?article=my-article-slug) so that article URLs can be shared
    and will deep-link directly to the article
  - The page name should be "Agent Blog"
  - The main topic is: how to use AI agents at scale and effectively
  - The look and feel should be professional, aimed at director-level
    and above engineers, with a light theme
  - Clean, modern typography with good whitespace
  - Responsive design that works on mobile

Use the CmsData SDK (not direct fetch calls) for all data operations
in the page's JavaScript.

What the agent will do

A well-configured coding agent will:

1. Read the API documentation pages to understand the Visimade APIs
2. Look up your page by slug using GET /api/pages/lookup?slug=agent-blog
3. Build a complete HTML file with inline CSS and JavaScript
4. Use the CmsData SDK for fetching and rendering articles
5. Implement query-parameter-based routing for shareable article URLs
6. Push the HTML to your page using PATCH /api/pages/:id
7. Seed some initial categories using POST /api/pages/:id/cms-data/categories

Why query parameters instead of hash routing?

The prompt specifies query parameters (?article=slug) rather than hash routing (#article/slug) for article deep links. This makes URLs more standard and shareable. The agent should implement this using the History API:

javascript// When showing an article:
const url = new URL(window.location);
url.searchParams.set('article', articleSlug);
history.pushState({ article: articleSlug }, '', url);

// On page load, check for deep link:
const params = new URLSearchParams(window.location.search);
const articleSlug = params.get('article');
if (articleSlug) {
  showArticle(articleSlug);
}

// Handle back/forward:
window.addEventListener('popstate', (e) => {
  const params = new URLSearchParams(window.location.search);
  const slug = params.get('article');
  if (slug) showArticle(slug);
  else showHomePage();
});

Step 2: Add Articles

Once the blog page is live, you can ask the agent to write and publish articles. The agent will create CMS records using the REST API with your token.

Here's an example prompt to create a substantive article:

Add an article to my Agent Blog that teaches the reader how to set up
a Claude Code instance as a "website test user". The article should
cover:

The setup:
  - Create a new folder
  - Type "claude" to start Claude Code
  - Give it a prompt that turns it into a website testing agent

The prompt to give Claude Code should instruct it to:
  - Visit websites and take screenshots for review
  - Click on buttons, drag and drop, register, log in
  - Navigate the site, know where buttons are, which links to click
  - Check the equivalent of "browser console" for error messages
  - Act as an automated test user
  - Create a Node.js or Python script using Puppeteer or similar
  - Support both single-page apps (React, etc.) and SSR pages
  - Propose a working setup in the current folder

The article should explain that this creates a reusable "website test
agent" that you can point at any site. Include the actual prompt the
reader would use, formatted as a code block they can copy.

Category: "Practical Guides"
Write it in a professional but accessible tone.

What the agent will do

The agent will:

1. Write the full article content in markdown format
2. Create the article via the REST API:

   bashcurl -X POST "https://visimade.com/api/pages/PAGE_ID/cms-data/articles" \
     -H "Authorization: Bearer vm_YOUR_TOKEN" \
     -H "Content-Type: application/json" \
     -d '{
       "data": {
         "article_id": "setup-claude-code-website-tester",
         "title": "How to Set Up Claude Code as a Website Test User",
         "category": "Practical Guides",
         "summary": "Turn Claude Code into an automated QA agent...",
         "content": "# Full markdown article content here...",
         "date": "2025-06-15",
         "author": "Agent Blog",
         "sort_order": 1
       }
     }'

3. The article will immediately appear on your blog page

Step 3: Add Images to Articles

Articles look better with images. You can ask the agent to generate images using an AI image generation API (like Google Gemini) and upload them to Visimade's CDN via the Page Assets API.

My Gemini API key is: YOUR_GEMINI_KEY

Generate images for each article on my Agent Blog. For each article:

1. Generate a professional, editorial-style image that matches the
   article's topic using the Gemini image generation API
2. Upload the image to Visimade using the Page Assets API
   (POST /api/pages/PAGE_ID/assets)
3. Update the article's CMS record to include the image URL
   (PATCH /api/pages/PAGE_ID/cms-data/articles/RECORD_ID)

Refer to the API reference at:
  https://visimade.com/developers/api/examples/cms-images

for how to properly upload images and store their URLs in CMS records.

How it works

The agent will follow this workflow for each article:

pythonimport google.generativeai as genai

genai.configure(api_key="YOUR_GEMINI_KEY")
model = genai.ImageGenerationModel("imagen-3.0-generate-002")

result = model.generate_images(
    prompt="Professional editorial illustration: AI agents collaborating...",
    number_of_images=1
)
result.images[0].save("article-image.png")

pythonimport requests

resp = requests.post(
    "https://visimade.com/api/pages/PAGE_ID/assets",
    headers={"Authorization": "Bearer vm_YOUR_TOKEN"},
    files={"file": ("article-image.png", open("article-image.png", "rb"), "image/png")}
)
cdn_url = resp.json()["url"]
# e.g., "https://cdn.visimade.com/pages/123/assets/article-image.png"

pythonrequests.patch(
    f"https://visimade.com/api/pages/PAGE_ID/cms-data/articles/{record_id}",
    headers={
        "Authorization": "Bearer vm_YOUR_TOKEN",
        "Content-Type": "application/json"
    },
    json={"data": {"image": cdn_url}}
)

Ongoing Blog Management

Once your blog is set up, you can continue to manage it entirely through your coding agent. Here are common operations:

Update the page design

Ask the agent to modify the HTML and push it:

Update my Agent Blog page to add a dark mode toggle in the header.
Keep using the CmsData SDK for all data operations.

Edit an existing article

Update the "setup-claude-code-website-tester" article on my Agent Blog:
- Add a section about running tests in CI/CD pipelines
- Fix the typo in the third paragraph

Bulk-add articles

Write 5 new articles for my Agent Blog covering:
1. How to orchestrate multiple AI agents for code review
2. Cost optimization strategies for AI agent workloads
3. Setting up guardrails for autonomous coding agents
4. AI agents for database migration planning
5. Measuring ROI on AI coding agent adoption

Each article should be 1000-1500 words, professional tone,
with proper markdown formatting.

Use from the browser

If the agent built admin UI into the page (using CmsData.isCreator()), you can also create and edit articles directly from the browser when logged into your Visimade account. The page owner sees edit/delete controls that other visitors don't.

How It Works Under the Hood

Architecture

Your Coding Agent
    |
    |-- Reads API docs (visimade.com/developers/api)
    |-- Builds HTML file with inline CSS + JS
    |-- Uses PATCH /api/pages/:id to deploy the page
    |
    v
Visimade Page (HTML + CmsData SDK)
    |
    |-- CmsData.find('articles') -> fetches articles from CMS
    |-- CmsData.find('categories') -> fetches categories
    |-- Renders articles client-side
    |-- Uses ?article=slug query params for deep linking
    |
    v
Visitors see a fully functional blog at visimade.com/p/your-slug

Key APIs Used

• Pages API — Look up, read, and update the page HTML
• CMS Data API — Store and retrieve articles and categories
• Page Assets API — Upload images to the CDN
• CmsData SDK (client-side) — Fetch and render data in the browser

Full API Reference

• API Reference — Complete REST API documentation
• CMS + Images Guide — Detailed CMS and asset upload guide with blueprints

FAQ

Which coding agents work with this?

Any CLI-based coding agent that can read web pages and execute HTTP requests. This includes Claude Code, OpenAI Codex CLI, Cursor Agent, Windsurf, Aider, and others. The key requirement is that the agent can read the API documentation URL and make curl/Python/Node.js HTTP requests.

Can I use a custom domain?

Yes. Visimade pages support custom domains. The CmsData SDK automatically handles API routing on custom domains — this is why the prompt specifies using the SDK instead of direct fetch() calls.

Do I need to set up a database or server?

No. Visimade provides the hosting, CMS database, and CDN. Your page is a single HTML file that reads data from the CMS at runtime. There's no build step, no server to maintain, and no database to provision.

Can multiple agents contribute articles?

Yes, as long as they have the API token. You could have different agents writing articles on different topics, all posting to the same blog via the CMS Data API.

What about Collection Schemas?

You can optionally define a schema for your articles collection to enforce field types and required fields. See the Collection Schemas documentation. This is useful if you have multiple agents writing articles and want to ensure consistent data structure.