IBL Frontend MCP Server

An MCP (Model Context Protocol) server that provides comprehensive documentation and guidance for working with the IBL frontend packages.

Overview

This MCP server helps AI assistants understand and work with:

• @iblai/web-containers: Shared React components built on Radix UI
• @iblai/web-utils: Authentication utilities, context providers, and hooks
• @iblai/data-layer: Redux store and RTK Query APIs

Installation

cd packages/mcp-server
pnpm install
pnpm build

Quick Start

# 1. Build the MCP server
cd packages/mcp-server
pnpm build

# 2. Restart Claude Code (exit and re-enter your session)
# The server is already configured in .claude/settings.json

That's it! Claude will now have access to IBL-specific tools and documentation.

Configuration

The MCP server is pre-configured in .claude/settings.json:

{
  "mcpServers": {
    "ibl-web-frontend": {
      "type": "stdio",
      "command": "node",
      "args": ["packages/mcp-server/dist/index.js"]
    }
  }
}

No additional setup required - just build and restart Claude Code.

Project Structure

packages/mcp-server/
├── src/
│   ├── index.ts              # Main server entry point
│   ├── resources/            # Documentation resources
│   │   ├── index.ts          # Resource exports
│   │   ├── packages-overview.ts
│   │   ├── web-containers.ts
│   │   ├── web-utils.ts
│   │   ├── data-layer.ts
│   │   ├── guides-layout.ts
│   │   ├── guides-rbac.ts
│   │   └── guides-theme.ts
│   └── tools/                # MCP tools
│       ├── index.ts          # Tool exports
│       ├── component-info.ts
│       ├── hook-info.ts
│       ├── provider-setup.ts
│       ├── api-query-info.ts
│       └── page-template.ts
└── dist/                     # Compiled output

Available Resources

The server provides the following documentation resources:

| Resource URI | Description | |--------------|-------------| | ibl://packages/overview | Overview of all IBL frontend packages | | ibl://packages/web-containers | UI components documentation | | ibl://packages/web-utils | Providers and hooks documentation | | ibl://packages/data-layer | Redux and RTK Query documentation | | ibl://guides/layout | Layout rules and patterns | | ibl://guides/rbac | RBAC (Role-Based Access Control) patterns | | ibl://guides/theme | Theme configuration |

Available Tools

get_component_info

Get detailed information about a UI component.

Component name: Button, Card, Dialog, Profile, NotificationDropdown, Input, Select, Tabs, etc.

get_hook_info

Get detailed information about a React hook.

Hook name: useAdvancedChat, useMentorSettings, useGetMentorsQuery, useTenantMetadata, etc.

get_provider_setup

Get the correct provider setup for an app type.

App type: mentor, skills, auth, custom
Features: chat, analytics, notifications, rbac

get_api_query_info

Get information about an RTK Query API endpoint.

Query name: useGetMentorsQuery, useGetUserMetadataQuery, usePlatformUserGroupsQuery, etc.

create_page_template

Generate a template for a new page following IBL patterns.

Page name: Dashboard, Settings, etc.
Features: auth-required, rbac, analytics, sidebar, data-fetching
App type: mentor, skills

Development

# Watch mode
pnpm dev

# Build
pnpm build

# Run server directly
pnpm start

Key Concepts

Provider Hierarchy

Apps must use providers in this order:

Skills App:

StoreProvider → AuthProvider → TenantProvider → ClientLayout

Mentor App:

StoreProvider → AuthProvider → TenantProvider → MentorProvider → AppProvider

Package Imports

// Data Layer
import { useGetMentorsQuery, mentorReducer } from '@iblai/data-layer';

// Web Containers
import { Button, Card, Dialog } from '@iblai/web-containers';

// Web Utils
import { AuthProvider, useAdvancedChat } from '@iblai/web-utils';

RBAC Pattern

import { WithPermissions } from '@/hoc/withPermissions';

<WithPermissions rbacResource={`/platforms/${tenant}/#can_view_analytics`}>
  {({ hasPermission }) => hasPermission && <AnalyticsButton />}
</WithPermissions>

Adding New Resources

1. Create a new file in src/resources/ (e.g., my-resource.ts)
2. Export the resource object with uri, name, description, mimeType, and content
3. Import and add it to src/resources/index.ts

Adding New Tools

1. Create a new file in src/tools/ (e.g., my-tool.ts)
2. Export the tool definition and handler function
3. Import and add it to src/tools/index.ts
4. Add the case handler in src/index.ts