Skip to main content

Editor Integration (MCP)

@alaarab/ogrid-mcp connects your AI coding assistant to OGrid documentation — so instead of switching tabs to look things up, you can just ask your editor while you code.

It also includes a live testing bridge that lets your editor read and control an OGrid instance running in your browser in real time.

How it works​

MCP (Model Context Protocol) is a standard that lets editors like Claude Code and Cursor talk to external tools. When you connect the OGrid MCP server, your editor can:

  • Search through OGrid docs while you're writing code
  • Pull up specific API references without leaving your editor
  • Inspect and interact with a running grid during development

You don't need to understand the protocol to use it — just run one command and your editor gains access.

Connect to your editor​

Claude Code​

claude mcp add ogrid -- npx -y @alaarab/ogrid-mcp

That's it. The docs are bundled in the package — no config file needed.

Claude Desktop​

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "ogrid": {
      "command": "npx",
      "args": ["-y", "@alaarab/ogrid-mcp"]
    }
  }
}

Cursor​

Add to your Cursor MCP settings:

{
  "ogrid": {
    "command": "npx",
    "args": ["-y", "@alaarab/ogrid-mcp"]
  }
}

What you can ask​

Once connected, you can ask your editor questions like:

How do I set up server-side pagination in React?
How do I pin columns in Angular Material?
What's the difference between multiSelect and text filters?
Show me how to use the formula engine in Vue.
Help me migrate from AG Grid to OGrid.

The MCP server searches through the full documentation — features, API references, getting started guides, and code examples — and returns the relevant sections along with your context.

Available tools​

These are what the MCP server provides to your editor. You don't call them directly — your editor uses them automatically when you ask questions.

search_docs​

Full-text search across all OGrid documentation. Optionally filter by framework or category.

search_docs query="server-side data" framework="react"

Parameters:

  • query (required) — what you're looking for
  • framework (optional) — react, angular, vue, or js
  • category (optional) — features, getting-started, guides, or api

list_docs​

Browse available documentation pages by category.

list_docs category="features"

get_docs​

Read a full documentation page by its path.

get_docs path="features/filtering"

get_code_example​

Pull code snippets from a doc page, optionally filtered by framework.

get_code_example path="features/editing" framework="angular"

detect_version​

Checks which OGrid packages are installed in your project.

detect_version path="/path/to/project"

MCP resources​

Resources can be read by your editor without calling a tool explicitly.

ResourceDescription
ogrid://quick-referenceKey API overview — props, column definitions, IOGridApi, filter types
ogrid://docs/{path}Any documentation page by path (e.g. ogrid://docs/features/filtering)
ogrid://migration-guideStep-by-step guide for migrating from AG Grid to OGrid

Live testing bridge​

The live bridge lets your editor see and control an OGrid instance running in your browser.

Start the MCP server with the bridge enabled:

npx @alaarab/ogrid-mcp --bridge

# Custom port if needed
OGRID_BRIDGE_PORT=7890 npx @alaarab/ogrid-mcp

Once running, your editor can:

  • Read the current grid state (visible rows, active filters, sort, pagination)
  • Update individual cell values
  • Apply or clear filters
  • Change sort order
  • Navigate to a specific page

See the Live Testing Bridge guide for the full setup and available commands.

Version​

The MCP server is published and versioned independently from the grid packages:

npx @alaarab/ogrid-mcp --version