bridgableplugin

Introduction

What is Bridgable and how does it work?

Bridgable

Bridgable is an MCP (Model Context Protocol) plugin that gives AI coding agents access to the OpenBridge maritime UI component library. Instead of hallucinating component APIs, your agent gets real documentation — props, events, slots, CSS parts, and framework-specific code examples — straight from the source.

How it works

  1. Install the plugin in your coding agent (Claude Code, Codex, or Cursor).
  2. Authenticate with your Bridgable account.
  3. Ask your agent to build UI with OpenBridge components — it calls the Bridgable MCP tools behind the scenes and gets accurate component docs.

The plugin exposes six tools to your agent:

ToolPurpose
bridgable_querySearch component documentation (props, events, slots, CSS parts)
bridgable_setupGet framework install + first-render instructions
bridgable_app_patternGet a full app shell scaffold (topbar, nav, theming)
list_skillsList available domain-knowledge skills
load_skillLoad a skill (alerts, automation, theming, etc.)
bridgable_whoamiCheck your account, plan, and usage

Supported agents

  • Claude Code — via the plugin marketplace
  • Codex (OpenAI) — via the Codex marketplace
  • Cursor — via the plugin settings

Supported frameworks

OpenBridge components are web components. Framework-specific wrappers exist for:

  • Lit (native web components)
  • React
  • Vue
  • Svelte
  • Angular

Pricing

  • Free tier — 50 plugin queries per month
  • Pro — 2,000 queries per month

Get started by installing the plugin.

On this page