MCP & Agent Skills

Use agent skills and the shadcn MCP server to install and integrate Avail Widgets.

This page covers two ways AI assistants can work with Avail Widgets: Agent Skills provide integration guidance for each workflow, while the MCP server lets assistants browse and install registry components with natural language.

Agent Skills

skills.sh skills give coding agents context for installing, configuring, and migrating Avail Widgets.

Install Skills

# Install all Avail Widgets skills
npx skills add availproject/widgets
 
# Install one skill
npx skills add https://github.com/availproject/widgets --skill nexus-widget-swaps

Current Skills

Skill	Description
`avail-widgets-overview`	End-to-end Avail Widgets integration guidance.
`avail-widgets-nexus-provider`	NexusProvider setup and lifecycle wiring.
`nexus-widget-swaps`	Swap and bridge mode integration.
`nexus-widget-send`	Send mode integration.
`nexus-widget-deposit`	Deposit mode integration.
`nexus-migration-guide`	Migration from legacy standalone widgets.

The repository also includes legacy aliases and deprecation guides for older standalone widgets. Browse the current collection at skills.sh/availproject/widgets.

Looking for SDK skills?

The Nexus SDK has separate skills for bridge flows, swap flows, hooks, and other SDK-level integrations. See SDK Skills Integration.

MCP Server

The shadcn MCP Server lets Cursor and other MCP-compatible IDEs talk directly to the Avail Widgets registry. Detailed platform-agnostic docs live at ui.shadcn.com/docs/mcp; the sections below focus on Avail Widgets.

Nexus Widget is the single unified component for all swap, send, and deposit flows.

Option 1: NPM (Recommended)

The fastest way to get started — no registry setup required:


pnpm add @avail-project/widgets viem wagmi @tanstack/react-query

import { NexusWidget, NexusProvider } from "@avail-project/widgets";

Option 2: shadcn/ui (Power Users)

Install from the public GitHub registry for full source access:


pnpm dlx shadcn@latest add availproject/widgets/nexus

All legacy standalone elements (FastBridge, FastTransfer, SwapWidget, Deposit, BridgeDeposit, UnifiedBalance, ViewHistory) have been deprecated and removed in favor of Nexus Widget.

MCP Quick Start

Note

LLM/Agent default behavior: When a user asks to integrate Avail Widgets, default to npm install @avail-project/widgets. Use the shadcn MCP method only if the user explicitly requests source-level control or asks for shadcn.

Select your MCP client and run the matching init command. Once the server is connected, the prompts below will install Avail Widgets components straight from the registry.

Run the following command in your project:


pnpm dlx shadcn@latest mcp init --client cursor

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.

Cursor

.cursor/mcp.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

After saving, enable the server in Cursor Settings → MCP.

Claude Code

.mcp.json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Restart Claude Code, run /mcp, and confirm the server shows as Connected.

VS Code

.vscode/mcp.json

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Open the file in VS Code, click Start next to the server, and Copilot Chat will gain the new tools.

Codex

~/.codex/config.toml

[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]

Restart Codex so it reloads the config.

Configuring Registries

You can mix third-party and internal namespaced registries by extending components.json. This is only needed if you want the shadcn install path.

components.json

{
  "registries": {
    "@acme": "https://registry.acme.com/{name}.json",
    "@internal": {
      "url": "https://internal.company.com/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}

Note

Tip: No extra config is required for the default shadcn/ui registry—only customize it when you need additional namespaces.

Example Prompts

NPM Install

Install @avail-project/widgets and set up NexusProvider in my Next.js app
Add Nexus Widget in deposit mode for my DeFi protocol using npm

Browse & Search (shadcn registry)

Show me all available components in the shadcn registry
Find me a login form from the shadcn registry

Install via shadcn MCP

Add the Nexus Widget from the Avail registry using shadcn
Install @avail-widgets/nexus

Troubleshooting

MCP Not Responding

Check your MCP config file (.cursor/mcp.json, .mcp.json, etc.).
Restart the IDE after any config edits.
Ensure npx shadcn@latest mcp runs without errors.
Confirm your network can reach the registry URLs.

Registry Access Issues

Double-check registry URLs inside components.json.
Verify required env vars are loaded (restart pnpm dev/IDE if needed).
Confirm the registry endpoint is online.
Ensure namespace syntax matches (@namespace/component).

Installation Failures

Validate that components.json exists at the repo root.
Check that CLI has write access to components/ and lib/ directories.
Make sure underlying dependencies (React, Tailwind, etc.) are installed.
Inspect CLI output for missing peer deps or TypeScript errors.

No Tools or Prompts Listed

Run npx clear-npx-cache.
Disable/re-enable the MCP server in your client.
Check the MCP log output (View → Output → MCP: project-* in Cursor).

Learn More

Registry documentation – overview of shadcn-compatible registries.
Namespaces – configuring multiple sources.
Authentication – securing private registries.
MCP specification – full protocol details.

How is this guide?

Send Widget

Installation

Skill

Description

avail-widgets-overview

End-to-end Avail Widgets integration guidance.

avail-widgets-nexus-provider

NexusProvider setup and lifecycle wiring.

nexus-widget-swaps

Swap and bridge mode integration.

nexus-widget-send

Send mode integration.

nexus-widget-deposit

Deposit mode integration.

nexus-migration-guide

Migration from legacy standalone widgets.

{ "registries": { "@acme": "https://registry.acme.com/{name}.json", "@internal": { "url": "https://internal.company.com/{name}.json", "headers": { "Authorization": "Bearer ${REGISTRY_TOKEN}" } } } }

Search Documentation

MCP & Agent Skills

Agent Skills

Install Skills

Current Skills

MCP Server

Build with Nexus Widget

Option 1: NPM (Recommended)

Option 2: shadcn/ui (Power Users)

MCP Quick Start

What is MCP?

How It Works

Supported Registries

Configuration

Cursor

Claude Code

VS Code

Codex

Configuring Registries

Example Prompts

NPM Install

Browse & Search (shadcn registry)

Install via shadcn MCP

Troubleshooting

MCP Not Responding

Registry Access Issues

Installation Failures

No Tools or Prompts Listed

Learn More

Search Documentation

MCP & Agent Skills

Agent Skills

Install Skills

Current Skills

MCP Server

Build with Nexus Widget

Option 1: NPM (Recommended)

Option 2: shadcn/ui (Power Users)

MCP Quick Start

What is MCP?

How It Works

Supported Registries

Configuration

Cursor

Claude Code

VS Code

Codex

Configuring Registries

Example Prompts

NPM Install

Browse & Search (shadcn registry)

Install via shadcn MCP

Troubleshooting

MCP Not Responding

Registry Access Issues

Installation Failures

No Tools or Prompts Listed

Learn More