lustre-mcp

3 min read Original article ↗

1.1.0 • Public • Published

Lustre MCP Server

MCP server that exposes the Lustre component library to AI coding agents (Claude Code, Cursor, etc.).

What is Lustre?

Lustre is a premium Flutter component library with three beautiful themes:

  • Clean: Subtle borders, soft shadows, modern
  • Bold: Crisp borders, high contrast, confident
  • Glass: Frosted glass surfaces, gradient backgrounds, premium

All 46+ components support light/dark mode and theme switching.

Installation

npm install -g lustre-mcp

Usage

With Claude Code

In claude_code_config.json:

{
  "mcpServers": {
    "lustre": {
      "command": "npx",
      "args": ["lustre-mcp"]
    }
  }
}

With Cursor

Similar setup in .cursor/rules.json or via the Cursor settings panel.

Available Tools

1. lustre_list_components

List all available components with descriptions.

Optional: category filter (navigation, cards, lists, forms, feedback, data_display, surfaces, layout)

2. lustre_search_components

Search for components by description.

Input: query (string) Output: Matching components with names and descriptions

3. lustre_get_component

Get complete Dart source code for a component.

Input:

  • component (string, required) - Component name (e.g., "profile_card")
  • theme (string) - Theme variant: "clean", "bold", or "glass" (default: clean)
  • brightness (string) - Color scheme: "light" or "dark" (default: light)

4. lustre_get_design_tokens

Get design tokens for a theme (colors, typography, spacing).

Input:

  • theme (string) - Theme variant: "clean", "bold", or "glass"
  • brightness (string) - Color scheme: "light" or "dark"

5. lustre_get_layout_pattern

Get a complete page layout with example components.

Input:

  • pattern (string) - Layout type: "settings_page", "profile_page", "dashboard", or "onboarding"
  • theme (string) - Theme variant (default: clean)

6. lustre_setup_theme

Get setup instructions for using Lustre in a Flutter project.

Input:

  • theme (string) - Default theme: "clean", "bold", or "glass"

Pricing

Free Tier:

  • List and search all components
  • Get 15 core components
  • Get design tokens and layout patterns
  • Get setup instructions

Pro Tier ($12/month):

  • All 46+ components
  • All tools, all themes, all features
  • Early access to new components
  • Priority support

Development

# Install dependencies
npm install

# Build TypeScript
npm run build

# Run in development mode
npm run dev

# Start production server
npm start

Component Categories

  • Navigation (5): AppBar, BottomNav, Tabs, Breadcrumb, SegmentedControl
  • Cards (7): Card, InfoCard, ProfileCard, ProductCard, PricingCard, StatCard, TestimonialCard
  • Lists (5): SettingsList, ChatList, ContactList, NotificationList, ActionList
  • Forms (7): TextField, Toggle, Slider, Dropdown, SearchBar, CheckboxGroup, DatePicker
  • Inputs (1): Button (primary, secondary, outline)
  • Feedback (6): Dialog, Snackbar, BottomSheet, LoadingState, Toast, EmptyState
  • Data Display (5): Badge, ProgressBar, ProgressRing, StatCounter, Avatar
  • Surfaces (4): Section, Divider, GlassPane, GradientHeader
  • Layout (6): SettingsPage, ProfilePage, DashboardGrid, OnboardingFlow, ListDetailLayout, AuthPage

License

MIT

Support