Houtini-lm

Instructions

Implementation Reference

• src/prompts/generate/responsive-component.ts:106-200 (handler)

  Core handler: execute() method orchestrates parameter validation, LLM prompting via ThreeStagePromptManager, response processing, and auto-saving the generated component project.
  async execute(params: any, llmClient: any) { return await withSecurity(this, params, llmClient, async (secureParams) => { try { // Validate required parameters if (!secureParams.name || !secureParams.type) { throw new Error('name and type are required parameters'); } // Handle directory specification if (!secureParams.saveDirectory) { return { success: false, requiresUserInput: true, message: `Please specify where to save the ${secureParams.name} component project.`, prompt: `Where would you like to save the component project?`, suggestions: [ `C:\\dev\\${secureParams.name.toLowerCase()}-component`, `C:\\projects\\${secureParams.name.toLowerCase()}-component`, `C:\\components\\${secureParams.name.toLowerCase()}-component` ], nextAction: { function: 'generate_responsive_component', parameters: { ...secureParams, saveDirectory: '[USER_WILL_SPECIFY]' } } }; } // Setup model const { model, contextLength } = await ModelSetup.getReadyModel(llmClient); // Generate component (this is always a generation task, not file analysis) const promptStages = this.getComponentGenerationStages(secureParams); // Execute with appropriate method const promptManager = new ThreeStagePromptManager(); const needsChunking = TokenCalculator.needsChunking(promptStages, contextLength); let response; if (needsChunking) { const chunkSize = TokenCalculator.calculateOptimalChunkSize(promptStages, contextLength); const dataChunks = promptManager.chunkDataPayload(promptStages.dataPayload, chunkSize); const conversation = promptManager.createChunkedConversation(promptStages, dataChunks); const messages = [ conversation.systemMessage, ...conversation.dataMessages, conversation.analysisMessage ]; response = await ResponseProcessor.executeChunked( messages, model, contextLength, 'generate_responsive_component', 'single' ); } else { response = await ResponseProcessor.executeDirect( promptStages, model, contextLength, 'generate_responsive_component' ); } // Auto-save the generated component to the specified directory if (response.success && response.data?.content) { try { const saveResult = await this.autoSaveComponent(secureParams, response.data.content); // Add save information to the response response.data.savedFiles = saveResult; response.data.projectPath = saveResult.projectPath; response.data.demoUrl = saveResult.demoUrl; response.data.instructions = [ `✅ Component project created at: ${saveResult.projectPath}`, `🌐 Open demo in browser: ${saveResult.demoUrl}`, `📁 Ready for GitHub: Complete project structure with README.md`, `🔧 Development ready: ${secureParams.framework !== 'vanilla' ? 'Run npm install to get started' : 'All files ready to use'}` ]; } catch (saveError) { // Don't fail the entire operation if saving fails response.data.saveError = `Failed to auto-save component: ${saveError.message}`; } } return response; } catch (error: any) { return ErrorHandler.createExecutionError('generate_responsive_component', error); } }); }
• src/prompts/generate/responsive-component.ts:36-96 (schema)

  Input parameter schema definition with types, descriptions, enums, defaults, and requirements.
  parameters = { // Component generation parameters name: { type: 'string' as const, description: 'Component name', required: true }, type: { type: 'string' as const, description: 'Component type', required: true, enum: ['button', 'form', 'card', 'modal', 'navigation', 'layout', 'custom'] }, framework: { type: 'string' as const, description: 'Framework to use', required: false, enum: ['vanilla', 'react', 'vue', 'angular', 'svelte'], default: 'vanilla' }, designSystem: { type: 'string' as const, description: 'Design system to follow', required: false, default: 'custom' }, responsive: { type: 'boolean' as const, description: 'Make component responsive', required: false, default: true }, accessible: { type: 'boolean' as const, description: 'Include accessibility features', required: false, default: true }, animations: { type: 'boolean' as const, description: 'Include animations', required: false, default: false }, darkMode: { type: 'boolean' as const, description: 'Include dark mode support', required: false, default: false }, saveDirectory: { type: 'string' as const, description: 'Directory to save the component project (e.g., "C:\\dev\\my-project"). If not provided, user will be prompted to specify location.', required: false }, context: { type: 'object' as const, description: 'Rich context object with brand information, design references, content, colors, typography, and technical requirements', required: false } };
• src/validation/schemas.ts:265-288 (schema)

  Output response TypeScript interface defining expected structure for generate_responsive_component response.
  export interface GenerateResponsiveComponentResponse extends BaseResponse { data: { component: { html: string; css: string; javascript?: string; framework?: string; }; features: { responsive: boolean; accessible: boolean; darkMode: boolean; animations: boolean; browserSupport: string[]; }; accessibility: { ariaAttributes: string[]; keyboardSupport: string[]; screenReaderSupport: boolean; wcagLevel: string; }; usage: string; }; }
• src/plugins/index.ts:29-52 (registration)

  Dynamic plugin registration: scans src/prompts/generate/ directory, loads responsive-component.ts (and others), instantiates classes extending BasePlugin, and registers them by name.
  async loadPlugins(promptsDir: string): Promise<void> { const categories = ['analyze', 'generate', 'custom', 'system', 'fun']; for (const category of categories) { const categoryPath = path.join(promptsDir, category); try { const files = await fs.readdir(categoryPath); for (const file of files) { if (file.endsWith('.js') && !file.includes('.test.')) { // Only load .js files, skip .d.ts and tests await this.loadPlugin(path.join(categoryPath, file), category as any); } } } catch (error) { // Silent error handling to avoid JSON-RPC interference // console.error(`Error loading plugins from ${category}:`, error); } } // Load system plugins from shared (cache management) await this.loadSystemPlugins(path.join(promptsDir, 'shared')); }
• src/prompts/generate/responsive-component.ts:441-513 (helper)

  Key helper: auto-saves generated component as complete project with demo, README, package.json; handles multi-file output extraction and browser-ready demo.
  private async autoSaveComponent(params: any, generatedContent: string): Promise<any> { const { name, framework, saveDirectory } = params; const componentName = name.charAt(0).toUpperCase() + name.slice(1); // Capitalize first letter // Use specified directory or default to DEV folder const baseDir = saveDirectory || `C:/DEV/components/${componentName.toLowerCase()}-component`; // Normalize path separators for consistency const normalizedBaseDir = baseDir.replace(/\\/g, '/'); // Create directory structure await this.ensureDirectory(normalizedBaseDir); await this.ensureDirectory(`${normalizedBaseDir}/src`); await this.ensureDirectory(`${normalizedBaseDir}/styles`); await this.ensureDirectory(`${normalizedBaseDir}/demo`); const savedFiles = []; try { // Extract different sections from the generated content const sections = this.extractSections(generatedContent); // Save component file if (sections.component) { const componentExtension = this.getComponentExtension(framework); const componentPath = `${normalizedBaseDir}/src/${componentName}.${componentExtension}`; await this.writeFile(componentPath, sections.component); savedFiles.push(componentPath); } // Save CSS file if (sections.css) { const cssPath = `${normalizedBaseDir}/styles/${componentName}.css`; await this.writeFile(cssPath, sections.css); savedFiles.push(cssPath); } // Save demo HTML file const demoHtml = this.generateDemoHtml(componentName, sections, params); const demoPath = `${normalizedBaseDir}/demo/index.html`; await this.writeFile(demoPath, demoHtml); savedFiles.push(demoPath); // Save README.md with documentation const readme = this.generateReadme(componentName, sections, params); const readmePath = `${normalizedBaseDir}/README.md`; await this.writeFile(readmePath, readme); savedFiles.push(readmePath); // Save package.json for npm projects if (framework !== 'vanilla') { const packageJson = this.generatePackageJson(componentName, framework); const packagePath = `${normalizedBaseDir}/package.json`; await this.writeFile(packagePath, JSON.stringify(packageJson, null, 2)); savedFiles.push(packagePath); } return { success: true, projectPath: normalizedBaseDir, savedFiles, demoUrl: `file://${normalizedBaseDir.replace(/\//g, '\\\\')}\\\\demo\\\\index.html`, message: `Component saved successfully! Open ${normalizedBaseDir}/demo/index.html in browser to test.` }; } catch (error) { return { success: false, error: error.message, partialFiles: savedFiles }; } }