AI Integration

Mobiscroll provides a set of machine-readable documentation files and AI behavior rules that enable coding assistants to generate accurate, framework-specific code. These files prevent common AI issues like hallucinated APIs, mixed framework imports, and outdated patterns.

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 React hooks in Angular code, or jQuery patterns in Vue
• Reference outdated versions — generate v5 code when the current version is v6
• Ignore framework conventions — skip MbscModule imports in Angular, or use wrong CSS loading patterns

The Mobiscroll AI integration solves 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-angular-full.txt	Complete Angular documentation
llms-angular.txt	Angular table of contents (links to individual pages)
llms-icons.txt	Icon names (IcoMoon, Font Awesome, Ionicons) — all frameworks

info

You don't need to download or host these files — the rules files and the Claude Code plugin 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 uses 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-angular.mdc	Cursor rule file	Cursor
copilot-instructions/mobiscroll-angular.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-angular.mdc	Cursor extended rule (Angular)	Cursor
mobiscroll-ui-theming.mdc	Cursor extended rule (theming)	Cursor
mobiscroll-ui.instructions.md	Copilot extended instruction (orchestrator)	GitHub Copilot
mobiscroll-ui-angular.instructions.md	Copilot extended instruction (Angular)	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-angular.mdc
Cursor	Option B	mobiscroll-ui.mdc, mobiscroll-ui-angular.mdc, mobiscroll-ui-theming.mdc
GitHub Copilot	Option A	mobiscroll-angular.instructions.md
GitHub Copilot	Option B	mobiscroll-ui.instructions.md, mobiscroll-ui-angular.instructions.md, mobiscroll-ui-theming.instructions.md

Cursor setup

Step 1: Register documentation sources

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

Framework	Name	URL
Angular	Mobiscroll Angular	https://dev.mobiscroll.com/docs/llms-angular-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-angular.mdc file and place it in .cursor/rules/:

your-project/
├── .cursor/
│   └── rules/
│       └── mobiscroll-angular.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-angular.mdc (Angular conventions)
• mobiscroll-ui-theming.mdc (theming)

your-project/
├── .cursor/
│   └── rules/
│       ├── mobiscroll-ui.mdc
│       ├── mobiscroll-ui-angular.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 always uses the current API instead of guessing from memory.

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: Configure MCP server (Optional)

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.dev.mobiscroll.com/"
    }
  }
}

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-angular.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-angular.instructions.md file and place it in .github/instructions/:

your-project/
├── .github/
|   └── instructions/
|       └── mobiscroll-angular.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-angular.instructions.md (Angular conventions)
• mobiscroll-ui-theming.instructions.md (theming)

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

Step 2: Configure MCP server (Optional)

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.dev.mobiscroll.com/"
    }
  }
}

"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-angular.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

Step 3: Configure MCP server (Optional)

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.dev.mobiscroll.com/

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.dev.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.dev.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

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

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 always uses the current API, never hallucinated or outdated options.

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

Framework isolation

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

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 import MbscModule into my standalone component?
Set up a monthly calendar view with mbsc-eventcalendar.
Where do I add the Mobiscroll CSS in angular.json?

Troubleshooting

AI generates code with the wrong framework

Symptom: You are using Angular but the AI generates React code with import { Eventcalendar } from '@mobiscroll/react'.

Fix: Verify that you have the correct rules file in place. For Angular in Cursor, use mobiscroll-angular.mdc; for Copilot, use mobiscroll-angular.instructions.md. In Cursor, check that the registered @docs source points to llms-angular-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). 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 and Cursor, servers for VS Code. Validate that the file is well-formed JSON. For Claude Code, run /mcp to inspect connected servers.

File reference

All AI integration files are available at the following URLs:

Documentation files

File	URL
Angular	https://dev.mobiscroll.com/docs/llms-angular-full.txt

Rules files

File	Cursor (.mdc)	Copilot (.instructions.md)
Angular rules	mobiscroll-angular.mdc	copilot-instructions/mobiscroll-angular.instructions.md

Extended rule files

File	Cursor (.mdc)	Copilot (.instructions.md)
Orchestrator	mobiscroll-ui.mdc	copilot-instructions/mobiscroll-ui.instructions.md
Angular conventions	mobiscroll-ui-angular.mdc	copilot-instructions/mobiscroll-ui-angular.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.

Extended rule files

View mobiscroll-ui.mdc (orchestrator)

Loading...

View mobiscroll-ui-angular.mdc (Angular conventions)

Loading...

View mobiscroll-ui-theming.mdc (theming)

Loading...

Rules files (.mdc)

View mobiscroll-angular.mdc

Loading...