AI & MCP

Ghostly provides first-class AI integration through an MCP server and machine-readable documentation for AI agents, coding assistants, and LLMs.

MCP Server

The @ghostly-ui/mcp package gives AI assistants direct access to Ghostly's API, components, installation instructions, and examples — no hallucination, always up-to-date.

Setup

Add to your project's .mcp.json:

{
  "mcpServers": {
    "ghostly": {
      "command": "npx",
      "args": ["@ghostly-ui/mcp"]
    }
  }
}

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "ghostly": {
      "command": "npx",
      "args": ["@ghostly-ui/mcp"]
    }
  }
}

Add to .vscode/mcp.json:

{
  "servers": {
    "ghostly": {
      "command": "npx",
      "args": ["@ghostly-ui/mcp"]
    }
  }
}

Available Tools

Tool	Description
`list_components`	List all Ghostly components and hooks
`get_component`	Get full docs for a specific component (props, examples, import)
`get_installation`	Installation and setup instructions
`get_css_reference`	CSS custom properties, animations, data attributes
`get_examples`	Real-world usage examples
`search_docs`	Search documentation by keyword

Example Prompts

Once the MCP server is configured, you can ask your AI assistant:

"Add a skeleton loader to this product grid using Ghostly"
"How do I use GhostlySuspense with React Server Components?"
"What CSS variables does Ghostly support for dark mode?"
"Show me how to customize skeleton colors per section"

The AI will call the MCP tools to get accurate documentation instead of guessing.

The MCP server runs locally via STDIO transport — no data is sent to external servers. All documentation is bundled in the package.

llms.txt

Ghostly also provides machine-readable documentation in the llms.txt standard format.

Available at /llms.txt and /llms-full.txt for automated agent consumption.

Available Formats

File	Purpose	Token Usage
`/llms.txt`	Lightweight index with links and descriptions	Low
`/llms-full.txt`	Complete documentation in a single file	High
`/agent/llms.txt`	Same as `/llms.txt` (alias)	Low

Using with AI Assistants

Cursor

Add to your .cursorrules or project settings:

@docs https://ghostly.adanulissess.com/llms-full.txt

Claude Code

Reference the documentation in your prompt:

Use the Ghostly library for skeleton loaders.
Docs: https://ghostly.adanulissess.com/llms-full.txt

GitHub Copilot

Copilot automatically discovers /llms.txt from packages listed in your package.json.

llms-full.txt Content

The /llms-full.txt includes the complete documentation:

Installation and setup
Full API reference (all components, hooks, props, types)
CSS reference (custom properties, selectors, animations, specificity)
HTML attributes reference (data-ghostly-lines, data-ghostly-ratio, etc.)
Usage patterns (Suspense, TanStack Query, SWR, Apollo, tRPC)
Architecture explanation
Bundle size and performance data
Browser compatibility matrix

All in a single markdown file optimized for AI context windows.

On this page