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

• Showcase: https://patrickbotkins.com/lustre
• npm: https://www.npmjs.com/package/lustre-mcp
• Email: [email protected]