### Install and Initialize Fragments CLI

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/content/blog/make-your-design-system-ai-native.md

These bash commands show the process of installing the Fragments component library via npm and then initializing the Fragments CLI. The CLI setup is essential for leveraging Fragments' features, including component generation and development tools.

```bash
npm install @fragments-sdk/ui
npx @fragments-sdk/cli init
```

--------------------------------

### Install and Initialize Fragments SDK

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/public/llms-full.txt

Instructions for installing the UI package via npm and importing core components and styles into a React project.

```bash
npm install @fragments-sdk/ui
```

```tsx
import { Button, Card, Text } from '@fragments-sdk/ui';
import '@fragments-sdk/ui/styles';
```

--------------------------------

### Install @fragments-sdk/context

Source: https://github.com/conanmcn/fragments/blob/main/packages/context/README.md

Installation instructions for the SDK using the pnpm package manager. Requires Node.js 18 or higher.

```bash
pnpm add @fragments-sdk/context
```

--------------------------------

### Install SDK and Dependencies

Source: https://github.com/conanmcn/fragments/blob/main/libs/ui/README.md

Commands to install the @fragments-sdk/ui package and its required peer dependencies (React and React DOM).

```bash
npm install @fragments-sdk/ui
npm install react react-dom
```

--------------------------------

### Install @fragments-sdk/cli

Source: https://github.com/conanmcn/fragments/blob/main/packages/cli/README.md

Installs the @fragments-sdk/cli package using npm. This is the primary command to get started with the Fragments design system tools.

```bash
npm install @fragments-sdk/cli
```

--------------------------------

### Embeddable Component Preview Example

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This example shows how to embed live previews of Fragments components into external content like blog posts or README files using an iframe. Each embed serves as a backlink, increasing the visibility and discoverability of Fragments.

```html
<iframe src="usefragments.com/embed/Button/Primary"></iframe>
```

--------------------------------

### Install Fragments SDK Packages

Source: https://github.com/conanmcn/fragments/blob/main/libs/ui/README.md

Provides the npm command to install the necessary Fragments SDK packages, '@fragments-sdk/ui' for UI components and '@fragments-sdk/mcp' for AI agent integration.

```bash
npm install @fragments-sdk/ui @fragments-sdk/mcp
```

--------------------------------

### Shareable Theme Playground URL Example

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This example demonstrates how to construct a shareable URL for the Fragments playground, allowing users to customize themes with specific brand colors, radius, and density settings. This feature enables users to easily share and preview theme configurations.

```plaintext
usefragments.com/playground?brand=FF6B00&radius=12&density=compact
```

--------------------------------

### Tutorial: Migrating from Storybook to Fragments

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This comprehensive guide assists users in migrating their existing projects from Storybook to Fragments. It aims to reduce the perceived switching cost and capture search traffic from developers looking to transition their component library management.

```markdown
7. **"Migrating from Storybook to Fragments: A Complete Guide"**
   - Reduces switching cost, captures migration search traffic
```

--------------------------------

### Initialize and Run Fragments MCP Server

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/public/llms-full.txt

Commands to start the Model Context Protocol (MCP) server, enabling AI assistants to interact with the Fragments design system context.

```bash
npx @fragments-sdk/cli mcp
# Or use the standalone package
npx @fragments-sdk/mcp
```

--------------------------------

### Install and Setup Fragments UI

Source: https://context7.com/conanmcn/fragments/llms.txt

Installs the Fragments UI package and sets up the necessary providers for theming, tooltips, and toasts in your React application. Ensure you import the styles at your app's entry point.

```tsx
// Install: npm install @fragments-sdk/ui

// In your app entry point (e.g., App.tsx or layout.tsx)
import '@fragments-sdk/ui/styles';
import {
  ThemeProvider,
  TooltipProvider,
  ToastProvider,
} from '@fragments-sdk/ui';

function App({ children }) {
  return (
    <ThemeProvider defaultMode="system">
      <TooltipProvider>
        <ToastProvider position="bottom-right">
          {children}
        </ToastProvider>
      </TooltipProvider>
    </ThemeProvider>
  );
}
```

--------------------------------

### Tutorial: AI-Assisted Development with Fragments MCP

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This tutorial provides a step-by-step guide on using AI tools like Claude and Cursor in conjunction with Fragments' MCP for UI development. It focuses on streamlining the development workflow through AI assistance.

```markdown
6. **"How to Use Claude/Cursor to Build UI with Fragments MCP"**
   - Step-by-step AI-assisted development workflow
```

--------------------------------

### Fragment Metadata Format Example

Source: https://github.com/conanmcn/fragments/blob/main/benchmarks/STRATEGY.md

This snippet illustrates an extension to the existing Fragment metadata format. It shows how to incorporate few-shot usage examples, specifically for a 'Button' component, which is recommended to improve code generation accuracy based on research.

```json
{
  "Button": {
    "props": {
      "isLoading": {
        "type": "boolean",
        "description": "Indicates if the button is in a loading state."
      },
      "size": {
        "type": "enum",
        "values": ["sm", "md", "lg"],
        "description": "The size of the button."
      }
    },
    "examples": [
      {
        "description": "Basic button usage.",
        "code": "<Button>Click Me</Button>"
      },
      {
        "description": "Button with loading state.",
        "code": "<Button isLoading={true}>Loading...</Button>"
      },
      {
        "description": "Small button variant.",
        "code": "<Button size=\"sm\">Small</Button>"
      }
    ]
  }
}
```

--------------------------------

### Example Cursor Prompt for UI Generation

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/content/blog/using-fragments-mcp-in-cursor-for-design-system-aware-ui-generation.md

This is an example prompt for Cursor that utilizes the Fragments MCP tools to generate a settings form. It follows a staged workflow: discovering components, inspecting them for props and examples, and finally implementing the UI using only design system components.

```text
Use the Fragments MCP tools to build a settings form.
First discover candidate components, then inspect the chosen components for props/examples,
and finally implement the form using our design system components only.
```

--------------------------------

### Install Fragments UI package

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/public/llms.txt

The command to install the Fragments UI library into a React project using npm. This package includes the core components and design tokens required for development.

```bash
npm install @fragments-sdk/ui
```

--------------------------------

### Tutorial: Build Chat UI with Fragments AI

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This tutorial guides users through building a chat UI using Fragments' AI components, including Message, ThinkingIndicator, Prompt, and ConversationList. It demonstrates the speed and ease of UI development with Fragments' AI capabilities.

```markdown
5. **"Build a Chat UI in 10 Minutes with Fragments AI Components"**
   - Showcases Message, ThinkingIndicator, Prompt, ConversationList
```

--------------------------------

### CLI Commands for Fragments SDK

Source: https://github.com/conanmcn/fragments/blob/main/packages/cli/README.md

Demonstrates common CLI commands for the Fragments design system. These commands cover starting the dev server, building fragments.json, validating files, generating AI context, and accessing help.

```bash
# Start the dev server
fragments dev

# Build fragments.json
fragments build

# Validate fragment files
fragments validate

# Generate AI-ready context
fragments context

# See all commands
fragments --help
```

--------------------------------

### Programmatic MCP Server Usage (TypeScript)

Source: https://github.com/conanmcn/fragments/blob/main/packages/cli/README.md

Demonstrates how to programmatically start or create an MCP server instance using TypeScript. It shows both the default stdio transport and creating a server instance for custom transports.

```typescript
import { createMcpServer, startMcpServer } from '@fragments-sdk/cli/mcp';

// Start with stdio transport (default)
await startMcpServer({ projectRoot: process.cwd() });

// Or create the server instance for custom transports
const server = createMcpServer({ projectRoot: process.cwd() });
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/conanmcn/fragments/blob/main/benchmarks/shadcn-10-core/README.md

Commands to start the local development server for a Next.js application. Supports multiple package managers including npm, yarn, pnpm, and bun.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Implement Button Component Usage

Source: https://github.com/conanmcn/fragments/blob/main/benchmarks/STRATEGY.md

Examples demonstrating standard Button usage including primary actions, loading states, and destructive actions with confirmation. These patterns help ensure consistent UI implementation.

```jsx
<Button variant="positive" onClick={handleSubmit}>Submit</Button>
<Button isLoading disabled>Processing...</Button>
<Button variant="negative" onClick={handleDelete}>Delete Account</Button>
```

--------------------------------

### Growth Loop Example: Theme Sharing

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This pseudocode outlines a growth loop centered around theme creation and sharing. Theme designers create themes, share them within the community, leading to a growing gallery and attracting more designers.

```plaintext
Theme designer creates theme in Playground
    -> Shares on Twitter/Discord
    -> Others remix and share
    -> Theme gallery grows
    -> Attracts more designers
    -> Repeat
```

--------------------------------

### Implement UI Components

Source: https://github.com/conanmcn/fragments/blob/main/libs/ui/README.md

Example of importing and using core components like Button, Card, Input, and Grid within a React application.

```tsx
import { Button, Card, Input, Grid } from '@fragments-sdk/ui';

function App() {
  return (
    <Card>
      <Grid columns={2} gap="md">
        <Input label="Email" type="email" />
        <Input label="Name" />
      </Grid>
      <Button variant="primary">Submit</Button>
    </Card>
  );
}
```

--------------------------------

### Implement Responsive Design with SCSS Breakpoints

Source: https://github.com/conanmcn/fragments/blob/main/libs/ui/README.md

Shows how to use SCSS mixins to implement responsive design based on predefined breakpoints. This example utilizes the '@fragments-sdk/ui/mixins' module to apply different grid layouts at medium and large screen sizes.

```scss
@use '@fragments-sdk/ui/mixins' as *;

.responsive {
  @include breakpoint-md {
    grid-template-columns: repeat(2, 1fr);
  }
  @include breakpoint-lg {
    grid-template-columns: repeat(3, 1fr);
  }
}
```

--------------------------------

### Growth Loop Example: Developer Workflow

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This pseudocode illustrates a growth loop where developers discover Fragments through AI tools, use it to build products, and then passively promote it via a 'Built with Fragments' badge, leading to further adoption.

```plaintext
Developer finds Fragments via AI tool (Claude/Cursor)
    -> Uses MCP to build UI
    -> Ships product with "Built with Fragments" badge
    -> Another developer sees badge, tries Fragments
    -> Repeat
```

--------------------------------

### Initialize Fragments Project (Shell)

Source: https://github.com/conanmcn/fragments/blob/main/reviews/dx-review.md

Initializes a new Fragments project by auto-detecting existing Storybook stories, components, or fresh projects. This command-line utility is designed to be flexible for various project setups.

```shell
# Example command to initialize fragments
fragments init
```

--------------------------------

### Blog Post: Fragments vs Storybook Comparison

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This blog post title and angle targets developers comparing component library tools. It highlights Fragments' advantages over Storybook, such as built-in accessibility, MCP integration, and zero-config setup, positioning it as a modern alternative.

```markdown
1. **"Fragments vs Storybook: A Modern Alternative for 2026"**
   - Keywords: storybook alternative, storybook vs, component library tool
   - Angle: Built-in a11y, MCP integration, zero-config vs addon hell
```

--------------------------------

### Set up Fragments SDK with CLI

Source: https://github.com/conanmcn/fragments/blob/main/libs/ui/README.md

Demonstrates the use of the Fragments SDK CLI command to set up the MCP server for AI agent integration. This command simplifies the configuration process for AI-assisted development.

```bash
npx @fragments-sdk/cli setup --mcp
```

--------------------------------

### Install Playwright for Visual Tools

Source: https://github.com/conanmcn/fragments/blob/main/packages/cli/README.md

Installs Playwright, a dependency required for the visual tools (`render` and `fix`) within the Fragments SDK. These tools are optional and require Playwright for screenshotting and diffing.

```bash
npm install playwright
```

--------------------------------

### Tabs Component Examples - TypeScript/React

Source: https://context7.com/conanmcn/fragments/llms.txt

Shows how to implement tabbed navigation using the Tabs component. Examples include the default underline variant, the 'pills' variant, and vertical orientation. Demonstrates how to manage tab state and content panels, including disabled tabs.

```tsx
import { Tabs, Stack, Text } from '@fragments-sdk/ui';

// Underline tabs (default)
<Tabs defaultValue="profile" onValueChange={(v) => console.log('Tab:', v)}>
  <Tabs.List>
    <Tabs.Tab value="profile">Profile</Tabs.Tab>
    <Tabs.Tab value="notifications">Notifications</Tabs.Tab>
    <Tabs.Tab value="security">Security</Tabs.Tab>
    <Tabs.Tab value="billing" disabled>Billing</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="profile">
    <Stack gap="md">
      <Text>Manage your profile settings here.</Text>
    </Stack>
  </Tabs.Panel>
  <Tabs.Panel value="notifications">
    <Text>Configure notification preferences.</Text>
  </Tabs.Panel>
  <Tabs.Panel value="security">
    <Text>Update security settings.</Text>
  </Tabs.Panel>
</Tabs>

// Pills variant
<Tabs variant="pills" defaultValue="all">
  <Tabs.List variant="pills">
    <Tabs.Tab value="all">All</Tabs.Tab>
    <Tabs.Tab value="active">Active</Tabs.Tab>
    <Tabs.Tab value="archived">Archived</Tabs.Tab>
  </Tabs.List>
  {/* Panels... */}
</Tabs>

// Vertical orientation
<Tabs orientation="vertical" defaultValue="general">
  <Tabs.List>
    <Tabs.Tab value="general">General</Tabs.Tab>
    <Tabs.Tab value="advanced">Advanced</Tabs.Tab>
  </Tabs.List>
  {/* Panels... */}
</Tabs>
```

--------------------------------

### Input Component Examples (React)

Source: https://context7.com/conanmcn/fragments/llms.txt

Showcases the Input component's features, including labels, helper text, validation states, adornments, and different sizes. It requires importing Input and Stack from '@fragments-sdk/ui', and icons like MagnifyingGlass, Eye, EyeSlash from '@phosphor-icons/react'. The password input example uses useState for toggle functionality.

```tsx
import { Input, Stack } from '@fragments-sdk/ui';
import { MagnifyingGlass, Eye, EyeSlash } from '@phosphor-icons/react';
import { useState } from 'react';

// Basic with label and helper
<Input
  label="Username"
  placeholder="Enter your username"
  helperText="Must be 3-20 characters"
  required
/>

// With adornments
<Input
  label="Search"
  placeholder="Search..."
  startAdornment={<MagnifyingGlass />}
  shortcut="⌘K"
  shortcutBehavior="focus-input"
/>

// Password with toggle
function PasswordInput() {
  const [show, setShow] = useState(false);
  return (
    <Input
      type={show ? 'text' : 'password'}
      label="Password"
      placeholder="Enter password"
      endAdornment={
        <button onClick={() => setShow(!show)} aria-label="Toggle visibility">
          {show ? <EyeSlash /> : <Eye />}
        </button>
      }
    />
  );
}

// Validation states
<Input label="Email" error helperText="Invalid email format" />
<Input label="Username" success helperText="Username is available!" />

// Sizes: sm | md | lg
<Stack gap="sm">
  <Input size="sm" placeholder="Small input" />
  <Input size="md" placeholder="Medium input (default)" />
  <Input size="lg" placeholder="Large input" />
</Stack>

```

--------------------------------

### Blog Post: Seed-Based Theming Explanation

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This blog post explains the concept of seed-based theming, where a full design system can be generated from a single color. It aims to attract developers interested in efficient theming strategies and will feature an interactive demo and before/after visuals.

```markdown
3. **"Seed-Based Theming: Generate a Full Design System from One Color"**
   - Keywords: design system theming, one color palette, seed color
   - Angle: Interactive demo, before/after screenshots
```

--------------------------------

### Form and Field Component Example (React)

Source: https://context7.com/conanmcn/fragments/llms.txt

Illustrates form creation and validation using the Form and Field compound components. It includes examples for input, select, checkbox, and button elements, along with label, description, and error handling. Requires importing Form, Field, Input, Select, Checkbox, Button, and Stack from '@fragments-sdk/ui', and useState from 'react'.

```tsx
import { Form, Field, Input, Select, Checkbox, Button, Stack } from '@fragments-sdk/ui';
import { useState } from 'react';

function ContactForm() {
  const [errors, setErrors] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    // Validate and submit...
  };

  return (
    <Form errors={errors} onSubmit={handleSubmit} validationMode="onBlur">
      <Stack gap="md">
        <Field name="email" validate={(v) => (!v ? 'Email is required' : null)}>
          <Field.Label>Email Address</Field.Label>
          <Field.Control>
            <Input type="email" placeholder="you@example.com" />
          </Field.Control>
          <Field.Description>We'll never share your email.</Field.Description>
          <Field.Error match="valueMissing">Please enter your email.</Field.Error>
          <Field.Error match="typeMismatch">Invalid email format.</Field.Error>
        </Field>

        <Field name="plan">
          <Field.Label>Subscription Plan</Field.Label>
          <Field.Control>
            <Select
              options={[
                { value: 'free', label: 'Free' },
                { value: 'pro', label: 'Pro - $29/mo' },
                { value: 'enterprise', label: 'Enterprise' },
              ]}
              placeholder="Select a plan"
            />
          </Field.Control>
        </Field>

        <Field name="terms">
          <Field.Control>
            <Checkbox label="I agree to the Terms of Service" />
          </Field.Control>
          <Field.Error>You must accept the terms.</Field.Error>
        </Field>

        <Button type="submit" variant="primary">
          Submit
        </Button>
      </Stack>
    </Form>
  );
}

```

--------------------------------

### Blog Post: MCP Server Deep Dive

Source: https://github.com/conanmcn/fragments/blob/main/reviews/growth-strategy.md

This blog post delves into the technical aspects of building an MCP (Multi-Component Protocol) server for a component library. It targets developers interested in the architecture and benefits of such a system, referencing Figma's blog for validation.

```markdown
2. **"Why We Built an MCP Server for Our Component Library"**
   - Keywords: MCP server design system, AI component library
   - Angle: Technical deep-dive, Figma blog validates the approach
```

--------------------------------

### Define Composition Blocks

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/public/llms-full.txt

Example of using the defineBlock function to create reusable UI composition patterns. It includes metadata, component dependencies, and the associated JSX code structure.

```typescript
import { defineBlock } from '@fragments-sdk/cli';

export default defineBlock({
  name: 'Login Form',
  description: 'Email/password authentication form',
  category: 'authentication',
  components: ['Card', 'Input', 'Button', 'Field', 'Form'],
  code: `
    <Card>
      <Card.Header>
        <Card.Title>Sign In</Card.Title>
      </Card.Header>
      <Card.Body>
        <Form onSubmit={handleSubmit}>
          <Field>
            <Field.Label>Email</Field.Label>
            <Field.Control>
              <Input type="email" placeholder="you@example.com" />
            </Field.Control>
          </Field>
          <Field>
            <Field.Label>Password</Field.Label>
            <Field.Control>
              <Input type="password" />
            </Field.Control>
          </Field>
          <Button variant="primary" type="submit">Sign In</Button>
        </Form>
      </Card.Body>
    </Card>
  `,
});
```

--------------------------------

### Define Component Fragment Schema

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/content/blog/the-science-behind-ai-component-generation.md

Example of a machine-readable component definition using a .fragment.tsx structure. This provides the LLM with explicit prop schemas, valid enum values, and composition patterns to prevent hallucination.

```typescript
interface CardProps {
  padding: "none" | "sm" | "md" | "lg";
  variant: "default" | "outlined";
}

// .fragment.tsx representation
export const CardFragment = {
  props: {
    padding: { type: "enum", values: ["none", "sm", "md", "lg"] },
    variant: { type: "enum", values: ["default", "outlined"] }
  },
  composition: "<Card><Card.Header /><Card.Body /></Card>"
};
```

--------------------------------

### POST /fragments_implement

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/content/blog/fragments-mcp-tools-deep-dive.md

Generates a complete UI implementation based on a natural language use case description, returning components, blocks, and CSS tokens.

```APIDOC
## POST /fragments_implement

### Description
The one-shot helper that generates a complete UI implementation. It runs parallel searches across components, blocks, and tokens to return a fused result set.

### Method
POST

### Endpoint
/fragments_implement

### Parameters
#### Request Body
- **useCase** (string) - Required - A natural language description of the UI component or form to build.

### Request Example
{
  "useCase": "login form with email and password"
}

### Response
#### Success Response (200)
- **components** (array) - List of matching components with imports and props.
- **blocks** (array) - Ready-to-use composition blocks.
- **tokens** (array) - Relevant CSS tokens grouped by category.

#### Response Example
{
  "components": [...],
  "blocks": ["<Card>...</Card>"],
  "tokens": [...]
}
```

--------------------------------

### Initialize Fragments UI Providers

Source: https://github.com/conanmcn/fragments/blob/main/README.md

Sets up the required theme, tooltip, and toast providers at the root of your React application.

```tsx
import '@fragments-sdk/ui/styles';
import {
  ThemeProvider,
  TooltipProvider,
  ToastProvider,
} from '@fragments-sdk/ui';

function App({ children }) {
  return (
    <ThemeProvider defaultMode="system">
      <TooltipProvider>
        <ToastProvider>
          {children}
        </ToastProvider>
      </TooltipProvider>
    </ThemeProvider>
  );
}
```

--------------------------------

### Configure Component Styles

Source: https://github.com/conanmcn/fragments/blob/main/libs/ui/README.md

Methods for importing component styles, including a quick-start approach with prebuilt CSS and a custom theming approach using SCSS.

```tsx
// Quick start
import '@fragments-sdk/ui/styles';

// Custom theming
import '@fragments-sdk/ui/styles';
import './styles/globals.scss';
```

--------------------------------

### Fragments CLI Commands

Source: https://github.com/conanmcn/fragments/blob/main/README.md

Commands for initializing, building, and verifying component metadata for AI and development tooling.

```bash
npm install -D @fragments-sdk/cli
fragments init        # Create fragments.config.ts and scaffold files
fragments build       # Compile .fragment.tsx files into fragments.json
fragments dev         # Start local viewer to browse components
fragments verify --ci # Run compliance checks in CI
```

--------------------------------

### Configure Application Theming

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/public/llms-full.txt

Shows how to wrap an application with the ThemeProvider to enable global theme management, such as system-based dark/light mode.

```tsx
import { ThemeProvider } from '@fragments-sdk/ui';

function App() {
  return (
    <ThemeProvider defaultMode="system">
      <YourApp />
    </ThemeProvider>
  );
}
```

--------------------------------

### Retrieve Pre-built UI Blocks with fragments_blocks

Source: https://github.com/conanmcn/fragments/blob/main/apps/docs/content/blog/fragments-mcp-tools-deep-dive.md

Fetches ready-to-use composition patterns categorized by functionality. This allows AI to implement complex UI structures using verified project patterns instead of generating them from scratch.

```text
fragments_blocks(category: "authentication")
```