API Reference
Sections API & MCP
Browse and fetch 270+ production-ready website sections over REST or MCP. Free during the beta, no API key required.
Base URL: https://rifframe.app | Rate limit: 300 req/min | OpenAPI spec
REST API
Three public endpoints. All return JSON by default, support CORS (any origin), and share the same rate limit.
/api/v1/sections
List or search the section catalog
Search by free-text query (English) and/or type filter. Without query or type, returns a curated featured set (one section per type). Use ?all=1 for a complete dump of all 270+ sections.
Parameters
| Name | In | Description |
|---|---|---|
q | query | Free-text search in English (matches id, title, tags, description) |
type | query | Filter by section type (hero, pricing, faq, testimonials, ...) |
all | query | Set to 1 for a complete catalog dump |
limit | query | Maximum results to return (1-250) |
Responses
Example
curl "https://rifframe.app/api/v1/sections?q=pricing+toggle&limit=3"
{
"count": 3,
"sections": [
{
"id": "pricing/cards/with-toggle",
"type": "pricing",
"title": "Pricing with billing toggle",
"description": "Three pricing cards with monthly/yearly toggle...",
"tags": ["pricing", "toggle", "billing", "plans"],
"elements": ["heading", "subhead", "toggle", "cards", "buttons"],
"density": "default",
"preview": "https://rifframe.app/preview/pricing/cards/with-toggle",
"thumbnail": "https://rifframe.app/thumbs/pricing--cards--with-toggle.jpg",
"scalable": true
}
]
}/api/v1/sections/{type}/{style}/{name}
Get a section as HTML
Fetch one section by its three-part id. Returns Tailwind v4 HTML markup with typed slot specs (sample text + writing hints) and group specs (repeatable units). Colors come from the token contract.
Parameters
| Name | In | Description |
|---|---|---|
typerequired | path | Section type (e.g. hero) |
stylerequired | path | Style variant (e.g. split) |
namerequired | path | Variant name (e.g. with-stats) |
surface | query | Background role for page rhythm(default: light) |
format | query | json = metadata + HTML; document = standalone HTML page(default: json) |
anchors | query | Keep data-slot attributes for deterministic filling(default: false) |
items | query | Render with N items in the main repeatable group (1-12) |
Responses
Example
curl "https://rifframe.app/api/v1/sections/hero/split/with-stats?anchors=true"
{
"id": "hero/split/with-stats",
"type": "hero",
"title": "Split hero with stats",
"slots": [
{ "name": "heading", "kind": "text", "sample": "Ship faster...", "hint": "5-8 words, action-oriented" },
{ "name": "hero-image", "kind": "image", "aspect": "4/3" }
],
"groups": [
{ "name": "stats", "unit": "container", "repeatable": true, "count": 3,
"items": [["stat-1-value", "stat-1-label"], ["stat-2-value", "stat-2-label"], ...],
"scalable": true, "min": 1, "max": 12 }
],
"preview": "https://rifframe.app/preview/hero/split/with-stats",
"surface": "light",
"anchors": true,
"html": "<section class=\"border-b border-border bg-background\">...",
"usage": "Tailwind v4 utility markup using Rifframe semantic tokens..."
}/api/v1/tokens
Get the CSS token contract
Returns the CSS variable block consumed by every section. Paste it into your Tailwind v4 CSS entry file and override values with your brand colors. All sections stay on-brand automatically.
Parameters
| Name | In | Description |
|---|---|---|
format | query | json = object with css and usage; css = raw CSS text(default: json) |
Responses
Example
curl "https://rifframe.app/api/v1/tokens?format=css"
@theme {
--color-background: #ffffff;
--color-foreground: #171717;
--color-muted: #fafafa;
--color-muted-foreground: #525252;
--color-subtle: #a3a3a3;
--color-border: #e5e5e5;
--color-primary: #171717;
--color-primary-foreground: #ffffff;
--color-primary-hover: #262626;
}MCP Server
Streamable HTTP transport at POST /api/mcp. Stateless (no SSE sessions). Four tools:
search_sections
Search the catalog by intent. Always use English queries (the index is English-only). Empty query returns a curated featured set.
| Param | Type | Description |
|---|---|---|
query | string | Free-text intent in English |
type | string | Filter by section type |
get_section
Fetch one section as Tailwind HTML with typed slot specs (sample text + writing hints) and repeatable group specs. Pass anchors=true for data-slot attributes, items=N for parametric rendering.
| Param | Type | Description |
|---|---|---|
idrequired | string | Section id from search_sections |
surface | light | muted | dark | Background role |
anchors | boolean | Keep data-slot attributes |
items | integer (1-12) | Render with N items in the main group (when scalable) |
compare_sections
Get rendered screenshots of up to 4 sections for visual comparison. Use after search_sections when several candidates look plausible.
| Param | Type | Description |
|---|---|---|
idsrequired | string[] | Section ids to compare (1-4) |
get_tokens
Get the CSS variable block every section consumes. Install once, override with your brand colors, all sections stay consistent.
Connect your agent
Claude Code
claude mcp add --transport http rifframe https://rifframe.app/api/mcp
Cursor
// .cursor/mcp.json
{
"mcpServers": {
"rifframe": {
"url": "https://rifframe.app/api/mcp"
}
}
}Windsurf
// .windsurf/mcp.json
{
"mcpServers": {
"rifframe": {
"url": "https://rifframe.app/api/mcp"
}
}
}VS Code
// .vscode/mcp.json
{
"servers": {
"rifframe": {
"type": "http",
"url": "https://rifframe.app/api/mcp"
}
}
}Any MCP-compatible client works. Point it at https://rifframe.app/api/mcp with HTTP transport. More details on the agents page.