mcp-web-ui
Version:
Ultra-lightweight vanilla JavaScript framework for MCP servers - Zero dependencies, perfect security, 2-3KB bundle size
180 lines • 6.35 kB
JavaScript
/**
* UIServer Configuration System
* Enables configuration-driven server behavior following Generic Component Architecture
*/
/**
* Default configuration following progressive enhancement principles
*/
export const DEFAULT_UI_SERVER_CONFIG = {
server: {
bindAddress: 'localhost',
enableCompression: true,
enableRateLimit: true,
maxRequestSize: '1mb'
},
security: {
enableCSP: true,
allowedOrigins: ['self'],
sessionTimeout: 30 * 60 * 1000,
enableSanitization: true
},
resources: {
css: {
strategy: 'schema-driven',
baseTheme: 'default',
customThemes: [
{
name: 'todoodles',
files: ['todoodles-styles.css'],
conditions: {
schemaTitle: ['todoodles', 'todo']
},
priority: 10
},
{
name: 'grocery',
files: ['grocery-styles.css'],
conditions: {
schemaTitle: ['grocery']
},
priority: 10
}
],
loadOrder: ['base', 'theme', 'custom']
},
javascript: {
framework: [
'core/BaseComponent.js',
'components/ModalComponent.js',
'MCPFramework.js'
],
components: [
{
name: 'ListComponent',
files: ['components/ListComponent.js'],
dependencies: ['BaseComponent'],
loadCondition: (schema) => schema.components.some((c) => c.type === 'list')
},
{
name: 'TableComponent',
files: ['components/TableComponent.js'],
dependencies: ['BaseComponent'],
loadCondition: (schema) => schema.components.some((c) => c.type === 'table')
},
{
name: 'StatsComponent',
files: ['components/StatsComponent.js'],
dependencies: ['BaseComponent'],
loadCondition: (schema) => schema.components.some((c) => c.type === 'stats')
}
],
enableBundling: true
},
static: {
directories: ['templates/static'], // Framework default
cacheControl: 'public, max-age=3600',
enableCompression: true
}
},
templates: {
engine: 'vanilla',
customTemplates: [],
enableCaching: false,
defaultLayout: 'default'
},
plugins: {
enabled: [],
config: {}
}
};
/**
* Configuration builder for easy setup
*/
export class UIServerConfigBuilder {
config = {};
static create() {
return new UIServerConfigBuilder();
}
withTheme(theme) {
if (!this.config.resources) {
this.config.resources = {
css: { strategy: 'schema-driven', baseTheme: 'default', customThemes: [], loadOrder: [] },
javascript: { framework: [], components: [], enableBundling: true },
static: { directories: [], cacheControl: '', enableCompression: true }
};
}
if (!this.config.resources.css) {
this.config.resources.css = { strategy: 'schema-driven', baseTheme: 'default', customThemes: [], loadOrder: [] };
}
if (!this.config.resources.css.customThemes) {
this.config.resources.css.customThemes = [];
}
this.config.resources.css.customThemes.push(theme);
return this;
}
withPlugin(name, config) {
if (!this.config.plugins)
this.config.plugins = { enabled: [], config: {} };
this.config.plugins.enabled.push(name);
this.config.plugins.config[name] = config;
return this;
}
withCustomCSS(name, conditions) {
return this.withTheme({
name,
files: [`${name}-styles.css`],
conditions,
priority: 10
});
}
withStaticDirectory(dir) {
if (!this.config.resources) {
this.config.resources = {
css: { strategy: 'schema-driven', baseTheme: 'default', customThemes: [], loadOrder: [] },
javascript: { framework: [], components: [], enableBundling: true },
static: { directories: [], cacheControl: 'public, max-age=3600', enableCompression: true }
};
}
if (!this.config.resources.static) {
this.config.resources.static = {
directories: [],
cacheControl: 'public, max-age=3600',
enableCompression: true
};
}
if (!this.config.resources.static.directories) {
this.config.resources.static.directories = [];
}
this.config.resources.static.directories.push(dir);
return this;
}
build() {
// Ensure nested objects exist before merging
const baseResources = DEFAULT_UI_SERVER_CONFIG.resources;
const configResources = this.config.resources;
const baseStatic = baseResources.static;
const configStatic = configResources?.static;
return {
...DEFAULT_UI_SERVER_CONFIG,
...this.config,
resources: {
...baseResources,
...(configResources || {}),
css: {
...baseResources.css,
...(configResources?.css || {})
},
static: {
directories: Array.from(new Set([
...baseStatic.directories,
...(configStatic?.directories || [])
])),
cacheControl: configStatic?.cacheControl || baseStatic.cacheControl,
enableCompression: configStatic?.enableCompression ?? baseStatic.enableCompression,
mcpServerDirectories: configStatic?.mcpServerDirectories || []
}
}
};
}
}
//# sourceMappingURL=UIServerConfig.js.map