Mobiscroll MCP

npx add-mcp 'https://mcp.mobiscroll.com'

Mobiscroll ships an MCP server and agent skills so coding assistants generate scheduler, event calendar, timeline and picker code correctly - for Claude Code, Codex, Cursor and GitHub Copilot, alongside machine-readable documentation and AI behavior rules.

Why AI integration?

AI coding assistants work best when they have access to structured, authoritative documentation. Without it, they often:

• Hallucinate APIs — invent option names, events, or types that don't exist
• Mix frameworks — use Angular module imports or jQuery plugin syntax instead of React hooks and JSX
• Reference outdated versions — generate v5 code when the current version is v6
• Ignore framework conventions — skip named imports from @mobiscroll/react or omit the CSS import

The Mobiscroll AI integration addresses these problems by providing documentation optimized for AI consumption, combined with behavior rules that enforce framework isolation and correct API usage.

Architecture overview

The integration consists of three layers:

Data layer — llms files

Machine-readable documentation files containing the complete Mobiscroll API reference and guides, one per framework. These are the source of truth that AI tools read to answer questions.

File	Description
llms-react-full.txt	Complete React documentation
llms-react.txt	React table of contents (links to individual pages)
llms-icons.txt	Icon names (IcoMoon, Font Awesome, Ionicons) — all frameworks

[!-info] -info info

You don't need to download or host these files — the rules files and the Claude Code and Codex plugins reference them directly and fetch their content automatically.

Rules layer — rules files

Rules files provide Mobiscroll context to Cursor and GitHub Copilot only. Claude Code and Codex use the Mobiscroll plugin instead — no manual file setup needed.

Two approaches are available:

• Option A — file-based context loading. A rules file (.mdc for Cursor, .instructions.md for Copilot) contains API documentation and behavior rules. No MCP server required.
• Option B — live schema fetching via MCP server. Extended rule files instruct the AI to call the Mobiscroll MCP server for live component schema lookups on each generation. Suited for interactive coding agents that need per-query precision.

Choose based on your preference and setup.

Files

Option A — file-based rules:

File	Format	For
mobiscroll-react.mdc	Cursor rule file	Cursor
copilot-instructions/mobiscroll-react.instructions.md	Copilot instruction file	GitHub Copilot

Option B — extended rules with MCP:

File	Format	For
mobiscroll-ui.mdc	Cursor extended rule (orchestrator)	Cursor
mobiscroll-ui-react.mdc	Cursor extended rule (React)	Cursor
mobiscroll-ui-theming.mdc	Cursor extended rule (theming)	Cursor
mobiscroll-ui.instructions.md	Copilot extended instruction (orchestrator)	GitHub Copilot
mobiscroll-ui-react.instructions.md	Copilot extended instruction (React)	GitHub Copilot
mobiscroll-ui-theming.instructions.md	Copilot extended instruction (theming)	GitHub Copilot

Which tool uses which files?

Tool	Approach	Files used
Cursor	Option A	mobiscroll-react.mdc
Cursor	Option B	mobiscroll-ui.mdc, mobiscroll-ui-react.mdc, mobiscroll-ui-theming.mdc
GitHub Copilot	Option A	mobiscroll-react.instructions.md
GitHub Copilot	Option B	mobiscroll-ui.instructions.md, mobiscroll-ui-react.instructions.md, mobiscroll-ui-theming.instructions.md

Live schema layer — MCP server

The Mobiscroll MCP server serves structured, version-stamped API knowledge over the Model Context Protocol. It is a single, unified server: the same mobiscroll server that exposes these UI component tools also serves the Mobiscroll Connect tools, prefixed Connect so they never collide. Instead of relying on documentation snapshots, an assistant can call these tools to fetch the exact component schema, valid props/events, or a working example at generation time — so it never hallucinates or drifts from the current API. See the MCP tool reference for the full list of what it exposes.

It is a hosted Streamable HTTP server at https://mcp.mobiscroll.com/ — no local install required. It's optional for Cursor and GitHub Copilot (only used if you choose Option B), and bundled/always-on for Claude Code and Codex via the plugin.

Cursor setup

Step 1: Register documentation sources

Open Cursor Settings → Indexing & Docs and add the documentation source for your framework:

Framework	Name	URL
React	Mobiscroll React	https://mobiscroll.com/docs/llms-react-full.txt

Only register the source matching your use case. Do not register multiple sources — this prevents cross-domain contamination.

Step 2: Add behavior rules

Choose one approach — Option A works immediately with no additional setup; Option B adds live MCP schema lookups for higher accuracy but requires the MCP server to be configured.

Option A —.mdc rules file

Download the mobiscroll-react.mdc file and place it in .cursor/rules/:

your-project/
├── .cursor/
│   └── rules/
│       └── mobiscroll-react.mdc
├── src/
└── package.json

The .mdc file provides text-based API rules — no additional setup required.

Option B — Extended rule files + MCP (3 files)

Download the three extended rule files and place them in .cursor/rules/:

• mobiscroll-ui.mdc (orchestrator)
• mobiscroll-ui-react.mdc (React conventions)
• mobiscroll-ui-theming.mdc (theming)

your-project/
├── .cursor/
│   └── rules/
│       ├── mobiscroll-ui.mdc
│       ├── mobiscroll-ui-react.mdc
│       └── mobiscroll-ui-theming.mdc
├── src/
└── package.json

Unlike Option A, these rule files instruct Cursor's AI to call the Mobiscroll MCP server for live component schema lookups on each generation — so it works from the current API instead of guessing from memory. Review generated code before merging it, the same as any AI output.

Rule activation

The extended .mdc files use alwaysApply: false with a description in their frontmatter. Cursor reads the description and activates the rule only when the context is relevant — the rule is not included in every message. You can also trigger it manually with @rule-name (e.g. @mobiscroll-ui). The .mdc format works in all Cursor modes including Agent mode.

Step 3: Connect the MCP server

Configure the Mobiscroll MCP server so the extended rules can call it for live schema lookups.

Create or edit .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "mobiscroll": {
      "url": "https://mcp.mobiscroll.com/"
    }
  }
}

[!-warning] -warning No type field

Cursor infers the transport type from the URL. Do not add "type": "http" to Cursor's config — it causes an error.

your-project/
├── .cursor/
│   ├── mcp.json
│   └── rules/
│       ├── mobiscroll-ui.mdc
│       ├── mobiscroll-ui-react.mdc
│       └── mobiscroll-ui-theming.mdc
├── src/
└── package.json

Scope	Config file	Shared with team
project	.cursor/mcp.json in project root	Yes, if committed
global	~/.cursor/mcp.json	No, all your projects

Verify the connection: Open the Output panel in Cursor and select MCP Logs from the dropdown. A successful connection logs tool discovery messages for the mobiscroll server.

How it works

When asking Cursor about Mobiscroll, include @docs to ensure it reads the registered documentation:

@docs How do I set up a weekly scheduler with Mobiscroll?

@docs What options does the Eventcalendar timeline view accept?

GitHub Copilot setup

Step 1: Add behavior rules

Choose one approach — Option A works immediately with no additional setup; Option B adds live MCP schema lookups for higher accuracy but requires the MCP server to be configured.

Option A —.instructions.md rules file

Download the mobiscroll-react.instructions.md file and place it in .github/instructions/:

your-project/
├── .github/
|   └── instructions/
|       └── mobiscroll-react.instructions.md
├── src/
└── package.json

The .instructions.md file provides text-based API rules — no additional setup required.

Option B — Extended instruction files + MCP (3 files)

Download the three extended instruction files and place them in .github/instructions/:

• mobiscroll-ui.instructions.md (orchestrator)
• mobiscroll-ui-react.instructions.md (React conventions)
• mobiscroll-ui-theming.instructions.md (theming)

your-project/
├── .github/
|   └── instructions/
|       ├── mobiscroll-ui.instructions.md
|       ├── mobiscroll-ui-react.instructions.md
|       └── mobiscroll-ui-theming.instructions.md
├── src/
└── package.json

Step 2: Connect the MCP server

Configure the Mobiscroll MCP server so the extended instruction files can call it for live schema lookups.

Create or edit .vscode/mcp.json in your project root:

{
  "servers": {
    "mobiscroll": {
      "type": "http",
      "url": "https://mcp.mobiscroll.com/"
    }
  }
}

[!-warning] -warning "servers" not "mcpServers"

VS Code uses "servers" as the root key — not "mcpServers" like Claude Code and Cursor. Using the wrong key silently breaks the config with no error message.

your-project/
├── .vscode/
│   └── mcp.json
├── .github/
│   └── instructions/
│       ├── mobiscroll-ui.instructions.md
│       ├── mobiscroll-ui-react.instructions.md
│       └── mobiscroll-ui-theming.instructions.md
├── src/
└── package.json

Scope	Config file	Shared with team
workspace	.vscode/mcp.json in project root	Yes, if committed
user profile	Opened via MCP: Open User Configuration	No, all your workspaces

Verify the connection: Open the Command Palette and run MCP: List Servers. The mobiscroll server should appear with a connected status. A trust dialog appears on first use — approve it to allow the server to start.

Alternatively, open the Command Palette and run MCP: Add Server for a guided setup.

How it works

The instruction files with applyTo: "**" apply automatically to all Copilot Chat queries — no manual reference needed. Both options contain:

• Documentation URLs — point the AI to the correct framework docs
• Component mapping — map user intents (e.g., "scheduler") to the correct Mobiscroll APIs
• Rules — enforce correct package imports, CSS loading, and API usage
• Constraints — prevent cross-framework mixing and API hallucination

Ask Mobiscroll questions directly:

How do I set up a weekly scheduler with Mobiscroll?

What options does the Eventcalendar timeline view accept?

Claude Code setup

Install the Mobiscroll plugin for Claude Code. The plugin bundles framework coding skills and the MCP server in a single install — no per-project configuration files needed.

Step 1: Register the marketplace

Run this once in Claude Code to register the Mobiscroll plugin marketplace:

/plugin marketplace add acidb/mobiscroll-marketplace

Step 2: Install the plugin

/plugin install mobiscroll@mobiscroll

[!-warning] -warning Plugin skills don't auto-update

Installing the plugin takes a snapshot of its skills — Claude Code won't pull in newer ones on its own unless you enable auto-update for the marketplace. To get the latest at any time, run /plugin marketplace update mobiscroll && /plugin update mobiscroll@mobiscroll, then /reload-plugins.

Step 3: Connect the MCP server

The plugin bundles the MCP server — no separate configuration is needed for most setups. To configure it manually or share it with your team:

claude mcp add --transport http mobiscroll https://mcp.mobiscroll.com/

[!-warning] -warning VS Code extension

If you are using the Claude Visual Studio Code extension, the server will not appear unless it is added with project scope. See the next command below.

To share the server with your team automatically, use project scope:

claude mcp add --transport http --scope project mobiscroll https://mcp.mobiscroll.com/

This creates or updates .mcp.json in your project root. You can also create that file manually:

{
  "mcpServers": {
    "mobiscroll": {
      "type": "http",
      "url": "https://mcp.mobiscroll.com/"
    }
  }
}

Scope	CLI flag	Config location	Shared with team
local (default)	--scope local	~/.claude.json	No
project	--scope project	.mcp.json in project root	Yes, via version control
user	--scope user	~/.claude.json	No, all your projects

[!-info] -info info

Use --scope project for team repos so everyone gets the MCP server automatically when they clone the project.

[!-warning] -warning Also connected from the directory?

If your organization has enabled the Mobiscroll connector from Anthropic's directory, you may already have the server through your Claude account. A project-scoped .mcp.json entry and the directory connector are two routes to the same server, and Claude Code can report the project entry as failing to load until you authorize the connector on your own account. Authorize it once and both work, or remove the .mcp.json entry and rely on the connector alone. See Claude app setup below.

Verify the connection: Run /mcp inside Claude Code. The panel lists each connected server and its tool count. A healthy connection shows mobiscroll with at least one tool.

How it works

Once installed, the plugin provides:

• Skills — mobiscroll-ui is the orchestrator skill that detects your framework (React, Angular, Vue, JavaScript, or jQuery) and loads the matching framework sub-skill. Theming questions are handled by mobiscroll-ui-theming. All skills are installed together.
• MCP server — The bundled Mobiscroll MCP server provides live component schema lookup, code validation, and example search on demand, so Claude works from the current API instead of guessing from memory. Review generated code before merging it, the same as any AI output.

When you ask Claude Code to write Mobiscroll code, it:

1. Detects your framework and Mobiscroll version via resolveEnvironment
2. Loads the matching framework skill with idiomatic conventions
3. Looks up the component schema before writing any props or events
4. Validates generated code before returning it to you

Codex setup

Install the Mobiscroll plugin for OpenAI Codex. The plugin bundles framework coding skills and the MCP server in a single install — no per-project configuration files needed.

Step 1: Register the marketplace

Run this once in Codex to register the Mobiscroll plugin marketplace:

/plugins marketplace add acidb/mobiscroll-marketplace

Step 2: Install the plugin

/plugins install mobiscroll@mobiscroll

[!-warning] -warning Plugin skills don't auto-update

Installing the plugin takes a snapshot of its skills — Codex won't pull in newer ones on its own. To get the latest at any time, update the marketplace catalog and reinstall the plugin: /plugins marketplace update mobiscroll, then /plugins install mobiscroll@mobiscroll.

Step 3: Connect the MCP server

The plugin bundles the MCP server — no separate configuration is needed for most setups. To configure it manually or share it with your team, add it to ~/.codex/config.toml (global) or .codex/config.toml (project):

[mcp_servers.mobiscroll]
url = "https://mcp.mobiscroll.com/"

You can also register it from the command line:

codex mcp add mobiscroll --url https://mcp.mobiscroll.com/

Scope	Config location	Shared with team
global	~/.codex/config.toml	No, all your projects
project	.codex/config.toml in project root (trusted projects only)	Yes, via version control

[!-info] -info info

Use the project-level .codex/config.toml for team repos so everyone gets the MCP server automatically when they clone the project.

Verify the connection: Run /mcp inside Codex. The panel lists each connected server and its tool count. A healthy connection shows mobiscroll with its tools listed.

How it works

Once installed, the plugin provides:

• Skills — mobiscroll-ui is the orchestrator skill that detects your framework (React, Angular, Vue, JavaScript, or jQuery) and loads the matching framework sub-skill. Theming questions are handled by mobiscroll-ui-theming. All skills are installed together.
• MCP server — The bundled Mobiscroll MCP server provides live component schema lookup, code validation, and example search on demand, so Codex works from the current API instead of guessing from memory. Review generated code before merging it, the same as any AI output.

When you ask Codex to write Mobiscroll code, it:

1. Detects your framework and Mobiscroll version via resolveEnvironment
2. Loads the matching framework skill with idiomatic conventions
3. Looks up the component schema before writing any props or events
4. Validates generated code before returning it to you

Claude app setup — claude.ai, Desktop and mobile

The MCP server is published in Anthropic's connector directory, so Claude on the web, Claude Desktop and the Claude mobile apps can use it without any project files or CLI commands. It is the same server the editor setups above use — the difference is only how you reach it.

Step 1: Connect from the directory

Open Settings → Connectors → Browse connectors, search for Mobiscroll, and click Connect.

There is nothing to configure. The server is read-only and needs no account, API key or OAuth sign-in.

Step 2: Enable it for your organization (Team and Enterprise)

On Team and Enterprise plans an Owner adds the connector for the organization first. Each member then connects it on their own account — the connector is listed for everyone, but it does not answer until the individual member has connected it.

[!-warning] -warning Already added it as a custom connector?

If you added mobiscroll by hand before it was in the directory, remove that entry before connecting from the directory. Two entries pointing at https://mcp.mobiscroll.com/ register the same tools twice, and Claude may call the copy you are not expecting.

Open Settings → Connectors, find your custom mobiscroll entry, and remove it. Then connect from the directory.

How it works

Claude calls the same 14 read-only tools listed in the MCP tool reference below. Ask it about a component's options, an event signature, a Connect endpoint or the SDK equivalent of a REST call, and it reads the current schema instead of answering from memory.

The directory connector carries no skills. Those are part of the Claude Code and Codex plugin — to write Mobiscroll code inside a project, use the Claude Code setup above.

MCP tool reference

The MCP server exposes 14 tools. All of them are read-only and annotated as such, so an AI assistant can call them without asking for confirmation each time. None of them read or write anything in your Mobiscroll account, and the Connect tools describe the Connect API rather than calling it.

Mobiscroll UI tools

Tool	What it returns	Requires
resolveEnvironment	The framework and major version a project uses, read from its package.json. These are the values the other UI tools take as arguments.	package.json contents
listComponents	Every component available for a framework and version, with a short description and entity count.	framework, major
getComponentSchema	Options, events, methods and renderers for one component. Returns a compact index first; call again with specific names for full detail.	component, framework, major
searchExamples	Examples matching keywords, filtered by component and version, sorted by relevance.	framework, major
getExampleById	A complete example with its source files, description and implementation notes.	exampleId, framework, major
validateCode	Unknown props, events and methods in a snippet, plus deprecated usage. Static analysis — nothing is executed.	component, framework, major, snippet

Mobiscroll Connect tools

The same server also answers questions about the Connect REST API and its SDKs. These are documented in full in the Connect AI Integration guide.

Tool	What it returns	Requires
resolveConnectEnvironment	Which Connect SDK and version a project depends on, read from its dependency manifest.	manifest contents
listConnectEndpoints	Every Connect REST endpoint with its method, path, summary and authentication.	—
getConnectEndpointSchema	One endpoint in full: parameters with types, authentication, response statuses, examples.	endpointId, or method + path
listConnectSdkMethods	The resources and methods one language's SDK exposes.	language
getConnectSdkMethod	One SDK method in full: signature, parameters, return type, doc comment, example.	language, method
searchConnect	Keyword matches across REST endpoints and SDK methods.	query
mapConnectEndpointToSdk	The equivalent SDK call for a REST endpoint, in each language or one.	endpointId, or method + path
getConnectErrorTaxonomy	Each error category with its HTTP status and the idiomatic exception type per language.	—

[!-success] -success Start with a resolve call

The server runs remotely and cannot read your files, so resolveEnvironment and resolveConnectEnvironment take your manifest contents as an argument. Every other tool accepts the framework, version or language directly if you already know them.

Framework isolation

[!-warning] -warning Critical

Each rules file and documentation source targets exactly one framework or domain. Never combine files from different frameworks, or mix UI framework files with Connect files.

Why this matters:

• Most API options are shared across frameworks, but component usage and templating differs for each — mixing them produces broken code

Mobiscroll Connect is a separate domain:

• Connect is a backend integration layer — OAuth 2.0, REST API, webhooks, calendar sync
• It has no UI components, no JSX, no frontend framework bindings
• Connect uses mobiscroll-connect.mdc and llms-connect-full.txt — never the UI framework files
• Mixing Connect docs with UI docs causes the AI to conflate REST endpoints with component APIs

[!-info] -info info

The mobiscroll@mobiscroll plugin also bundles a mobiscroll-connect skill for server-side Connect (OAuth, REST, calendar sync). It activates only for backend Connect work and never mixes with UI component code. See the Connect AI Integration guide.

Rules:

1. Use only rules files that match one framework or domain — never mix files from different frameworks
2. Register only one documentation source in Cursor
3. If your project uses multiple frameworks (e.g., micro-frontends), set up separate directories with separate .mdc files
4. If your project uses both a UI framework and Mobiscroll Connect, use separate AI context directories for each
5. If an AI assistant generates code with wrong framework imports, check that the correct rules file is in place

Example queries

These examples show the kind of questions the AI integration is designed to handle correctly.

How do I create an Eventcalendar with a weekly scheduler view?
Add drag and drop support to my Mobiscroll timeline.
What is the type for calendar events in Mobiscroll React?

Troubleshooting

AI generates code with the wrong framework

Symptom: You are using React but the AI generates code for a different framework (e.g. import { Eventcalendar } from '@mobiscroll/angular').

Fix: Verify that you have the correct rules file in place. For React in Cursor, use mobiscroll-react.mdc; for Copilot, use mobiscroll-react.instructions.md. In Cursor, check that the registered @docs source points to llms-react-full.txt.

AI invents non-existent APIs

Symptom: The AI suggests options, events, or types that don't exist in the Mobiscroll documentation.

Fix: The .mdc rules instruct the AI to only use APIs found in the docs. If this still happens, explicitly reference @docs in Cursor queries, or verify that the Mobiscroll plugin is installed in Claude Code (/plugin list) or Codex (codex plugin list). You can also ask the AI to verify an option exists in the Mobiscroll docs.

AI mixes Mobiscroll Connect with UI components

Symptom: The AI generates REST API calls when you asked about a frontend calendar component, or generates JSX/component code when you asked about the Connect API.

Fix: Mobiscroll Connect is a backend integration layer (OAuth, REST, webhooks) and has no UI components. Eventcalendar is a frontend UI component with no REST API. They use entirely separate .mdc files and documentation sources. Verify that the correct .mdc file is active for your project. If you use both in the same codebase, keep separate AI context directories for each.

MCP server does not appear after setup

Symptom: The MCP server panel shows no mobiscroll entry, or tools are not available.

Fix: Check that the config file is in the correct location and uses the correct root key — mcpServers for Claude Code, Codex, and Cursor, servers for VS Code. Validate that the file is well-formed JSON. For Claude Code or Codex, run /mcp to inspect connected servers.

File reference

All AI integration files are available at the following URLs:

Documentation files

File	URL
React	https://mobiscroll.com/docs/llms-react-full.txt

Rules files

File	Cursor (.mdc)	Copilot (.instructions.md)
React rules	mobiscroll-react.mdc	copilot-instructions/mobiscroll-react.instructions.md

Extended rule files

File	Cursor (.mdc)	Copilot (.instructions.md)
Orchestrator	mobiscroll-ui.mdc	copilot-instructions/mobiscroll-ui.instructions.md
React conventions	mobiscroll-ui-react.mdc	copilot-instructions/mobiscroll-ui-react.instructions.md
Theming	mobiscroll-ui-theming.mdc	copilot-instructions/mobiscroll-ui-theming.instructions.md

File contents

The complete contents of each file are shown below. You can copy directly from these blocks or use the download links above.