Optimized for AI-Assisted Engineering

Katlux

A robust, environment-agnostic ecosystem for Nuxt 3, tailored for AI-assisted engineering. Build and scale enterprise Vue applications with component presetting, data providers, and production-ready blocks.

InstallGetting Started

Tailored for AI-Assisted Engineering

Katlux provides clear abstractions and structured tooling designed to use AI tokens and context windows more efficiently when building and maintaining interfaces in your project.

🤖

Model Context Protocol (MCP)

Instead of pasting entire files into prompt context, @katlux/mcp lets your AI fetch only the exact schema, props, or design tokens it needs on-demand.

  • Targeted schema queries via katlux_get_component
  • Token inspection via katlux_get_tokens
  • Saves context tokens with on-demand tool calls
📐

Token-Efficient AI References

Installable reference files give your AI assistant compact, modular cheatsheets that keep context consumption low and prevent context window exhaustion.

  • Quick install via npx @katlux/toolkit katlux-add-ref
  • Modular reference at .agents/skills/
  • Low token overhead per interaction
⚡

Consistent, Reusable Patterns

Predictable interfaces across all components help AI assistants generate working code on the first attempt without burning tokens on trial-and-error corrections.

  • Unified ADataProvider for all data-driven components
  • Clean separation of styling presets from markup
  • Uniform event names and v-model bindings

The Three Core Pillars

Katlux decouples visual styling, data handling, and page building into three distinct layers.

🎨

Component Presets

Presetting separates the visual design layer of a component from its markup and controller code. Define global styles, custom template overrides, and design tokens to restyle components at runtime.

  • CSS Custom Properties (Design Tokens)
  • Multi-theme presets (e.g. Modern vs Default)
  • Dynamic template resolution
Explore Presets
🔄

Data & Cache Providers

Providers manage network operations, server-side pagination, querying, filtering, and cross-tab/indexedDB state. Hook standard client or server data providers into components.

  • Flat & Tree API DataProviders
  • Caching with 6 customizable strategies
  • Automated query generation & deduplication
Explore Providers
🧱

Layout Blocks

Blocks are ready-made, pre-composed sections engineered for common business routines. Copy-paste pre-built charts or e-commerce lists to build functional layouts in seconds.

  • Interactive Chart blocks
  • E-Commerce Product list compositions
  • Scalable & responsive dashboard components
Explore Blocks

Ecosystem Architecture

How Presets, Providers, and Blocks fit together in a Katlux app.

Katlux components look for the active preset specified in app.config.ts or injected at runtime. Styling is driven by dynamic CSS Custom Properties (Design Tokens) structured as HSL values. This allows developers to adjust global colors, borders, typography, and component sizes without touching CSS files.

TypeScript
// app.config.ts
export default defineAppConfig({
	katluxToolkit: {
		presetList: [
			{ name: 'Default', value: 'default' },
			{ name: 'Modern', value: 'modern' }
		],
		activePreset: 'modern'
	}
})

Under the hood, presets define variables mapped to root styles:

SCSS
:root {
	--color-primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
	--border-radius-md: var(--radius-base, 8px);
}

Katlux's presetting is ideal for multi-tenant SaaS. A preset can swap not just CSS rules, but the entire template markup dynamically. You can change presets programmatically by setting the katlux-active-preset cookie or mutating the active preset in useAppConfig().

TypeScript
// Switching preset dynamically for a specific tenant
import { useAppConfig } from '#imports'

function switchTenantPreset(presetName: string) {
	const appConfig = useAppConfig()
	appConfig.katluxToolkit.activePreset = presetName
	
	// Persist via cookie so it loads before hydration
	const cookie = useCookie('katlux-active-preset')
	cookie.value = presetName
}

Katlux uses the ADataProvider abstraction to manage data logic. Any data-consuming component (like a tree, combobox, or table) is bound to a provider, making it backend-agnostic. Providers automatically handle:

  • Filtering & Sorting: Real-time search debouncing and multiple sort directions.
  • Isomorphic Pagination: Synchronizes current page parameters with URL search params.
  • 6 Caching Strategies: Application, Session, Memory, LocalStorage, IndexedDB, and Cookie.
TypeScript
import { CFlatClientDataProvider, ECacheStrategy } from '@katlux/providers'

const userListProvider = new CFlatClientDataProvider({
	items: [],
	cacheStrategy: ECacheStrategy.IndexedDB, // Persists query results locally
	cacheLifetime: 300000,                 // 5 minutes cache lifetime
	urlPageParam: 'page'                   // Syncs ?page=X to browser history
})

Katlux provides tools tailored for AI-assisted workflows. Through the official @katlux/mcp server, AI assistants can look up component schemas, design tokens, and templates dynamically during development.

Bash
# Start Katlux MCP server in Claude Desktop, Cursor, or Antigravity
npx @katlux/mcp@alpha

AI assistants can query tools such as:

  • katlux_get_component: Look up props, slots, events, and usage examples for any component.
  • katlux_get_tokens: Discover design tokens and theme color palettes.
  • katlux_scaffold: Generate boilerplate components and preset structures.