- Framework7 MCP Server
Tools Reference
The Framework7 MCP server provides 9 tools for querying Framework7 API documentation.
list-components
List all available Framework7 components and modules with their names.
Parameters
None.
Example
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "list-components",
"arguments": {}
}
}
get-component
Get the full API for a Framework7 component including parameters, events, methods, app methods, app parameters, app events, DOM events, and CSS variables.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
name | string | Yes | Component name. Accepts kebab-case (e.g., smart-select) or PascalCase (e.g., SmartSelect). |
Example
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "get-component",
"arguments": {
"name": "dialog"
}
}
}
search-api
Search Framework7 API documentation across parameters, methods, events, and CSS variables. Returns matching results with descriptions.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
query | string | Yes | Search query string. |
type | string | No | Filter by type. One of: parameter, method, event, css-variable, all. Defaults to all. |
Example
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "search-api",
"arguments": {
"query": "backdrop",
"type": "parameter"
}
}
}
get-parameter
Get detailed information about a specific Framework7 parameter/option by name, including type, default value, and description.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
name | string | Yes | The parameter name (e.g., backdrop, animate, closeByBackdropClick). |
component | string | No | Component name to scope the search (e.g., dialog, popup). |
Example
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "get-parameter",
"arguments": {
"name": "closeByBackdropClick",
"component": "dialog"
}
}
}
get-method
Get detailed information about a specific Framework7 method by name, including signature, parameters, and description. Covers both instance methods and app-level methods.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
name | string | Yes | The method name (e.g., open, close, create, destroy). |
component | string | No | Component name to scope the search (e.g., dialog, popup). |
Example
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "get-method",
"arguments": {
"name": "open",
"component": "popup"
}
}
}
get-event
Get detailed information about a specific Framework7 event by name, including parameters and description. Covers instance events, app-level events, and DOM events.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
name | string | Yes | The event name (e.g., open, opened, close, closed). |
component | string | No | Component name to scope the search (e.g., dialog, popup). |
Example
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "get-event",
"arguments": {
"name": "opened",
"component": "dialog"
}
}
}
get-css-variables
Get CSS custom properties (variables) for a Framework7 component, grouped by theme (iOS, Material Design) with their values.
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
component | string | Yes | Component name (e.g., dialog, navbar, toolbar). |
Example
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "get-css-variables",
"arguments": {
"component": "navbar"
}
}
}
list-demos
List all available Framework7 demos with their slugs and available frameworks (core, vue, react, svelte).
Parameters
None.
Example
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "list-demos",
"arguments": {}
}
}
get-demo
Get demo source code for a specific Framework7 demo in a given framework variant (core, vue, react, or svelte).
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
slug | string | Yes | The demo slug (e.g., accordion, action-sheet, color-themes). Use list-demos to get available slugs. |
framework | string | Yes | Framework variant. One of: core, vue, react, svelte. |
Example
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "get-demo",
"arguments": {
"slug": "color-themes",
"framework": "core"
}
}
}