### Install ContentBuilder via NPM Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Use npm to install the ContentBuilder library and its runtime component. ```bash npm install @innovastudio/contentbuilder @innovastudio/contentbuilder-runtime ``` -------------------------------- ### React - View Content Example Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Set up a React component to display saved content using the ContentBuilder runtime. This example retrieves content from local storage and renders it into a specified container. Ensure the 'is-container' class is applied. ```tsx import { useEffect, useRef } from 'react' import ContentBuilderRuntime from '@innovastudio/contentbuilder-runtime' import '@innovastudio/contentbuilder-runtime/dist/contentbuilder-runtime.css' export default function ViewPage() { const containerRef = useRef(null) useEffect(() => { const savedHtml = localStorage.getItem('content') || '

No content available.

' if (containerRef.current) { // Render content containerRef.current.innerHTML = '' const range = document.createRange() const fragment = range.createContextualFragment(savedHtml) containerRef.current.appendChild(fragment) // Initialize runtime const runtime = new ContentBuilderRuntime(); runtime.init(); // Cleanup return () => { runtime?.destroy(); }; } }, []); return (

); } ``` -------------------------------- ### ContentBuilder Initialization with OpenAI Configuration (Commented Out) Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Example configuration for ContentBuilder using OpenAI, commented out in the source. This shows how to set command URLs, system model, and available code and chat models for OpenAI. ```javascript /* sendCommandUrl: '/sendcommand', sendCommandStreamUrl: '/sendcommand_stream', systemModel: 'gpt-4o-mini', // Configure model for analyzing request codeModels: [ { id: 'gpt-5.1-2025-11-13', label: 'GPT-5.1' }, { id: 'gpt-5-mini-2025-08-07', label: 'GPT-5 Mini' }, { id: 'gpt-4.1-2025-04-14', label: 'GPT-4.1' }, { id: 'gpt-4.1-mini-2025-04-14', label: 'GPT-4.1 Mini' }, { id: 'gpt-5.1-codex', label: 'GPT-5.1 Codex' }, { id: 'gpt-5.1-codex-mini', label: 'GPT-5.1 Codex Mini' }, ], chatModels: [ { id: 'gpt-4o-mini', label: 'GPT-4o Mini' }, { id: 'gpt-5-mini-2025-08-07', label: 'GPT-5 Mini' }, { id: 'gpt-5.1-2025-11-13', label: 'GPT-5.1' }, { id: 'gpt-5.1-chat-latest', label: 'GPT-5.1 Chat' }, ], defaultChatSettings: { codeModel: 'gpt-5-mini-2025-08-07', chatModel: 'gpt-5-mini-2025-08-07', */ ``` -------------------------------- ### HTML Example: Editing Mode with Local Storage Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md This example demonstrates initializing ContentBuilder in an HTML file, loading content from local storage or a default, and saving the edited content back to local storage. It also initializes the runtime. ```html ContentBuilder Example

``` -------------------------------- ### Install ContentBuilder via CDN Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Include the ContentBuilder and runtime CSS and JavaScript files directly in your HTML using CDN links. ```html ``` -------------------------------- ### Implement Localization with Language Files Source: https://context7.com/innovastudio-dev/contentbuilder/llms.txt Translate the editor UI by providing a language object during initialization. This example shows French translations for common text elements. ```javascript // locales/fr.js const _txt = new Array(); _txt["Bold"] = "Gras"; _txt["Italic"] = "Italique"; _txt["Underline"] = "Souligné"; _txt["Insert Link"] = "Insérer un lien"; export default _txt; ``` ```javascript import texts from './locales/fr'; const builder = new ContentBuilder({ container: '.container', lang: texts }); ``` -------------------------------- ### Card List Component Usage Example Source: https://context7.com/innovastudio-dev/contentbuilder/llms.txt Example of how to use the card-list component in HTML. Ensure the data-cb-type attribute is set to 'card-list' and specify the number of columns using data-cb-columns. ```html

Card 1

Description 1

``` -------------------------------- ### HTML - View Content Example Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Use this HTML structure to display content generated by ContentBuilder in viewing mode. Ensure the 'is-container' class is applied to your content wrapper. ```html View Content

``` -------------------------------- ### React - Edit Content Example Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Integrate ContentBuilder into a React application for content editing. This example initializes the builder, loads snippets and initial content, and includes save functionality. Remember to clean up instances on component unmount. ```tsx import { useEffect, useRef } from 'react' import ContentBuilder from '@innovastudio/contentbuilder' import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css' // Runtime library import ContentBuilderRuntime from '@innovastudio/contentbuilder-runtime' import '@innovastudio/contentbuilder-runtime/dist/contentbuilder-runtime.css' function App() { const builderRef = useRef(null); useEffect(() => { // Initialize ContentBuilder builderRef.current = new ContentBuilder({ container: '.container' }); // Load snippets builderRef.current.loadSnippets('/assets/minimalist-blocks/content.js') // Load initial content const savedHtml = localStorage.getItem('content') || `

Hello World

Start editing your content here.

`; builderRef.current.loadHtml(savedHtml) // Initialize runtime let runtime: ContentBuilderRuntime | null = new ContentBuilderRuntime(); runtime.init(); // Cleanup return () => { builderRef.current?.destroy() runtime?.destroy(); runtime = null; }; }, []); const handleSave = () => { if (!builderRef.current) return; const html = builderRef.current.html(); localStorage.setItem('content', html) alert('Content saved!') }; return ( <>

); } export default App ``` -------------------------------- ### Customize Editing Controls and Toolbars Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Tailor the editing experience by disabling specific tools like the column tool, configuring buttons for various menus (element, row, quick add), and hiding the snippets dialog trigger. This example also shows how to reconfigure main, element, and icon toolbars. ```jsx const builder = new ContentBuilder({ container: '.container', columnTool: false, // Hide column tool // Configure buttons in the column menu (when columnTool is true) // columnMoreButtons: ['moveleft', 'moveright', 'moveup', 'movedown', 'increase', 'decrease', 'duplicate'], // Configure buttons in the element menu elementMoreButtons: ['moveup', 'movedown', 'duplicate'], // Configure buttons in the row menu rowMoreButtons: ['moveup', 'movedown', 'duplicate'], // Configure buttons in the "+" quick add popover quickAddButtons: [ 'paragraph', 'headline', 'image', 'list', 'heading1', 'heading2', 'heading3', 'heading4', 'quote', 'preformatted', 'map', 'youtube', 'video', 'audio', 'icon', 'svg', 'table', 'social', 'code', 'spacer', 'line' ], // Hide the Quick Add "More" button that opens the snippets dialog noSnippets: true, // Optional: Customize main toolbar buttons buttons: ['bold', 'italic', 'underline', 'formatting', 'color', 'align', 'textsettings', 'createLink', 'tags', '|', 'undo', 'redo', 'aiassistant', 'more'], buttonsMore: ['icon', 'svg', 'image', '|', 'list', 'font', 'formatPara', '|', 'html'], elementButtons: ['left', 'center', 'right', 'full', 'undo', 'redo', 'aiassistant', 'more'], elementButtonsMore: ['|', 'html'], iconButtons: ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'aiassistant', 'more'], iconButtonsMore: ['html'] }); ``` -------------------------------- ### Basic Usage with CDN Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Initialize ContentBuilder, load snippets and HTML content, and then initialize the runtime. Ensure all necessary CSS and JS files are included. ```html

``` -------------------------------- ### Basic Usage with NPM Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Import ContentBuilder and its runtime, initialize them, and load snippets and HTML content. Ensure CSS is also imported. ```javascript // Import ContentBuilder library import ContentBuilder from '@innovastudio/contentbuilder' import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css' // Import Runtime library import ContentBuilderRuntime from '@innovastudio/contentbuilder-runtime' import '@innovastudio/contentbuilder-runtime/dist/contentbuilder-runtime.css' // Initialize ContentBuilder const builder = new ContentBuilder({ container: '.container' }); // Load snippets (drag & drop blocks) builder.loadSnippets('assets/minimalist-blocks/content.js'); // Load initial HTML content builder.loadHtml( `

Lorem Ipsum is simply dummy text.

`); // Get the HTML content const html = builder.html(); // Initialize Runtime const runtime = new ContentBuilderRuntime(); runtime.init(); ``` -------------------------------- ### Registering and Initializing ContentBox Runtime Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/plugin-development.md This JavaScript code demonstrates how to register a plugin with the ContentBox runtime and then initialize it. Ensure the plugin's URL and CSS path are correctly specified. ```javascript const runtime = new ContentBoxRuntime({ plugins: { 'click-counter': { url: '/assets/plugins/click-counter/index.js', css: '/assets/plugins/click-counter/style.css' } } }); runtime.init(); ``` -------------------------------- ### Initialize ContentBuilder with Multiple Themes Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Define multiple UI themes (light, dark, custom) using the `themes` option during ContentBuilder initialization. Each theme is an array containing preview color, category name, and CSS file path. ```jsx const builder = new ContentBuilder({ container: '.container', themes: [ ['#ffffff', '', ''], // Light theme (default) ['#282828', 'dark', 'contentbuilder/themes/dark.css'], // Dark theme ['#0088dc', 'colored', 'contentbuilder/themes/colored-blue.css'] // Custom colored theme ] }); ``` -------------------------------- ### Retrieve HTML from Specific Editable Areas Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Get the generated HTML content from a particular editable area using the `html()` method, passing the target container element as an argument. ```jsx let html1 = builder.html(document.querySelector('.area1')); // Get content of first area ``` ```jsx let html2 = builder.html(document.querySelector('.area2')); // Get content of second area ``` -------------------------------- ### viewConfig() Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Programmatically open the Preferences dialog. ```APIDOC ## viewConfig() ### Description Programmatically open the Preferences dialog. ### Method Signature ```javascript builder.viewConfig(); ``` ``` -------------------------------- ### Configure Bootstrap Grid System Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Initialize ContentBuilder with Bootstrap's row and column classes to generate compatible markup. ```javascript const builder = new ContentBuilder({ container: '.container', row: 'row', cols: [ 'col-md-1', 'col-md-2', 'col-md-3', 'col-md-4', 'col-md-5', 'col-md-6', 'col-md-7', 'col-md-8', 'col-md-9', 'col-md-10', 'col-md-11', 'col-md-12' ] }); ``` -------------------------------- ### Configure Image Model and Size Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Set the image generation model and size. Ensure the model path is correct for your deployment. ```javascript imageModel: 'fal-ai/nano-banana', imageSize: '' ``` -------------------------------- ### Disable Loading of Saved Preferences Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Prevent ContentBuilder from loading previously saved user preferences (like theme selection) by setting `clearPreferences` to `true` during initialization. This ensures the editor starts with default settings. ```jsx const builder = new ContentBuilder({ container: '.container', clearPreferences: true }); ``` -------------------------------- ### Basic Plugin with Simple Settings Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/plugin-development.md Defines a plugin with a name, display name, version, and settings that will generate an auto-UI. Access settings via the `options` object in the `mount` function. ```javascript export default { name: 'logo-loop', displayName: 'Logo Loop', version: '1.0.0', settings: { speed: { type: 'number', label: 'Animation Speed', default: 20, min: 5, max: 60, step: 1, unit: 's' }, direction: { type: 'select', label: 'Scroll Direction', default: 'left', options: [ { value: 'left', label: 'Left to Right' }, { value: 'right', label: 'Right to Left' } ] }, pauseOnHover: { type: 'boolean', label: 'Pause on Hover', default: true } }, mount: function(element, options) { // Access settings via options.speed, options.direction, etc. } }; ``` -------------------------------- ### Basic Plugin Development Source: https://context7.com/innovastudio-dev/contentbuilder/llms.txt Create a ContentBuilder plugin by exporting an object with name, version, and mount/unmount functions. Register it with the Runtime. ```javascript // plugins/click-counter/index.js export default { name: 'click-counter', version: '1.0.0', mount: function(element, options) { let count = 0; element.addEventListener('click', function() { count++; element.textContent = 'Clicks: ' + count; }); return { count }; }, unmount: function(element, instance) { // Cleanup if needed } }; ``` ```javascript // Register with the Runtime const runtime = new ContentBuilderRuntime({ plugins: { 'click-counter': { url: '/assets/plugins/click-counter/index.js', css: '/assets/plugins/click-counter/style.css' } } }); runtime.init(); ``` ```html

Click me!

``` -------------------------------- ### Async Mount for Complex Plugins Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/plugin-development.md This JavaScript code shows how to use an `async mount` function for plugins that require asynchronous operations during initialization. It includes basic error handling. ```javascript export default { name: 'complex-plugin', version: '1.0.0', async mount(element, options) { try { await someAsyncOperation(); const instance = createComponent(element, options); return instance; } catch (error) { console.error('Plugin mount error:', error); return null; } } }; ``` -------------------------------- ### Configure Tailwind CSS Grid System Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Initialize ContentBuilder with Tailwind's utility classes for a responsive, flex-based grid layout. ```javascript const builder = new ContentBuilder({ container: '.container', row: 'flex flex-col md:flex-row', cols: [ 'w-full md:w-1/12 px-4', 'w-full md:w-2/12 px-4', 'w-full md:w-3/12 px-4', 'w-full md:w-4/12 px-4', 'w-full md:w-5/12 px-4', 'w-full md:w-6/12 px-4', 'w-full md:w-7/12 px-4', 'w-full md:w-8/12 px-4', 'w-full md:w-9/12 px-4', 'w-full md:w-10/12 px-4', 'w-full md:w-11/12 px-4', 'w-full px-4' ] }); ``` -------------------------------- ### Basic ContentBuilder Initialization Source: https://context7.com/innovastudio-dev/contentbuilder/llms.txt Initialize ContentBuilder by targeting a container element, loading snippets, and seeding with initial HTML. The runtime renderer must also be initialized separately. ```javascript import ContentBuilder from '@innovastudio/contentbuilder'; import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css'; import ContentBuilderRuntime from '@innovastudio/contentbuilder-runtime'; import '@innovastudio/contentbuilder-runtime/dist/contentbuilder-runtime.css'; const builder = new ContentBuilder({ container: '.container' }); // Load drag-and-drop snippet blocks builder.loadSnippets('assets/minimalist-blocks/content.js'); // Seed with existing content builder.loadHtml( `

Hello World

Start editing your content here.

`); // Initialize the runtime renderer const runtime = new ContentBuilderRuntime(); runtime.init(); // Retrieve HTML to save const html = builder.html(); ``` -------------------------------- ### ContentBuilder Initialization with OpenRouter Configuration Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/README.md Initialize ContentBuilder with specific settings for OpenRouter, including command URLs, system model, and lists of available code and chat models. ```javascript const builder = new ContentBuilder({ container: '.container', // Enable Code Chat (supports OpenAI or OpenRouter) // clearChatSettings: true, // clear chat settings on load // startCodeChat: true, // automatically open Code Chat // OpenRouter: sendCommandUrl: '/openrouter', sendCommandStreamUrl: '/openrouter_stream', systemModel: 'openai/gpt-4o-mini', codeModels: [ { id: 'anthropic/claude-opus-4.5', label: 'Claude Opus 4.5' }, { id: 'google/gemini-3-pro-preview', label: 'Google Gemini 3 Pro Preview' }, { id: 'google/gemini-2.5-flash', label: 'Google Gemini 2.5 Flash' }, { id: 'qwen/qwen3-coder', label: 'Qwen 3 Coder' }, { id: 'openai/gpt-5-mini', label: 'GPT-5 Mini' }, { id: 'openai/gpt-5.1-codex-mini', label: 'GPT-5.1-Codex-Mini' }, { id: 'openai/gpt-5.1-codex', label: 'GPT-5.1-Codex' }, { id: 'anthropic/claude-sonnet-4.5', label: 'Claude Sonnet 4.5' }, { id: 'x-ai/grok-code-fast-1', label: 'Grok Code Fast 1' }, { id: 'mistralai/codestral-2508', label: 'Mistral Codestral 2508' }, { id: 'mistralai/devstral-small', label: 'Mistral Devstral Small' }, { id: 'openai/gpt-oss-120b', label: 'GPT OSS 120B' }, { id: 'google/gemini-2.5-flash-lite', label: 'Gemini 2.5 Flash Lite' }, { id: 'google/gemini-2.5-pro', label: 'Gemini 2.5 Pro' }, { id: 'z-ai/glm-4.6', label: 'GLM 4.6' }, { id: 'x-ai/grok-4-fast', label: 'Grok 4 Fast' }, { id: 'mistralai/mistral-large-2407', label: 'Mistral Large 2407' }, { id: 'mistralai/mistral-nemo', label: 'Mistral Nemo' }, { id: 'moonshotai/kimi-k2-0905', label: 'Kimi K2' }, { id: 'qwen/qwen3-vl-235b-a22b-instruct', label: 'Qwen 3 VL 235B' }, { id: 'deepseek/deepseek-v3.1-terminus', label: 'DeepSeek V3.1 Terminus' }, { id: 'deepseek/deepseek-chat-v3-0324', label: 'DeepSeek Chat V3' }, { id: 'minimax/minimax-m2', label: 'MiniMax M2' }, ], chatModels: [ { id: 'openai/gpt-4o-mini', label: 'GPT-4o Mini' }, { id: 'openai/gpt-4o', label: 'GPT-4o' }, { id: 'openai/gpt-5.1', label: 'GPT-5.1' }, { id: 'openai/gpt-5.1-chat', label: 'GPT-5.1 Chat' }, { id: 'openai/gpt-5-mini', label: 'GPT-5 Mini' }, { id: 'openai/gpt-5-nano', label: 'GPT-5 Nano' }, { id: 'anthropic/claude-sonnet-4.5', label: 'Claude Sonnet 4.5' }, { id: 'google/gemini-2.5-flash', label: 'Google Gemini 2.5 Flash' }, { id: 'google/gemini-2.5-flash-lite', label: 'Gemini 2.5 Flash Lite' }, { id: 'google/gemini-2.5-pro', label: 'Gemini 2.5 Pro' }, { id: 'z-ai/glm-4.6', label: 'GLM 4.6' }, { id: 'x-ai/grok-4-fast', label: 'Grok 4 Fast' }, { id: 'mistralai/mistral-large-2407', label: 'Mistral Large 2407' }, { id: 'mistralai/mistral-nemo', label: 'Mistral Nemo' }, { id: 'moonshotai/kimi-k2-0905', label: 'Kimi K2' }, { id: 'qwen/qwen3-vl-235b-a22b-instruct', label: 'Qwen 3 VL 235B' }, { id: 'deepseek/deepseek-v3.1-terminus', label: 'DeepSeek V3.1 Terminus' }, { id: 'deepseek/deepseek-chat-v3-0324', label: 'DeepSeek Chat V3' }, { id: 'minimax/minimax-m2', label: 'MiniMax M2' }, ], defaultChatSettings: { codeModel: 'google/gemini-3-pro-preview', chatModel: 'openai/gpt-5-mini', imageModel: 'fal-ai/nano-banana', imageSize: '' }, }); ``` -------------------------------- ### Using File Picker in Custom Editor Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/plugin-development.md Leverage the `builder.openFilePicker` method within a custom editor to allow users to select images, videos, audio, or other files. ```javascript openContentEditor: function(element, builder, onChange) { // Open file picker for images builder.openFilePicker('image', (url) => { imageElement.src = url; onChange(); }); // Open file picker for videos builder.openFilePicker('video', (url) => { videoElement.src = url; onChange(); }); // Available types: 'image', 'video', 'audio', 'file' } ``` -------------------------------- ### Settings to HTML Attributes Conversion Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/plugin-development.md Demonstrates the automatic conversion of plugin settings from camelCase to kebab-case for HTML attributes and back to camelCase for JavaScript options. ```javascript // Setting key: camelCase settings: { pauseOnHover: { type: 'boolean', default: true } } // HTML attribute: kebab-case with data-cb- prefix data-cb-pause-on-hover="true" // Options object: camelCase mount: function(element, options) { console.log(options.pauseOnHover); // true } ``` -------------------------------- ### Configure Remote Asset Paths Source: https://context7.com/innovastudio-dev/contentbuilder/llms.txt Set up CDN or cloud-hosted asset paths for ContentBuilder. This includes general assets, fonts, snippets, modules, plugins, and media. ```javascript const builder = new ContentBuilder({ container: '.container', assetPath: 'https://cdn.example.com/assets/', fontAssetPath: 'https://cdn.example.com/assets/fonts/', snippetUrl: 'https://cdn.example.com/assets/minimalist-blocks/content.js', snippetPath: 'https://cdn.example.com/assets/minimalist-blocks/', snippetPathReplace: ['assets/minimalist-blocks/images/', 'https://cdn.example.com/assets/minimalist-blocks/images/'], modulePath: 'https://cdn.example.com/assets/modules/', pluginPath: 'https://cdn.example.com/contentbuilder/', mediaPath: 'https://cdn.example.com/assets/gallery/' }); ``` -------------------------------- ### Initialization with Custom Headers Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Customize HTTP headers for server requests made by ContentBuilder.js during initialization. ```APIDOC ## Initialization with Custom Headers ### Description Customize HTTP headers for server requests made by ContentBuilder.js during initialization. ### Usage ```jsx const builder = new ContentBuilder({ container: '.container', headers: { 'Authorization': 'Bearer YOUR_TOKEN_HERE', 'X-Custom-Header': 'CustomValue' } }); ``` ### Note The `'Content-Type': 'application/json'` header is automatically added by default. ``` -------------------------------- ### Programmatically Open Preference Dialog Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Open the Preferences dialog from code using the `viewConfig()` method. ```jsx builder.viewConfig(); ``` -------------------------------- ### Configure AI Image Generation with Fal.ai Endpoints Source: https://context7.com/innovastudio-dev/contentbuilder/llms.txt Enable text-to-image generation within the AI Assistant by configuring proxy endpoints for Fal.ai to handle media generation requests, status checks, and result retrieval. ```javascript // Node.js server config (.env): // FAL_API_KEY=your_fal_api_key const builder = new ContentBuilder({ container: '.container', defaultImageGenerationProvider: 'fal', generateMediaUrl_Fal: '/api/request-fal', checkRequestStatusUrl_Fal: '/api/status-fal', getResultUrl_Fal: '/api/result-fal' }); // Users can now type a text prompt in the AI panel to generate and embed images. ``` -------------------------------- ### Integrate File Picker with `filePicker` Parameter Source: https://context7.com/innovastudio-dev/contentbuilder/llms.txt Configure ContentBuilder to use an iframe-based asset manager for file selection. Specify the path to your asset manager and optionally its display size. ```javascript const builder = new ContentBuilder({ container: '.container', filePicker: 'assets.html', // Path to your asset manager app filePickerSize: 'large' // 'medium' (default) | 'large' | 'fullscreen' }); // Inside assets.html, when a file is selected: // builder.selectAsset('uploads/photo.jpg'); ``` -------------------------------- ### Configure AI Assistant (Code Chat) Endpoints and Models Source: https://context7.com/innovastudio-dev/contentbuilder/llms.txt Set up ContentBuilder to use AI for content generation by configuring server-side endpoints for commands and streams, and specifying system, code, and chat models. ```javascript const builder = new ContentBuilder({ container: '.container', sendCommandUrl: '/openrouter', sendCommandStreamUrl: '/openrouter_stream', systemModel: 'openai/gpt-4o-mini', codeModels: [ { id: 'anthropic/claude-sonnet-4.5', label: 'Claude Sonnet 4.5' }, { id: 'google/gemini-2.5-flash', label: 'Gemini 2.5 Flash' }, { id: 'openai/gpt-5-mini', label: 'GPT-5 Mini' } ], chatModels: [ { id: 'openai/gpt-4o-mini', label: 'GPT-4o Mini' }, { id: 'openai/gpt-4o', label: 'GPT-4o' } ], defaultChatSettings: { codeModel: 'google/gemini-2.5-flash', chatModel: 'openai/gpt-4o-mini', imageModel: 'fal-ai/nano-banana', imageSize: '' } }); ``` -------------------------------- ### Simple Settings Configuration Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/plugin-development.md This JavaScript object defines simple configuration options for a plugin, including types, labels, and default values. It supports types like 'number', 'boolean', and 'select'. ```javascript settings: { columns: { type: 'number', label: 'Columns', default: 3 }, showTitles: { type: 'boolean', label: 'Show Titles', default: true }, theme: { type: 'select', label: 'Theme', options: [...] } } ``` -------------------------------- ### Enable Canvas Mode Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/reference.md Activate Canvas mode by setting 'canvas' to true and providing a 'previewURL' for free positioning of content blocks. ```javascript const builder = new ContentBuilder({ container: '.container', canvas: true, previewURL: 'preview-canvas.html' }); ``` -------------------------------- ### The mount Function Signature and Purpose Source: https://github.com/innovastudio-dev/contentbuilder/blob/main/plugin-development.md Illustrates the signature of the `mount` function, which is the core of a plugin. It receives the target HTML element and its associated options, and must return an object containing any state or data to be tracked by the runtime. It can be asynchronous. ```javascript mount: function(element, options) { // element = the HTML element (

Card 1

Hello World

Hello World

Welcome

New Card