Lustre MCP

Premium Flutter UI components for AI coding agents — 46 widgets, 3 themes, design tokens that make Claude Code and Cursor produce beautiful Flutter apps instead of generic Material defaults.

npmjs.com üzerinde görüntüle

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

İlgili Sunucular