1 GitHub star = 1 new component.

Star the repo
Official MCP Server · Astro 5.x

Supercharge your AI with Astro Components Kit

Connect Cursor, Claude, Codex, Lovable, or any MCP client directly to 340+ production components, SVG charts, and multi-page templates. Let your AI build Astro sites at warp speed.

340+
Components
41
SVG Charts
3
Full Templates
0
Runtime Deps
Remote SSE Endpoint
https://mcp.astrocomponents.dev/sse

1-Click Editor & Agent Setup

Choose your AI editor to get the automated CLI installation command or direct JSON config.

1

Automated CLI Setup

Runs automatically and configures your project file.

npx astro-component-kit mcp install cursor
2

Direct Configuration File

Or paste this directly into .cursor/mcp.json

{
  "mcpServers": {
    "astro-components": {
      "url": "https://mcp.astrocomponents.dev/sse"
    }
  }
}
1

Automated CLI Setup

Runs automatically and configures your project file.

npx astro-component-kit mcp install claude

Or for Claude Code CLI:

claude mcp add astro-components https://mcp.astrocomponents.dev/sse
2

Direct Configuration File

Or paste this directly into claude_desktop_config.json

{
  "mcpServers": {
    "astro-components": {
      "url": "https://mcp.astrocomponents.dev/sse"
    }
  }
}
1

Automated CLI Setup

Runs automatically and configures your project file.

npx astro-component-kit mcp install codex
2

Direct Configuration File

Or paste this directly into .codex/mcp.json

{
  "mcpServers": {
    "astro-components": {
      "url": "https://mcp.astrocomponents.dev/sse"
    }
  }
}
1

Automated CLI Setup

Runs automatically and configures your project file.

npx astro-component-kit mcp install lovable

Or for Lovable Settings URL:

https://mcp.astrocomponents.dev/sse
2

Direct Configuration File

Or paste this directly into .lovable/mcp.json

{
  "mcpServers": {
    "astro-components": {
      "url": "https://mcp.astrocomponents.dev/sse"
    }
  }
}
1

Automated CLI Setup

Runs automatically and configures your project file.

npx astro-component-kit mcp install mcp
2

Direct Configuration File

Or paste this directly into mcp.json

{
  "mcpServers": {
    "astro-components": {
      "url": "https://mcp.astrocomponents.dev/sse"
    }
  }
}

Prompt your AI with these examples

Once connected, your AI has direct access to the entire component catalog, props, and source code.

E-commerce

“Add a ProductBuyBox with variant selector and persistent CartDrawer from astro-components”

Charts & KPIs

“Insert a revenue KpiStatTile with delta percentage and a zero-dependency SVG LineChart”

SaaS App

“Create a room schedule view using RoomRack and AppSidebar from the saas-hotel template”

Design & Themes

“Setup dark/light theme switching with adaptive ink-rgb tokens from global.css”

8 Built-in MCP Tools

Everything your AI assistant needs to find, inspect, and write production-grade Astro code.

search_components

Search components by keyword, category, or tag across 340+ building blocks

get_component

Inspect TypeScript props, usage examples, and accessibility requirements

get_component_code

Retrieve complete raw .astro source code ready for your project

list_categories

List all 13 categories with descriptions and item counts

list_templates

Overview of all 3 complete multi-page production templates

get_template

Full template architecture, pages, store configs, and routing files

get_design_tokens

CSS design tokens, light/dark mode variables, and global.css guide

get_library_info

Library version, totals overview, and quickstart commands

Copied to clipboard!