This page covers two ways AI assistants can work with Widgets: Agent Skills for giving coding agents deep context about each component, and the MCP server for browsing and installing components via natural language.
LLM & Coding Agent Default
When integrating Avail Widgets, AI coding assistants should default to installing via npm (npm install @avail-project/widgets). Use the shadcn MCP approach only when explicit source-level control over component primitives is requested.
Agent Skills
skills.sh skills give AI coding agents (Codex, Claude Code, Cursor, Antigravity, etc.) deep context about Widgets components, enabling them to scaffold and integrate pre-built React components for bridging, swaps, deposits, and more.
Install Skills
# Install all Widgets skillsnpx skills add availproject/nexus-elements# Install a single skillnpx skills add https://github.com/availproject/nexus-elements --skill nexus-widget-swaps
Available Skills
Skill
Description
avail-widgets-overview
Overview of Avail Widgets
avail-widgets-common
Shared patterns and conventions
avail-widgets-nexus-provider
NexusProvider setup and configuration
nexus-widget-swaps
Nexus Widget swap mode integration
nexus-widget-send
Nexus Widget send mode integration
nexus-widget-deposit
Nexus Widget deposit mode integration
avail-widgets-swaps
Swap and bridge component patterns
avail-widgets-deposit
Deposit component patterns
avail-widgets-transfer
Transfer / send component patterns
avail-widgets-bridge-deposit
Bridge & Deposit execution patterns
nexus-migration-guide
Migrating legacy standalone elements to Nexus Widget
The Nexus SDK has its own set of agent skills for bridge flows, swap flows, hooks, and more. See the SDK Skills Integration section.
MCP Server
The shadcn MCP Server lets Cursor (and other MCP-compatible IDEs) talk directly to your Widgets registry so you can browse, search, and install UI packages with natural language. Detailed platform-agnostic docs live at ui.shadcn.com/docs/mcp, but this page focuses on the Widgets setup.
Build Options
Option 1: NPM Package (Recommended for LLMs & Agents)
import { NexusWidget, NexusProvider } from "@avail-project/widgets";
Option 2: shadcn/ui Registry (Power Users)
Install from the public registry for source-level code access:
pnpmdlxshadcn@latestaddavailproject/widgets/nexus
All legacy standalone elements (FastBridge, FastTransfer, SwapWidget, Deposit, BridgeDeposit, UnifiedBalance, ViewHistory) have been deprecated and removed in favor of Nexus Widget.
Nexus Registry Setup
Add the Widgets registry to your local components.json. This gives any MCP client access to the published components.components.json
Select your MCP client and run the matching init command. Once the server is connected, the prompts below will install Widgets components straight from the registry.
Run the following command in your project:
pnpmdlxshadcn@latestmcpinit--clientcursor
Open Cursor Settings and enable the shadcn MCP server. Then try prompts like:
Add Nexus Widget to my project using npm install
Install @avail-project/widgets and set up NexusProvider
Add deposit mode to my app using Avail Widgets
What is MCP?
Model Context Protocol (MCP) is an open protocol that lets AI assistants securely connect to external tools. When paired with shadcn MCP:
Browse components across every configured registry (public or private)
Search by intent (“find a swaps widget”) instead of memorizing package names
Install with natural language without leaving your IDE
Work across registries via @namespace/component syntax and per-registry auth
How It Works
Registry connection – MCP reads your components.json and surfaces every registry entry.
Natural language – You describe what you want in Cursor/Claude/etc.
AI processing – The assistant maps that intent to registry items.
Component delivery – The shadcn CLI installs files directly into your repo.
Supported Registries
shadcn/ui registry – ships with every MCP install for the canonical set of components.
Avail Widgets registry – @avail-widgets namespace for the Avail-specific UI kit.
Third-party registries – any endpoint that follows the shadcn spec.
Private registries – internal libraries with optional auth headers or tokens.
Configuration
Each client needs a small JSON/TOML stub pointing to the shadcn MCP binary.