CogniBlocks User Interface

CogniBlocks provides an intuitive and streamlined development environment, allowing users to focus entirely on building and optimizing AI workflows. Let’s explore the various features and functionalities of the CogniBlocks UI.

---

Getting Started with the CogniBlocks Interface

Upon launching CogniBlocks, you’ll see the main workspace:

Component Library

On the left, you’ll find the Component Library, which houses predefined Core Modules and Workflows.

• Hover over the info icon to view a description of each component.

• Use the search bar to quickly find specific modules or workflows.

• If you need more workspace, you can collapse the Component Library using the left arrow icon.

---

Adding & Removing Components

Drag-and-Drop Workflow Assembly

The workspace is your canvas for building AI pipelines. You can drag components from the Component Library into the workspace to start assembling your AI system.

Removing Components

• To remove a module, right-click on it and select Close from the options.

• To remove an entire workflow, start a new workspace by clicking File → New.

---

Creating & Modifying Connections

Each module has input and output nodes that can be linked together.

Creating Connections

• Click on an output node, then drag the connection to the destination module.

Removing Connections

• Right-click on the link, then click the Close button that appears.

---

Saving & Loading Workflows

CogniBlocks allows users to save and share their AI pipelines effortlessly.

Saving Your Work

To save your current workflow:

• Navigate to File → Save As and follow the prompts.

Loading a Saved Workflow

To load a previously saved module or workflow:

• Go to File → Load and select either a Module or a Workflow.

---

Editing AI Modules with the Code Editor

The CogniBlocks Code Editor provides a built-in interface for modifying AI components without switching to an external editor.

Opening the Code Editor

To modify a module, click the </> icon on its header to open the Code Editor Sidebar.

---

Understanding the Code Editor Features

Viewing Module Files

The Editor Sidebar displays the internal files associated with a module.

• The module ID appears at the top.

• Click Toggle Full Screen for an expanded view.

• To close the editor, click Close.

Modifying AI Logic

To edit a module’s logic:

1. Open the Workspace tab in the Code Editor.

2. Click the Edit Code icon to modify the script.

3. Click Save to store your changes.

4. Click Compile & Run to test the updated module.

---

Managing AI Components

Importing Files & Folders

CogniBlocks allows you to import additional files for module customization.

• Click Import Folder or Import Files to bring external data into the workspace.

Testing AI Modules

Before integrating a module into a workflow, you can test it in isolation.

• Click Run Test to execute the test function in a separate container.

• Review the generated logs under the Logs tab.

---

Running & Debugging Workflows

Executing AI Workflows

To run a workflow, ensure that:

• At least one Compute Module is included.

• All connections between components are properly set.

Once everything is ready, click Run at the top of the main window.

Rebuilding Pipelines

If changes have been made to core components, you can rebuild the workflow by clicking Rebuild. This will regenerate all Docker images from scratch.

Debugging with Logs

While a workflow is running, a log window will display real-time execution logs.

• If the log window is closed, you can reopen it by clicking Logs in the top menu.

---

Enhancing Development with AI-Assisted Coding

Using AI for Code Assistance

CogniBlocks includes an AI-powered coding assistant to help generate and modify scripts.

To enable AI-assisted coding:

1. Set API Keys – Navigate to Settings → API Keys and enter your credentials.

2. Enter a Code Request – Type your logic into the prompt box and press Enter.

3. Apply AI Suggestions – If you like the output, compile the module to save the changes.

Note: API keys entered here are not accessible inside AI modules. To pass an API key to a module, use a Parameter Module instead.

---

Customizing the Interface

Developer Tools & Debugging

• Open Developer Tools via View → Toggle Developer Tools for deeper debugging.

Theme Customization

• Switch between Light Mode and Dark Mode under Settings → Theme to match your preference.