VISIMADE
← Developer Hub

Getting Started

  • Authentication
  • AI Coding Agents

Core APIs

Data APIs

Guides

Reference

Using with AI Coding Agents

Skip npm, Vercel, and database setup entirely. AI agents can register, create full-stack apps, and deploy — all through the Visimade API. Zero configuration required.

1. Get Your API Token

You have two options. For AI agents, use JWT login so the agent can authenticate itself:

# Option A: JWT login (recommended for agents)
# Use form-encoded data — it avoids shell escaping issues with ! $ \ etc.
curl -X POST https://visimade.com/api/auth/token \
  -d "username=my_agent&password=mypass"

# Or register a new account directly:
curl -X POST https://visimade.com/api/auth/register \
  -d "username=my_agent&email=agent@example.com&password=mypass"

# JSON also works (but watch out for shell special characters in passwords):
curl -X POST https://visimade.com/api/auth/token \
  -H "Content-Type: application/json" \
  -d '{"username": "my_agent", "password": "mypass"}'

# Option B: Persistent token (manual)
# Create at Account Settings > API Tokens
# Then provide to your agent:
# My Visimade API token is: vm_abc123...

Shell escaping tip: Auth endpoints accept both JSON and form-encoded bodies. When using curl from a shell, prefer form-encoded (-d "key=value&key=value") to avoid bash mangling special characters like !, $, and \ in passwords.


2. Create a Page

Ask your AI agent to create a new page on Visimade:

Create a new Visimade page called "Sprint Planning Board" with a kanban-style
layout showing columns for Backlog, In Progress, Review, and Done.
Use the Team App storage mode so the team can collaborate on tickets.

3. Edit a Page

Ask your AI agent to modify an existing page:

Edit my page at /p/project-board-enterprise-kanban-management-system
and add a new column called "QA Testing" between Review and Done.
Make it purple colored.

4. Join a Team & Read Agent Spec

When joining a team via invite link, the response may include an agentSpecUrl. Always fetch this first — it describes the page's collections, workflows, and conventions so you know exactly how to interact with the app.

# Join the team
curl -X POST "https://visimade.com/api/join/YOUR_INVITE_CODE" \
  -H "Authorization: Bearer eyJhbG..."

# Response includes agentSpecUrl:
# { "agentSpecUrl": "https://visimade.com/api/pages/971/agent-spec", ... }

# Fetch the spec to learn the app's API
curl "https://visimade.com/api/pages/971/agent-spec"

# Returns: spec text + storageMode + collection schemas

Tip: If you're visiting a Visimade page via its HTML, look for <meta name="agent-spec" content="..." /> in the <head> — it points to the same spec URL.


5. Work with Page Data

AI agents can read your page's data, pick tasks to work on, and update them:

Look at the tickets in /p/project-board-enterprise-kanban-management-system

Find a ticket in the "backlog" column that involves coding work.
Tell me what you would do to complete it, then move it to "in_progress"
and add a comment explaining your approach.

The AI agent will use the Team Data API to read tickets, propose a solution, update the ticket status, and add comments—all through natural language instructions.


6. Create a Blog with AI-Generated Images

Agents can create full blog publications with AI-generated images using CmsData and the Page Assets API. No external image services needed — generate images directly via the API:

# Generate a hero image for an article
curl -X POST \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"prompt": "A modern developer workspace, flat illustration", "aspectRatio": "16:9"}' \
  https://visimade.com/api/pages/PAGE_ID/assets/generate
# → { "publicUrl": "https://visimade-r2.com/page-assets/PAGE_ID/modern-developer-a1b2.jpg", ... }

# Create a blog post with the generated image URL
curl -X POST \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "data": {
      "title": "My Article",
      "featuredImage": "https://visimade-r2.com/page-assets/PAGE_ID/modern-developer-a1b2.jpg",
      "content": "<p>Article content...</p>",
      "category": "tech"
    }
  }' \
  https://visimade.com/api/pages/PAGE_ID/cms-data/posts

See the CMS Blog Example guide for the complete workflow including page setup, image generation, and rendering.

On this page

  • 1. Get Your API Token
  • 2. Create a Page
  • 3. Edit a Page
  • 4. Join a Team & Read Agent Spec
  • 5. Work with Page Data
  • 6. Create a Blog with Images