Inktype API & MCP

Create and publish interactive articles programmatically.

Quick Start

Get an API key from your dashboard, then create your first post:

curl -X POST https://inktype.ai/api/v1/posts \
  -H "Authorization: Bearer ink_your_key" \
  -H "Content-Type: application/json" \
  -d '{"title": "My First API Post"}'

Authentication

All API requests require a Bearer token in the Authorization header:

Authorization: Bearer ink_your_api_key_here

Create API keys at inktype.ai/dashboard/api-keys. Keys are prefixed with ink_ and shown only once on creation.

Claude Code MCP Integration

The Inktype MCP server lets Claude Code create and publish posts directly. Add this to your Claude Code settings (~/.claude/settings.json):

{
  "mcpServers": {
    "inktype": {
      "command": "node",
      "args": ["/path/to/inktype-mcp/dist/index.js"],
      "env": {
        "INKTYPE_API_KEY": "ink_your_key_here"
      }
    }
  }
}

Then just ask Claude naturally:

"Create a post about the AI chip market with an interactive chart"

Claude will call create_post → add_text_block → add_html_block → publish_post automatically.

Available MCP Tools

Tool	Description
`list_posts`	List all your posts with status
`create_post`	Create a new post (returns post ID)
`get_post`	Get a post and all its blocks
`add_text_block`	Add a rich text block (Tiptap JSON)
`add_html_block`	Add an interactive HTML block
`update_block`	Update an existing block
`delete_block`	Delete a block
`publish_post`	Publish a draft
`unpublish_post`	Revert to draft
`update_post`	Update post title
`delete_post`	Permanently delete a post

Example: Building a post in Claude Code

Here's what a real conversation looks like once MCP is configured:

You

Create an Inktype post called "AI Infrastructure in 2026" with a text intro explaining the market landscape, then add an interactive bar chart comparing cloud GPU pricing across AWS, GCP, Azure, and Lambda Labs.

Claude (using MCP tools)

→ create_post("AI Infrastructure in 2026")

Created post, ID: a1b2c3...

→ add_text_block(postId, {"type": "doc", "content": [{"type": "paragraph", ...}]})

Added text block with market overview

→ add_html_block(postId, <!DOCTYPE html> ... interactive bar chart ...)

Added interactive HTML block with D3 chart

→ add_text_block(postId, {"type": "doc", ...})

Added analysis paragraph after the chart

→ publish_post(postId)

Published!

You

The chart colors should be more vibrant. Can you update it?

Claude

→ get_post(postId)

Found HTML block ID: x9y8z7...

→ update_block(postId, blockId, {"html": updated chart HTML})

Updated! Changes are live immediately.

Claude handles the Tiptap JSON for text blocks and generates complete HTML documents for interactive blocks — including D3 charts, maps, timelines, or any self-contained visualization.

Tips for best results

Be specific about the visualization. "Bar chart comparing X across Y" produces better results than "make a chart."
Ask Claude to use Inktype's color palette — amber #D4874D, purple #7B68C8, green #3DAA70 — for visual consistency.
Iterate conversationally. Say "make the tooltips more detailed" or "add a legend" and Claude will update the block in place.
Mix text and interactive blocks. The best Inktype posts alternate between narrative text and interactive visualizations.
You can also generate HTML externally (with ChatGPT, your own scripts, etc.) and use add_html_block to add it.

REST API

Base URL: https://inktype.ai/api/v1

Posts

GET /posts — List all posts

curl https://inktype.ai/api/v1/posts \
  -H "Authorization: Bearer ink_your_key"

POST /posts — Create a post

curl -X POST https://inktype.ai/api/v1/posts \
  -H "Authorization: Bearer ink_your_key" \
  -H "Content-Type: application/json" \
  -d '{"title": "My Post"}'

GET /posts/:id — Get post with blocks

PATCH /posts/:id — Update post

DELETE /posts/:id — Delete post

Blocks

POST /posts/:id/blocks — Add a block

Body: { type, sortOrder, content?, html? }

Types: text, html, interactive

# Add a text block
curl -X POST https://inktype.ai/api/v1/posts/{id}/blocks \
  -H "Authorization: Bearer ink_your_key" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "text",
    "sortOrder": 0,
    "content": {
      "type": "doc",
      "content": [{
        "type": "paragraph",
        "content": [{"type": "text", "text": "Hello world"}]
      }]
    }
  }'

# Add an HTML block
curl -X POST https://inktype.ai/api/v1/posts/{id}/blocks \
  -H "Authorization: Bearer ink_your_key" \
  -H "Content-Type: application/json" \
  -d '{"type": "html", "sortOrder": 1, "html": "<!DOCTYPE html>..."}'

PATCH /posts/:id/blocks — Update a block

Body: { blockId, content?, html?, sortOrder? }

DELETE /posts/:id/blocks — Delete a block

Body: { blockId }

Publishing

# Publish a post
curl -X PATCH https://inktype.ai/api/v1/posts/{id} \
  -H "Authorization: Bearer ink_your_key" \
  -H "Content-Type: application/json" \
  -d '{"status": "published", "publishedAt": "2026-04-07T00:00:00Z"}'

# Unpublish
curl -X PATCH https://inktype.ai/api/v1/posts/{id} \
  -H "Authorization: Bearer ink_your_key" \
  -H "Content-Type: application/json" \
  -d '{"status": "draft", "publishedAt": null}'

HTML Block Design Guide

HTML blocks should be self-contained documents that match Inktype's visual style:

Light background: #FDFBF7
Text color: #1a1a1a
Chart colors: amber #D4874D, purple #7B68C8, green #3DAA70, blue #4898C0, red #D05060
Borders: #E8E2D8
Font: system-ui, -apple-system, sans-serif
Border radius: 8-12px
Include hover states and tooltips for interactivity
CDN libraries: D3.js, Chart.js, Plotly.js, Three.js, p5.js, Leaflet

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: #FDFBF7;
      font-family: system-ui, sans-serif;
      color: #1a1a1a;
      padding: 20px;
    }
    .chart { /* your chart styles */ }
    .tooltip {
      background: white;
      border: 1px solid #E8E2D8;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }
  </style>
</head>
<body>
  <h3>My Interactive Chart</h3>
  <div id="chart"></div>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script>
    // Your visualization code
  </script>
</body>
</html>