Merge branch 'main' of https://github.com/codeboltai/codeboltai.github.io

Author: Nursid

docs/user/2_onboarding.md

@@ -1,40 +1,90 @@
 # Onboarding
 
-### Step 1: Getting Started
+### Getting Started
+
 Begin by clicking the **Get Started** button on the home page.
 
 ![get started](../../static/img/get_started.png)
 
+### Sign Up
 
-### Step 2: Sign Up
 Once you click **Get Started**, you will be redirected to the portal for **Sign Up**.
 
-
 Here, you will have two options for signing up:
+
 - **Google**
 - **GitHub**
 
 ![sign up](../../static/img/sing-up.png)
 
-### Step 3: Authentication
+### Authentication
+
 - **If you choose Google or Github**:
   - You will be redirected to Google's or Github authentication page for Verification.
   - If you are a new user, you will be redirected to the username page.
-You need to create and add a username. After adding the username, you can proceed further.
+    You need to create and add a username. After adding the username, you can proceed further.
 
 ![username](../../static/img/username.png)
 
 - After successful authentication, a message will appear:  
-    *"You have successfully signed in. You can close this Page, Now you can return to the app"*
+   _"You have successfully signed in. You can close this Page, Now you can return to the app"_
   - Once the authentication process is completed, you can proceed to use the application.
 
-
 ![authentication success](../../static/img/authentication-success.png)
 
-After successfully completing the onboarding process, users can sign in to explore the application dashboard. On the dashboard, users can:
+### First Time Users
+
+After signing in for the first time, you will see an onboarding screen
+
+Let's walk through every step
+
+1. **Welcome Screen**: Upon successful authentication, new users will be greeted with a welcome message. This screen serves as an introduction to the onboarding process.
+
+![Onboarding Welcome](../../static/onboarding/1.png)
+
+2. **Select Default Provider and Model**: In this step, you will choose your preferred provider from a range of options:
+
+   - Cloud Providers:
+     - OpenAI
+     - Anthropic
+   - Local Providers:
+     - LMStudio
+   - CodeBolt Provider
+
+   This selection will determine the default provider for you project(you can change it later).
+
+![Onboarding Provider Selection](../../static/onboarding/2.png)
+
+Now on the same page select a model provided by list of models from the selected provider
+(After entering correct key to provider you will se the list of models)
+
+![Onboarding Model Selection](../../static/onboarding/3.png)
+
+3. **Choose Default Workspace**: Select the default workspace where you'd like your project to be organized and managed.
+
+![Onboarding Welcome](../../static/onboarding/4.png)
+
+4. **Create Your First Project**: In this step, you will create your first project. Provide a name for your project and click "Create Project in workspace" to get started.
+
+![Onboarding Project Creation](../../static/onboarding/5.png)
+
+After clicking on "Create Project in workspace" this screen will pop-up
+
+Here we can see [Template](./Templates/template.md) and [My Templates](./Templates/myTemplates.md) <br/>
+Just give a name to you project or you can keep a random name and click "Create Project"
+
+![Onboarding Project Creation](../../static/onboarding/6.png)
+
+5. **Developer Page**: After creating your project, you will be taken to the Developer Page where you can start working on your project.
+
+   ![ Project Created](../../static/onboarding/7.png)
+
+6. **Congratulations!** You have successfully created your first project. You can now begin exploring the features and capabilities of the platform to build and publish your applications.
+
+### Returning Users
+
+For users who have previously completed the onboarding process, signing in through the portal will redirect you directly to the main application dashboard.
 
-* Create new project in the workspace or open the project folder.
-* Access recent projects and files for quick continuation of their work.
-* Create new workspace, accessible from the top-right of the dashboard..
+![Application Dashboard](../../static/img/codebolt_application.png)
 
-![dashboard](../../static/img/codebolt_application.png)
+From here, you can access your existing projects, create new projects, and leverage the full capabilities of the CodeBolt platform to build and publish your applications efficiently.

docs/user/Templates/myTemplates.md

@@ -0,0 +1,17 @@
+# My Template
+
+The Template  is designed to facilitate the quick creation of new projects with predefined setups for popular JavaScript frameworks and libraries. By using templates, developers can skip the repetitive tasks involved in setting up project configurations and can jumpstart their work with an organized structure. The available templates include setups for React, Express, Next.js, and an Empty project option.
+
+<!-- ![get started](../../static/img/template.png) -->
+
+
+### Template Options
+* React: Sets up a new React app with ES6+, JSX, and Webpack or Vite. Essential dependencies and folder structure are pre-configured. Start quickly by selecting the React template.
+
+* Express: Creates a back-end Express project for RESTful APIs, with basic middleware and error handling. Provides a suitable structure for server-side development; select Express to get started.
+
+* Next.js: Initializes a Next.js app with routing, page, and API setup. Perfect for full-stack development; choose Next.js to begin.
+
+* Empty: A minimal template with only essential files. Ideal for custom setups; use Empty to create a basic project foundation.
+
+**Each template is selectable for quick project setup!**

docs/user/template.md renamed to docs/user/Templates/template.md

@@ -2,7 +2,7 @@
 
 The Template  is designed to facilitate the quick creation of new projects with predefined setups for popular JavaScript frameworks and libraries. By using templates, developers can skip the repetitive tasks involved in setting up project configurations and can jumpstart their work with an organized structure. The available templates include setups for React, Express, Next.js, and an Empty project option.
 
-![get started](../../static/img/template.png)
+<!-- ![get started](../../static/img/template.png) -->
 
 
 ### Template Options

docs/user/module/settings/ApplicationSettings.md

@@ -0,0 +1,27 @@
+The Agent Steps feature in Universal Agent allows you to define a sequence of up to six steps that the AI assistant will follow when working on a task. These steps can include:
+
+1. Code Generation
+2. Testing
+3. Deployment  
+4. Documentation
+5. Code Review
+6. User Questions
+
+
+![Agent Steps](../../../../../static/settings/appSettings/7.png)
+
+
+For each step, you can specify which particular agent should be used. This allows you to customize the workflow and leverage the strengths of different AI models based on the task at hand.
+
+If no agent is explicitly set for a step, Universal Agent will automatically select the most appropriate agent based on the nature of the step and the context provided. This ensures that the optimal AI model is used for each phase of the development process.
+
+By breaking down the workflow into discrete steps and assigning specialized agents to each one, the Agent Steps feature streamlines the development process and helps ensure high-quality output at every stage.
+
+### Advanced Usage
+
+For each step, you can define more than one agent in a priority list. If the first agent is not able to complete the step satisfactorily, Universal Agent will automatically try the next agent in the list for that same step. This provides additional flexibility and redundancy in case a particular AI model is not well-suited for a given task or context.
+
+
+### Video Guide
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/OzxfDPsTtb4?si=W2ntUU05P200gpPe" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

docs/user/module/settings/ApplicationSettings/AgentSteps.md

@@ -0,0 +1 @@
+### Coming Soon 

docs/user/module/settings/ApplicationSettings/Agents.md

@@ -0,0 +1,12 @@
+# Application Settings
+
+In the **Application Settings**, you can configure various options to tailor the experience according to your needs. Below are the available settings:
+
+1. [Default Settings](DefaultSettings)
+2. [LLMs](LLMs)
+3. [Agents](Agents)
+4. [Universal Agent](UniversalAgent)
+5. [Code Editor Settings](CodeEditorSetting)
+6. [Global Settings](GlobalSettings)
+7. [Agents Steps](AgentSteps)
+8. [Environment and Services](EnvironmentAndServices)

docs/user/module/settings/ApplicationSettings/ApplicationSettings.md

@@ -0,0 +1 @@
+### Coming Soon 

docs/user/module/settings/ApplicationSettings/CodeEditorSetting.md

@@ -0,0 +1,11 @@
+### Default Settings
+- In the **Default Settings**, you can set up the application's **LLM** and select a **Model**.
+The Default Provider and model you select during [onboarding](/docs/user/onboarding#first-time-users) you update it here. <br/>
+Also you can update Embedding provider and model.
+
+![Default Settings](../../../../../static/settings/appSettings/1.png)
+
+
+### Video Guide
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/HPylFmKg3JM?si=IWPZYx_gxqZhJOIy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

docs/user/module/settings/ApplicationSettings/DefaultSettings.md

@@ -0,0 +1,26 @@
+### Environment and Services
+
+The **Environment and Services** section allows you to configure and manage the runtime environment and external services for your applications. This is particularly useful when working with projects that require specific language runtimes or depend on external services.
+
+### Key features include
+
+#### Language Runtimes
+ You can verify the presence of required language runtimes, such as Python, Node.js, or Java. This ensures that your application has the necessary runtime environment to execute properly.
+
+####  External Service Integration
+  You can configure connections to various external services that your application may rely on. Some commonly used services include:
+   - Redis
+   - PostgreSQL
+   - MongoDB
+
+   By providing the necessary connection URLs or configuration details, you can seamlessly integrate these services into your application.
+
+
+![EnvandServices](../../../../../static/settings/appSettings/8.png)
+
+By leveraging the **Environment and Services** section, you can streamline the setup and deployment process for your applications. It provides a centralized location to manage runtime dependencies and external service integrations, making it easier to develop, test, and deploy your applications across different environments.
+
+
+### Video Guide
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/PVpBjQBxKFQ?si=EeSKBg4GLvTBY1PV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

docs/user/module/settings/ApplicationSettings/EnvironmentAndServices.md

@@ -0,0 +1 @@
+### Coming Soon 

docs/user/module/settings/ApplicationSettings/GlobalSettings.md

@@ -0,0 +1,12 @@
+### LLMs
+- In the **LLMs** section, you can add more LLM providers such as Anthropic and LM Studio. 
+- After adding providers, you can select your preferred provider in the **Default Settings** section.
+
+![Default Settings](../../../../../static/settings/appSettings/2.png)
+
+- Make sure to update your settings after adding a new provider.
+
+
+### Video Guide
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/zqcxsVsAyDA?si=l2SQU82TtY5mwn4n" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

docs/user/module/settings/ApplicationSettings/LLMs.md

@@ -0,0 +1,20 @@
+### Universal Agent
+- In the **Universal Agent** section, you get two settings:
+  - Enable custom  Universal Agent
+  - Use offline Universal Agent
+
+![UniversalAgent](../../../../../static/settings/appSettings/4.png)
+
+## Enable Custom Universal Agent  
+
+When you enable this option, you will need to provide the URL of your own custom-made and deployed Universal Agent. This allows you to integrate a personalized AI assistant into the application.
+
+To help guide you through the process of creating and deploying your own Universal Agent, we recommend watching the video tutorial below:
+
+<iframe width="100%" height="315" src="https://www.youtube.com/embed/MXQM9l-PPr4?si=_Lo8-U-u4mj0PVoX" title="Creating a Custom Universal Agent" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Once you have successfully created and deployed your Universal Agent, simply enter the provided URL into the designated field within the application settings. The app will then establish a connection and begin utilizing your custom Universal Agent for enhanced functionality and personalized interactions.
+
+## Use Offline Universal Agent
+
+When you enable this option, the application will use the Universal Agent that is stored locally within the app itself. This means you can access the Universal Agent's functionality even without an internet connection, as it operates entirely offline.

docs/user/module/settings/ApplicationSettings/UniversalAgent.md

@@ -0,0 +1,6 @@
+# Project Setting
+
+The Project Settings module allows you to configure essential project parameters, technical details, secrets, knowledge base, instructions, and usage preferences. Each section within Project Settings serves a unique purpose, providing organized control over the project's configuration.
+
+
+### App Settings

docs/user/module/settings/ProjectSettings/projectSettings.md

@@ -1,5 +1,5 @@
 # Settings
 
 
-- [ApplicationSettings](./ApplicationSettings)
-- [projectSettings](./projectSettings)
+- [ApplicationSettings](./ApplicationSettings/ApplicationSettings.md)
+- [projectSettings](./ProjectSettings/projectSettings.md)