park-ui-mcp-server
Version:
A Model Context Protocol (MCP) server for Park UI component library, providing AI assistants with access to Park UI components, APIs, examples, and documentation.
308 lines (273 loc) • 8.54 kB
JavaScript
/**
* Resource templates for the Park UI MCP server.
*
* Templates allow for dynamic resource generation based on parameters.
* This enables generating component-specific documentation and examples.
*/
/**
* Available resource templates
*/
export const resourceTemplates = [
{
uriTemplate: "template:component/{componentName}",
name: "Component Documentation Template",
description: "Get detailed documentation for a specific Park UI component",
mimeType: "text/markdown"
},
{
uriTemplate: "template:framework/{framework}",
name: "Framework Setup Template",
description: "Get framework-specific setup instructions",
mimeType: "text/markdown"
}
];
/**
* Get resource template handler based on URI
*/
export function getResourceTemplate(uri) {
// Component documentation template
const componentMatch = uri.match(/^template:component\/(.+)$/);
if (componentMatch) {
const componentName = componentMatch[1];
return () => generateComponentDocs(componentName);
}
// Framework setup template
const frameworkMatch = uri.match(/^template:framework\/(.+)$/);
if (frameworkMatch) {
const framework = frameworkMatch[1];
return () => generateFrameworkSetup(framework);
}
return null;
}
/**
* Generate component documentation
*/
function generateComponentDocs(componentName) {
const componentData = getComponentData(componentName);
return {
content: `# ${componentData.name}
${componentData.description}
## Installation
\`\`\`bash
npx @park-ui/cli components add ${componentName}
\`\`\`
## Usage
### React
\`\`\`tsx
${componentData.examples.react}
\`\`\`
### Vue
\`\`\`vue
${componentData.examples.vue}
\`\`\`
### Solid
\`\`\`tsx
${componentData.examples.solid}
\`\`\`
## Props
${componentData.props.map(prop => `- **${prop.name}** (\`${prop.type}\`): ${prop.description}`).join('\n')}
## Variants
${componentData.variants.map(variant => `- **${variant.name}**: ${variant.options.join(', ')}`).join('\n')}
## Accessibility
${componentData.accessibility.join('\n')}
## Learn More
- [Park UI Documentation](https://park-ui.com)
- [Component Source](https://github.com/cschroeter/park-ui)
`,
contentType: "text/markdown"
};
}
/**
* Generate framework-specific setup
*/
function generateFrameworkSetup(framework) {
const setupData = getFrameworkSetup(framework);
return {
content: `# ${setupData.name} Setup Guide
## Installation
### 1. Install Ark UI for ${framework}
\`\`\`bash
${setupData.arkInstall}
\`\`\`
### 2. Install Panda Preset
\`\`\`bash
npm install @park-ui/panda-preset -D
\`\`\`
### 3. Configure Panda CSS
${setupData.pandaConfig}
### 4. Add Components
\`\`\`bash
npx @park-ui/cli components add button
\`\`\`
### 5. Usage Example
${setupData.usageExample}
## Framework-Specific Notes
${setupData.notes.join('\n')}
## Next Steps
- Browse [components](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)
`,
contentType: "text/markdown"
};
}
/**
* Get component data - in a real implementation, this would fetch from Park UI docs
*/
function getComponentData(componentName) {
// This would typically fetch from Park UI documentation API
// For now, returning mock data structure
return {
name: componentName.charAt(0).toUpperCase() + componentName.slice(1),
description: `The ${componentName} component provides interactive functionality with full accessibility support.`,
examples: {
react: `import { ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} } from '~/components/ui/${componentName}'
export default function Example() {
return <${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>Example</${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>
}`,
vue: `<template>
<${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>Example</${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>
</template>
<script setup>
import { ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} } from '~/components/ui/${componentName}'
</script>`,
solid: `import { ${componentName.charAt(0).toUpperCase() + componentName.slice(1)} } from '~/components/ui/${componentName}'
export default function Example() {
return <${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>Example</${componentName.charAt(0).toUpperCase() + componentName.slice(1)}>
}`
},
props: [
{ name: 'children', type: 'ReactNode', description: 'The content to display' },
{ name: 'variant', type: 'string', description: 'Visual variant of the component' },
{ name: 'size', type: 'string', description: 'Size variant of the component' }
],
variants: [
{ name: 'variant', options: ['default', 'primary', 'secondary'] },
{ name: 'size', options: ['sm', 'md', 'lg'] }
],
accessibility: [
'- Follows ARIA guidelines for accessibility',
'- Supports keyboard navigation',
'- Screen reader compatible'
]
};
}
/**
* Get framework setup data
*/
function getFrameworkSetup(framework) {
const setups = {
react: {
name: 'React',
arkInstall: 'npm install @ark-ui/react',
pandaConfig: `\`\`\`typescript
// panda.config.ts
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/**/*.{js,jsx,ts,tsx}'],
outdir: 'styled-system',
})
\`\`\``,
usageExample: `\`\`\`tsx
import { Button } from '~/components/ui/button'
export default function App() {
return (
<div>
<Button>Click me</Button>
</div>
)
}
\`\`\``,
notes: [
'- Compatible with Next.js, Vite, and Create React App',
'- Full TypeScript support included',
'- Works with React 18+'
]
},
vue: {
name: 'Vue',
arkInstall: 'npm install @ark-ui/vue',
pandaConfig: `\`\`\`typescript
// panda.config.ts
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/**/*.{vue,js,ts}'],
outdir: 'styled-system',
})
\`\`\``,
usageExample: `\`\`\`vue
<template>
<div>
<Button>Click me</Button>
</div>
</template>
<script setup>
import { Button } from '~/components/ui/button'
</script>
\`\`\``,
notes: [
'- Compatible with Nuxt 3, Vite, and Vue CLI',
'- Supports Vue 3 Composition API',
'- TypeScript support available'
]
},
solid: {
name: 'Solid',
arkInstall: 'npm install @ark-ui/solid',
pandaConfig: `\`\`\`typescript
// panda.config.ts
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/**/*.{js,jsx,ts,tsx}'],
outdir: 'styled-system',
})
\`\`\``,
usageExample: `\`\`\`tsx
import { Button } from '~/components/ui/button'
export default function App() {
return (
<div>
<Button>Click me</Button>
</div>
)
}
\`\`\``,
notes: [
'- Compatible with SolidStart and Vite',
'- Full TypeScript support',
'- Optimized for Solid.js reactivity'
]
}
};
return setups[framework] || setups.react;
}