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

6 tools exposed
to the AI.

blockli_get_component(name: string)

Returns full prop API, TypeScript types, usage examples, and data requirements for any Blockli UI component.

blockli_get_hooks(feature: string)

Returns available data hooks with type signatures — useActivityFeed, useGroups, useCourses, useMembers, and more.

blockli_generate_theme(description: string)

Generates a complete semantic token tree from a natural language description. Returns all 47 tokens validated for WCAG contrast.

blockli_get_figma_mapping(frameUrl: string)

Reads a Figma frame and returns a mapping of design components to their Blockli equivalents with prop suggestions.

blockli_validate_screen(code: string)

Validates a screen implementation against Blockli patterns — checks hook usage, data wiring, navigation, and TypeScript types.

blockli_list_features

Returns all available community features with their integration requirements, so the AI knows what is possible on the current plan.

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 runs locally or on your CI. Your AI client connects to it via the Model Context Protocol. When you ask the AI a Blockli question, it calls the relevant tools to fetch live documentation and returns grounded, accurate code — not hallucinated APIs.

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