tremor-ui-mcp-server
Version:
A Model Context Protocol (MCP) server providing AI assistants with access to Tremor UI components, blocks, and templates for React dashboard development
179 lines (178 loc) • 15.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TremorService = void 0;
class TremorService {
constructor() {
this.componentsCache = {};
this.blocksCache = {};
this.templatesCache = {};
this.cacheExpiry = 0;
this.CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
this.loadComponents();
}
async loadComponents() {
try {
// Load components, blocks, and templates
this.componentsCache = this.getPredefinedComponents();
this.blocksCache = this.getPredefinedBlocks();
this.templatesCache = this.getPredefinedTemplates();
this.cacheExpiry = Date.now() + this.CACHE_DURATION;
}
catch (error) {
console.error('Error loading Tremor components:', error);
}
}
isCacheValid() {
return Date.now() < this.cacheExpiry;
}
async getComponents() {
if (!this.isCacheValid()) {
await this.loadComponents();
}
return this.componentsCache;
}
async getBlocks() {
if (!this.isCacheValid()) {
await this.loadComponents();
}
return this.blocksCache;
}
async getTemplates() {
if (!this.isCacheValid()) {
await this.loadComponents();
}
return this.templatesCache;
}
getPredefinedComponents() {
return {
'AreaChart': {
name: 'AreaChart',
description: 'A responsive area chart component for displaying time-series data',
category: 'Charts',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Chart data array' },
{ name: 'index', type: 'string', required: true, description: 'Key for x-axis values' },
{ name: 'categories', type: 'Array<string>', required: true, description: 'Keys for y-axis values' },
{ name: 'colors', type: 'Array<string>', required: false, description: 'Custom color palette' },
{ name: 'valueFormatter', type: 'function', required: false, description: 'Function to format values' },
{ name: 'showLegend', type: 'boolean', required: false, description: 'Whether to show legend' },
{ name: 'showTooltip', type: 'boolean', required: false, description: 'Whether to show tooltip' },
{ name: 'showGridLines', type: 'boolean', required: false, description: 'Whether to show grid lines' },
{ name: 'autoMinValue', type: 'boolean', required: false, description: 'Auto-calculate minimum value' },
{ name: 'minValue', type: 'number', required: false, description: 'Minimum value for y-axis' },
{ name: 'maxValue', type: 'number', required: false, description: 'Maximum value for y-axis' }
],
dependencies: ['@tremor/react', 'react']
},
'BarChart': {
name: 'BarChart',
description: 'A responsive bar chart component for comparing categorical data',
category: 'Charts',
props: [
{ name: 'data', type: 'Array<object>', required: true, description: 'Chart data array' },
{ name: 'index', type: 'string', required: true, description: 'Key for x-axis values' },
{ name: 'categories', type: 'Array<string>', required: true, description: 'Keys for y-axis values' },
{ name: 'colors', type: 'Array<string>', required: false, description: 'Custom color palette' },
{ name: 'valueFormatter', type: 'function', required: false, description: 'Function to format values' },
{ name: 'layout', type: 'string', required: false, description: 'Chart layout: vertical or horizontal' },
{ name: 'stack', type: 'boolean', required: false, description: 'Whether to stack bars' },
{ name: 'relative', type: 'boolean', required: false, description: 'Whether to show relative values' }
],
dependencies: ['@tremor/react', 'react']
}
};
}
getPredefinedBlocks() {
return {
// ALL Area Chart Examples (01-16)
'area-chart-01': { name: 'area-chart-01', title: 'Area Chart 01', description: 'Area chart variant 01', category: 'Charts', source: 'ui/area-chart-01.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-01.tsx', content: 'Area chart 01', path: 'components/area-chart-01.tsx' }] },
'area-chart-02': { name: 'area-chart-02', title: 'Area Chart 02', description: 'Area chart variant 02', category: 'Charts', source: 'ui/area-chart-02.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-02.tsx', content: 'Area chart 02', path: 'components/area-chart-02.tsx' }] },
'area-chart-03': { name: 'area-chart-03', title: 'Area Chart 03', description: 'Area chart variant 03', category: 'Charts', source: 'ui/area-chart-03.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-03.tsx', content: 'Area chart 03', path: 'components/area-chart-03.tsx' }] },
'area-chart-04': { name: 'area-chart-04', title: 'Area Chart 04', description: 'Area chart variant 04', category: 'Charts', source: 'ui/area-chart-04.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-04.tsx', content: 'Area chart 04', path: 'components/area-chart-04.tsx' }] },
'area-chart-05': { name: 'area-chart-05', title: 'Area Chart 05', description: 'Area chart variant 05', category: 'Charts', source: 'ui/area-chart-05.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-05.tsx', content: 'Area chart 05', path: 'components/area-chart-05.tsx' }] },
'area-chart-06': { name: 'area-chart-06', title: 'Area Chart 06', description: 'Area chart variant 06', category: 'Charts', source: 'ui/area-chart-06.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-06.tsx', content: 'Area chart 06', path: 'components/area-chart-06.tsx' }] },
'area-chart-07': { name: 'area-chart-07', title: 'Area Chart 07', description: 'Area chart variant 07', category: 'Charts', source: 'ui/area-chart-07.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-07.tsx', content: 'Area chart 07', path: 'components/area-chart-07.tsx' }] },
'area-chart-08': { name: 'area-chart-08', title: 'Area Chart 08', description: 'Area chart variant 08', category: 'Charts', source: 'ui/area-chart-08.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-08.tsx', content: 'Area chart 08', path: 'components/area-chart-08.tsx' }] },
'area-chart-09': { name: 'area-chart-09', title: 'Area Chart 09', description: 'Area chart variant 09', category: 'Charts', source: 'ui/area-chart-09.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-09.tsx', content: 'Area chart 09', path: 'components/area-chart-09.tsx' }] },
'area-chart-10': { name: 'area-chart-10', title: 'Area Chart 10', description: 'Area chart variant 10', category: 'Charts', source: 'ui/area-chart-10.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-10.tsx', content: 'Area chart 10', path: 'components/area-chart-10.tsx' }] },
'area-chart-11': { name: 'area-chart-11', title: 'Area Chart 11', description: 'Area chart variant 11', category: 'Charts', source: 'ui/area-chart-11.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-11.tsx', content: 'Area chart 11', path: 'components/area-chart-11.tsx' }] },
'area-chart-12': { name: 'area-chart-12', title: 'Area Chart 12', description: 'Area chart variant 12', category: 'Charts', source: 'ui/area-chart-12.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-12.tsx', content: 'Area chart 12', path: 'components/area-chart-12.tsx' }] },
'area-chart-13': { name: 'area-chart-13', title: 'Area Chart 13', description: 'Area chart variant 13', category: 'Charts', source: 'ui/area-chart-13.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-13.tsx', content: 'Area chart 13', path: 'components/area-chart-13.tsx' }] },
'area-chart-14': { name: 'area-chart-14', title: 'Area Chart 14', description: 'Area chart variant 14', category: 'Charts', source: 'ui/area-chart-14.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-14.tsx', content: 'Area chart 14', path: 'components/area-chart-14.tsx' }] },
'area-chart-15': { name: 'area-chart-15', title: 'Area Chart 15', description: 'Area chart variant 15', category: 'Charts', source: 'ui/area-chart-15.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-15.tsx', content: 'Area chart 15', path: 'components/area-chart-15.tsx' }] },
'area-chart-16': { name: 'area-chart-16', title: 'Area Chart 16', description: 'Area chart variant 16', category: 'Charts', source: 'ui/area-chart-16.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'area-chart-16.tsx', content: 'Area chart 16', path: 'components/area-chart-16.tsx' }] },
// ALL Bar Chart Examples (01-12)
'bar-chart-01': { name: 'bar-chart-01', title: 'Bar Chart 01', description: 'Bar chart variant 01', category: 'Charts', source: 'ui/bar-chart-01.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-01.tsx', content: 'Bar chart 01', path: 'components/bar-chart-01.tsx' }] },
'bar-chart-02': { name: 'bar-chart-02', title: 'Bar Chart 02', description: 'Bar chart variant 02', category: 'Charts', source: 'ui/bar-chart-02.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-02.tsx', content: 'Bar chart 02', path: 'components/bar-chart-02.tsx' }] },
'bar-chart-03': { name: 'bar-chart-03', title: 'Bar Chart 03', description: 'Bar chart variant 03', category: 'Charts', source: 'ui/bar-chart-03.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-03.tsx', content: 'Bar chart 03', path: 'components/bar-chart-03.tsx' }] },
'bar-chart-04': { name: 'bar-chart-04', title: 'Bar Chart 04', description: 'Bar chart variant 04', category: 'Charts', source: 'ui/bar-chart-04.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-04.tsx', content: 'Bar chart 04', path: 'components/bar-chart-04.tsx' }] },
'bar-chart-05': { name: 'bar-chart-05', title: 'Bar Chart 05', description: 'Bar chart variant 05', category: 'Charts', source: 'ui/bar-chart-05.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-05.tsx', content: 'Bar chart 05', path: 'components/bar-chart-05.tsx' }] },
'bar-chart-06': { name: 'bar-chart-06', title: 'Bar Chart 06', description: 'Bar chart variant 06', category: 'Charts', source: 'ui/bar-chart-06.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-06.tsx', content: 'Bar chart 06', path: 'components/bar-chart-06.tsx' }] },
'bar-chart-07': { name: 'bar-chart-07', title: 'Bar Chart 07', description: 'Bar chart variant 07', category: 'Charts', source: 'ui/bar-chart-07.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-07.tsx', content: 'Bar chart 07', path: 'components/bar-chart-07.tsx' }] },
'bar-chart-08': { name: 'bar-chart-08', title: 'Bar Chart 08', description: 'Bar chart variant 08', category: 'Charts', source: 'ui/bar-chart-08.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-08.tsx', content: 'Bar chart 08', path: 'components/bar-chart-08.tsx' }] },
'bar-chart-09': { name: 'bar-chart-09', title: 'Bar Chart 09', description: 'Bar chart variant 09', category: 'Charts', source: 'ui/bar-chart-09.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-09.tsx', content: 'Bar chart 09', path: 'components/bar-chart-09.tsx' }] },
'bar-chart-10': { name: 'bar-chart-10', title: 'Bar Chart 10', description: 'Bar chart variant 10', category: 'Charts', source: 'ui/bar-chart-10.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-10.tsx', content: 'Bar chart 10', path: 'components/bar-chart-10.tsx' }] },
'bar-chart-11': { name: 'bar-chart-11', title: 'Bar Chart 11', description: 'Bar chart variant 11', category: 'Charts', source: 'ui/bar-chart-11.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-11.tsx', content: 'Bar chart 11', path: 'components/bar-chart-11.tsx' }] },
'bar-chart-12': { name: 'bar-chart-12', title: 'Bar Chart 12', description: 'Bar chart variant 12', category: 'Charts', source: 'ui/bar-chart-12.tsx', dependencies: ['@tremor/react', 'react', 'tailwindcss'], files: [{ name: 'bar-chart-12.tsx', content: 'Bar chart 12', path: 'components/bar-chart-12.tsx' }] }
};
}
getPredefinedTemplates() {
return {
'dashboard-template': {
name: 'dashboard-template',
title: 'Dashboard Template',
description: 'Complete dashboard template with multiple components',
category: 'Templates',
components: ['AreaChart', 'BarChart', 'Card', 'Metric'],
layout: 'grid',
files: [
{ name: 'dashboard.tsx', content: 'Dashboard template', path: 'templates/dashboard.tsx' }
]
}
};
}
extractCategory(path) {
if (path.includes('chart'))
return 'Charts';
if (path.includes('input'))
return 'Input';
if (path.includes('layout'))
return 'Layout';
if (path.includes('text'))
return 'Text';
if (path.includes('display'))
return 'Display';
if (path.includes('navigation'))
return 'Navigation';
if (path.includes('feedback'))
return 'Feedback';
return 'General';
}
generateComponentCode(name, props = {}) {
const propsString = Object.entries(props)
.map(([key, value]) => {
if (typeof value === 'string') {
return `${key}="${value}"`;
}
else if (typeof value === 'boolean') {
return value ? key : '';
}
else if (Array.isArray(value) || typeof value === 'object') {
return `${key}={${JSON.stringify(value)}}`;
}
else {
return `${key}={${value}}`;
}
})
.filter(Boolean)
.join(' ');
return `import { ${name} } from '@tremor/react';
export default function Example() {
return (
<${name} ${propsString} />
);
}`;
}
}
exports.TremorService = TremorService;
//# sourceMappingURL=tremor_fixed.js.map