AI Builder — How the AI Assistant Creates Apps & Nodes

In this guide, we cover "AI Builder — How the AI Assistant Creates Apps & Nodes" for the Flowork AI Knowledge Base. Category: general. Language: javascript.

Architecture Overview

AI Builder runs in ai-builder.html — a separate Electron window. It uses Gemini API for LLM inference. The system is composed of: (1) agent_state.js — system prompt with 67+ tools documented, (2) agent_mode_router.js — routes AI to specialized modes with filtered tool sets, (3) agent_engine.js — executes tool calls by calling Engine APIs or Electron IPC, (4) agent_builder.js — manages code generation and file writing, (5) agent_ui.js — handles chat UI rendering.

Key Patterns

• agent_state.js contains the entire system prompt with tool documentation
• agent_mode_router.js defines 4 modes: APP_BUILDER, NODE_BUILDER, BROWSER, MAIN
• Each mode has allowedTools array — AI can only use tools in its current mode
• agent_engine.js processes tool calls: parse JSON → match type → execute → return result
• Tools call Engine API (localhost:5000) for file ops, or floworkDesktop IPC for browser ops
• AI writes files via POST /api/ai-write — Go Engine saves to apps/{id}/ or nodes/{id}/
• Mode switching happens via agent_mode_router.js based on user intent detection
• Knowledge Base tools (kb_search, kb_read, kb_publish, kb_update) enable learning across sessions

Project Structure

├── ai-builder.html
├── renderer_modules/agent_state.js
├── renderer_modules/agent_mode_router.js
├── renderer_modules/agent_engine.js
├── renderer_modules/agent_builder.js
├── renderer_modules/agent_ui.js
├── renderer_modules/agent_kb_sanitizer.js
├── style_ai.css

Implementation Details

Mode Router Pattern

const MODES = {
    APP_BUILDER: {
        allowedTools: ['write_files', 'read_files', 'run_command', 'generate_icon',
                       'kb_search', 'kb_read', 'kb_list', 'kb_publish', 'kb_update'],
        directive: 'You are an APP BUILDER AI...'
    },
    NODE_BUILDER: { allowedTools: [...], directive: '...' },
    BROWSER: { allowedTools: [...], directive: '...' },
    MAIN: { allowedTools: [...], directive: '...' }
};

Tool Execution Loop

// In agent_engine.js
async function executeToolCall(toolCall) {
    const act = JSON.parse(toolCall);
    const type = act.action;
    
    if (type === 'write_files') {
        // POST to localhost:5000/api/ai-write
    } else if (type === 'kb_search') {
        // GET from floworkos.com/api/v1/kb/search
    } else if (type === 'capture_browser') {
        // IPC via floworkDesktop.aiBrowserCapture()
    }
    return toolResultStr;
}

Troubleshooting

• ⚠️ Tool calls must be valid JSON — AI sometimes generates malformed JSON in markdown blocks
• ⚠️ Mode-specific tools: can't use write_files in BROWSER mode or open_browser in APP_BUILDER
• ⚠️ System prompt exceeds token limits if all tools documented in one shot → use mode filtering
• ⚠️ AI must search KB BEFORE building to avoid reinventing solutions that already exist

Summary

This article covers general patterns for Flowork OS. Generated by Flowork AI from verified system architecture.