Blockli
Model Context Protocol

Build your app
with AI that
knows Blockli.

Blockli AI is the built-in chat client on your dashboard — powered by the Blockli MCP server. It knows every component, data hook, theme token, and integration pattern. Your AI stops guessing and starts building.

Try Blockli AI →Or use your own AI client
Blockli AI is built in — no setup, no API keys
Convert Figma designs to React Native, Blockli-native
Build custom screens from a plain-English description
Wire any UI to auth, feed, groups, courses, and more
Blockli AI
MCP · Connected
Convert my Figma community feed design to a Blockli screen and wire it up to BuddyBoss activity data
Tools used
blockli_get_figma_mapping
blockli_get_hooks(activityFeed)
blockli_get_component(Post)

Mapped 4 Figma components → Blockli equivalents. Wired to useActivityFeed() hook from your BuddyBoss install.

CommunityFeed.tsxReact Native · Blockli
// Generated by Claude using Blockli MCP
import { useActivityFeed } from '@blockli/hooks'
import { ScreenLayout, Post, Avatar } from '@blockli/ui'

export function CommunityFeed() {
const { posts, loading } = useActivityFeed()

return (
<ScreenLayout title="Community">
{posts.map(post => (
<Post
key={post.id}
author={post.author}
content={post.content}
onReact={type => post.react(type)}
/>
}
</ScreenLayout>
)
}

Capabilities

What you can
build with AI.

Figma → React Native

Paste a Figma frame URL. The MCP reads the design, maps every element to a Blockli component, and generates production-ready React Native code wired to your community data — auth, feed, groups, courses.

"Convert this Figma design to a Blockli screen"

Build from scratch

Describe a screen or feature in plain English. The AI knows every component in the Blockli library, every data hook, and every integration pattern — and generates a working implementation.

"Build a members leaderboard with points and badges"

Wire any UI

Already have a custom design or existing component? The MCP exposes exactly how to connect it to activity feeds, group membership, LearnDash progress, in-app purchases, and push notifications.

"Wire my custom card component to the BuddyBoss groups API"

Tools

58+ tools exposed
to AI clients.

list_supported_argumentsTop level

Return all valid string arguments accepted by theme MCP inspection tools so agents never guess enum-like values.

get_theme_build_workflowTop level(target)

Return recommended ordered tool calls for a target theme-building workflow and the source of each next argument.

list_collectionsTop level

List Blockli SDK collections supported by useCollection and the TypeScript item type each collection maps to.

get_collection_hook_signatureDeep level(collection)

Return the typed useCollection signature, result type, and items type for a Blockli collection screen.

inspect_app_block_mappingDeep level(blockType)

Inspect block.data fields and item fields used by the current app for a Blockli app page block type.

generate_useCollection_snippetDeep level(collection)

Generate the import and typed useCollection snippet for a Blockli collection screen.

Resources

Full platform docs
embedded as context.

Component library

60+ UI components with full API docs

Data hooks reference

All data hooks, types, and usage patterns

Theme token system

Semantic token architecture and generation

Integration guides

BuddyBoss, Fluent Community, BuddyPress APIs

Screen templates

Navigation patterns, layouts, screen types

On-Air Release patterns

Deployment, rollback, and versioning guides

How the MCP server works

The MCP server exposes live Blockli contracts — hook signatures, screen mappings, validation rules, and build workflows. Your AI client calls these tools over the Model Context Protocol so the agent can wire collections, themes, app pages, and shell flows into a full, functional app end to end — not guessed work.

Built-in AI client

Blockli AI is your main AI client.

Blockli AI lives right inside your dashboard. No setup, no API keys, no config files. It's connected to the MCP server by default and has full context of your community from day one.

Blockli AI

Built-in

The primary AI chat on your Blockli dashboard. Ask it to build screens, generate themes, wire up data, or explain any platform feature — it already has full MCP context.

No setup requiredAlways up to dateFull platform contextLives in your dashboard

Or connect your preferred AI tool

Claude

Claude Desktop + Claude Code

Cursor

Native MCP support

Windsurf

Native MCP support

Cline

VS Code extension

Any client

MCP protocol compatible

The MCP server is open protocol — connect Claude, Cursor, Windsurf, or any compatible client.

Connect an external AI client

Prefer Claude or Cursor?
Connect them in 30 seconds.

One config block. No API keys. Blockli AI is already built in — this is just for external tools.

Claude Desktop

Add to claude_desktop_config.json

claude_desktop_config.json
{
"mcpServers": {
"blockli": {
"command": "npx",
"args": ["-y", "@blockli/mcp"]
},
},
}
Cursor / Windsurf

Add to your .cursor/mcp.json or MCP settings

.cursor/mcp.json
{
"mcpServers": {
"blockli": {
"command": "npx",
"args": ["-y", "@blockli/mcp"],
"env": { "BLOCKLI_SITE_URL": "https://yoursite.com" }
},
},
}

Or run it directly

Start the MCP server standalone — useful for testing or CI environments.

$npx @blockli/mcp
Early access · MCP server in development

Build with AI.
Ship with Blockli.

Blockli AI is included with every plan — no setup, no extra costs. Join the waitlist for early access to the platform, the built-in AI client, and the theme SDK.

Get early access →Browse themes