park-ui-mcp-server/build/prompts.js

A Model Context Protocol (MCP) server for Park UI component library, providing AI assistants with access to Park UI components, APIs, examples, and documentation.

/**
 * Prompt definitions for the Park UI MCP server.
 *
 * Prompts provide structured templates that can be used by AI assistants
 * to generate helpful responses about Park UI usage, setup, and best practices.
 */
/**
 * Available prompts that can be requested by clients
 */
export const prompts = {
    component_usage: {
        name: "component_usage",
        description: "Get usage examples and best practices for a specific Park UI component",
        arguments: [
            {
                name: "componentName",
                description: "Name of the Park UI component to get usage for",
                required: true
            },
            {
                name: "framework",
                description: "Framework (react, vue, solid) - defaults to react",
                required: false
            }
        ]
    },
    installation_guide: {
        name: "installation_guide",
        description: "Get a step-by-step installation guide for Park UI",
        arguments: [
            {
                name: "framework",
                description: "Target framework (react, vue, solid) - defaults to react",
                required: false
            }
        ]
    },
    theming_tutorial: {
        name: "theming_tutorial",
        description: "Get theming and customization tutorial for Park UI",
        arguments: [
            {
                name: "topic",
                description: "Theming topic (colors, typography, radius, dark-mode) - defaults to colors",
                required: false
            }
        ]
    },
    migration_guide: {
        name: "migration_guide",
        description: "Get guidance for migrating from other UI libraries to Park UI",
        arguments: [
            {
                name: "fromLibrary",
                description: "Current UI library (chakra-ui, material-ui, ant-design)",
                required: false
            }
        ]
    },
    performance_optimization: {
        name: "performance_optimization",
        description: "Get performance optimization tips for Park UI",
        arguments: [
            {
                name: "useCase",
                description: "Specific use case or performance concern",
                required: false
            }
        ]
    }
};
/**
 * Prompt handlers that generate responses for each prompt
 */
export const promptHandlers = {
    component_usage: (args) => {
        const framework = args.framework || 'react';
        const componentName = args.componentName;
        return {
            description: `Usage guide for Park UI ${componentName} component in ${framework}`,
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `How do I use the ${componentName} component from Park UI in ${framework}?`
                    }
                },
                {
                    role: "assistant",
                    content: {
                        type: "text",
                        text: `Here's how to use the ${componentName} component from Park UI in ${framework}:

## Installation
First, add the component to your project:
\`\`\`bash
npx @park-ui/cli components add ${componentName}
\`\`\`

## Basic Usage
${getComponentExample(componentName, framework)}

## Props and Variants
The ${componentName} component supports these common props:
- \`variant\`: Style variant (default, primary, secondary)
- \`size\`: Size variant (sm, md, lg)
- \`disabled\`: Disable the component
- Standard HTML props for accessibility

## Customization
You can customize the component using Panda CSS:
${getCustomizationExample(componentName, framework)}

## Best Practices
- Always provide accessible labels and descriptions
- Use semantic variants that match your design system
- Consider loading states and error handling
- Test with keyboard navigation and screen readers

For more examples and API details, visit: https://park-ui.com/${framework}/docs/components/${componentName}`
                    }
                }
            ]
        };
    },
    installation_guide: (args) => {
        const framework = args.framework || 'react';
        return {
            description: `Complete installation guide for Park UI with ${framework}`,
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `How do I install and set up Park UI with ${framework}?`
                    }
                },
                {
                    role: "assistant",
                    content: {
                        type: "text",
                        text: `Here's a complete guide to install Park UI with ${framework}:

## Prerequisites
- Node.js 18+ installed
- A ${framework} project set up

## Step 1: Install Ark UI
\`\`\`bash
npm install @ark-ui/${framework}
\`\`\`

## Step 2: Install Panda CSS Preset
\`\`\`bash
npm install @park-ui/panda-preset -D
npm install @pandacss/dev -D
\`\`\`

## Step 3: Configure Panda CSS
Create \`panda.config.ts\`:
${getPandaConfig(framework)}

## Step 4: Add Components
Use the CLI to add components:
\`\`\`bash
# Single component
npx @park-ui/cli components add button

# Multiple components  
npx @park-ui/cli components add button card avatar

# All components
npx @park-ui/cli components add --all
\`\`\`

## Step 5: Generate Styled System
\`\`\`bash
npx panda codegen
\`\`\`

## Step 6: Import Styles
${getStyleImports(framework)}

## Step 7: Use Components
${getUsageExample(framework)}

## Optional: TypeScript Setup
For TypeScript projects, add types to your tsconfig.json:
\`\`\`json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/components/*": ["./src/components/*"],
      "~/styled-system/*": ["./styled-system/*"]
    }
  }
}
\`\`\`

## Next Steps
- Explore the [component gallery](https://park-ui.com/${framework}/docs/components)
- Learn about [theming](https://park-ui.com/docs/theme/customize)
- Check out [examples](https://park-ui.com/${framework}/docs/examples)

You're all set! Park UI is now ready to use in your ${framework} project.`
                    }
                }
            ]
        };
    },
    theming_tutorial: (args) => {
        const topic = args.topic || 'colors';
        return {
            description: `Park UI theming tutorial focused on ${topic}`,
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `How do I customize ${topic} in Park UI?`
                    }
                },
                {
                    role: "assistant",
                    content: {
                        type: "text",
                        text: getThemingGuide(topic)
                    }
                }
            ]
        };
    },
    migration_guide: (args) => {
        const fromLibrary = args.fromLibrary || 'other UI library';
        return {
            description: `Migration guide from ${fromLibrary} to Park UI`,
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `How do I migrate from ${fromLibrary} to Park UI?`
                    }
                },
                {
                    role: "assistant",
                    content: {
                        type: "text",
                        text: getMigrationGuide(fromLibrary)
                    }
                }
            ]
        };
    },
    performance_optimization: (args) => {
        const useCase = args.useCase || 'general performance';
        return {
            description: `Performance optimization tips for Park UI`,
            messages: [
                {
                    role: "user",
                    content: {
                        type: "text",
                        text: `How can I optimize Park UI performance for ${useCase}?`
                    }
                },
                {
                    role: "assistant",
                    content: {
                        type: "text",
                        text: `Here are performance optimization strategies for Park UI:

## Bundle Size Optimization
- **Install only needed components**: Use CLI to add specific components
- **Tree shaking**: Ensure your bundler supports tree shaking
- **Code splitting**: Lazy load components when possible

## Runtime Performance
- **Minimize re-renders**: Use React.memo or equivalent for expensive components
- **Optimize Panda CSS**: Use atomic CSS classes for better caching
- **Reduce prop spreading**: Be explicit with props to avoid unnecessary updates

## Build Time Optimization
- **Panda CSS optimization**: Configure \`optimize: true\` in panda.config.ts
- **Exclude unused utilities**: Use \`exclude\` patterns in Panda config
- **Static extraction**: Use static CSS extraction for production builds

## Specific to ${useCase}:
${getUseSpecificOptimizations(useCase)}

## Monitoring
- Use React DevTools Profiler to identify bottlenecks
- Monitor bundle size with tools like Bundle Analyzer
- Test with slower devices and network conditions

## Best Practices
- Prefer CSS-in-JS patterns that compile away at build time
- Use Panda's responsive utilities efficiently
- Implement proper loading states for better perceived performance

For more optimization tips, check the [Park UI performance guide](https://park-ui.com/docs/guides/performance).`
                    }
                }
            ]
        };
    }
};
// Helper functions for generating examples
function getComponentExample(componentName, framework) {
    const examples = {
        react: `\`\`\`tsx
import { ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} } from '~/components/ui/${componentName}'

export default function Example() {
  return (
    <${componentName.charAt(0).toUpperCase() + componentName.slice(1)} variant="primary" size="md">
      Click me
    </${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>
  )
}
\`\`\``,
        vue: `\`\`\`vue
<template>
  <${componentName.charAt(0).toUpperCase() + componentName.slice(1)} variant="primary" size="md">
    Click me
  </${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>
</template>

<script setup>
import { ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} } from '~/components/ui/${componentName}'
</script>
\`\`\``,
        solid: `\`\`\`tsx
import { ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} } from '~/components/ui/${componentName}'

export default function Example() {
  return (
    <${componentName.charAt(0).toUpperCase() + componentName.slice(1)} variant="primary" size="md">
      Click me
    </${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>
  )
}
\`\`\``
    };
    return examples[framework] || examples.react;
}
function getCustomizationExample(componentName, framework) {
    return `\`\`\`${framework === 'vue' ? 'vue' : 'tsx'}
// Custom styled ${componentName}
${framework === 'vue' ? '<template>' : ''}
<${componentName.charAt(0).toUpperCase() + componentName.slice(1)} 
  css={{
    bg: 'blue.500',
    color: 'white',
    borderRadius: 'lg',
    _hover: { bg: 'blue.600' }
  }}
>
  Custom ${componentName}
</${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>
${framework === 'vue' ? '</template>' : ''}
\`\`\``;
}
function getPandaConfig(framework) {
    return `\`\`\`typescript
import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'

export default defineConfig({
  preflight: true,
  presets: [
    '@pandacss/preset-base',
    createPreset({
      accentColor: 'neutral',
      grayColor: 'neutral',
      borderRadius: 'sm',
    }),
  ],
  include: ['./src/**/*.{${framework === 'vue' ? 'vue,js,ts' : 'js,jsx,ts,tsx'}}'],
  outdir: 'styled-system',
})
\`\`\``;
}
function getStyleImports(framework) {
    const imports = {
        react: `\`\`\`tsx
// In your main.tsx or App.tsx
import './index.css'
\`\`\`

And in your \`index.css\`:
\`\`\`css
@layer reset, base, tokens, recipes, utilities;
\`\`\``,
        vue: `\`\`\`ts
// In your main.ts
import './style.css'
\`\`\`

And in your \`style.css\`:
\`\`\`css
@layer reset, base, tokens, recipes, utilities;
\`\`\``,
        solid: `\`\`\`tsx
// In your index.tsx
import './index.css'
\`\`\`

And in your \`index.css\`:
\`\`\`css
@layer reset, base, tokens, recipes, utilities;
\`\`\``
    };
    return imports[framework] || imports.react;
}
function getUsageExample(framework) {
    return getComponentExample('button', framework);
}
function getThemingGuide(topic) {
    const guides = {
        colors: `Here's how to customize colors in Park UI:

## Setting Accent Colors
\`\`\`typescript
// panda.config.ts
createPreset({
  accentColor: 'blue', // blue, green, red, orange, yellow, purple, pink, teal
  grayColor: 'neutral', // gray, neutral, zinc, stone, slate
})
\`\`\`

## Custom Color Tokens
\`\`\`typescript
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        colors: {
          brand: {
            50: { value: '#f0f9ff' },
            100: { value: '#e0f2fe' },
            // ... more shades
          }
        }
      }
    }
  }
})
\`\`\`

## Using Custom Colors
\`\`\`tsx
<Button css={{ bg: 'brand.500', color: 'brand.50' }}>
  Branded Button
</Button>
\`\`\``,
        typography: `Here's how to customize typography in Park UI:

## Font Families
\`\`\`typescript
export default defineConfig({
  theme: {
    extend: {
      tokens: {
        fonts: {
          heading: { value: 'Inter, sans-serif' },
          body: { value: 'Inter, sans-serif' }
        }
      }
    }
  }
})
\`\`\`

## Font Sizes
\`\`\`typescript
tokens: {
  fontSizes: {
    xs: { value: '0.75rem' },
    sm: { value: '0.875rem' },
    md: { value: '1rem' },
    // ... more sizes
  }
}
\`\`\``,
        radius: `Here's how to customize border radius in Park UI:

## Global Border Radius
\`\`\`typescript
createPreset({
  borderRadius: 'lg', // none, sm, md, lg, xl
})
\`\`\`

## Custom Radius Tokens  
\`\`\`typescript
tokens: {
  radii: {
    button: { value: '8px' },
    card: { value: '12px' },
    modal: { value: '16px' }
  }
}
\`\`\``
    };
    return guides[topic] || 'Topic not found. Available topics: colors, typography, radius, dark-mode';
}
function getMigrationGuide(fromLibrary) {
    const guides = {
        'chakra-ui': `Here's how to migrate from Chakra UI to Park UI:

## Key Differences
- **Styling**: Park UI uses Panda CSS instead of Chakra's emotion-based system
- **Components**: Similar component API but different prop names in some cases
- **Theming**: Different theming system based on design tokens

## Migration Steps
1. **Install Park UI** following the installation guide
2. **Map Components**: Most Chakra components have Park UI equivalents
3. **Update Props**: Some prop names differ (e.g., \`colorScheme\` → \`variant\`)
4. **Styling**: Replace Chakra's \`sx\` prop with Panda's \`css\` prop
5. **Theme**: Convert Chakra theme to Panda tokens

## Component Mapping
- \`Button\` → \`Button\` (similar API)
- \`Box\` → Use Panda's \`styled\` function
- \`Flex\` → Use Panda's \`flex\` pattern
- \`Text\` → Use semantic HTML with Panda styles

## Common Changes
\`\`\`tsx
// Chakra UI
<Button colorScheme="blue" size="lg">Click</Button>

// Park UI
<Button variant="primary" size="lg">Click</Button>
\`\`\``,
        'material-ui': `Here's how to migrate from Material-UI to Park UI:

## Key Differences
- **Design System**: Park UI follows different design principles
- **Styling**: Uses Panda CSS instead of emotion/styled-components
- **Components**: Different component structure and props

## Migration Strategy
1. **Gradual Migration**: Migrate page by page or component by component
2. **Coexistence**: Both libraries can coexist during migration
3. **Design System**: Align with Park UI's design tokens

## Component Mapping
- \`Button\` → \`Button\`
- \`TextField\` → \`Input\`
- \`Dialog\` → \`Dialog\`
- \`Card\` → \`Card\`

## Theming Migration
Material-UI's theme structure differs significantly from Park UI's token-based approach.`,
        'ant-design': `Here's how to migrate from Ant Design to Park UI:

## Key Differences
- **Bundle Size**: Park UI is more modular
- **Customization**: Different theming approach
- **Framework Support**: Park UI supports multiple frameworks

## Migration Approach
1. **Component by Component**: Replace Ant Design components gradually
2. **Custom Styles**: Convert Less variables to Panda tokens  
3. **Icons**: Replace Ant Design icons with your preferred icon library

## Common Replacements
- \`antd.Button\` → Park UI \`Button\`
- \`antd.Input\` → Park UI \`Input\` 
- \`antd.Modal\` → Park UI \`Dialog\`
- \`antd.Card\` → Park UI \`Card\``
    };
    return guides[fromLibrary] || 'Migration guide not available for this library. General migration principles apply.';
}
function getUseSpecificOptimizations(useCase) {
    const optimizations = {
        'large datasets': `- Use virtualization for large lists
- Implement pagination or infinite scroll
- Optimize table rendering with React Window`,
        'mobile devices': `- Reduce bundle size with selective imports
- Use responsive design tokens efficiently  
- Optimize touch interactions`,
        'server-side rendering': `- Use static CSS extraction
- Optimize hydration with proper component boundaries
- Consider critical CSS inlining`,
        'animation heavy': `- Use CSS transforms over JavaScript animations
- Implement proper animation cleanup
- Consider reduced motion preferences`
    };
    return optimizations[useCase] || 'General optimization principles apply to your use case.';
}