diff --git a/docs/1_index.md b/docs/1_index.md deleted file mode 100644 index e69de29..0000000 diff --git a/docs/2_Docs/application/10_additional_features/debug.md b/docs/2_Docs/10_additional_features/debug.md similarity index 100% rename from docs/2_Docs/application/10_additional_features/debug.md rename to docs/2_Docs/10_additional_features/debug.md diff --git a/docs/2_Docs/application/10_additional_features/git.md b/docs/2_Docs/10_additional_features/git.md similarity index 100% rename from docs/2_Docs/application/10_additional_features/git.md rename to docs/2_Docs/10_additional_features/git.md diff --git a/docs/2_Docs/application/10_additional_features/global-search.md b/docs/2_Docs/10_additional_features/global-search.md similarity index 100% rename from docs/2_Docs/application/10_additional_features/global-search.md rename to docs/2_Docs/10_additional_features/global-search.md diff --git a/docs/2_Docs/application/10_additional_features/marketplace.md b/docs/2_Docs/10_additional_features/marketplace.md similarity index 100% rename from docs/2_Docs/application/10_additional_features/marketplace.md rename to docs/2_Docs/10_additional_features/marketplace.md diff --git a/docs/2_Docs/application/10_additional_features/planner.md b/docs/2_Docs/10_additional_features/planner.md similarity index 100% rename from docs/2_Docs/application/10_additional_features/planner.md rename to docs/2_Docs/10_additional_features/planner.md diff --git a/docs/2_Docs/application/10_additional_features/preview.md b/docs/2_Docs/10_additional_features/preview.md similarity index 100% rename from docs/2_Docs/application/10_additional_features/preview.md rename to docs/2_Docs/10_additional_features/preview.md diff --git a/docs/2_Docs/application/10_additional_features/settings.md b/docs/2_Docs/10_additional_features/settings.md similarity index 100% rename from docs/2_Docs/application/10_additional_features/settings.md rename to docs/2_Docs/10_additional_features/settings.md diff --git a/docs/2_Docs/application/10_additional_features/terminal.md b/docs/2_Docs/10_additional_features/terminal.md similarity index 100% rename from docs/2_Docs/application/10_additional_features/terminal.md rename to docs/2_Docs/10_additional_features/terminal.md diff --git a/docs/2_Docs/1_index.md b/docs/2_Docs/1_index.md index cd3d452..7a66e9e 100644 --- a/docs/2_Docs/1_index.md +++ b/docs/2_Docs/1_index.md @@ -1 +1,68 @@ -# User Guide +# Welcome to Codebolt + +Codebolt is a code editor enabling developers to build and use adaptable use-case specific AI agent toolkits. This gives more accurate software generation, allowing developers and even end users to customise complex softwares using text prompts. + + +![introduction](/application/introduction.png) + + +## Get Started + +
+ { + e.target.style.borderColor = '#000'; + e.target.style.transform = 'translateY(-2px)'; + e.target.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)'; + }} + onMouseLeave={(e) => { + e.target.style.borderColor = '#e1e5e9'; + e.target.style.transform = 'translateY(0)'; + e.target.style.boxShadow = 'none'; + }}> +
πŸ“„
+

Introduction

+

Learn about Codebolt's core features and concepts.

+ + + { + e.target.style.borderColor = '#000'; + e.target.style.transform = 'translateY(-2px)'; + e.target.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)'; + }} + onMouseLeave={(e) => { + e.target.style.borderColor = '#e1e5e9'; + e.target.style.transform = 'translateY(0)'; + e.target.style.boxShadow = 'none'; + }}> +
πŸ’Ύ
+

Installation

+

Get Started with Codebolt in minutes, by downloading and installing for your platform.

+ +
+ + diff --git a/docs/2_Docs/2_getstarted/2_setup.md b/docs/2_Docs/2_getstarted/2_setup.md new file mode 100644 index 0000000..fbd415b --- /dev/null +++ b/docs/2_Docs/2_getstarted/2_setup.md @@ -0,0 +1,157 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Set Up + +To get started, please ensure your device meets the requirements, download the Codebolt Editor, and follow the instructions to install and launch it. + + + + + + + **Minimum OS Version:** Windows 10 + +
+ + Download for Windows + +
+ + + + + **Minimum OS Version:** macOS + +
+ + Download for Mac + +
+ + + + + + +## Onboarding + +Begin by clicking the **Get Started** button on the home page. + +![get started](/img/get_started.png) + +### 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](/img/sing-up.png) + +### 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. + +![username](/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"_ + - Once the authentication process is completed, you can proceed to use the application. + +![authentication success](/img/authentication-success.png) + +### First Time Users + +After signing in for the first time, you will see an onboarding screen + +Let's walk through every step + +### Select Default AI Models + +This screen lets you confirm the default models Codebolt will use. + +![Select Default AI Models](/img/onboarding-default-models.png) + +1. **Select LLM Model** – The recommended default is preselected. Click **Change** if you want to pick a different provider/model. +2. **Select Embedding Model** – A default embedding model is also preselected. Use **Change** to choose another one if needed. +3. **Continue** – Click **Continue** to save these defaults and move on. + +:::note +Defaults are configured automatically by Codebolt AI. You can update them anytime in **Settings β†’ AI Providers/Models**. +::: + + +### Review Settings + +This step lets you review and customize your Codebolt setup before continuing. + +![Review Settings](/img/onboarding-review-settings.png) + +1. **Default Workspace** – Choose where your projects will be stored. Click **Change** to select a different folder. +2. **Open from Terminal** – Install the `codebolt .` command to open Codebolt directly from your terminal. +3. **Theme** – Pick your preferred editor theme. Options include: + - **Dark Modern** + - **Light Modern** + - **Blue** + - Or explore **More themes...** + +Finally, click **Continue** to complete the setup process. + + + +### Welcome to Codebolt + +Once setup is complete, you’ll be taken to the **Welcome Screen** where you can quickly start working on your projects. + +![Welcome Screen](/img/welcome-screen.png) + +You have three main options: + +1. **Open Project** – Browse and open an existing project from your system. +2. **Quick Create** – Instantly create a new project with default settings. +3. **Create via Template** – Start from a pre-configured template (e.g., React, Next.js, AI Agent, etc.). + +Below these options, you’ll see two tabs: + +- **Recent Projects** – Quickly access projects you’ve worked on before. +- **Workspace Projects** – View projects linked to your chosen workspace. + +If you haven’t created any projects yet, this area will show **β€œNo recent projects found.”** + +### Video Guide + + diff --git a/docs/2_Docs/2_getstarted/3_quickstart.md b/docs/2_Docs/2_getstarted/3_quickstart.md new file mode 100644 index 0000000..11260a1 --- /dev/null +++ b/docs/2_Docs/2_getstarted/3_quickstart.md @@ -0,0 +1,35 @@ +# QuickStart + + +When you open Codebolt, you’ll see the welcome screen with options: +- **Open Project** +- **Quick Create** +- **Create via Template** + +![Welcome Screen](/img/welcome-screen.png) + +--- + +### Quick Create +Choose **Quick Create** to start a fresh project with default settings. + +![Quick Create](/img/quick-create.png) + +--- + +### Create via Template +If you want to start with a pre-built setup, select **Create via Template** and pick from available templates like React, Next.js, Express, or AI Agent. + +![Template Screen](/img/template.png) + +--- + +### Open Existing Project +Already have a project? Select **Open Project** and browse your local files. + +![Open Project](/img/open-project.png) + +--- + +βœ… That’s it! You’re ready to start coding with Codebolt. + diff --git a/docs/2_Docs/2_getstarted/4_concept.md b/docs/2_Docs/2_getstarted/4_concept.md new file mode 100644 index 0000000..38d6551 --- /dev/null +++ b/docs/2_Docs/2_getstarted/4_concept.md @@ -0,0 +1,68 @@ +# Concepts +Learn the key features that make Codebolt powerful + + +
+
+

Chat

+

An AI that can read and modify code across multiple files. Describe changes in natural language and Agent executes them.

+
+
+ Agent Feature +
+
+ +
+
+

Inline-Edit

+

An AI that can read and modify code across multiple files. Describe changes in natural language and Agent executes them.

+
+
+ Agent Feature +
+
+ + +
+
+

Agent

+

Code completion that predicts multi-line edits. Press Tab to accept suggestions based on your current code and recent changes.

+
+
+ Tab Feature +
+
+ + +
+
+

Context

+

An AI that can read and modify code across multiple files. Describe changes in natural language and Agent executes them.

+
+
+ Agent Feature +
+
+ + + +
+
+

Models

+

An AI that can read and modify code across multiple files. Describe changes in natural language and Agent executes them.

+
+
+ Agent Feature +
+
+ +
+
+

MCP

+

An AI that can read and modify code across multiple files. Describe changes in natural language and Agent executes them.

+
+
+ Agent Feature +
+
+ diff --git a/docs/2_Docs/2_getstarted/_category_.json b/docs/2_Docs/2_getstarted/_category_.json new file mode 100644 index 0000000..51e451d --- /dev/null +++ b/docs/2_Docs/2_getstarted/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Get Started", + "position": 2, + "collapsible": false, + "collapsed": true, + "className": "red" +} \ No newline at end of file diff --git a/docs/2_Docs/application/4_agents.md b/docs/2_Docs/3_core/1_agent/4_agents.md similarity index 100% rename from docs/2_Docs/application/4_agents.md rename to docs/2_Docs/3_core/1_agent/4_agents.md diff --git a/docs/2_Docs/application/3_chats.md b/docs/2_Docs/3_core/1_agent/chat/3_chats.md similarity index 100% rename from docs/2_Docs/application/3_chats.md rename to docs/2_Docs/3_core/1_agent/chat/3_chats.md diff --git a/docs/2_Docs/application/5_model.md b/docs/2_Docs/3_core/5_model.md similarity index 100% rename from docs/2_Docs/application/5_model.md rename to docs/2_Docs/3_core/5_model.md diff --git a/docs/2_Docs/application/6_tools.md b/docs/2_Docs/3_core/6_tools.md similarity index 100% rename from docs/2_Docs/application/6_tools.md rename to docs/2_Docs/3_core/6_tools.md diff --git a/docs/2_Docs/application/7_context.md b/docs/2_Docs/3_core/7_context.md similarity index 100% rename from docs/2_Docs/application/7_context.md rename to docs/2_Docs/3_core/7_context.md diff --git a/docs/2_Docs/3_core/_category_.json b/docs/2_Docs/3_core/_category_.json new file mode 100644 index 0000000..050c8e9 --- /dev/null +++ b/docs/2_Docs/3_core/_category_.json @@ -0,0 +1,7 @@ +{ + "label": "Core", + "position": 2, + "collapsible": false, + "collapsed": true, + "className": "red" +} \ No newline at end of file diff --git a/docs/2_Docs/application/2_tutorials/1_drapdrop.md b/docs/2_Docs/7_tutorials/1_drapdrop.md similarity index 100% rename from docs/2_Docs/application/2_tutorials/1_drapdrop.md rename to docs/2_Docs/7_tutorials/1_drapdrop.md diff --git a/docs/2_Docs/application/2_tutorials/2_layouts.md b/docs/2_Docs/7_tutorials/2_layouts.md similarity index 100% rename from docs/2_Docs/application/2_tutorials/2_layouts.md rename to docs/2_Docs/7_tutorials/2_layouts.md diff --git a/docs/2_Docs/application/2_tutorials/index.md b/docs/2_Docs/7_tutorials/index.md similarity index 100% rename from docs/2_Docs/application/2_tutorials/index.md rename to docs/2_Docs/7_tutorials/index.md diff --git a/docs/2_Docs/application/1_getstarted/1_codeboltide.md b/docs/2_Docs/application/1_getstarted/1_codeboltide.md deleted file mode 100644 index f590357..0000000 --- a/docs/2_Docs/application/1_getstarted/1_codeboltide.md +++ /dev/null @@ -1 +0,0 @@ -# What is Codebolt IDE diff --git a/docs/2_Docs/application/1_getstarted/2_setup.md b/docs/2_Docs/application/1_getstarted/2_setup.md deleted file mode 100644 index 36d720b..0000000 --- a/docs/2_Docs/application/1_getstarted/2_setup.md +++ /dev/null @@ -1 +0,0 @@ -# Set up Codebolt diff --git a/docs/2_Docs/application/1_getstarted/3_manageProjects.md b/docs/2_Docs/application/1_getstarted/3_manageProjects.md deleted file mode 100644 index 3f5c3c4..0000000 --- a/docs/2_Docs/application/1_getstarted/3_manageProjects.md +++ /dev/null @@ -1 +0,0 @@ -# Manage Projects diff --git a/docs/2_Docs/application/1_getstarted/index.md b/docs/2_Docs/application/1_getstarted/index.md deleted file mode 100644 index 5710bbe..0000000 --- a/docs/2_Docs/application/1_getstarted/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Get Started - - \ No newline at end of file diff --git a/docs/2_Docs/portal/1_index.md b/docs/2_Docs/portal/1_index.md deleted file mode 100644 index 3ab5434..0000000 --- a/docs/2_Docs/portal/1_index.md +++ /dev/null @@ -1 +0,0 @@ -# Introduction diff --git a/docs/2_Docs/portal/2_Agents/1_Agents.md b/docs/2_Docs/portal/2_Agents/1_Agents.md deleted file mode 100644 index 3d5eaf4..0000000 --- a/docs/2_Docs/portal/2_Agents/1_Agents.md +++ /dev/null @@ -1 +0,0 @@ -# Agent Marketplace diff --git a/docs/2_Docs/portal/2_Agents/2_myAgents.md b/docs/2_Docs/portal/2_Agents/2_myAgents.md deleted file mode 100644 index 5254faf..0000000 --- a/docs/2_Docs/portal/2_Agents/2_myAgents.md +++ /dev/null @@ -1 +0,0 @@ -# My Agents diff --git a/docs/2_Docs/portal/3_Tools/1_tools.md b/docs/2_Docs/portal/3_Tools/1_tools.md deleted file mode 100644 index 8c5ff34..0000000 --- a/docs/2_Docs/portal/3_Tools/1_tools.md +++ /dev/null @@ -1 +0,0 @@ -# Tools Marketplace \ No newline at end of file diff --git a/docs/2_Docs/portal/3_Tools/2_myTools.md b/docs/2_Docs/portal/3_Tools/2_myTools.md deleted file mode 100644 index de5c152..0000000 --- a/docs/2_Docs/portal/3_Tools/2_myTools.md +++ /dev/null @@ -1 +0,0 @@ -# My Tools \ No newline at end of file diff --git a/docs/2_Docs/portal/4_plans.md b/docs/2_Docs/portal/4_plans.md deleted file mode 100644 index 97e7c6f..0000000 --- a/docs/2_Docs/portal/4_plans.md +++ /dev/null @@ -1 +0,0 @@ -# Plans \ No newline at end of file diff --git a/docs/2_Docs/portal/5_Acounts/1_billing.md b/docs/2_Docs/portal/5_Acounts/1_billing.md deleted file mode 100644 index 3df4018..0000000 --- a/docs/2_Docs/portal/5_Acounts/1_billing.md +++ /dev/null @@ -1 +0,0 @@ -# Billing \ No newline at end of file diff --git a/docs/2_Docs/portal/5_Acounts/2_usage.md b/docs/2_Docs/portal/5_Acounts/2_usage.md deleted file mode 100644 index fc56ab5..0000000 --- a/docs/2_Docs/portal/5_Acounts/2_usage.md +++ /dev/null @@ -1 +0,0 @@ -# Usage \ No newline at end of file diff --git a/docs/2_Docs/portal/6_Templates/1_templates.md b/docs/2_Docs/portal/6_Templates/1_templates.md deleted file mode 100644 index fd5397e..0000000 --- a/docs/2_Docs/portal/6_Templates/1_templates.md +++ /dev/null @@ -1 +0,0 @@ -# Templates \ No newline at end of file diff --git a/docs/2_Docs/portal/6_Templates/2_mytemplates.md b/docs/2_Docs/portal/6_Templates/2_mytemplates.md deleted file mode 100644 index e69de29..0000000 diff --git a/docs/2_Docs/portal/7_apps/1_index.md b/docs/2_Docs/portal/7_apps/1_index.md deleted file mode 100644 index a5c617f..0000000 --- a/docs/2_Docs/portal/7_apps/1_index.md +++ /dev/null @@ -1 +0,0 @@ -# Apps diff --git a/docs/2_Docs/portal/7_apps/2_myapps.md b/docs/2_Docs/portal/7_apps/2_myapps.md deleted file mode 100644 index e8d5982..0000000 --- a/docs/2_Docs/portal/7_apps/2_myapps.md +++ /dev/null @@ -1 +0,0 @@ -# My Apps \ No newline at end of file diff --git a/docs/2_Docs/portal/8_setting/apikey.md b/docs/2_Docs/portal/8_setting/apikey.md deleted file mode 100644 index 5aac62e..0000000 --- a/docs/2_Docs/portal/8_setting/apikey.md +++ /dev/null @@ -1 +0,0 @@ -# API Key \ No newline at end of file diff --git a/docs/2_Docs/registry/1_index.md b/docs/2_Docs/registry/1_index.md deleted file mode 100644 index 916aa9b..0000000 --- a/docs/2_Docs/registry/1_index.md +++ /dev/null @@ -1,194 +0,0 @@ -# Introduction - -The CodeBolt Registry is your comprehensive marketplace for discovering, exploring, and integrating powerful AI agents and MCP tools that extend and enhance your development workflow. This centralized hub provides access to a curated collection of specialized tools designed to streamline various aspects of software development. - -## What is the CodeBolt Registry? - -The CodeBolt Registry serves as the central marketplace for two main categories of development enhancers: - -- **AI Agents**: Intelligent assistants that automate specific development tasks -- **MCP Tools**: Model Context Protocol tools that provide specialized functionality - -## AI Agents Marketplace - -CodeBolt agents are intelligent AI assistants that leverage CodeBolt's APIs to interact with your code editor. Unlike other editors that provide a single core agent, CodeBolt takes a different approach where it allows you to write your own agents and agent logic. - - -**Key Differentiators:** -- **Code-Based Agents**: Write custom code that includes any process, workflows, and agentic AI logic -- **Full Editor Control**: Access to complete editor APIs for comprehensive control -- **Custom Workflows**: Create complex, multi-step automation processes -- **Tool Integration**: Seamless integration with various development tools and services - -### Types of CodeBolt Agents - -#### 1. Custom Code-Based Agents -The real power of CodeBolt comes with custom code-based agents that provide: -- **Complete Editor APIs**: Full access to file manipulation, code editing, and task automation -- **Custom Logic**: Write sophisticated agent behaviors and workflows -- **Tool Utilization**: Integrate with any available tools and APIs -- **LLM Integration**: Leverage large language models for intelligent decision making - -#### 2. Remix Agents -A simpler, cursor-style agent creation method that allows: -- **Model Flexibility**: Change the underlying AI model used by the agent -- **MCP Configuration**: Modify Model Context Protocol settings -- **Real-time Adjustments**: Make changes without deploying new agent versions -- **Local MCP Support**: Use local computing resources for enhanced privacy and control - -### How CodeBolt Agents Work - -CodeBolt agents operate through an agentic process flow that combines: - -1. **User Intent Understanding**: Parsing and interpreting user requests -2. **Task Planning**: Breaking down complex tasks into actionable steps -3. **Tool Utilization**: Using available tools and APIs to accomplish tasks -4. **Code Manipulation**: Reading, writing, and modifying code files -5. **Decision Making**: Using LLM reasoning to make intelligent choices -6. **Result Delivery**: Providing feedback and results to users - -### Agent Architecture - -CodeBolt agents work within a sophisticated architecture: - -- **Agent Runtime Environment**: Isolated execution environment for each agent -- **Communication Protocols**: Standardized communication between agents and the editor -- **Tool Integration**: Access to file systems, LLM providers, and MCP services -- **State Management**: Persistent state across agent interactions - -### Agent Capabilities - -**Task Automation:** -- Automate repetitive development tasks -- Handle complex multi-step workflows -- Integrate with external services and APIs - -**Code Generation:** -- Generate code based on specifications and requirements -- Modify existing code intelligently -- Create entire applications or components - -**Documentation:** -- Create and maintain comprehensive project documentation -- Generate API documentation automatically -- Update documentation based on code changes - -**Deployment:** -- Streamline application deployment processes -- Handle configuration management -- Automate CI/CD workflows - -**Testing:** -- Assist with testing and quality assurance workflows -- Generate test cases automatically -- Run and analyze test results - -### Featured Agents in the Marketplace - -The marketplace includes agents from trusted developers: -- **Documentation Agent**: Automated documentation generation for codebases and APIs -- **CodeBolt Web Generator**: Creates websites similar to any given URL reference -- **CodeBolt Aider**: AI pair programming assistant for local git repositories -- **CodeBolt CRM DEV**: Specialized CRM development assistant with extensive knowledge -- **CodeBolt Slides Maker**: Generates engaging presentation slides from user input -- **CodeBolt App Installer**: Manages dependencies and application setup processes - -## MCP Tools Marketplace - -The MCP (Model Context Protocol) Tools Marketplace provides verified tools that integrate seamlessly with your development environment through standardized protocols. - -### Key Features of MCP Tools - -- **Standardized Integration**: Consistent interface across all tools -- **Verified Quality**: All tools are tested and verified for reliability -- **Seamless Workflow**: Direct integration with CodeBolt's development environment -- **Extended Functionality**: Expand CodeBolt's capabilities with specialized tools - -### Popular MCP Tool Categories - -- **Version Control**: Git and GitHub integration tools -- **Database Management**: SQLite and PostgreSQL connectivity -- **Web Operations**: HTTP requests, web scraping, and browser automation -- **Communication**: Team collaboration through Slack integration -- **File Management**: Comprehensive file system operations -- **Monitoring**: Error tracking and application monitoring - -### Featured MCP Tools - -All MCP tools are developed by **modelcontextprotocol** and include: -- **GitHub**: Repository and collaboration management -- **Git**: Version control operations -- **Puppeteer**: Browser automation and web scraping -- **Slack**: Team communication integration -- **PostgreSQL**: Database connectivity and management -- **Filesystem**: File and directory operations - -## Getting Started - -### Accessing the Registry - -Navigate to the CodeBolt Registry at `registry.codebolt.ai` to explore both marketplaces: -- **Agent Marketplace**: Browse and discover AI agents -- **MCP Tools**: Explore Model Context Protocol tools - -### For Agent Development - -If you're interested in creating your own agents: -1. **Install CodeBolt CLI**: `npm install -g codebolt-cli` -2. **Create Custom Agents**: Use the full CodeBolt APIs for maximum flexibility -3. **Create Remix Agents**: Use the simpler approach for quick customization -4. **Publish to Registry**: Share your agents with the community - -### Search and Discovery - -Both marketplaces offer powerful search and filtering capabilities: -- **Search Functionality**: Find specific tools by name or functionality -- **Rating System**: Sort by popularity and community ratings -- **Category Filtering**: Browse tools by specific categories -- **Developer Filtering**: Explore tools from trusted developers - -### Installation and Integration - -1. **Browse**: Explore available agents and tools -2. **Evaluate**: Review descriptions, ratings, and capabilities -3. **Select**: Choose tools that match your project needs -4. **Install**: Follow simple installation procedures -5. **Configure**: Set up tool-specific configurations -6. **Integrate**: Start using tools in your development workflow - -## Benefits of Using the Registry - -### Enhanced Productivity -- Automate repetitive tasks with intelligent AI agents -- Streamline workflows with specialized tools -- Reduce development time and effort -- Focus on core development activities - -### Flexibility and Control -- Create custom agents with full editor API access -- Modify existing agents with Remix functionality -- Use local resources for enhanced privacy -- Integrate with any development tools and services - -### Standardized Integration -- Consistent interfaces across all tools -- Reliable and tested integrations -- Seamless workflow incorporation -- Minimal setup and configuration - -### Community-Driven -- Ratings and reviews from real users -- Continuous improvement based on feedback -- Regular updates and new tool additions -- Support from developer community - -The CodeBolt Registry empowers developers to enhance their productivity and extend their development capabilities through a carefully curated collection of AI agents and MCP tools, all designed to integrate seamlessly with your existing workflow. Whether you're using pre-built agents or creating your own custom solutions, the registry provides the foundation for intelligent, automated development workflows. - -## Navigation - -The registry interface provides easy navigation between: -- **Home**: Return to main CodeBolt homepage -- **Portal**: Access your CodeBolt portal dashboard -- **Docs**: View comprehensive documentation -- **Agents**: Browse the AI agents marketplace -- **MCP Tools**: Explore MCP tools marketplace diff --git a/docs/2_Docs/registry/2_agents.md b/docs/2_Docs/registry/2_agents.md deleted file mode 100644 index b6f7182..0000000 --- a/docs/2_Docs/registry/2_agents.md +++ /dev/null @@ -1,143 +0,0 @@ -# Agents - -The Agent Marketplace is your central hub for discovering, exploring, and managing AI agents within the CodeBolt platform. CodeBolt agents are intelligent AI assistants that leverage CodeBolt's APIs to interact with your code editor, providing capabilities far beyond traditional code editors. - -## What Makes CodeBolt Agents Unique? - -Unlike other editors that provide a single core agent or only allow prompt customization, CodeBolt agents are fundamentally different: - -- **Code-Based Agents**: Write custom code that includes any process, workflows, and agentic AI logic -- **Full Editor Control**: Access to complete editor APIs for comprehensive control over the development environment -- **Custom Workflows**: Create complex, multi-step automation processes tailored to your needs -- **Tool Integration**: Seamless integration with various development tools and services - -## Accessing the Agent Marketplace - -Navigate to the Agent Marketplace through the CodeBolt registry at `registry.codebolt.ai`. The marketplace provides an intuitive interface with search functionality, sorting options, and detailed agent listings. - - -![agents](/registry/agents.png) - -## Types of CodeBolt Agents - -### 1. Custom Code-Based Agents -The real power of CodeBolt comes with custom code-based agents that provide: -- **Complete Editor APIs**: Full access to file manipulation, code editing, and task automation -- **Custom Logic**: Write sophisticated agent behaviors and workflows using JavaScript/TypeScript -- **Tool Utilization**: Integrate with any available tools and APIs -- **LLM Integration**: Leverage large language models for intelligent decision making -- **Persistent State**: Maintain state across agent interactions - -### 2. Remix Agents -A simpler, cursor-style agent creation method that allows: -- **Model Flexibility**: Change the underlying AI model used by the agent -- **MCP Configuration**: Modify Model Context Protocol settings -- **Real-time Adjustments**: Make changes without deploying new agent versions -- **Local MCP Support**: Use local computing resources for enhanced privacy and control - -## How CodeBolt Agents Work - -CodeBolt agents operate through an agentic process flow: - -1. **User Intent Understanding**: Parse and interpret user requests -2. **Task Planning**: Break down complex tasks into actionable steps -3. **Tool Utilization**: Use available tools and APIs to accomplish tasks -4. **Code Manipulation**: Read, write, and modify code files intelligently -5. **Decision Making**: Use LLM reasoning to make intelligent choices -6. **Result Delivery**: Provide feedback and results to users - -## Search and Filtering - -- **Search Bar**: Use the "Please Enter Agent" search functionality to find specific agents by name or functionality -- **Sort Options**: Sort agents by "Highest Rating" to see the most popular and well-reviewed agents first -- **Display Options**: Choose how many agents to show per page (12 agents default) - -## Featured Agents - -- Documentation Agent -- CodeBolt Web Deployment -- CodeBolt Web Generator -- CodeBolt Aider -- CodeBolt CRM DEV -- CodeBolt Slides Maker -- CodeBolt App Installer1 -- CodeBolt-Devika -- Ask -- CodeBolt App Installer -- CodeBolt Pilot -- CodeBolt Test - -## Agent Capabilities by Category - -### Code Generation & Modification -- Generate code based on specifications and requirements -- Modify existing code intelligently while maintaining quality -- Create entire applications, components, or modules -- Refactor code following best practices - -### Documentation & Analysis -- Create comprehensive project documentation -- Generate API documentation automatically -- Analyze codebases and provide insights -- Update documentation based on code changes - -### Deployment & DevOps -- Streamline application deployment processes -- Handle configuration management across environments -- Automate CI/CD workflows and pipelines -- Manage containerization and orchestration - -### Testing & Quality Assurance -- Generate test cases automatically based on code analysis -- Run and analyze test results with detailed reporting -- Implement quality gates and code review processes -- Performance testing and optimization recommendations - -### Development Workflow -- Automate repetitive development tasks -- Handle complex multi-step workflows -- Integrate with external services and APIs -- Manage project dependencies and environments - -## Creating Your Own Agents - -### Getting Started with Agent Development - -1. **Install CodeBolt CLI**: `npm install -g codebolt-cli` -2. **Login**: `npx codebolt-cli login` -3. **Create Agent**: `npx codebolt-cli createagent --name "Your Agent Name"` - -### Agent Development Options - -#### Custom Code-Based Agents -- Full access to CodeBolt's editor APIs -- Write sophisticated agent logic in JavaScript/TypeScript -- Create complex workflows and integrations -- Maximum flexibility and control - -#### Remix Agents -- Quick customization of existing agents -- Modify models and MCP configurations -- Real-time adjustments without redeployment -- Perfect for rapid prototyping - -### Publishing to Registry - -```bash -# Publish your agent to the marketplace -npx codebolt-cli publishagent - -# Make it available to the community -# Include GitHub URL, category, and description -``` - -## Navigation - -The marketplace interface includes: -- **Home**: Return to the main CodeBolt homepage -- **Portal**: Access the CodeBolt portal dashboard -- **Docs**: View comprehensive documentation -- **MCP Tools**: Browse available MCP tools - -The Agent Marketplace serves as your gateway to enhancing productivity and automating development workflows through specialized AI agents. Whether you're using pre-built agents or creating your own custom solutions, the marketplace provides the foundation for intelligent, automated development workflows tailored to your specific needs. - diff --git a/docs/2_Docs/registry/3_tools.md b/docs/2_Docs/registry/3_tools.md deleted file mode 100644 index 910b750..0000000 --- a/docs/2_Docs/registry/3_tools.md +++ /dev/null @@ -1,426 +0,0 @@ -# Tools - -The MCP (Model Context Protocol) Marketplace is your comprehensive resource for discovering and integrating powerful MCP tools that extend the capabilities of your CodeBolt environment. These tools provide specialized functionality through the Model Context Protocol framework, enabling seamless integration with AI agents and development workflows. - -## What are CodeBolt Tools? - -CodeBolt Tools are MCP-compatible utilities built on the Model Context Protocol (MCP) standard. They are custom utilities that extend the capabilities of AI agents by providing specialized functionality, allowing you to integrate external services, automate tasks, and create domain-specific capabilities that agents can use when solving problems. - -### Key Characteristics - -- **MCP Compatibility**: Built on the Model Context Protocol standard, ensuring full backward compatibility with existing MCP implementations -- **Agent Integration**: Provide specialized functions that agents can call during problem-solving -- **Reusable**: Can be shared across multiple agents and projects -- **Configurable**: Accept parameters for customization and flexibility -- **Universal**: Work in both Codebolt Application and via CLI -- **Shareable**: Can be published to and used from the tool registry - -## Why Use CodeBolt Tools? - -Tools are essential for extending agent capabilities in several key areas: - -### External Integrations -- Connect to APIs, databases, and external services -- Integrate with third-party platforms and services -- Handle authentication and secure connections - -### File Operations -- Read, write, and manipulate files safely -- Process different file formats and types -- Manage file system operations - -### Data Processing -- Transform and analyze data efficiently -- Handle complex data structures and formats -- Perform calculations and data validation - -### Automation -- Automate repetitive development tasks -- Create custom workflows and processes -- Schedule and manage task execution - -### Domain-Specific Logic -- Implement business rules and specialized workflows -- Create industry-specific functionality -- Handle complex domain requirements - -## Accessing the MCP Marketplace - -Navigate to the MCP Marketplace at `registry.codebolt.ai/mcp-tools`. The marketplace features an intuitive interface with search functionality, sorting options, and detailed tool listings. - -![agents](/registry/agents.png) - -## Tool Architecture - -### Core Components - -Every CodeBolt tool consists of four essential components: - -1. **Configuration File** (`codebolttool.yaml`): Defines tool metadata, parameters, and settings -2. **Implementation** (`index.js`): Contains the tool's core functionality and logic -3. **Documentation** (`README.md`): Explains how to use the tool effectively -4. **Dependencies** (`package.json`): Lists required Node.js packages and versions - -### Tool Structure - -``` -my-tool/ -β”œβ”€β”€ codebolttool.yaml # Tool configuration and metadata -β”œβ”€β”€ package.json # Node.js dependencies -β”œβ”€β”€ index.js # Main implementation -β”œβ”€β”€ README.md # Documentation -└── src/ # Additional source files (optional) - β”œβ”€β”€ handlers/ # Function handlers - └── utils/ # Utility functions -``` - -## How CodeBolt Tools Work - -### 1. Tool Definition - -Tools are defined in `codebolttool.yaml` for identification in the registry and CodeBolt application: - -```yaml -name: "File Manager" -description: "Safely manages file operations" -version: "1.0.0" -uniqueName: "file-manager-tool" - -parameters: - rootPath: - type: "string" - description: "Root directory for operations" - default: "./" - - allowedExtensions: - type: "array" - description: "Allowed file extensions" - default: [".js", ".ts", ".json", ".md"] -``` - -### 2. Tool Implementation - -Tools are implemented using the ToolBox class from CodeBolt's utilities, providing MCP-compatible functionality: - -```javascript -import { ToolBox } from '@codebolt/codeboltjs/utils'; -import { z } from 'zod'; - -const toolbox = new ToolBox({ - name: 'File Manager', - version: '1.0.0' -}); - -toolbox.addTool({ - name: 'list_files', - description: 'List files in a directory', - parameters: z.object({ - path: z.string().describe('Directory path').default('./') - }), - execute: async (args, context) => { - const { path } = args; - // Implementation logic here - context.log.info(`Listing files in ${path}`); - return { files: [] }; - } -}); - -async function main() { - try { - await toolbox.activate(); - console.log('File Manager toolbox is running!'); - } catch (error) { - console.error('Failed to start toolbox:', error); - } -} - -main(); -``` - -### 3. Agent Integration - -Agents can seamlessly use tools to perform specific tasks. The toolbox automatically handles the MCP protocol communication: - -```javascript -// In an agent -const files = await this.tools.fileManager.listFiles({ - path: './src/components' -}); - -// The tool responds with the expected format -console.log(files); // { files: [...] } -``` - -## Search and Filtering - -The marketplace provides powerful discovery capabilities: - -- **Search Functionality**: Find specific MCP tools by name or functionality -- **Sort Options**: Sort tools by "Most Stars" to see the most popular tools first -- **Display Options**: Choose how many tools to show per page (12 tools default) -- **Category Filtering**: Browse tools by specific categories and use cases -- **Tag-based Discovery**: Find tools using relevant keywords and tags - -## Available MCP Tools - -### GitHub -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: Integrates GitHub functionality into your development workflow -- **Capabilities**: Access GitHub repositories, manage issues and pull requests, handle collaboration features, automate GitHub workflows - -### Git -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: Provides comprehensive Git version control capabilities -- **Capabilities**: Execute Git commands, manage repositories, track changes, handle branching and merging operations - -### Sqlite -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: SQLite database integration and management -- **Capabilities**: Query databases, manage schemas, handle transactions, perform data operations through MCP interface - -### Fetch -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: HTTP request and web data fetching capabilities -- **Capabilities**: Make HTTP requests, fetch web content, handle API interactions, manage request/response cycles - -### Sentry -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: Error tracking and application monitoring integration -- **Capabilities**: Monitor application errors, track performance metrics, manage error reporting and alerting - -### EverArt -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: Artistic and creative content generation -- **Capabilities**: Generate and manipulate artistic content using AI-powered tools and creative algorithms - -### Memory -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: Persistent memory and data storage capabilities -- **Capabilities**: Store, retrieve, and manage persistent data across sessions, maintain context and state - -### Brave Search -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: Web search functionality through Brave Search engine -- **Capabilities**: Perform web searches, retrieve search results, access web information with privacy focus - -### Puppeteer -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: Web browser automation and control -- **Capabilities**: Automate web browsers, perform web scraping, control browser interactions, generate PDFs and screenshots - -### PostgreSQL -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: PostgreSQL database integration and management -- **Capabilities**: Connect to databases, execute queries, manage schemas, handle complex database operations - -### Filesystem -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: File system operations and management -- **Capabilities**: Read, write, create, delete files and directories, manage file permissions, handle file operations safely - -### Slack -**By modelcontextprotocol** -- **Category**: Model Context Protocol Servers -- **Status**: βœ… Verified -- **Purpose**: Slack workspace integration and communication -- **Capabilities**: Send messages, manage channels, interact with Slack workspaces, automate communication workflows - -## Tool Categories - -The marketplace organizes MCP tools into functional categories: - -### Version Control -- **Git**: Complete version control operations -- **GitHub**: Repository and collaboration management -- Advanced branching, merging, and workflow automation - -### Database Integration -- **SQLite**: Lightweight database operations -- **PostgreSQL**: Enterprise database connectivity -- Schema management and complex query execution - -### Web Operations -- **Fetch**: HTTP requests and API interactions -- **Brave Search**: Privacy-focused web search -- **Puppeteer**: Browser automation and web scraping - -### Communication & Collaboration -- **Slack**: Team communication and workspace integration -- Message automation and channel management - -### File Management -- **Filesystem**: Comprehensive file operations -- Safe file handling and directory management - -### Monitoring & Analytics -- **Sentry**: Error tracking and performance monitoring -- Application health and debugging assistance - -### Creative & AI Tools -- **EverArt**: Creative content generation -- **Memory**: Persistent data and context management - -## Creating Your Own Tools - -### Getting Started with Tool Development - -#### Option 1: Using Codebolt Application -1. Open Codebolt Application -2. Navigate to Tools section -3. Click "Create New Tool" -4. Fill in tool details and configuration -5. Implement tool functions in the editor -6. Test and save your tool - -#### Option 2: Using CLI -```bash -# Install Codebolt CLI -npm install -g codebolt-cli - -# Login to your account -npx codebolt-cli login - -# Create a new tool -npx codebolt-cli createtool --name "My Tool" --id "my-tool" -``` - -### Tool Development Process - -1. **Configure**: Define tool metadata in `codebolttool.yaml` -2. **Implement**: Write tool logic using the ToolBox class -3. **Test**: Use CLI testing tools to verify functionality -4. **Document**: Create comprehensive README and usage examples -5. **Publish**: Share your tool with the community - -### Quick Example - -```javascript -import { ToolBox } from '@codebolt/codeboltjs/utils'; -import { z } from 'zod'; - -const toolbox = new ToolBox({ - name: "Hello World Tool", - version: "1.0.0" -}); - -toolbox.addTool({ - name: "greet", - description: "Generate a greeting message", - parameters: z.object({ - name: z.string().describe("Name to greet").default("World") - }), - execute: async (args, context) => { - const { name } = args; - context.log.info(`Generating greeting for ${name}`); - return { - message: `Hello, ${name}!`, - timestamp: new Date().toISOString() - }; - } -}); - -async function main() { - try { - await toolbox.activate(); - console.log('Hello World toolbox is running!'); - } catch (error) { - console.error('Failed to start toolbox:', error); - } -} - -main(); -``` - -## Tool Management - - -### Managing Installed Tools - -```bash -# List installed tools -codebolt-cli listtools -``` - -## Tool Verification and Quality Assurance - -### Verification Process - -All tools in the marketplace display a **βœ… Verified** status, indicating they have been: - -- **Compatibility Tested**: Verified to work with the MCP framework -- **Security Reviewed**: Assessed for security vulnerabilities and best practices -- **Performance Optimized**: Tested for efficiency and resource usage -- **Documentation Validated**: Ensured comprehensive and accurate documentation -- **Community Approved**: Reviewed and approved by the CodeBolt team - -### Quality Standards - -- **Standardized Protocol**: All tools follow MCP standards for consistency -- **Comprehensive Testing**: Automated and manual testing procedures -- **Regular Updates**: Maintained by trusted developers with continuous improvements -- **Community Feedback**: Ratings and reviews from real users -- **Support Channels**: Available documentation and community support - -## Integration Benefits - -### Seamless Workflow Integration -- **Direct Integration**: Tools integrate directly with CodeBolt's development environment -- **Standardized Interface**: Consistent interface across all MCP tools -- **Agent Compatibility**: Designed to work seamlessly with AI agents -- **Context Awareness**: Tools understand and work within development contexts - -### Enhanced Productivity -- **Task Automation**: Automate repetitive and complex tasks -- **Workflow Streamlining**: Reduce manual work and context switching -- **Error Reduction**: Built-in error handling and validation -- **Time Savings**: Focus on core development activities - -### Extensibility and Flexibility -- **Custom Configurations**: Adapt tools to specific project needs -- **Parameter Customization**: Configure tools for different use cases -- **Integration Options**: Connect with various external services and APIs -- **Scalable Architecture**: Tools grow with your project requirements - -## Developer Information - -### Tool Maintainers - -All MCP tools in the marketplace are developed and maintained by **modelcontextprotocol**, ensuring: - -- **Consistent Quality**: Uniform standards across all tools -- **Regular Maintenance**: Continuous updates and improvements -- **Comprehensive Documentation**: Detailed guides and examples -- **Community Support**: Active support and contribution channels -- **Long-term Stability**: Reliable and sustainable tool ecosystem - -### Contributing to the Ecosystem - -- **Create Custom Tools**: Build tools for specific use cases and domains -- **Share with Community**: Publish tools to help other developers -- **Provide Feedback**: Rate and review tools to improve quality -- **Report Issues**: Help maintain tool quality through bug reports -- **Contribute Documentation**: Improve tool documentation and examples - -The MCP Marketplace serves as your gateway to extending CodeBolt's functionality through powerful, verified tools that integrate seamlessly with your development workflow. Whether you're using existing tools or creating custom solutions, the marketplace provides a robust foundation for intelligent, automated development processes through the Model Context Protocol framework. diff --git a/docs/2_Docs/templates/best-practices.md b/docs/2_Docs/templates/best-practices.md deleted file mode 100644 index bc49e88..0000000 --- a/docs/2_Docs/templates/best-practices.md +++ /dev/null @@ -1,809 +0,0 @@ ---- -sidebar_position: 5 -sidebar_label: Best Practices ---- - -# Template Best Practices - -This guide covers advanced patterns, optimization techniques, and quality standards for creating exceptional Codebolt templates that provide maximum value to developers. - -## Template Design Principles - -### 1. Modularity and Flexibility - -Design templates that can be easily customized and extended: - -```yaml -# codeboltconfig.yaml - Flexible configuration -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - supportedFrameworks: - - React - - Next.js - - Vite - secrets: - - env_name: FEATURE_FLAGS - env_description: Comma-separated list of enabled features - - env_name: UI_THEME - env_description: Default UI theme (light, dark, auto) -``` - -**Modular Structure Example:** -``` -src/ -β”œβ”€β”€ components/ -β”‚ β”œβ”€β”€ ui/ # Basic UI components -β”‚ β”œβ”€β”€ layout/ # Layout components -β”‚ └── features/ # Feature-specific components -β”œβ”€β”€ hooks/ # Reusable custom hooks -β”œβ”€β”€ utils/ # Utility functions -β”œβ”€β”€ stores/ # State management -β”œβ”€β”€ services/ # API and external services -β”œβ”€β”€ types/ # TypeScript definitions -└── config/ # Configuration files -``` - -### 2. Progressive Enhancement - -Start with a minimal viable template and provide optional enhancements: - -**Base Template:** -```json -{ - "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - }, - "devDependencies": { - "vite": "^4.1.0", - "@vitejs/plugin-react": "^3.1.0" - } -} -``` - -**Enhanced Features (Optional):** -```json -{ - "optionalDependencies": { - "@tanstack/react-query": "^4.24.0", - "zustand": "^4.3.0", - "react-router-dom": "^6.8.0", - "tailwindcss": "^3.2.0" - } -} -``` - -### 3. Convention over Configuration - -Establish clear conventions to reduce configuration overhead: - -**File Naming Conventions:** -- Components: `PascalCase.tsx` (e.g., `UserProfile.tsx`) -- Hooks: `use*.ts` (e.g., `useAuth.ts`) -- Utils: `camelCase.ts` (e.g., `formatDate.ts`) -- Types: `*.types.ts` (e.g., `user.types.ts`) - -**Directory Conventions:** -- Group related files together -- Use index files for clean imports -- Separate concerns clearly - -## Code Quality Standards - -### 1. TypeScript Best Practices - -**Strict Type Configuration:** -```json -{ - "compilerOptions": { - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "exactOptionalPropertyTypes": true - } -} -``` - -**Type Definitions:** -```typescript -// src/types/user.types.ts -export interface User { - readonly id: string - email: string - name: string - avatar?: string - preferences: UserPreferences -} - -export interface UserPreferences { - theme: 'light' | 'dark' | 'auto' - language: string - notifications: NotificationSettings -} - -export type UserRole = 'admin' | 'user' | 'moderator' -``` - -### 2. Error Handling Patterns - -**Centralized Error Handling:** -```typescript -// src/utils/errorHandler.ts -export class AppError extends Error { - constructor( - message: string, - public code: string, - public statusCode: number = 500 - ) { - super(message) - this.name = 'AppError' - } -} - -export const handleApiError = (error: unknown): AppError => { - if (error instanceof AppError) { - return error - } - - if (error instanceof Error) { - return new AppError(error.message, 'UNKNOWN_ERROR') - } - - return new AppError('An unexpected error occurred', 'UNKNOWN_ERROR') -} -``` - -**React Error Boundaries:** -```typescript -// src/components/ErrorBoundary.tsx -import React, { Component, ErrorInfo, ReactNode } from 'react' - -interface Props { - children: ReactNode - fallback?: ReactNode -} - -interface State { - hasError: boolean - error?: Error -} - -export class ErrorBoundary extends Component { - constructor(props: Props) { - super(props) - this.state = { hasError: false } - } - - static getDerivedStateFromError(error: Error): State { - return { hasError: true, error } - } - - componentDidCatch(error: Error, errorInfo: ErrorInfo) { - console.error('Error caught by boundary:', error, errorInfo) - // Log to error reporting service - } - - render() { - if (this.state.hasError) { - return this.props.fallback ||
Something went wrong.
- } - - return this.props.children - } -} -``` - -### 3. Performance Optimization - -**Code Splitting:** -```typescript -// src/pages/Dashboard.tsx -import { lazy, Suspense } from 'react' - -const Analytics = lazy(() => import('../components/Analytics')) -const UserManagement = lazy(() => import('../components/UserManagement')) - -export default function Dashboard() { - return ( -
- Loading analytics...
}> - - - Loading user management...}> - - - - ) -} -``` - -**Memoization Patterns:** -```typescript -// src/hooks/useExpensiveCalculation.ts -import { useMemo } from 'react' - -export const useExpensiveCalculation = (data: number[]) => { - return useMemo(() => { - return data.reduce((sum, value) => sum + Math.pow(value, 2), 0) - }, [data]) -} -``` - -## Security Best Practices - -### 1. Environment Variable Management - -**Secure Configuration:** -```env -# .env.example -# API Configuration -VITE_API_URL=http://localhost:3001/api -VITE_APP_ENV=development - -# Feature Flags (safe to expose) -VITE_ENABLE_ANALYTICS=false -VITE_ENABLE_DEBUG=true - -# External Services (public keys only) -VITE_STRIPE_PUBLISHABLE_KEY=pk_test_... -VITE_GOOGLE_ANALYTICS_ID=GA-... - -# DO NOT include secret keys in VITE_ variables -# These should be server-side only: -# DATABASE_URL=postgresql://... -# JWT_SECRET=your-secret-key -# STRIPE_SECRET_KEY=sk_... -``` - -**Environment Validation:** -```typescript -// src/config/env.ts -const requiredEnvVars = [ - 'VITE_API_URL', - 'VITE_APP_ENV' -] as const - -type RequiredEnvVar = typeof requiredEnvVars[number] - -const validateEnv = (): Record => { - const env = {} as Record - - for (const varName of requiredEnvVars) { - const value = import.meta.env[varName] - if (!value) { - throw new Error(`Missing required environment variable: ${varName}`) - } - env[varName] = value - } - - return env -} - -export const env = validateEnv() -``` - -### 2. Input Validation and Sanitization - -**Form Validation:** -```typescript -// src/utils/validation.ts -import { z } from 'zod' - -export const userSchema = z.object({ - email: z.string().email('Invalid email address'), - name: z.string().min(2, 'Name must be at least 2 characters'), - age: z.number().min(18, 'Must be at least 18 years old').optional() -}) - -export type UserInput = z.infer - -export const validateUser = (data: unknown): UserInput => { - return userSchema.parse(data) -} -``` - -### 3. Content Security Policy - -**Vite CSP Configuration:** -```typescript -// vite.config.ts -import { defineConfig } from 'vite' - -export default defineConfig({ - server: { - headers: { - 'Content-Security-Policy': [ - "default-src 'self'", - "script-src 'self' 'unsafe-inline'", - "style-src 'self' 'unsafe-inline'", - "img-src 'self' data: https:", - "connect-src 'self' https://api.example.com" - ].join('; ') - } - } -}) -``` - -## Testing Strategies - -### 1. Comprehensive Testing Setup - -**Testing Configuration:** -```typescript -// vitest.config.ts -import { defineConfig } from 'vitest/config' -import react from '@vitejs/plugin-react' - -export default defineConfig({ - plugins: [react()], - test: { - environment: 'jsdom', - setupFiles: ['./src/test/setup.ts'], - coverage: { - reporter: ['text', 'json', 'html'], - threshold: { - global: { - branches: 80, - functions: 80, - lines: 80, - statements: 80 - } - } - } - } -}) -``` - -**Test Utilities:** -```typescript -// src/test/utils.tsx -import { render, RenderOptions } from '@testing-library/react' -import { ReactElement } from 'react' -import { BrowserRouter } from 'react-router-dom' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' - -const AllTheProviders = ({ children }: { children: React.ReactNode }) => { - const queryClient = new QueryClient({ - defaultOptions: { - queries: { retry: false }, - mutations: { retry: false } - } - }) - - return ( - - - {children} - - - ) -} - -const customRender = ( - ui: ReactElement, - options?: Omit -) => render(ui, { wrapper: AllTheProviders, ...options }) - -export * from '@testing-library/react' -export { customRender as render } -``` - -### 2. Testing Patterns - -**Component Testing:** -```typescript -// src/components/UserProfile.test.tsx -import { describe, it, expect, vi } from 'vitest' -import { render, screen, fireEvent, waitFor } from '../test/utils' -import { UserProfile } from './UserProfile' - -describe('UserProfile', () => { - const mockUser = { - id: '1', - name: 'John Doe', - email: 'john@example.com' - } - - it('displays user information correctly', () => { - render() - - expect(screen.getByText('John Doe')).toBeInTheDocument() - expect(screen.getByText('john@example.com')).toBeInTheDocument() - }) - - it('handles edit mode toggle', async () => { - const onUpdate = vi.fn() - render() - - fireEvent.click(screen.getByText('Edit')) - - await waitFor(() => { - expect(screen.getByDisplayValue('John Doe')).toBeInTheDocument() - }) - }) -}) -``` - -**Hook Testing:** -```typescript -// src/hooks/useAuth.test.ts -import { renderHook, act } from '@testing-library/react' -import { describe, it, expect, vi } from 'vitest' -import { useAuth } from './useAuth' - -describe('useAuth', () => { - it('should login user successfully', async () => { - const { result } = renderHook(() => useAuth()) - - await act(async () => { - await result.current.login('user@example.com', 'password') - }) - - expect(result.current.user).toBeDefined() - expect(result.current.isAuthenticated).toBe(true) - }) -}) -``` - -## Documentation Standards - -### 1. Code Documentation - -**JSDoc Comments:** -```typescript -/** - * Formats a date string according to the user's locale preferences - * - * @param date - The date to format (Date object or ISO string) - * @param locale - The locale to use for formatting (defaults to 'en-US') - * @param options - Intl.DateTimeFormat options - * @returns Formatted date string - * - * @example - * ```typescript - * formatDate(new Date(), 'en-US', { dateStyle: 'medium' }) - * // Returns: "Jan 15, 2024" - * ``` - */ -export const formatDate = ( - date: Date | string, - locale: string = 'en-US', - options: Intl.DateTimeFormatOptions = {} -): string => { - const dateObj = typeof date === 'string' ? new Date(date) : date - return new Intl.DateTimeFormat(locale, options).format(dateObj) -} -``` - -### 2. README Structure - -**Comprehensive README Template:** -```markdown -# Template Name - -Brief description of what the template provides and its main use cases. - -## Features - -- ✨ Feature 1 with brief description -- πŸš€ Feature 2 with brief description -- πŸ”§ Feature 3 with brief description - -## Quick Start - -### Prerequisites - -- Node.js 18.0.0 or higher -- npm or yarn package manager - -### Installation - -1. Clone or use the template -2. Install dependencies -3. Configure environment -4. Start development - -### Usage - -Basic usage examples and common workflows. - -## Project Structure - -Detailed explanation of the directory structure and file organization. - -## Configuration - -How to configure the template for different use cases. - -## Deployment - -Step-by-step deployment instructions for different platforms. - -## Contributing - -Guidelines for contributing to the template. - -## License - -License information and attribution. -``` - -## Performance Optimization - -### 1. Bundle Optimization - -**Vite Configuration:** -```typescript -// vite.config.ts -import { defineConfig } from 'vite' -import { visualizer } from 'rollup-plugin-visualizer' - -export default defineConfig({ - build: { - rollupOptions: { - output: { - manualChunks: { - vendor: ['react', 'react-dom'], - router: ['react-router-dom'], - ui: ['@headlessui/react', '@heroicons/react'] - } - } - } - }, - plugins: [ - // Bundle analyzer - visualizer({ - filename: 'dist/stats.html', - open: true, - gzipSize: true - }) - ] -}) -``` - -### 2. Image Optimization - -**Image Component:** -```typescript -// src/components/OptimizedImage.tsx -import { useState } from 'react' - -interface OptimizedImageProps { - src: string - alt: string - width?: number - height?: number - className?: string - loading?: 'lazy' | 'eager' -} - -export const OptimizedImage = ({ - src, - alt, - width, - height, - className, - loading = 'lazy' -}: OptimizedImageProps) => { - const [isLoaded, setIsLoaded] = useState(false) - const [hasError, setHasError] = useState(false) - - return ( -
- {!isLoaded && !hasError && ( -
- )} - - {alt} setIsLoaded(true)} - onError={() => setHasError(true)} - className={`transition-opacity duration-300 ${ - isLoaded ? 'opacity-100' : 'opacity-0' - }`} - /> - - {hasError && ( -
- Failed to load image -
- )} -
- ) -} -``` - -## Accessibility Standards - -### 1. Semantic HTML - -```typescript -// src/components/Navigation.tsx -export const Navigation = () => { - return ( - - ) -} -``` - -### 2. Keyboard Navigation - -```typescript -// src/components/Modal.tsx -import { useEffect, useRef } from 'react' - -export const Modal = ({ isOpen, onClose, children }) => { - const modalRef = useRef(null) - - useEffect(() => { - if (isOpen) { - modalRef.current?.focus() - } - }, [isOpen]) - - const handleKeyDown = (event: KeyboardEvent) => { - if (event.key === 'Escape') { - onClose() - } - } - - if (!isOpen) return null - - return ( -
-
- {children} -
-
- ) -} -``` - -## Maintenance and Updates - -### 1. Dependency Management - -**Automated Updates:** -```json -// .github/workflows/update-dependencies.yml -name: Update Dependencies -on: - schedule: - - cron: '0 0 * * 1' # Weekly on Monday - workflow_dispatch: - -jobs: - update: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: '18' - - run: npx npm-check-updates -u - - run: npm install - - run: npm test - - name: Create Pull Request - uses: peter-evans/create-pull-request@v4 - with: - title: 'chore: update dependencies' -``` - -### 2. Template Versioning - -**Version Management Script:** -```javascript -// scripts/version.js -const fs = require('fs') -const path = require('path') - -const updateVersion = (type = 'patch') => { - const configPath = path.join(__dirname, '..', 'codeboltconfig.yaml') - const packagePath = path.join(__dirname, '..', 'package.json') - - // Update package.json version - const pkg = JSON.parse(fs.readFileSync(packagePath, 'utf8')) - const [major, minor, patch] = pkg.version.split('.').map(Number) - - let newVersion - switch (type) { - case 'major': - newVersion = `${major + 1}.0.0` - break - case 'minor': - newVersion = `${major}.${minor + 1}.0` - break - default: - newVersion = `${major}.${minor}.${patch + 1}` - } - - pkg.version = newVersion - fs.writeFileSync(packagePath, JSON.stringify(pkg, null, 2)) - - // Update codeboltconfig.yaml - let config = fs.readFileSync(configPath, 'utf8') - config = config.replace(/appVersion: .+/, `appVersion: ${newVersion}`) - fs.writeFileSync(configPath, config) - - console.log(`Updated version to ${newVersion}`) -} - -const type = process.argv[2] || 'patch' -updateVersion(type) -``` - -## Common Pitfalls and Solutions - -### 1. Avoid Over-Engineering - -**Problem:** Templates that are too complex for their intended use case. - -**Solution:** Start simple and add complexity only when needed. - -### 2. Dependency Bloat - -**Problem:** Including too many dependencies that users might not need. - -**Solution:** Use peer dependencies and optional features. - -### 3. Poor Documentation - -**Problem:** Insufficient or outdated documentation. - -**Solution:** Maintain documentation as part of the development process. - -### 4. Lack of Testing - -**Problem:** Templates that break when dependencies are updated. - -**Solution:** Implement comprehensive testing and CI/CD. - -## Template Quality Checklist - -- βœ… **Code Quality**: Clean, readable, and well-documented code -- βœ… **Performance**: Optimized for speed and efficiency -- βœ… **Security**: Secure by default with proper validation -- βœ… **Accessibility**: WCAG 2.1 AA compliant -- βœ… **Testing**: Comprehensive test coverage -- βœ… **Documentation**: Clear and complete documentation -- βœ… **Maintainability**: Easy to update and extend -- βœ… **Flexibility**: Configurable for different use cases - -## Next Steps - -- **[Template Examples](2_Docs/templates/examples.md)** - Study real-world template implementations -- **[Publishing Templates](publishing.md)** - Understand community standards -- **[Template Configuration](configuration.md)** - Learn sophisticated template techniques - ---- - -Following these best practices will help you create templates that are not only functional but also maintainable, secure, and enjoyable to use. Remember that great templates evolve over time based on user feedback and changing technology landscapes. \ No newline at end of file diff --git a/docs/2_Docs/templates/configuration.md b/docs/2_Docs/templates/configuration.md deleted file mode 100644 index 9fae3f0..0000000 --- a/docs/2_Docs/templates/configuration.md +++ /dev/null @@ -1,648 +0,0 @@ ---- -sidebar_position: 3 -sidebar_label: Configuration ---- - -# Template Configuration - -The `codeboltconfig.yaml` file is the heart of every Codebolt template. It defines the template's metadata, technical specifications, and usage instructions. This guide provides a comprehensive reference for all configuration options. - -## Configuration Schema - -### Basic Structure - -```yaml -appName: string # Template name -appUniqueId: string # Unique identifier (username/template-name) -appInfo: object # Template metadata -technicalInfo: object # Technical specifications -usage: object # Usage configuration -``` - -## Core Configuration - -### App Identity - -```yaml -appName: my-awesome-template -appUniqueId: yourusername/my-awesome-template -``` - -- **`appName`** (required): The display name of your template - - Should be descriptive and user-friendly - - Used in the Codebolt portal and CLI - - Example: `"React TypeScript Starter"` - -- **`appUniqueId`** (required): Unique identifier for your template - - Format: `username/template-name` - - Must be globally unique across all templates - - Used for template discovery and installation - - Example: `"johndoe/react-typescript-starter"` - -### App Information - -```yaml -appInfo: - description: 'A modern React application template with TypeScript and Vite' - appVersion: 1.0.0 - appRepoUrl: 'https://github.com/yourusername/my-awesome-template' - appIconUrl: 'https://raw.githubusercontent.com/yourusername/my-awesome-template/main/public/icon.png' - appAuthorUserId: yourusername - forkedFrom: '' -``` - -#### Properties - -- **`description`** (required): Brief description of the template - - Should explain what the template provides - - Displayed in template listings and search results - - Keep it concise but informative - -- **`appVersion`** (required): Template version number - - Follow semantic versioning (e.g., `1.0.0`) - - Increment when making changes to the template - - Used for version tracking and updates - -- **`appRepoUrl`** (optional): URL to the template's repository - - Should point to the public GitHub repository - - Used for source code access and contributions - - Example: `"https://github.com/username/template-name"` - -- **`appIconUrl`** (optional): URL to the template's icon/logo - - Should be a publicly accessible image URL - - Recommended size: 256x256 pixels - - Supported formats: PNG, JPG, SVG - - Example: `"https://example.com/icon.png"` - -- **`appAuthorUserId`** (required): Template author's username - - Should match your Codebolt username - - Used for attribution and template ownership - -- **`forkedFrom`** (optional): Original template if this is a fork - - Format: `username/original-template-name` - - Leave empty for original templates - - Used to track template lineage - -## Technical Information - -```yaml -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - CSS - supportedFrameworks: - - React - - Vite - - React Router - secrets: - - env_name: VITE_API_URL - env_description: API endpoint URL for the application - - env_name: VITE_APP_TITLE - env_description: Application title displayed in the browser - services: - - name: database - description: PostgreSQL database for data storage - type: postgresql - - name: redis - description: Redis cache for session management - type: redis - knowledgebases: [] - instruction: - - "This template creates a modern React application with TypeScript" - - "Includes routing, state management, and component library setup" - - "Pre-configured with ESLint, Prettier, and testing framework" -``` - -### Supported Languages - -```yaml -supportedLanguages: - - TypeScript - - JavaScript - - Python - - Java - - Go - - Rust - - CSS - - SCSS - - HTML -``` - -List of programming languages used in the template. Common values include: -- **Frontend**: TypeScript, JavaScript, CSS, SCSS, HTML -- **Backend**: Python, Java, Node.js, Go, Rust, PHP -- **Mobile**: Swift, Kotlin, Dart -- **Other**: SQL, YAML, JSON, Markdown - -### Supported Frameworks - -```yaml -supportedFrameworks: - - React - - Next.js - - Vue.js - - Angular - - Express.js - - FastAPI - - Django - - Spring Boot -``` - -List of frameworks and libraries used in the template. Examples: -- **Frontend Frameworks**: React, Vue.js, Angular, Svelte -- **React Ecosystem**: Next.js, Gatsby, Remix -- **Backend Frameworks**: Express.js, FastAPI, Django, Spring Boot -- **Build Tools**: Vite, Webpack, Parcel -- **Testing**: Jest, Vitest, Cypress, Playwright - -### Environment Secrets - -```yaml -secrets: - - env_name: DATABASE_URL - env_description: PostgreSQL connection string for the database - - env_name: JWT_SECRET - env_description: Secret key for JWT token signing - - env_name: STRIPE_SECRET_KEY - env_description: Stripe secret key for payment processing - - env_name: SENDGRID_API_KEY - env_description: SendGrid API key for email notifications -``` - -Define environment variables that users need to configure: - -- **`env_name`**: The environment variable name -- **`env_description`**: Human-readable description of what the variable is for - -### Services - -```yaml -services: - - name: database - description: PostgreSQL database for application data - type: postgresql - - name: cache - description: Redis cache for session storage - type: redis - - name: storage - description: AWS S3 bucket for file storage - type: s3 - - name: email - description: Email service for notifications - type: smtp -``` - -Define external services that the template requires: - -- **`name`**: Service identifier -- **`description`**: What the service is used for -- **`type`**: Service type (postgresql, mysql, redis, mongodb, s3, etc.) - -### Knowledge Bases - -```yaml -knowledgebases: - - name: api-documentation - description: REST API documentation and examples - type: documentation - - name: component-library - description: UI component library and design system - type: components -``` - -Define knowledge bases or documentation that agents can reference: - -- **`name`**: Knowledge base identifier -- **`description`**: What information it contains -- **`type`**: Type of knowledge base - -### Instructions - -```yaml -instruction: - - "This template creates a full-stack web application" - - "Frontend built with React and TypeScript" - - "Backend API using Node.js and Express" - - "Database integration with PostgreSQL" - - "Authentication using JWT tokens" - - "Deployment ready for Vercel and Railway" -``` - -Provide setup and usage instructions for the template. These help users understand: -- What the template creates -- Key technologies and patterns used -- Important setup steps -- Deployment considerations - -## Usage Configuration - -The `usage` section defines how the template is used in different contexts. - -### Development Configuration - -```yaml -usage: - develop: - agents: - - name: react-developer - description: Helps with React component development and debugging - - name: api-developer - description: Assists with backend API development - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start development server with hot reload - - shell: - command: npm run dev:api - description: Start backend API server -``` - -#### Properties - -- **`agents`**: List of recommended agents for development - - **`name`**: Agent identifier - - **`description`**: What the agent helps with - -- **`layout`**: Preferred UI layout for development - - `'split-view'`: Side-by-side panels - - `'full-screen'`: Single full-screen view - - `'tabbed'`: Tabbed interface - -- **`run`**: Commands to start development - - **`shell.command`**: Command to execute - - **`shell.description`**: Human-readable description - -### Installation Configuration - -```yaml -usage: - install: - steps: - - shell: - command: npm install - description: Install project dependencies - - shell: - command: cp .env.example .env.local - description: Create environment configuration file - - shell: - command: npm run db:migrate - description: Set up database schema - customInstallationAgent: - enabled: true - agent: 'setup-assistant' -``` - -#### Properties - -- **`steps`**: Installation steps to execute - - **`shell.command`**: Command to run - - **`shell.description`**: What the command does - -- **`customInstallationAgent`**: Custom setup assistance - - **`enabled`**: Whether to use a custom agent - - **`agent`**: Agent identifier for setup help - -### Application Usage - -```yaml -usage: - appUse: - prerunsteps: - - shell: - command: npm run build - description: Build application for production - - shell: - command: npm run db:seed - description: Seed database with initial data - agents: - - name: deployment-helper - description: Assists with deployment and configuration - - name: monitoring-agent - description: Helps set up monitoring and analytics - layout: 'full-screen' - appPreview: - type: 'web' - port: 3000 - path: '/' -``` - -#### Properties - -- **`prerunsteps`**: Commands to run before starting the application -- **`agents`**: Agents that help with application usage -- **`layout`**: UI layout for application usage -- **`appPreview`**: Preview configuration - - **`type`**: Preview type (`'web'`, `'mobile'`, `'desktop'`) - - **`port`**: Port number for web applications - - **`path`**: Default path to open - -## Configuration Examples - -### Frontend Template (React) - -```yaml -appName: React TypeScript Starter -appUniqueId: codebolt/react-typescript-starter -appInfo: - description: 'Modern React application with TypeScript, Vite, and Tailwind CSS' - appVersion: 2.1.0 - appRepoUrl: 'https://github.com/codebolt/react-typescript-starter' - appIconUrl: 'https://raw.githubusercontent.com/codebolt/react-typescript-starter/main/public/icon.png' - appAuthorUserId: codebolt - forkedFrom: '' - -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - CSS - - HTML - supportedFrameworks: - - React - - Vite - - Tailwind CSS - - React Router - - React Query - secrets: - - env_name: VITE_API_URL - env_description: Backend API endpoint URL - - env_name: VITE_GOOGLE_ANALYTICS_ID - env_description: Google Analytics tracking ID - services: [] - knowledgebases: [] - instruction: - - "Modern React application with TypeScript and Vite" - - "Includes routing, state management, and UI components" - - "Pre-configured with ESLint, Prettier, and Vitest" - - "Tailwind CSS for styling with responsive design" - -usage: - develop: - agents: - - name: react-developer - description: React component development assistant - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start Vite development server - - install: - steps: - - shell: - command: npm install - description: Install dependencies - - shell: - command: cp .env.example .env.local - description: Create environment file - customInstallationAgent: - enabled: false - agent: '' - - appUse: - prerunsteps: [] - agents: [] - layout: 'full-screen' - appPreview: - type: 'web' - port: 3000 - path: '/' -``` - -### Full-Stack Template (MERN) - -```yaml -appName: MERN Stack Starter -appUniqueId: codebolt/mern-stack-starter -appInfo: - description: 'Full-stack MERN application with authentication and deployment ready' - appVersion: 1.5.0 - appRepoUrl: 'https://github.com/codebolt/mern-stack-starter' - appIconUrl: 'https://raw.githubusercontent.com/codebolt/mern-stack-starter/main/public/icon.png' - appAuthorUserId: codebolt - forkedFrom: '' - -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - CSS - supportedFrameworks: - - React - - Node.js - - Express.js - - MongoDB - - Mongoose - secrets: - - env_name: DATABASE_URL - env_description: MongoDB connection string - - env_name: JWT_SECRET - env_description: Secret key for JWT token signing - - env_name: CLOUDINARY_URL - env_description: Cloudinary URL for image uploads - services: - - name: database - description: MongoDB database for application data - type: mongodb - - name: storage - description: Cloudinary for image and file storage - type: cloudinary - knowledgebases: [] - instruction: - - "Full-stack MERN application with authentication" - - "React frontend with TypeScript and Vite" - - "Express.js backend with MongoDB database" - - "JWT authentication and protected routes" - - "File upload with Cloudinary integration" - -usage: - develop: - agents: - - name: fullstack-developer - description: Full-stack development assistant - - name: api-developer - description: Backend API development helper - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start both frontend and backend servers - - install: - steps: - - shell: - command: npm install - description: Install root dependencies - - shell: - command: cd client && npm install - description: Install frontend dependencies - - shell: - command: cd server && npm install - description: Install backend dependencies - - shell: - command: cp .env.example .env - description: Create environment configuration - customInstallationAgent: - enabled: true - agent: 'mern-setup-assistant' - - appUse: - prerunsteps: - - shell: - command: npm run build - description: Build frontend for production - agents: - - name: deployment-helper - description: Deployment and DevOps assistant - layout: 'full-screen' - appPreview: - type: 'web' - port: 3000 - path: '/' -``` - -### API Template (Node.js) - -```yaml -appName: Node.js API Starter -appUniqueId: codebolt/nodejs-api-starter -appInfo: - description: 'RESTful API with Node.js, Express, PostgreSQL, and comprehensive testing' - appVersion: 1.3.0 - appRepoUrl: 'https://github.com/codebolt/nodejs-api-starter' - appIconUrl: 'https://raw.githubusercontent.com/codebolt/nodejs-api-starter/main/assets/icon.png' - appAuthorUserId: codebolt - forkedFrom: '' - -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - SQL - supportedFrameworks: - - Node.js - - Express.js - - PostgreSQL - - Prisma - - Jest - secrets: - - env_name: DATABASE_URL - env_description: PostgreSQL connection string - - env_name: JWT_SECRET - env_description: Secret key for JWT authentication - - env_name: REDIS_URL - env_description: Redis connection string for caching - services: - - name: database - description: PostgreSQL database for application data - type: postgresql - - name: cache - description: Redis for caching and session storage - type: redis - knowledgebases: - - name: api-documentation - description: OpenAPI specification and endpoint documentation - type: documentation - instruction: - - "RESTful API built with Node.js and Express" - - "PostgreSQL database with Prisma ORM" - - "JWT authentication and authorization" - - "Comprehensive testing with Jest and Supertest" - - "API documentation with OpenAPI/Swagger" - - "Docker support for development and deployment" - -usage: - develop: - agents: - - name: api-developer - description: Backend API development assistant - - name: database-expert - description: Database design and optimization helper - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start API server with hot reload - - install: - steps: - - shell: - command: npm install - description: Install dependencies - - shell: - command: cp .env.example .env - description: Create environment configuration - - shell: - command: npx prisma generate - description: Generate Prisma client - - shell: - command: npx prisma db push - description: Set up database schema - customInstallationAgent: - enabled: true - agent: 'api-setup-assistant' - - appUse: - prerunsteps: - - shell: - command: npm run build - description: Build API for production - - shell: - command: npx prisma db deploy - description: Deploy database migrations - agents: - - name: api-monitor - description: API monitoring and performance assistant - layout: 'full-screen' - appPreview: - type: 'web' - port: 3001 - path: '/api/docs' -``` - -## Validation and Best Practices - -### Configuration Validation - -Ensure your configuration is valid: - -```bash -# Install YAML validator -npm install -g js-yaml - -# Validate syntax -js-yaml codeboltconfig.yaml - -# Check for required fields -node scripts/validate-config.js -``` - -### Best Practices - -1. **Descriptive Names**: Use clear, descriptive names for your template -2. **Semantic Versioning**: Follow semantic versioning for `appVersion` -3. **Complete Metadata**: Fill in all relevant metadata fields -4. **Clear Instructions**: Provide clear, step-by-step instructions -5. **Environment Variables**: Document all required environment variables -6. **Service Dependencies**: List all external service dependencies -7. **Agent Recommendations**: Suggest helpful agents for different workflows - -### Common Mistakes - -- **Missing Required Fields**: Ensure `appName`, `appUniqueId`, and `appInfo.description` are present -- **Invalid YAML Syntax**: Use proper YAML indentation and syntax -- **Incorrect Unique ID**: Format should be `username/template-name` -- **Missing Environment Variables**: Document all required secrets -- **Incomplete Instructions**: Provide comprehensive setup instructions - -## Next Steps - -- **[Publishing Templates](publishing.md)** - Learn how to publish your template -- **[Template Best Practices](best-practices.md)** - Advanced template patterns -- **[Template Examples](2_Docs/templates/examples.md)** - Study real-world configurations - ---- - -A well-configured `codeboltconfig.yaml` file is essential for creating templates that are easy to discover, understand, and use. Take time to craft a comprehensive configuration that helps users get the most out of your template. \ No newline at end of file diff --git a/docs/2_Docs/templates/creating-templates.md b/docs/2_Docs/templates/creating-templates.md deleted file mode 100644 index 7f28d26..0000000 --- a/docs/2_Docs/templates/creating-templates.md +++ /dev/null @@ -1,715 +0,0 @@ ---- -sidebar_position: 2 -sidebar_label: Creating Templates ---- - -# Creating Codebolt Templates - -This guide walks you through the process of creating your own Codebolt templates, from initial setup to publishing and sharing with the community. - -## Prerequisites - -Before creating a template, ensure you have: - -- **Node.js**: Version 18.0.0 or higher -- **Codebolt CLI**: Latest version installed globally -- **Git**: For version control and publishing -- **Code Editor**: VS Code or your preferred editor -- **Codebolt Account**: For publishing to the registry - -```bash -# Install Codebolt CLI -npm install -g codebolt-cli - -# Verify installation -npx codebolt-cli --version -``` - -## Template Creation Methods - -### Method 1: Start from Scratch - -Create a completely new template from the ground up. - -```bash -# Create a new directory for your template -mkdir my-awesome-template -cd my-awesome-template - -# Initialize as a git repository -git init - -# Create the basic structure -mkdir -p src/{components,pages,utils,styles} -mkdir -p public docs scripts - -# Initialize package.json -npm init -y -``` - -### Method 2: Convert Existing Project - -Transform an existing project into a reusable template. - -```bash -# Navigate to your existing project -cd my-existing-project - -# Clean up project-specific files -rm -rf node_modules -rm -rf .env.local -rm -rf dist build - -# Create template-specific documentation -touch README.template.md -``` - -### Method 3: Fork Existing Template - -Build upon an existing template from the community. - -```bash -# Clone an existing template -git clone https://github.com/username/existing-template.git -cd existing-template - -# Remove original git history -rm -rf .git -git init - -# Customize for your needs -``` - -## Essential Template Files - -### 1. `codeboltconfig.yaml` (Required) - -The core configuration file that defines your template: - -```yaml -# Template Identity -appName: my-awesome-template -appUniqueId: yourusername/my-awesome-template - -# Template Information -appInfo: - description: 'A modern React application template with TypeScript and Vite' - appVersion: 1.0.0 - appRepoUrl: 'https://github.com/yourusername/my-awesome-template' - appIconUrl: 'https://raw.githubusercontent.com/yourusername/my-awesome-template/main/public/icon.png' - appAuthorUserId: yourusername - forkedFrom: '' - -# Technical Specifications -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - CSS - supportedFrameworks: - - React - - Vite - - React Router - secrets: - - env_name: VITE_API_URL - env_description: API endpoint URL for the application - - env_name: VITE_APP_TITLE - env_description: Application title displayed in the browser - services: - - name: database - description: PostgreSQL database for data storage - type: postgresql - - name: redis - description: Redis cache for session management - type: redis - knowledgebases: [] - instruction: - - "This template creates a modern React application with TypeScript" - - "Includes routing, state management, and component library setup" - - "Pre-configured with ESLint, Prettier, and testing framework" - -# Usage Configuration -usage: - # Development workflow - develop: - agents: - - name: react-developer - description: Helps with React component development - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start development server - - # Installation process - install: - steps: - - shell: - command: npm install - description: Install project dependencies - - shell: - command: cp .env.example .env.local - description: Create environment configuration - customInstallationAgent: - enabled: true - agent: 'setup-assistant' - - # Application usage - appUse: - prerunsteps: - - shell: - command: npm run build - description: Build application for production - agents: - - name: deployment-helper - description: Assists with deployment configuration - layout: 'full-screen' - appPreview: - type: 'web' - port: 3000 - path: '/' -``` - -### 2. `package.json` - -Define dependencies, scripts, and metadata: - -```json -{ - "name": "my-awesome-template", - "version": "1.0.0", - "description": "A modern React application template", - "main": "src/main.tsx", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview", - "test": "vitest", - "test:ui": "vitest --ui", - "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", - "lint:fix": "eslint . --ext ts,tsx --fix", - "format": "prettier --write \"src/**/*.{ts,tsx,css,md}\"", - "type-check": "tsc --noEmit" - }, - "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-router-dom": "^6.8.0", - "@tanstack/react-query": "^4.24.0", - "zustand": "^4.3.0" - }, - "devDependencies": { - "@types/react": "^18.0.27", - "@types/react-dom": "^18.0.10", - "@typescript-eslint/eslint-plugin": "^5.50.0", - "@typescript-eslint/parser": "^5.50.0", - "@vitejs/plugin-react": "^3.1.0", - "eslint": "^8.33.0", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.3.4", - "prettier": "^2.8.3", - "typescript": "^4.9.3", - "vite": "^4.1.0", - "vitest": "^0.28.0" - }, - "keywords": [ - "react", - "typescript", - "vite", - "template", - "codebolt" - ], - "author": "Your Name ", - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/yourusername/my-awesome-template.git" - }, - "bugs": { - "url": "https://github.com/yourusername/my-awesome-template/issues" - }, - "homepage": "https://github.com/yourusername/my-awesome-template#readme" -} -``` - -### 3. `README.md` - -Comprehensive documentation for template users: - -```markdown -# My Awesome Template - -A modern React application template with TypeScript, Vite, and best practices built-in. - -## Features - -- ⚑ **Vite**: Lightning-fast development server and build tool -- πŸ”· **TypeScript**: Full type safety and modern JavaScript features -- βš›οΈ **React 18**: Latest React with concurrent features -- πŸ›£οΈ **React Router**: Client-side routing with data loading -- πŸ”„ **TanStack Query**: Powerful data synchronization -- 🐻 **Zustand**: Lightweight state management -- 🎨 **Tailwind CSS**: Utility-first CSS framework -- πŸ§ͺ **Vitest**: Fast unit testing framework -- πŸ“ **ESLint**: Code linting and formatting -- πŸ’… **Prettier**: Code formatting -- πŸ”§ **Pre-commit Hooks**: Automated code quality checks - -## Quick Start - -### Using Codebolt - -1. Browse to [portal.codebolt.ai](https://portal.codebolt.ai) -2. Search for "my-awesome-template" -3. Click "Use Template" to create a new project - -### Using CLI - -```bash -# Create new project from template -npx codebolt-cli create-from-template yourusername/my-awesome-template - -# Or clone directly -git clone https://github.com/yourusername/my-awesome-template.git my-project -cd my-project -npm install -``` - -## Development - -```bash -# Start development server -npm run dev - -# Run tests -npm test - -# Build for production -npm run build - -# Preview production build -npm run preview -``` - -## Project Structure - -``` -src/ -β”œβ”€β”€ components/ # Reusable UI components -β”‚ β”œβ”€β”€ ui/ # Basic UI components -β”‚ └── layout/ # Layout components -β”œβ”€β”€ pages/ # Page components -β”œβ”€β”€ hooks/ # Custom React hooks -β”œβ”€β”€ utils/ # Utility functions -β”œβ”€β”€ stores/ # Zustand stores -β”œβ”€β”€ types/ # TypeScript type definitions -β”œβ”€β”€ styles/ # Global styles -└── main.tsx # Application entry point -``` - -## Configuration - -### Environment Variables - -Copy `.env.example` to `.env.local` and configure: - -```env -VITE_API_URL=http://localhost:3001/api -VITE_APP_TITLE=My Awesome App -``` - -### Customization - -1. **Branding**: Update `public/` assets and `index.html` -2. **Styling**: Modify `tailwind.config.js` and global styles -3. **Routing**: Add routes in `src/App.tsx` -4. **State**: Create stores in `src/stores/` - -## Deployment - -### Vercel - -```bash -npm install -g vercel -vercel -``` - -### Netlify - -```bash -npm run build -# Upload dist/ folder to Netlify -``` - -### Docker - -```bash -docker build -t my-awesome-app . -docker run -p 3000:3000 my-awesome-app -``` - -## Contributing - -1. Fork the repository -2. Create a feature branch -3. Make your changes -4. Add tests if applicable -5. Submit a pull request - -## License - -MIT License - see LICENSE file for details. -``` - -### 4. Environment Configuration - -Create example environment files: - -**`.env.example`**: -```env -# API Configuration -VITE_API_URL=http://localhost:3001/api -VITE_API_KEY=your-api-key-here - -# Application Settings -VITE_APP_TITLE=My Awesome App -VITE_APP_DESCRIPTION=A modern React application - -# Feature Flags -VITE_ENABLE_ANALYTICS=false -VITE_ENABLE_DEBUG=true - -# External Services -VITE_STRIPE_PUBLIC_KEY=pk_test_... -VITE_GOOGLE_ANALYTICS_ID=GA-... -``` - -**`.env.local.example`**: -```env -# Local development overrides -VITE_API_URL=http://localhost:3001/api -VITE_ENABLE_DEBUG=true -``` - -### 5. Configuration Files - -**`vite.config.ts`**: -```typescript -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' -import path from 'path' - -export default defineConfig({ - plugins: [react()], - resolve: { - alias: { - '@': path.resolve(__dirname, './src'), - }, - }, - server: { - port: 3000, - open: true, - }, - build: { - outDir: 'dist', - sourcemap: true, - }, -}) -``` - -**`tsconfig.json`**: -```json -{ - "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx", - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"] - } - }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] -} -``` - -## Template Structure Best Practices - -### 1. Organized Directory Structure - -``` -my-template/ -β”œβ”€β”€ .github/ # GitHub workflows and templates -β”‚ β”œβ”€β”€ workflows/ -β”‚ β”‚ β”œβ”€β”€ ci.yml -β”‚ β”‚ └── deploy.yml -β”‚ └── ISSUE_TEMPLATE/ -β”œβ”€β”€ docs/ # Additional documentation -β”‚ β”œβ”€β”€ deployment.md -β”‚ β”œβ”€β”€ development.md -β”‚ └── api.md -β”œβ”€β”€ public/ # Static assets -β”‚ β”œβ”€β”€ favicon.ico -β”‚ β”œβ”€β”€ icon.png -β”‚ └── manifest.json -β”œβ”€β”€ scripts/ # Build and utility scripts -β”‚ β”œβ”€β”€ build.sh -β”‚ β”œβ”€β”€ deploy.sh -β”‚ └── setup.js -β”œβ”€β”€ src/ # Source code -β”‚ β”œβ”€β”€ components/ -β”‚ β”œβ”€β”€ pages/ -β”‚ β”œβ”€β”€ hooks/ -β”‚ β”œβ”€β”€ utils/ -β”‚ β”œβ”€β”€ stores/ -β”‚ β”œβ”€β”€ types/ -β”‚ β”œβ”€β”€ styles/ -β”‚ └── main.tsx -β”œβ”€β”€ tests/ # Test files -β”‚ β”œβ”€β”€ __mocks__/ -β”‚ β”œβ”€β”€ setup.ts -β”‚ └── utils.test.ts -β”œβ”€β”€ .env.example # Environment variables template -β”œβ”€β”€ .gitignore # Git ignore rules -β”œβ”€β”€ .eslintrc.json # ESLint configuration -β”œβ”€β”€ .prettierrc # Prettier configuration -β”œβ”€β”€ codeboltconfig.yaml # Codebolt configuration -β”œβ”€β”€ package.json # Dependencies and scripts -β”œβ”€β”€ README.md # Template documentation -β”œβ”€β”€ tsconfig.json # TypeScript configuration -β”œβ”€β”€ vite.config.ts # Vite configuration -└── vitest.config.ts # Vitest configuration -``` - -### 2. Placeholder Content - -Include meaningful placeholder content that demonstrates the template's capabilities: - -**`src/pages/Home.tsx`**: -```typescript -import React from 'react' -import { Link } from 'react-router-dom' - -export default function Home() { - return ( -
-
-
-

- Welcome to My Awesome Template -

-

- A modern React application template with TypeScript and Vite -

-
- - Get Started - - - View on GitHub - -
-
- -
- - - -
-
-
- ) -} - -function FeatureCard({ title, description }: { title: string; description: string }) { - return ( -
-

{title}

-

{description}

-
- ) -} -``` - -### 3. Configuration Templates - -Provide configuration templates that users can easily customize: - -**`src/config/app.ts`**: -```typescript -export const appConfig = { - name: process.env.VITE_APP_TITLE || 'My Awesome App', - description: process.env.VITE_APP_DESCRIPTION || 'A modern React application', - version: '1.0.0', - api: { - baseUrl: process.env.VITE_API_URL || 'http://localhost:3001/api', - timeout: 10000, - }, - features: { - analytics: process.env.VITE_ENABLE_ANALYTICS === 'true', - debug: process.env.VITE_ENABLE_DEBUG === 'true', - }, -} as const - -export type AppConfig = typeof appConfig -``` - -## Testing Your Template - -### 1. Local Testing - -```bash -# Test template creation -cd my-awesome-template - -# Install dependencies -npm install - -# Run development server -npm run dev - -# Run tests -npm test - -# Build for production -npm run build - -# Test production build -npm run preview -``` - -### 2. Template Validation - -Create a validation script to ensure template integrity: - -**`scripts/validate-template.js`**: -```javascript -#!/usr/bin/env node - -const fs = require('fs') -const path = require('path') - -function validateTemplate() { - const requiredFiles = [ - 'codeboltconfig.yaml', - 'package.json', - 'README.md', - '.env.example', - 'src/main.tsx' - ] - - const requiredDirs = [ - 'src', - 'public' - ] - - console.log('πŸ” Validating template structure...') - - // Check required files - for (const file of requiredFiles) { - if (!fs.existsSync(file)) { - console.error(`❌ Missing required file: ${file}`) - process.exit(1) - } - } - - // Check required directories - for (const dir of requiredDirs) { - if (!fs.existsSync(dir) || !fs.statSync(dir).isDirectory()) { - console.error(`❌ Missing required directory: ${dir}`) - process.exit(1) - } - } - - // Validate package.json - try { - const packageJson = JSON.parse(fs.readFileSync('package.json', 'utf8')) - if (!packageJson.name || !packageJson.version) { - console.error('❌ package.json missing name or version') - process.exit(1) - } - } catch (error) { - console.error('❌ Invalid package.json:', error.message) - process.exit(1) - } - - // Validate codeboltconfig.yaml - try { - const yaml = require('js-yaml') - const config = yaml.load(fs.readFileSync('codeboltconfig.yaml', 'utf8')) - if (!config.appName || !config.appUniqueId) { - console.error('❌ codeboltconfig.yaml missing appName or appUniqueId') - process.exit(1) - } - } catch (error) { - console.error('❌ Invalid codeboltconfig.yaml:', error.message) - process.exit(1) - } - - console.log('βœ… Template validation passed!') -} - -validateTemplate() -``` - -### 3. User Testing - -Test the template from a user's perspective: - -```bash -# Create a test directory -mkdir template-test -cd template-test - -# Clone your template -git clone https://github.com/yourusername/my-awesome-template.git . - -# Remove git history (simulate template usage) -rm -rf .git - -# Test the setup process -npm install -npm run dev -``` - -## Next Steps - -Once your template is ready: - -1. **[Template Configuration](configuration.md)** - Fine-tune your `codeboltconfig.yaml` -2. **[Publishing Templates](publishing.md)** - Share your template with the community -3. **[Template Best Practices](best-practices.md)** - Learn advanced template patterns -4. **[Template Examples](2_Docs/templates/examples.md)** - Study successful template implementations - ---- - -Creating high-quality templates takes time and attention to detail, but the result is a valuable resource that can help countless developers build better applications faster. \ No newline at end of file diff --git a/docs/2_Docs/templates/examples.md b/docs/2_Docs/templates/examples.md deleted file mode 100644 index 46838b7..0000000 --- a/docs/2_Docs/templates/examples.md +++ /dev/null @@ -1,1095 +0,0 @@ ---- -sidebar_position: 6 -sidebar_label: Examples ---- - -# Template Examples - -This section provides real-world examples of Codebolt templates across different categories, showcasing best practices and complete implementations. - -## 1. React TypeScript Starter - -A modern React application template with TypeScript, Vite, and essential development tools. - -### Configuration (`codeboltconfig.yaml`) - -```yaml -appName: React TypeScript Starter -appUniqueId: codebolt/react-typescript-starter -appInfo: - description: 'Modern React application with TypeScript, Vite, Tailwind CSS, and testing setup' - appVersion: 2.1.0 - appRepoUrl: 'https://github.com/codebolt/react-typescript-starter' - appIconUrl: 'https://raw.githubusercontent.com/codebolt/react-typescript-starter/main/public/react-icon.png' - appAuthorUserId: codebolt - forkedFrom: '' - -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - CSS - - HTML - supportedFrameworks: - - React - - Vite - - Tailwind CSS - - React Router - - React Query - - Zustand - secrets: - - env_name: VITE_API_URL - env_description: Backend API endpoint URL - - env_name: VITE_GOOGLE_ANALYTICS_ID - env_description: Google Analytics tracking ID (optional) - services: [] - knowledgebases: [] - instruction: - - "Modern React 18 application with TypeScript and Vite" - - "Includes routing, state management, and UI components" - - "Pre-configured with ESLint, Prettier, and Vitest testing" - - "Tailwind CSS for styling with responsive design" - - "Ready for deployment to Vercel, Netlify, or similar platforms" - -usage: - develop: - agents: - - name: react-developer - description: React component development and debugging assistant - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start Vite development server with hot reload - - install: - steps: - - shell: - command: npm install - description: Install project dependencies - - shell: - command: cp .env.example .env.local - description: Create environment configuration file - customInstallationAgent: - enabled: false - agent: '' - - appUse: - prerunsteps: [] - agents: [] - layout: 'full-screen' - appPreview: - type: 'web' - port: 3000 - path: '/' -``` - -### Project Structure - -``` -react-typescript-starter/ -β”œβ”€β”€ public/ -β”‚ β”œβ”€β”€ favicon.ico -β”‚ β”œβ”€β”€ react-icon.png -β”‚ └── manifest.json -β”œβ”€β”€ src/ -β”‚ β”œβ”€β”€ components/ -β”‚ β”‚ β”œβ”€β”€ ui/ -β”‚ β”‚ β”‚ β”œβ”€β”€ Button.tsx -β”‚ β”‚ β”‚ β”œβ”€β”€ Input.tsx -β”‚ β”‚ β”‚ └── index.ts -β”‚ β”‚ β”œβ”€β”€ layout/ -β”‚ β”‚ β”‚ β”œβ”€β”€ Header.tsx -β”‚ β”‚ β”‚ β”œβ”€β”€ Footer.tsx -β”‚ β”‚ β”‚ └── Layout.tsx -β”‚ β”‚ └── ErrorBoundary.tsx -β”‚ β”œβ”€β”€ pages/ -β”‚ β”‚ β”œβ”€β”€ Home.tsx -β”‚ β”‚ β”œβ”€β”€ About.tsx -β”‚ β”‚ └── NotFound.tsx -β”‚ β”œβ”€β”€ hooks/ -β”‚ β”‚ β”œβ”€β”€ useAuth.ts -β”‚ β”‚ └── useLocalStorage.ts -β”‚ β”œβ”€β”€ stores/ -β”‚ β”‚ β”œβ”€β”€ authStore.ts -β”‚ β”‚ └── appStore.ts -β”‚ β”œβ”€β”€ utils/ -β”‚ β”‚ β”œβ”€β”€ api.ts -β”‚ β”‚ β”œβ”€β”€ constants.ts -β”‚ β”‚ └── helpers.ts -β”‚ β”œβ”€β”€ types/ -β”‚ β”‚ β”œβ”€β”€ auth.types.ts -β”‚ β”‚ └── api.types.ts -β”‚ β”œβ”€β”€ styles/ -β”‚ β”‚ β”œβ”€β”€ globals.css -β”‚ β”‚ └── components.css -β”‚ β”œβ”€β”€ App.tsx -β”‚ β”œβ”€β”€ main.tsx -β”‚ └── vite-env.d.ts -β”œβ”€β”€ tests/ -β”‚ β”œβ”€β”€ setup.ts -β”‚ └── utils.tsx -β”œβ”€β”€ .env.example -β”œβ”€β”€ .gitignore -β”œβ”€β”€ .eslintrc.json -β”œβ”€β”€ .prettierrc -β”œβ”€β”€ codeboltconfig.yaml -β”œβ”€β”€ index.html -β”œβ”€β”€ package.json -β”œβ”€β”€ README.md -β”œβ”€β”€ tailwind.config.js -β”œβ”€β”€ tsconfig.json -β”œβ”€β”€ vite.config.ts -└── vitest.config.ts -``` - -### Key Files - -**`package.json`:** -```json -{ - "name": "react-typescript-starter", - "version": "2.1.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "preview": "vite preview", - "test": "vitest", - "test:ui": "vitest --ui", - "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", - "lint:fix": "eslint . --ext ts,tsx --fix", - "format": "prettier --write \"src/**/*.{ts,tsx,css,md}\"" - }, - "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-router-dom": "^6.8.0", - "@tanstack/react-query": "^4.24.0", - "zustand": "^4.3.0" - }, - "devDependencies": { - "@types/react": "^18.0.27", - "@types/react-dom": "^18.0.10", - "@typescript-eslint/eslint-plugin": "^5.50.0", - "@typescript-eslint/parser": "^5.50.0", - "@vitejs/plugin-react": "^3.1.0", - "autoprefixer": "^10.4.13", - "eslint": "^8.33.0", - "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.3.4", - "postcss": "^8.4.21", - "prettier": "^2.8.3", - "tailwindcss": "^3.2.0", - "typescript": "^4.9.3", - "vite": "^4.1.0", - "vitest": "^0.28.0" - } -} -``` - -**`src/App.tsx`:** -```typescript -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { Layout } from './components/layout/Layout' -import { Home } from './pages/Home' -import { About } from './pages/About' -import { NotFound } from './pages/NotFound' -import { ErrorBoundary } from './components/ErrorBoundary' -import './styles/globals.css' - -const queryClient = new QueryClient() - -function App() { - return ( - - - - - - } /> - } /> - } /> - - - - - - ) -} - -export default App -``` - -## 2. Next.js Full-Stack Template - -A complete full-stack application with Next.js, TypeScript, Prisma, and authentication. - -### Configuration (`codeboltconfig.yaml`) - -```yaml -appName: Next.js Full-Stack Starter -appUniqueId: codebolt/nextjs-fullstack-starter -appInfo: - description: 'Complete Next.js application with authentication, database, and API routes' - appVersion: 1.8.0 - appRepoUrl: 'https://github.com/codebolt/nextjs-fullstack-starter' - appIconUrl: 'https://raw.githubusercontent.com/codebolt/nextjs-fullstack-starter/main/public/nextjs-icon.png' - appAuthorUserId: codebolt - forkedFrom: '' - -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - CSS - - SQL - supportedFrameworks: - - Next.js - - React - - Prisma - - NextAuth.js - - Tailwind CSS - secrets: - - env_name: DATABASE_URL - env_description: PostgreSQL database connection string - - env_name: NEXTAUTH_SECRET - env_description: Secret key for NextAuth.js session encryption - - env_name: NEXTAUTH_URL - env_description: Canonical URL of your site (for production) - - env_name: GOOGLE_CLIENT_ID - env_description: Google OAuth client ID for authentication - - env_name: GOOGLE_CLIENT_SECRET - env_description: Google OAuth client secret - services: - - name: database - description: PostgreSQL database for application data - type: postgresql - - name: auth - description: NextAuth.js for authentication and session management - type: auth - knowledgebases: [] - instruction: - - "Full-stack Next.js 13+ application with App Router" - - "PostgreSQL database with Prisma ORM" - - "Authentication with NextAuth.js (Google, GitHub, email)" - - "API routes for backend functionality" - - "Responsive design with Tailwind CSS" - - "Ready for deployment to Vercel with database" - -usage: - develop: - agents: - - name: fullstack-developer - description: Full-stack Next.js development assistant - - name: database-expert - description: Database schema and query optimization helper - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start Next.js development server - - install: - steps: - - shell: - command: npm install - description: Install project dependencies - - shell: - command: cp .env.example .env.local - description: Create environment configuration - - shell: - command: npx prisma generate - description: Generate Prisma client - - shell: - command: npx prisma db push - description: Set up database schema - customInstallationAgent: - enabled: true - agent: 'nextjs-setup-assistant' - - appUse: - prerunsteps: - - shell: - command: npm run build - description: Build Next.js application for production - agents: - - name: deployment-helper - description: Deployment and production optimization assistant - layout: 'full-screen' - appPreview: - type: 'web' - port: 3000 - path: '/' -``` - -### Key Features - -**Authentication Setup (`src/lib/auth.ts`):** -```typescript -import { NextAuthOptions } from 'next-auth' -import GoogleProvider from 'next-auth/providers/google' -import { PrismaAdapter } from '@next-auth/prisma-adapter' -import { prisma } from './prisma' - -export const authOptions: NextAuthOptions = { - adapter: PrismaAdapter(prisma), - providers: [ - GoogleProvider({ - clientId: process.env.GOOGLE_CLIENT_ID!, - clientSecret: process.env.GOOGLE_CLIENT_SECRET!, - }), - ], - callbacks: { - session: async ({ session, token }) => { - if (session?.user) { - session.user.id = token.sub! - } - return session - }, - jwt: async ({ user, token }) => { - if (user) { - token.sub = user.id - } - return token - }, - }, - session: { - strategy: 'jwt', - }, -} -``` - -**API Route Example (`src/app/api/users/route.ts`):** -```typescript -import { NextRequest, NextResponse } from 'next/server' -import { getServerSession } from 'next-auth' -import { authOptions } from '@/lib/auth' -import { prisma } from '@/lib/prisma' - -export async function GET() { - try { - const session = await getServerSession(authOptions) - - if (!session) { - return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }) - } - - const users = await prisma.user.findMany({ - select: { - id: true, - name: true, - email: true, - image: true, - createdAt: true, - }, - }) - - return NextResponse.json(users) - } catch (error) { - return NextResponse.json( - { error: 'Internal Server Error' }, - { status: 500 } - ) - } -} -``` - -## 3. Express.js API Template - -A robust REST API template with Express.js, TypeScript, and comprehensive features. - -### Configuration (`codeboltconfig.yaml`) - -```yaml -appName: Express.js API Starter -appUniqueId: codebolt/express-api-starter -appInfo: - description: 'Production-ready Express.js API with TypeScript, authentication, and testing' - appVersion: 1.5.0 - appRepoUrl: 'https://github.com/codebolt/express-api-starter' - appIconUrl: 'https://raw.githubusercontent.com/codebolt/express-api-starter/main/assets/express-icon.png' - appAuthorUserId: codebolt - forkedFrom: '' - -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - SQL - supportedFrameworks: - - Express.js - - Node.js - - Prisma - - Jest - - Swagger - secrets: - - env_name: DATABASE_URL - env_description: PostgreSQL connection string - - env_name: JWT_SECRET - env_description: Secret key for JWT token signing - - env_name: REDIS_URL - env_description: Redis connection string for caching - - env_name: SMTP_HOST - env_description: SMTP server for email notifications - - env_name: SMTP_USER - env_description: SMTP username - - env_name: SMTP_PASS - env_description: SMTP password - services: - - name: database - description: PostgreSQL database for application data - type: postgresql - - name: cache - description: Redis for caching and session storage - type: redis - - name: email - description: SMTP service for email notifications - type: smtp - knowledgebases: - - name: api-documentation - description: OpenAPI specification and endpoint documentation - type: documentation - instruction: - - "RESTful API built with Express.js and TypeScript" - - "PostgreSQL database with Prisma ORM" - - "JWT authentication and role-based authorization" - - "Comprehensive testing with Jest and Supertest" - - "API documentation with Swagger/OpenAPI" - - "Docker support for development and deployment" - - "Rate limiting, CORS, and security middleware" - -usage: - develop: - agents: - - name: api-developer - description: Backend API development and debugging assistant - - name: database-expert - description: Database design and query optimization helper - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start API server with hot reload and debugging - - install: - steps: - - shell: - command: npm install - description: Install project dependencies - - shell: - command: cp .env.example .env - description: Create environment configuration - - shell: - command: npx prisma generate - description: Generate Prisma client - - shell: - command: npx prisma db push - description: Set up database schema - - shell: - command: npm run seed - description: Seed database with initial data - customInstallationAgent: - enabled: true - agent: 'api-setup-assistant' - - appUse: - prerunsteps: - - shell: - command: npm run build - description: Build API for production - - shell: - command: npx prisma db deploy - description: Deploy database migrations - agents: - - name: api-monitor - description: API monitoring and performance optimization assistant - layout: 'full-screen' - appPreview: - type: 'web' - port: 3001 - path: '/api/docs' -``` - -### API Structure - -**Main Server (`src/server.ts`):** -```typescript -import express from 'express' -import cors from 'cors' -import helmet from 'helmet' -import rateLimit from 'express-rate-limit' -import { authRouter } from './routes/auth' -import { usersRouter } from './routes/users' -import { errorHandler } from './middleware/errorHandler' -import { logger } from './utils/logger' -import swaggerUi from 'swagger-ui-express' -import { swaggerSpec } from './config/swagger' - -const app = express() -const PORT = process.env.PORT || 3001 - -// Security middleware -app.use(helmet()) -app.use(cors({ - origin: process.env.FRONTEND_URL || 'http://localhost:3000', - credentials: true, -})) - -// Rate limiting -const limiter = rateLimit({ - windowMs: 15 * 60 * 1000, // 15 minutes - max: 100, // limit each IP to 100 requests per windowMs -}) -app.use(limiter) - -// Body parsing -app.use(express.json({ limit: '10mb' })) -app.use(express.urlencoded({ extended: true })) - -// API documentation -app.use('/api/docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec)) - -// Routes -app.use('/api/auth', authRouter) -app.use('/api/users', usersRouter) - -// Health check -app.get('/health', (req, res) => { - res.json({ status: 'OK', timestamp: new Date().toISOString() }) -}) - -// Error handling -app.use(errorHandler) - -app.listen(PORT, () => { - logger.info(`Server running on port ${PORT}`) -}) -``` - -**Authentication Middleware (`src/middleware/auth.ts`):** -```typescript -import { Request, Response, NextFunction } from 'express' -import jwt from 'jsonwebtoken' -import { prisma } from '../config/database' - -export interface AuthRequest extends Request { - user?: { - id: string - email: string - role: string - } -} - -export const authenticate = async ( - req: AuthRequest, - res: Response, - next: NextFunction -) => { - try { - const token = req.header('Authorization')?.replace('Bearer ', '') - - if (!token) { - return res.status(401).json({ error: 'Access denied. No token provided.' }) - } - - const decoded = jwt.verify(token, process.env.JWT_SECRET!) as any - const user = await prisma.user.findUnique({ - where: { id: decoded.userId }, - select: { id: true, email: true, role: true } - }) - - if (!user) { - return res.status(401).json({ error: 'Invalid token.' }) - } - - req.user = user - next() - } catch (error) { - res.status(401).json({ error: 'Invalid token.' }) - } -} - -export const authorize = (roles: string[]) => { - return (req: AuthRequest, res: Response, next: NextFunction) => { - if (!req.user) { - return res.status(401).json({ error: 'Access denied.' }) - } - - if (!roles.includes(req.user.role)) { - return res.status(403).json({ error: 'Insufficient permissions.' }) - } - - next() - } -} -``` - -## 4. Vue.js SPA Template - -A modern Vue.js single-page application with Composition API and TypeScript. - -### Configuration (`codeboltconfig.yaml`) - -```yaml -appName: Vue.js SPA Starter -appUniqueId: codebolt/vue-spa-starter -appInfo: - description: 'Modern Vue.js 3 SPA with Composition API, TypeScript, and Pinia' - appVersion: 1.3.0 - appRepoUrl: 'https://github.com/codebolt/vue-spa-starter' - appIconUrl: 'https://raw.githubusercontent.com/codebolt/vue-spa-starter/main/public/vue-icon.png' - appAuthorUserId: codebolt - forkedFrom: '' - -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - CSS - - HTML - supportedFrameworks: - - Vue.js - - Vite - - Vue Router - - Pinia - - Tailwind CSS - secrets: - - env_name: VITE_API_URL - env_description: Backend API endpoint URL - - env_name: VITE_APP_TITLE - env_description: Application title - services: [] - knowledgebases: [] - instruction: - - "Modern Vue.js 3 application with Composition API" - - "TypeScript support for better development experience" - - "Pinia for state management" - - "Vue Router for client-side routing" - - "Tailwind CSS for styling" - - "Vite for fast development and building" - -usage: - develop: - agents: - - name: vue-developer - description: Vue.js component development assistant - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start Vite development server - - install: - steps: - - shell: - command: npm install - description: Install dependencies - - shell: - command: cp .env.example .env.local - description: Create environment file - customInstallationAgent: - enabled: false - agent: '' - - appUse: - prerunsteps: [] - agents: [] - layout: 'full-screen' - appPreview: - type: 'web' - port: 3000 - path: '/' -``` - -### Vue Component Example - -**`src/components/UserProfile.vue`:** -```vue - - - - - -``` - -## 5. E-commerce Template - -A complete e-commerce application template with product management, cart, and checkout. - -### Configuration (`codeboltconfig.yaml`) - -```yaml -appName: E-commerce Starter -appUniqueId: codebolt/ecommerce-starter -appInfo: - description: 'Complete e-commerce solution with product management, cart, and payment integration' - appVersion: 1.2.0 - appRepoUrl: 'https://github.com/codebolt/ecommerce-starter' - appIconUrl: 'https://raw.githubusercontent.com/codebolt/ecommerce-starter/main/public/shop-icon.png' - appAuthorUserId: codebolt - forkedFrom: '' - -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - - CSS - - SQL - supportedFrameworks: - - Next.js - - React - - Prisma - - Stripe - - Tailwind CSS - secrets: - - env_name: DATABASE_URL - env_description: PostgreSQL database connection string - - env_name: STRIPE_SECRET_KEY - env_description: Stripe secret key for payment processing - - env_name: STRIPE_PUBLISHABLE_KEY - env_description: Stripe publishable key for frontend - - env_name: STRIPE_WEBHOOK_SECRET - env_description: Stripe webhook secret for payment verification - - env_name: CLOUDINARY_URL - env_description: Cloudinary URL for image uploads - services: - - name: database - description: PostgreSQL database for products, orders, and users - type: postgresql - - name: payments - description: Stripe for payment processing - type: stripe - - name: storage - description: Cloudinary for product image storage - type: cloudinary - knowledgebases: - - name: product-catalog - description: Product information and inventory management - type: catalog - instruction: - - "Complete e-commerce solution with Next.js and TypeScript" - - "Product catalog with categories and search functionality" - - "Shopping cart and wishlist features" - - "Stripe integration for secure payments" - - "Order management and tracking" - - "Admin dashboard for product and order management" - - "Responsive design optimized for mobile commerce" - -usage: - develop: - agents: - - name: ecommerce-developer - description: E-commerce development and feature implementation assistant - - name: payment-expert - description: Payment integration and security specialist - layout: 'split-view' - run: - - shell: - command: npm run dev - description: Start Next.js development server - - install: - steps: - - shell: - command: npm install - description: Install project dependencies - - shell: - command: cp .env.example .env.local - description: Create environment configuration - - shell: - command: npx prisma generate - description: Generate Prisma client - - shell: - command: npx prisma db push - description: Set up database schema - - shell: - command: npm run seed - description: Seed database with sample products - customInstallationAgent: - enabled: true - agent: 'ecommerce-setup-assistant' - - appUse: - prerunsteps: - - shell: - command: npm run build - description: Build application for production - agents: - - name: ecommerce-optimizer - description: Performance and conversion optimization assistant - layout: 'full-screen' - appPreview: - type: 'web' - port: 3000 - path: '/' -``` - -### E-commerce Features - -**Product Component (`src/components/ProductCard.tsx`):** -```typescript -import { useState } from 'react' -import Image from 'next/image' -import Link from 'next/link' -import { useCart } from '@/hooks/useCart' -import { Product } from '@/types/product' - -interface ProductCardProps { - product: Product -} - -export const ProductCard = ({ product }: ProductCardProps) => { - const [isLoading, setIsLoading] = useState(false) - const { addToCart } = useCart() - - const handleAddToCart = async () => { - setIsLoading(true) - try { - await addToCart(product.id, 1) - } catch (error) { - console.error('Failed to add to cart:', error) - } finally { - setIsLoading(false) - } - } - - return ( -
- -
- {product.name} - {product.discount > 0 && ( -
- -{product.discount}% -
- )} -
- - -
- -

- {product.name} -

- - -

- {product.description} -

- -
-
- - ${product.price.toFixed(2)} - - {product.originalPrice && ( - - ${product.originalPrice.toFixed(2)} - - )} -
- - -
- -
-
- {[...Array(5)].map((_, i) => ( - - - - ))} -
- - ({product.reviewCount} reviews) - -
-
-
- ) -} -``` - -## Template Selection Guide - -### Choose React TypeScript Starter for: -- Modern single-page applications -- Component-heavy interfaces -- Teams familiar with React ecosystem -- Projects requiring high interactivity - -### Choose Next.js Full-Stack for: -- Applications needing SSR/SSG -- Full-stack projects with API routes -- SEO-critical applications -- Projects requiring authentication - -### Choose Express.js API for: -- Standalone backend services -- Microservices architecture -- API-first development -- Projects requiring custom server logic - -### Choose Vue.js SPA for: -- Teams preferring Vue.js ecosystem -- Progressive web applications -- Projects requiring gentle learning curve -- Component-based architectures - -### Choose E-commerce Template for: -- Online stores and marketplaces -- Product catalog applications -- Payment processing requirements -- Inventory management needs - -## Customization Tips - -### 1. Adapting Templates -- Modify `codeboltconfig.yaml` for your specific needs -- Update dependencies to latest versions -- Customize styling and branding -- Add or remove features based on requirements - -### 2. Environment Configuration -- Set up proper environment variables -- Configure external services (databases, APIs) -- Set up development and production environments -- Configure deployment pipelines - -### 3. Testing and Quality -- Run all tests before deployment -- Set up continuous integration -- Configure code quality tools -- Implement monitoring and logging - -## Next Steps - -- **[Template Best Practices](best-practices.md)** - Learn advanced template patterns -- **[Publishing Templates](publishing.md)** - Share your customized templates -- **[Publishing Templates](publishing.md)** - Contribute to the template ecosystem - ---- - -These examples provide a solid foundation for various types of applications. Use them as starting points and customize them to fit your specific project requirements and team preferences. \ No newline at end of file diff --git a/docs/2_Docs/templates/overview.md b/docs/2_Docs/templates/overview.md deleted file mode 100644 index d52f060..0000000 --- a/docs/2_Docs/templates/overview.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -sidebar_position: 1 -sidebar_label: Overview ---- - -# Codebolt Templates - -Codebolt Templates are pre-configured application blueprints that provide developers with a solid foundation for building applications. These templates include complete project structures, configurations, and best practices, allowing developers to quickly bootstrap new projects without starting from scratch. - -## What are Codebolt Templates? - -Codebolt Templates are reusable project templates that include: - -- **Complete Project Structure**: Pre-organized folders and files -- **Configuration Files**: Ready-to-use `codeboltconfig.yaml` and other setup files -- **Dependencies**: Pre-configured package.json with necessary dependencies -- **Best Practices**: Industry-standard project organization and patterns -- **Documentation**: README files and setup instructions -- **Development Workflow**: Pre-configured scripts and development tools - -## Template Types - -### Application Templates -Complete application blueprints for specific frameworks or use cases: -- **React Applications**: Modern React apps with TypeScript, routing, and state management -- **Next.js Projects**: Full-stack Next.js applications with API routes -- **Node.js APIs**: Backend services with Express, Fastify, or other frameworks -- **Full-Stack Applications**: Complete frontend and backend solutions -- **Mobile Apps**: React Native or other mobile development templates - -### Component Templates -Smaller, focused templates for specific components or features: -- **UI Component Libraries**: Reusable component collections -- **Authentication Systems**: Login/signup flows with security best practices -- **Dashboard Templates**: Admin panels and data visualization interfaces -- **E-commerce Components**: Shopping cart, product catalog, and payment integration - -## Key Features - -### πŸš€ **Quick Start** -- Instant project setup with one command -- Pre-configured development environment -- Ready-to-run applications out of the box - -### πŸ”§ **Customizable** -- Configurable through `codeboltconfig.yaml` -- Modular architecture for easy customization -- Support for environment-specific configurations - -### πŸ“¦ **Complete Ecosystem** -- Integration with Codebolt agents and tools -- Pre-configured CI/CD workflows -- Built-in development and deployment scripts - -### 🌐 **Shareable** -- Publish templates to the Codebolt registry -- Discover and use community templates -- Version control and template management - -### πŸ›‘οΈ **Best Practices** -- Security-first configurations -- Performance optimizations -- Accessibility considerations -- Code quality standards - -## Template Structure - -Every Codebolt template follows a standardized structure: - -``` -my-template/ -β”œβ”€β”€ codeboltconfig.yaml # Template configuration -β”œβ”€β”€ package.json # Dependencies and scripts -β”œβ”€β”€ README.md # Template documentation -β”œβ”€β”€ .gitignore # Git ignore rules -β”œβ”€β”€ src/ # Source code -β”‚ β”œβ”€β”€ components/ # Reusable components -β”‚ β”œβ”€β”€ pages/ # Application pages -β”‚ β”œβ”€β”€ utils/ # Utility functions -β”‚ └── styles/ # Styling files -β”œβ”€β”€ public/ # Static assets -β”œβ”€β”€ docs/ # Additional documentation -└── scripts/ # Build and deployment scripts -``` - -## Template Configuration (`codeboltconfig.yaml`) - -The heart of every template is the `codeboltconfig.yaml` file, which defines: - -```yaml -appName: my-awesome-template -appUniqueId: username/my-awesome-template -appInfo: - description: 'A modern React application template' - appVersion: 1.0.0 - appRepoUrl: 'https://github.com/username/my-awesome-template' - appIconUrl: 'https://example.com/icon.png' - appAuthorUserId: username - forkedFrom: '' - -technicalInfo: - supportedLanguages: - - TypeScript - - JavaScript - supportedFrameworks: - - React - - Vite - secrets: [] - services: [] - knowledgebases: [] - instruction: [] - -usage: - develop: - agents: [] - layout: '' - run: - - shell: - command: npm run dev - install: - steps: - - shell: - command: npm install - customInstallationAgent: - enabled: false - agent: '' - appUse: - prerunsteps: [] - agents: [] - layout: '' - appPreview: - type: 'web' -``` - -## Template Discovery and Usage - -### Finding Templates - -Templates can be discovered through: - -1. **Codebolt Portal**: Browse the template gallery at [portal.codebolt.ai](https://portal.codebolt.ai) -2. **CLI Search**: Use `npx codebolt-cli search templates` to find templates -3. **Community Registry**: Explore community-contributed templates -4. **GitHub Integration**: Import templates directly from GitHub repositories - -### Using Templates - -Templates can be used in multiple ways: - -#### 1. Through Codebolt Application -- Browse templates in the application interface -- One-click template instantiation -- Automatic dependency installation and setup - -#### 2. Via CLI -```bash -# Create new project from template -npx codebolt-cli create-from-template - -# Clone a specific template -npx codebolt-cli clone-template username/template-name -``` - -#### 3. Direct GitHub Clone -```bash -# Clone template repository -git clone https://github.com/username/template-name.git -cd template-name -npm install -``` - -## Template Categories - -### Frontend Templates -- **React SPA**: Single-page applications with modern React patterns -- **Vue.js Applications**: Vue 3 applications with Composition API -- **Angular Projects**: Angular applications with TypeScript -- **Static Sites**: JAMstack sites with Gatsby, Nuxt, or similar - -### Backend Templates -- **REST APIs**: Express.js, Fastify, or Koa.js API servers -- **GraphQL Services**: Apollo Server or other GraphQL implementations -- **Microservices**: Containerized service architectures -- **Serverless Functions**: AWS Lambda, Vercel Functions, or Netlify Functions - -### Full-Stack Templates -- **MERN Stack**: MongoDB, Express, React, Node.js -- **MEAN Stack**: MongoDB, Express, Angular, Node.js -- **T3 Stack**: Next.js, TypeScript, tRPC, Prisma -- **JAMstack**: JavaScript, APIs, and Markup - -### Specialized Templates -- **E-commerce**: Online store templates with payment integration -- **Dashboards**: Admin panels and analytics interfaces -- **Blogs**: Content management and publishing platforms -- **Portfolio Sites**: Personal and professional portfolio templates - -## Benefits for Developers - -### Time Savings -- Skip repetitive setup tasks -- Focus on business logic instead of boilerplate -- Faster project initialization and deployment - -### Best Practices -- Industry-standard project structures -- Security configurations out of the box -- Performance optimizations included - -### Consistency -- Standardized development workflows -- Consistent code organization across projects -- Team collaboration improvements - -### Learning -- Study well-structured codebases -- Learn modern development patterns -- Understand framework best practices - -## Benefits for Organizations - -### Standardization -- Consistent project structures across teams -- Standardized development workflows -- Reduced onboarding time for new developers - -### Quality Assurance -- Pre-tested configurations and setups -- Security best practices enforced -- Code quality standards maintained - -### Productivity -- Faster project kickoff -- Reduced development overhead -- Focus on business value delivery - -## Template Ecosystem - -### Community Contributions -- Open-source template sharing -- Community-driven improvements -- Collaborative template development - -### Enterprise Templates -- Organization-specific templates -- Private template repositories -- Custom branding and configurations - -### Template Marketplace -- Discover popular templates -- Rate and review templates -- Template analytics and usage metrics - -## Getting Started - -Ready to start using Codebolt Templates? Here's your next steps: - -1. **[Creating Templates](creating-templates.md)** - Learn how to create your own templates -2. **[Template Configuration](configuration.md)** - Deep dive into `codeboltconfig.yaml` -3. **[Publishing Templates](publishing.md)** - Share your templates with the community -4. **[Template Best Practices](best-practices.md)** - Guidelines for creating quality templates -5. **[Template Examples](2_Docs/templates/examples.md)** - Explore real-world template implementations - -## Support and Community - -- **Documentation**: [https://codeboltai.github.io](https://codeboltai.github.io) -- **Portal**: [https://portal.codebolt.ai](https://portal.codebolt.ai) -- **GitHub**: [https://github.com/codeboltai](https://github.com/codeboltai) -- **Community**: Join our Discord for template discussions and support - ---- - -Codebolt Templates empower developers to build faster, better, and more consistently. Start exploring templates today and accelerate your development workflow! diff --git a/docs/2_Docs/templates/publishing.md b/docs/2_Docs/templates/publishing.md deleted file mode 100644 index 9b80426..0000000 --- a/docs/2_Docs/templates/publishing.md +++ /dev/null @@ -1,419 +0,0 @@ ---- -sidebar_position: 4 -sidebar_label: Publishing Templates ---- - -# Publishing Templates - -Once you've created and tested your Codebolt template, you can share it with the community by publishing it to the Codebolt registry. This guide covers the publishing process through both the Codebolt Portal and CLI. - -## Prerequisites - -Before publishing your template, ensure you have: - -- **Completed Template**: A fully functional template with all required files -- **Codebolt Account**: Active account on [portal.codebolt.ai](https://portal.codebolt.ai) -- **GitHub Repository**: Public repository hosting your template -- **Valid Configuration**: Properly configured `codeboltconfig.yaml` -- **Documentation**: Comprehensive README and documentation -- **Testing**: Template has been tested and validated - -## Publishing Methods - -### Method 1: Codebolt Portal (Recommended) - -The Codebolt Portal provides a user-friendly interface for publishing templates. - -#### Step 1: Access the Portal - -1. Navigate to [portal.codebolt.ai](https://portal.codebolt.ai) -2. Sign in to your Codebolt account -3. Go to the Templates section -4. Click "Add Templates" button - -#### Step 2: Fill Template Information - -Complete the template submission form: - -**Basic Information:** -- **Template Title**: Descriptive name for your template -- **Description**: Brief explanation of what the template provides -- **Template Type**: Select "Template" or "App" based on your template type -- **URL**: GitHub repository URL or deployment URL - -**Template Icon:** -- Upload an icon/logo for your template -- Recommended size: 256x256 pixels -- Supported formats: PNG, JPG, SVG - -#### Step 3: Submit for Review - -1. Review all information for accuracy -2. Click "Add" to submit your template -3. Your template will be reviewed by the Codebolt team -4. You'll receive notification once approved - -### Method 2: CLI Publishing - -Use the Codebolt CLI for programmatic template publishing. - -#### Step 1: Prepare Your Template - -Ensure your template is ready: - -```bash -# Navigate to your template directory -cd my-awesome-template - -# Validate template structure -npm run validate-template - -# Test template functionality -npm install -npm run dev -npm run build -``` - -#### Step 2: Login to CLI - -```bash -# Login to your Codebolt account -npx codebolt-cli login - -# Verify authentication -npx codebolt-cli whoami -``` - -#### Step 3: Publish Template - -```bash -# Publish template to registry -npx codebolt-cli publish-template - -# Or specify template directory -npx codebolt-cli publish-template ./path/to/template -``` - -The CLI will: -1. Validate your `codeboltconfig.yaml` -2. Package your template -3. Upload to the Codebolt registry -4. Provide a confirmation with template ID - -## Template Preparation Checklist - -### Required Files - -Ensure your template includes: - -- βœ… `codeboltconfig.yaml` - Template configuration -- βœ… `package.json` - Dependencies and scripts -- βœ… `README.md` - Comprehensive documentation -- βœ… `.env.example` - Environment variable template -- βœ… `.gitignore` - Git ignore rules -- βœ… Source code files in `src/` directory - -### Optional but Recommended - -- βœ… `LICENSE` - License file (MIT recommended) -- βœ… `CHANGELOG.md` - Version history -- βœ… `CONTRIBUTING.md` - Contribution guidelines -- βœ… `.github/workflows/` - CI/CD workflows -- βœ… `docs/` - Additional documentation -- βœ… `scripts/` - Setup and build scripts - -### Quality Checklist - -**Code Quality:** -- βœ… Code follows best practices and conventions -- βœ… No hardcoded secrets or sensitive information -- βœ… Proper error handling and validation -- βœ… Clean, readable, and well-commented code - -**Documentation:** -- βœ… Clear and comprehensive README -- βœ… Installation and setup instructions -- βœ… Usage examples and screenshots -- βœ… API documentation (if applicable) -- βœ… Troubleshooting guide - -**Configuration:** -- βœ… Valid `codeboltconfig.yaml` with all required fields -- βœ… Proper semantic versioning -- βœ… Accurate metadata and descriptions -- βœ… Environment variables documented - -**Testing:** -- βœ… Template installs without errors -- βœ… All scripts work as expected -- βœ… Development server starts successfully -- βœ… Build process completes without issues - -## Template Metadata Best Practices - -### Naming Conventions - -**Template Name:** -- Use descriptive, clear names -- Include key technologies (e.g., "React TypeScript Starter") -- Avoid generic names like "Template" or "Starter" -- Keep it concise but informative - -**Unique ID:** -- Format: `username/template-name` -- Use lowercase with hyphens -- Example: `johndoe/react-typescript-starter` - -### Description Guidelines - -Write compelling descriptions that: -- Explain what the template creates -- Highlight key features and technologies -- Mention target use cases -- Keep it under 200 characters for listings - -**Good Example:** -``` -Modern React application with TypeScript, Vite, Tailwind CSS, and testing setup. Perfect for building scalable web applications with best practices built-in. -``` - -**Poor Example:** -``` -A template for React apps. -``` - -### Icon and Branding - -**Icon Requirements:** -- Size: 256x256 pixels minimum -- Format: PNG, JPG, or SVG -- Clear and recognizable at small sizes -- Represents the template's purpose or technology - -**Branding Tips:** -- Use technology logos when appropriate -- Create custom icons for unique templates -- Ensure good contrast and visibility -- Avoid copyrighted images - -## Version Management - -### Semantic Versioning - -Follow semantic versioning for your templates: - -- **Major (1.0.0)**: Breaking changes or complete rewrites -- **Minor (1.1.0)**: New features or significant improvements -- **Patch (1.1.1)**: Bug fixes and small improvements - -### Update Process - -When updating your template: - -1. **Update Version**: Increment version in `codeboltconfig.yaml` -2. **Update Changelog**: Document changes in `CHANGELOG.md` -3. **Test Changes**: Thoroughly test all modifications -4. **Republish**: Submit updated template through portal or CLI - -### Version History Example - -```markdown -# Changelog - -## [2.1.0] - 2024-01-15 -### Added -- TypeScript support for better type safety -- Tailwind CSS for styling -- Vitest for testing framework - -### Changed -- Updated React to version 18 -- Improved project structure -- Enhanced documentation - -### Fixed -- Build script issues on Windows -- Environment variable loading - -## [2.0.0] - 2023-12-01 -### Added -- Complete rewrite with Vite -- Modern React patterns and hooks -- Comprehensive testing setup - -### Breaking Changes -- Removed Create React App dependency -- Changed build output directory -- Updated environment variable names -``` - -## Community Guidelines - -### Template Quality Standards - -**Code Standards:** -- Follow language and framework conventions -- Use consistent formatting and style -- Include proper error handling -- Implement security best practices - -**Documentation Standards:** -- Provide clear setup instructions -- Include usage examples -- Document all configuration options -- Add troubleshooting information - -**Maintenance Standards:** -- Keep dependencies up to date -- Respond to issues and questions -- Accept community contributions -- Maintain backward compatibility when possible - -### Community Interaction - -**Best Practices:** -- Respond to user feedback promptly -- Accept and review pull requests -- Provide helpful issue responses -- Share knowledge and improvements - -**Template Promotion:** -- Share on social media and developer communities -- Write blog posts about your template -- Present at meetups or conferences -- Collaborate with other developers - -## Template Discovery and SEO - -### Improving Discoverability - -**Keywords and Tags:** -- Use relevant technology keywords -- Include framework and library names -- Add use case keywords (e.g., "dashboard", "e-commerce") -- Consider trending technologies - -**GitHub Optimization:** -- Use descriptive repository names -- Add comprehensive README -- Include relevant topics/tags -- Maintain active development - -**Portal Optimization:** -- Choose appropriate template category -- Use clear, searchable descriptions -- Upload attractive icons -- Maintain high-quality documentation - -## Analytics and Feedback - -### Tracking Template Usage - -Monitor your template's performance: - -**Portal Analytics:** -- View download/usage statistics -- Monitor user ratings and reviews -- Track template popularity trends -- Analyze user feedback - -**GitHub Insights:** -- Monitor repository stars and forks -- Track issue and pull request activity -- Analyze traffic and clone statistics -- Review community contributions - -### Gathering Feedback - -**Feedback Channels:** -- GitHub issues for bug reports -- Discussions for feature requests -- Social media for general feedback -- Direct messages for private concerns - -**Improvement Process:** -1. Collect and analyze feedback -2. Prioritize improvements and fixes -3. Implement changes and test thoroughly -4. Update documentation and version -5. Republish updated template - -## Troubleshooting Publishing Issues - -### Common Problems - -**Authentication Issues:** -```bash -# Re-login to CLI -npx codebolt-cli logout -npx codebolt-cli login - -# Verify credentials -npx codebolt-cli whoami -``` - -**Configuration Validation Errors:** -```bash -# Validate YAML syntax -npx js-yaml codeboltconfig.yaml - -# Check required fields -node scripts/validate-config.js -``` - -**Upload Failures:** -- Check internet connection -- Verify file sizes aren't too large -- Ensure all required files are present -- Try publishing again after a few minutes - -**Template Rejection:** -- Review quality guidelines -- Fix any identified issues -- Update documentation -- Resubmit for review - -### Getting Help - -**Support Channels:** -- **Documentation**: [codeboltai.github.io](https://codeboltai.github.io) -- **Portal Support**: Contact form on portal.codebolt.ai -- **Community**: Discord server for community help -- **GitHub**: Issues on the Codebolt repositories - -## Post-Publishing - -### Template Maintenance - -**Regular Updates:** -- Keep dependencies updated -- Fix reported bugs promptly -- Add new features based on feedback -- Maintain compatibility with latest tools - -**Community Engagement:** -- Respond to issues and questions -- Review and merge pull requests -- Share updates and improvements -- Collaborate with other template creators - -### Success Metrics - -**Track Your Template's Success:** -- Download/usage statistics -- Community feedback and ratings -- GitHub stars and forks -- Issue resolution time -- Community contributions - -## Next Steps - -After publishing your template: - -1. **[Template Best Practices](best-practices.md)** - Learn advanced template patterns -2. **[Template Examples](2_Docs/templates/examples.md)** - Study successful template implementations -3. **[Best Practices](best-practices.md)** - Understand community standards - ---- - -Publishing your template is just the beginning. Engage with the community, gather feedback, and continuously improve your template to provide maximum value to developers worldwide. \ No newline at end of file diff --git a/docs/3_CustomAgents/core/cli/1_overview.md b/docs/3_CustomAgents/core/cli/1_overview.md new file mode 100644 index 0000000..f1bd2f2 --- /dev/null +++ b/docs/3_CustomAgents/core/cli/1_overview.md @@ -0,0 +1,67 @@ +# Overview + +Welcome to the Codebolt CLI documentation. This CLI tool provides comprehensive functionality for managing Codebolt agents and MCP tools. + +## Overview + +The Codebolt CLI is a command-line interface that allows you to: +- Create and manage Codebolt agents +- Develop and publish MCP (Model Context Protocol) tools +- Create and manage providers +- Handle authentication and project management + +## Quick Start + +1. **Installation**: Ensure you have Node.js installed +2. **Authentication**: `codebolt login` +3. **Create your first project**: Choose from the command categories below + +## Command Categories + +### [Agent Commands](./agent.md) +Commands for creating, managing, and deploying Codebolt agents. + +**Key Commands:** +- `createagent` - Create a new agent project +- `publishagent` - Publish an agent to the registry +- `startagent` - Start an agent locally +- `listagents` - List all your agents +- `cloneagent` - Clone an existing agent +- `pullagent` - Pull latest agent configuration + +### [MCP Tools Commands](./tools.md) +Commands for developing and managing MCP (Model Context Protocol) tools. + +**Key Commands:** +- `createtool` - Create a new MCP tool +- `publishtool` - Publish a tool to the registry +- `listtools` - List all your tools +- `runtool` - Execute a tool with parameters +- `inspecttool` - Inspect tool implementation +- `pulltool` - Pull latest tool configuration + + +### [Utility Commands](./utility.md) +General utility commands for CLI management. + +**Key Commands:** +- `login` / `logout` - Authentication +- `version` - Check CLI version +- `init` - Initialize CLI configuration + +## Getting Help + +For detailed information about any command, use: +```bash +codebolt --help +``` + +For specific category documentation, navigate to the respective folders above. + +## Version + +Current CLI Version: 1.0.1 + + + + diff --git a/docs/3_CustomAgents/core/cli/3_agent.md b/docs/3_CustomAgents/core/cli/3_agent.md new file mode 100644 index 0000000..2370e26 --- /dev/null +++ b/docs/3_CustomAgents/core/cli/3_agent.md @@ -0,0 +1,179 @@ +# Agent Commands + +This section covers all commands related to creating, managing, and deploying Codebolt agents. + +## Overview + +Agent commands allow you to create, publish, manage, and run Codebolt agents. Agents are AI-powered applications that can perform specific tasks and interact with users. + +## Commands + +### Create Agent +Create a new Codebolt Agent project. + +```bash +codebolt-cli createagent [options] +``` + +**Options:** +- `-n, --name `: Specify the name of the project +- `--quick`: Create agent quickly with default settings + +**Examples:** +```bash +# Create agent with custom name +codebolt-cli createagent --name my-agent + +# Create agent with quick setup +codebolt-cli createagent --quick + +# Interactive creation +codebolt-cli createagent +``` + +![createagent](/customagent/createagent.png) + + + +**What it does:** +- Creates a new agent project structure +- Sets up webpack configuration +- Generates necessary YAML configuration files +- Creates package.json with required dependencies + +### Publish Agent +Upload and publish an agent to the registry. + +```bash +codebolt-cli publishagent [folderPath] +``` + +**Description:** Upload a folder containing an agent to the Codebolt registry. + + +![publishagent](/customagent/publishagent.png) + +**Examples:** +```bash +# Publish agent in current directory +codebolt-cli publishagent + +# Publish agent from specific folder +codebolt-cli publishagent ./my-agent-folder +``` + +**What it does:** +- Validates agent configuration +- Packages the agent for distribution +- Uploads to the Codebolt registry +- Makes the agent available for use + +### List Agents +Display all agents created and uploaded by the current user. + +```bash +codebolt-cli listagents +``` + +**Description:** List all the agents created and uploaded by you. + +**Output:** Shows agent names, IDs, creation dates, and status. + +### Start Agent +Start an agent in the specified working directory. + +```bash +codebolt-cli startagent [workingDir] +``` + +**Description:** Start an agent in the specified working directory. + +**Examples:** +```bash +# Start agent in current directory +codebolt-cli startagent + +# Start agent in specific directory +codebolt-cli startagent ./my-agent +``` + +**What it does:** +- Loads agent configuration +- Starts the agent server +- Provides local development environment + +### Pull Agent +Pull the latest agent configuration from the server. + +```bash +codebolt-cli pullagent [workingDir] +``` + +**Description:** Pull the latest agent configuration from server. + +**Examples:** +```bash +# Pull agent in current directory +codebolt-cli pullagent + +# Pull agent from specific directory +codebolt-cli pullagent ./my-agent +``` + +**What it does:** +- Downloads latest configuration +- Updates local files +- Syncs with remote changes + +### Clone Agent +Clone an agent using its unique ID to the specified directory. + +```bash +codebolt-cli cloneagent [targetDir] +``` + +**Description:** Clone an agent using its unique_id to the specified directory (defaults to current directory). + +**Examples:** +```bash +# Clone agent to current directory +codebolt-cli cloneagent abc123 + +# Clone agent to specific directory +codebolt-cli cloneagent abc123 ./cloned-agent +``` + +**What it does:** +- Downloads agent source code +- Sets up local development environment +- Preserves agent configuration + +## Agent Project Structure + +When you create an agent, the following structure is generated: + +``` +my-agent/ +β”œβ”€β”€ agent.yaml # Agent configuration +β”œβ”€β”€ codeboltagent.yaml # Codebolt-specific config +β”œβ”€β”€ task.yaml # Task definitions +β”œβ”€β”€ index.js # Main agent code +β”œβ”€β”€ package.json # Dependencies +β”œβ”€β”€ webpack.config.js # Build configuration +└── .gitignore # Git ignore rules +``` + +## Best Practices + +1. **Naming**: Use descriptive names for your agents +2. **Configuration**: Keep agent configuration in YAML files +3. **Testing**: Test agents locally before publishing +4. **Versioning**: Use semantic versioning for agent updates +5. **Documentation**: Include clear descriptions in your agent configs + +## Troubleshooting + +- **Publish Issues**: Ensure all required files are present +- **Start Issues**: Check if dependencies are installed +- **Clone Issues**: Verify the unique ID is correct +- **Configuration Issues**: Validate YAML syntax diff --git a/docs/3_CustomAgents/core/cli/4_tools.md b/docs/3_CustomAgents/core/cli/4_tools.md new file mode 100644 index 0000000..263de33 --- /dev/null +++ b/docs/3_CustomAgents/core/cli/4_tools.md @@ -0,0 +1,184 @@ +# MCP Tools Commands + +This section covers all commands related to creating, managing, and using MCP (Model Context Protocol) tools. + +## Overview + +MCP Tools commands allow you to develop, publish, and manage tools that follow the Model Context Protocol. These tools can be used by AI agents to extend their capabilities and interact with external systems. + +## Commands + +### Create Tool +Create a new Codebolt Tool (MCP tool). + +```bash +codebolt-cli createtool [options] +``` + +**Options:** +- `-n, --name `: Name of the Tool +- `-i, --id `: Unique identifier for the tool (no spaces) +- `-d, --description `: Description of the tool +- `-p, --parameters `: Tool parameters in JSON format (e.g., `{"param1": "value1"}`) + +**Examples:** +```bash +# Create tool with all options +codebolt-cli createtool --name "My Tool" --id my-tool --description "A useful tool" --parameters '{"param1": "value1"}' + +# Interactive creation +codebolt-cli createtool +``` + +**What it does:** +- Creates a new MCP tool project structure +- Generates tool configuration files +- Sets up package.json with MCP dependencies +- Creates basic tool implementation + +### Publish Tool +Publish an MCP tool to the registry. + +```bash +codebolt-cli publishtool [folderPath] +``` + +**Description:** Publish a MCP tool to the registry. + +**Examples:** +```bash +# Publish tool in current directory +codebolt-cli publishtool + +# Publish tool from specific folder +codebolt-cli publishtool ./my-tool-folder +``` + +**What it does:** +- Validates MCP tool implementation +- Packages the tool for distribution +- Uploads to the Codebolt registry +- Makes the tool available for agents + +### List Tools +Display all MCP tools published by the current user. + +```bash +codebolt-cli listtools +``` + +**Description:** List all the MCP tools published by you. + +**Output:** Shows tool names, IDs, descriptions, and publication dates. + +### Pull Tool +Pull the latest MCP tool configuration from the server. + +```bash +codebolt-cli pulltool [workingDir] +``` + +**Description:** Pull the latest MCP tool configuration from server. + +**Examples:** +```bash +# Pull tool in current directory +codebolt-cli pulltool + +# Pull tool from specific directory +codebolt-cli pulltool ./my-tool +``` + +**What it does:** +- Downloads latest tool configuration +- Updates local implementation files +- Syncs with remote changes + +### Run Tool +Run a specified tool with a required file. + +```bash +codebolt-cli runtool +``` + +**Description:** Run a specified tool with a required file. + +**Examples:** +```bash +codebolt-cli runtool process data.json +codebolt-cli runtool analyze report.txt +codebolt-cli runtool validate config.yaml +``` + +**What it does:** +- Loads the specified tool +- Executes the tool with provided parameters +- Returns tool output + +### Inspect Tool +Inspect a server file using the MCP inspector. + +```bash +codebolt-cli inspecttool +``` + +**Description:** Inspect a server file using the Model Context Protocol inspector. + +**Examples:** +```bash +codebolt-cli inspecttool ./server.js +codebolt-cli inspecttool ./tool-handler.js +codebolt-cli inspecttool ./index.js +``` + +**What it does:** +- Analyzes MCP tool implementation +- Validates protocol compliance +- Shows available functions and schemas +- Identifies potential issues + +## MCP Tool Project Structure + +When you create an MCP tool, the following structure is generated: + +```bash +my-tool/ +β”œβ”€β”€ codebolttool.yaml # Tool configuration +β”œβ”€β”€ index.js # Main tool implementation +β”œβ”€β”€ package.json # Dependencies +└── README.md # Tool documentation +``` + +## MCP Protocol Basics + +MCP tools follow the Model Context Protocol specification: + +- **Functions**: Define what the tool can do +- **Schemas**: Define input/output data structures +- **Resources**: Define external data sources +- **Prompts**: Define user interaction patterns + +## Best Practices + +1. **Unique IDs**: Use descriptive, unique identifiers (no spaces) +2. **Clear Descriptions**: Provide detailed tool descriptions +3. **Parameter Validation**: Validate all input parameters +4. **Error Handling**: Implement proper error handling +5. **Testing**: Test tools thoroughly before publishing +6. **Documentation**: Include clear usage examples + +## Common MCP Tool Types + +- **Data Processing**: Tools for analyzing and transforming data +- **API Integration**: Tools for connecting to external services +- **File Operations**: Tools for reading/writing files +- **System Commands**: Tools for executing system operations +- **Database Access**: Tools for database operations + +## Troubleshooting + +- **Inspection Issues**: Ensure MCP inspector package is installed +- **Publish Issues**: Validate tool implementation and configuration +- **Run Issues**: Check parameter format and file paths +- **Protocol Issues**: Verify MCP compliance + diff --git a/docs/3_CustomAgents/core/cli/4_utility.md b/docs/3_CustomAgents/core/cli/4_utility.md new file mode 100644 index 0000000..7ca49f5 --- /dev/null +++ b/docs/3_CustomAgents/core/cli/4_utility.md @@ -0,0 +1,141 @@ +# Utility Commands + +This section covers all utility and general management commands for the Codebolt CLI. + +## Overview + +Utility commands provide essential functionality for CLI management, authentication, and general operations that are not specific to agents, tools, or providers. + +## Commands + +### Login +Authenticate with the Codebolt platform. + +```bash +codebolt-cli login +``` + +![login](/customagent/login.png) + +*This will prompt a login message with a unique URL. Open the URL in your browser and sign in to complete the authentication process.* + + + +### Logout +Sign out from the Codebolt platform. + +```bash +codebolt-cli logout +``` + +**Description:** Log out of the application and clear your session. + +**What it does:** +- Clears stored authentication tokens +- Ends current session +- Removes local credentials +- Confirms logout completion + +### Version +Check the application version. + +```bash +codebolt-cli version +``` + +**Description:** Display the current version of the codebolt-cli CLI. + +**Output:** Shows the current CLI version (e.g., "1.0.1") + +**Use Cases:** +- Verify CLI installation +- Check for updates +- Troubleshooting version-specific issues +- Documentation reference + +### Initialize +Initialize the Codebolt CLI. + +```bash +codebolt-cli init +``` + +**Description:** Initialize the Codebolt CLI with necessary configuration. + +**What it does:** +- Creates local configuration files +- Sets up default settings +- Establishes workspace structure +- Configures environment variables + +**Initialization Steps:** +1. Creates `.codebolt` configuration directory +2. Generates default configuration files +3. Sets up local workspace settings +4. Configures authentication preferences + +## Configuration Management + +### Local Configuration +The CLI stores configuration in: +- `~/.codebolt/config.json` - User preferences +- `~/.codebolt/auth.json` - Authentication tokens +- `~/.codebolt/workspace.json` - Workspace settings + +### Environment Variables +The CLI respects these environment variables: +- `CODEBOLT_API_URL` - API endpoint URL +- `CODEBOLT_WORKSPACE` - Default workspace path +- `CODEBOLT_LOG_LEVEL` - Logging verbosity + +## Authentication Management + +### Session Management +- **Automatic Token Refresh**: Tokens are automatically refreshed +- **Session Persistence**: Sessions persist across CLI restarts +- **Secure Storage**: Credentials are stored securely locally + +### Multiple Accounts +- **Account Switching**: Support for multiple accounts +- **Profile Management**: Named profiles for different contexts +- **Workspace Isolation**: Separate workspaces per account + +## Best Practices + +1. **Regular Logout**: Log out when switching between accounts +2. **Version Checking**: Check version before reporting issues +3. **Initialization**: Run init after fresh installation +4. **Secure Credentials**: Never share authentication tokens +5. **Workspace Organization**: Use separate workspaces for different projects + +## Troubleshooting + +### Authentication Issues +- **Invalid Credentials**: Verify username/password +- **Token Expired**: Re-authenticate with `login` +- **Network Issues**: Check internet connection +- **API Unavailable**: Verify API endpoint configuration + +### Configuration Issues +- **Missing Config**: Run `init` to create configuration +- **Corrupted Config**: Delete config files and re-run `init` +- **Permission Issues**: Check file permissions on config directory + +### Version Issues +- **Outdated CLI**: Update to latest version +- **Version Mismatch**: Check compatibility with server version +- **Installation Issues**: Reinstall CLI if necessary + +## Security Considerations + +- **Token Storage**: Authentication tokens are stored locally +- **Credential Protection**: Never commit credentials to version control +- **Session Security**: Log out from shared systems +- **API Security**: Use HTTPS endpoints only + +## Related Commands + +These utility commands work with all other CLI commands: +- Authentication is required for most operations +- Version checking helps with troubleshooting +- Initialization sets up the environment for all commands diff --git a/docs/3_CustomAgents/core/cli/overview.md b/docs/3_CustomAgents/core/cli/overview.md deleted file mode 100644 index 331e428..0000000 --- a/docs/3_CustomAgents/core/cli/overview.md +++ /dev/null @@ -1,809 +0,0 @@ -# CLI Overview - -The Codebolt Command Line Interface (CLI) provides powerful command-line tools for automation, scripting, and integration with your existing development workflows. Whether you're building CI/CD pipelines, automating repetitive tasks, or managing large-scale operations, the CLI gives you programmatic access to all of Codebolt's features. - -## Introduction - -While Codebolt's visual interface is perfect for interactive development, many scenarios require command-line automation: -- **CI/CD Pipelines** - Integrate Codebolt into your build and deployment processes -- **Batch Operations** - Process multiple files or projects simultaneously -- **Scripting and Automation** - Create custom scripts for repetitive tasks -- **Remote Operations** - Manage Codebolt installations on servers -- **Integration Testing** - Validate agents and workflows programmatically - -The CLI provides a comprehensive set of commands that mirror and extend the functionality available in the visual interface, designed for automation and scripting scenarios. - -## Installation and Setup - -### Installing the CLI - -```bash -# Install globally via npm -npm install -g @codebolt/cli - -# Or install via Homebrew (macOS) -brew install codebolt/tap/codebolt-cli - -# Or download binary directly -curl -L https://releases.codebolt.ai/cli/latest/install.sh | bash -``` - -### Initial Configuration - -```bash -# Initialize Codebolt in your project -codebolt init - -# Authenticate with Codebolt Cloud (optional) -codebolt auth login - -# Configure default settings -codebolt config set editor.default_model gpt-4 -codebolt config set agents.auto_update true -codebolt config set workflows.parallel_execution true - -# Verify installation -codebolt --version -codebolt doctor # Check system health -``` - -## Core Commands - -### Project Management - -#### Project Initialization -```bash -# Initialize new Codebolt project -codebolt init [project-name] - --template react-typescript # Use project template - --agents basic # Include basic agents - --workflows ci-cd # Include CI/CD workflows - --config team # Use team configuration - -# Example: Create a new React project with full setup -codebolt init my-app \ - --template react-typescript \ - --agents "code-review,test-generator,security-scanner" \ - --workflows "ci-cd,code-quality" \ - --config ./team-config.json -``` - -#### Project Status and Information -```bash -# Show project status -codebolt status - --verbose # Detailed information - --json # JSON output format - -# Analyze project structure -codebolt analyze - --type complexity # Complexity analysis - --type dependencies # Dependency analysis - --type patterns # Pattern analysis - --output report.json # Save results - -# Get project insights -codebolt insights - --category performance # Performance insights - --category security # Security insights - --category maintainability # Maintainability insights -``` - -### Agent Management - -#### Agent Operations -```bash -# List available agents -codebolt agent list - --installed # Only installed agents - --category code-quality # Filter by category - --format table # Table format output - -# Install agents -codebolt agent install code-reviewer -codebolt agent install security-scanner@2.1.0 # Specific version -codebolt agent install ./custom-agent.json # Local agent - -# Run agents manually -codebolt agent run code-reviewer - --file src/components/Button.tsx # Target specific file - --config custom-config.json # Custom configuration - --output results.json # Save results - --dry-run # Preview without executing - -# Test agents -codebolt agent test code-reviewer - --input test-data.json - --expected expected-output.json - --timeout 30s - -# Agent development -codebolt agent create my-custom-agent - --template typescript # Use TypeScript template - --capabilities analyze,fix # Agent capabilities - --interactive # Interactive setup -``` - -#### Agent Configuration -```bash -# Configure agent settings -codebolt agent configure code-reviewer - --set confidence_threshold=0.8 - --set auto_apply=false - --set max_suggestions=10 - -# Export agent configuration -codebolt agent export code-reviewer --output code-reviewer-config.json - -# Import agent configuration -codebolt agent import code-reviewer-config.json - -# Update agents -codebolt agent update # Update all agents -codebolt agent update code-reviewer # Update specific agent -``` - -### Workflow Management - -#### Workflow Operations -```bash -# List workflows -codebolt workflow list - --status active # Filter by status - --category ci-cd # Filter by category - --format json # JSON output - -# Create new workflow -codebolt workflow create feature-development - --template full-stack # Use template - --interactive # Interactive setup - --from-file workflow.yaml # From configuration file - -# Execute workflows -codebolt workflow run ci-pipeline - --input '{"branch": "main", "environment": "staging"}' - --wait # Wait for completion - --follow # Follow execution logs - --timeout 30m # Set timeout - -# Schedule workflows -codebolt workflow schedule deploy-staging - --cron "0 2 * * 1-5" # Weekdays at 2 AM - --timezone UTC # Timezone - --enabled # Enable immediately -``` - -#### Workflow Monitoring -```bash -# Monitor workflow execution -codebolt workflow monitor ci-pipeline - --execution-id abc123 # Specific execution - --real-time # Real-time updates - --format json # JSON output - -# View workflow history -codebolt workflow history feature-development - --last 30d # Last 30 days - --status failed # Only failed executions - --export history.csv # Export to CSV - -# Analyze workflow performance -codebolt workflow analyze ci-pipeline - --metrics execution_time,success_rate - --period 7d - --output performance-report.json -``` - -### Code Operations - -#### Code Analysis -```bash -# Analyze code quality -codebolt analyze code - --path src/ # Target directory - --recursive # Include subdirectories - --exclude "**/*.test.js" # Exclude patterns - --rules eslint,security # Analysis rules - --format detailed # Output format - -# Generate code metrics -codebolt metrics - --type complexity # Complexity metrics - --type maintainability # Maintainability metrics - --threshold high # Only high-impact issues - --export metrics.json # Export results -``` - -#### Code Generation -```bash -# Generate code from prompts -codebolt generate component - --name UserProfile - --type react-typescript - --props "name:string,email:string,avatar?:string" - --output src/components/ - -# Generate tests -codebolt generate tests - --file src/utils/helpers.js - --framework jest - --coverage 100 - --output src/utils/helpers.test.js - -# Generate documentation -codebolt generate docs - --input src/api/ - --format markdown - --include-examples - --output docs/api/ -``` - -#### Code Transformation -```bash -# Batch code transformations -codebolt transform - --pattern "src/**/*.js" - --prompt "Convert to TypeScript with proper types" - --preview # Preview changes - --backup # Create backups - -# Refactor code -codebolt refactor - --file src/legacy/oldComponent.js - --target modern-react - --preserve-behavior - --add-tests - -# Format code -codebolt format - --path src/ - --style prettier - --fix # Fix formatting issues -``` - -## Advanced Usage - -### Batch Operations - -#### Processing Multiple Files -```bash -# Process all TypeScript files -codebolt batch process - --pattern "src/**/*.{ts,tsx}" - --agent code-reviewer - --parallel 4 # Process 4 files in parallel - --output-dir results/ - --continue-on-error # Don't stop on errors - -# Transform multiple projects -codebolt batch transform - --projects "projects/*/" - --prompt "Update to latest framework version" - --dry-run # Preview changes - --report transform-report.json -``` - -#### Bulk Agent Operations -```bash -# Run multiple agents on a project -codebolt batch agents - --agents "linter,security-scanner,test-generator" - --sequential # Run sequentially - --aggregate-results # Combine results - --output comprehensive-analysis.json -``` - -### CI/CD Integration - -#### GitHub Actions Integration -```yaml -# .github/workflows/codebolt.yml -name: Codebolt Analysis -on: [push, pull_request] - -jobs: - analyze: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - - name: Setup Codebolt CLI - run: | - npm install -g @codebolt/cli - codebolt auth login --token ${{ secrets.CODEBOLT_TOKEN }} - - - name: Run Code Analysis - run: | - codebolt workflow run code-analysis \ - --input '{"pr_number": "${{ github.event.pull_request.number }}"}' - --output analysis-results.json - - - name: Comment on PR - if: github.event_name == 'pull_request' - run: | - codebolt github comment-pr \ - --pr ${{ github.event.pull_request.number }} \ - --results analysis-results.json -``` - -#### Jenkins Pipeline Integration -```groovy -pipeline { - agent any - - stages { - stage('Setup') { - steps { - sh 'npm install -g @codebolt/cli' - sh 'codebolt auth login --token $CODEBOLT_TOKEN' - } - } - - stage('Analysis') { - steps { - sh ''' - codebolt workflow run comprehensive-analysis \ - --input '{"branch": "'$BRANCH_NAME'", "build_number": "'$BUILD_NUMBER'"}' \ - --wait \ - --output analysis-results.json - ''' - } - } - - stage('Quality Gate') { - steps { - script { - def results = readJSON file: 'analysis-results.json' - if (results.quality_score < 8.0) { - error "Quality gate failed: score ${results.quality_score}" - } - } - } - } - } - - post { - always { - archiveArtifacts artifacts: 'analysis-results.json' - publishHTML([ - allowMissing: false, - alwaysLinkToLastBuild: true, - keepAll: true, - reportDir: 'reports', - reportFiles: 'codebolt-report.html', - reportName: 'Codebolt Analysis Report' - ]) - } - } -} -``` - -### Scripting and Automation - -#### Custom Scripts -```bash -#!/bin/bash -# deploy.sh - Automated deployment script - -set -e - -echo "Starting deployment process..." - -# Run pre-deployment checks -codebolt workflow run pre-deployment-checks \ - --input '{"environment": "production"}' \ - --wait - -if [ $? -ne 0 ]; then - echo "Pre-deployment checks failed" - exit 1 -fi - -# Build and test -codebolt workflow run build-and-test \ - --input '{"target": "production", "run_e2e": true}' \ - --wait - -# Deploy if tests pass -if [ $? -eq 0 ]; then - codebolt workflow run deploy-to-production \ - --input '{"version": "'$1'", "rollback_on_failure": true}' \ - --wait - - echo "Deployment completed successfully" -else - echo "Build or tests failed, deployment aborted" - exit 1 -fi -``` - -#### PowerShell Scripts (Windows) -```powershell -# analyze-and-report.ps1 -param( - [string]$ProjectPath = ".", - [string]$OutputDir = "./reports", - [string]$EmailRecipients = "" -) - -# Ensure output directory exists -New-Item -ItemType Directory -Force -Path $OutputDir - -# Run comprehensive analysis -Write-Host "Running comprehensive analysis..." -codebolt analyze comprehensive ` - --path $ProjectPath ` - --output "$OutputDir/analysis.json" ` - --format detailed - -# Generate reports -Write-Host "Generating reports..." -codebolt report generate ` - --input "$OutputDir/analysis.json" ` - --template comprehensive ` - --output "$OutputDir/report.html" - -# Send email if recipients specified -if ($EmailRecipients) { - codebolt notify email ` - --recipients $EmailRecipients ` - --subject "Code Analysis Report" ` - --body "Please find the attached analysis report." ` - --attachment "$OutputDir/report.html" -} - -Write-Host "Analysis complete. Reports saved to $OutputDir" -``` - -## Configuration Management - -### Configuration Files - -#### Global Configuration -```json -{ - "version": "1.0.0", - "defaults": { - "model": "gpt-4", - "temperature": 0.1, - "max_tokens": 2000, - "timeout": 300 - }, - "agents": { - "auto_update": true, - "parallel_execution": true, - "max_concurrent": 4, - "retry_attempts": 3 - }, - "workflows": { - "default_timeout": "30m", - "auto_retry": true, - "notification_channels": ["slack", "email"] - }, - "cli": { - "output_format": "table", - "verbose": false, - "color": true, - "progress_bars": true - } -} -``` - -#### Project Configuration -```yaml -# codebolt.yml -project: - name: "My Application" - type: "web" - language: "typescript" - framework: "react" - -agents: - enabled: - - code-reviewer - - security-scanner - - test-generator - - configurations: - code-reviewer: - confidence_threshold: 0.8 - auto_apply: false - focus_areas: ["performance", "security", "maintainability"] - - security-scanner: - severity_threshold: "medium" - include_dependencies: true - -workflows: - ci-pipeline: - triggers: - - push: ["main", "develop"] - - pull_request: ["main"] - - steps: - - name: "quality-check" - agents: ["code-reviewer", "security-scanner"] - - name: "test-generation" - agent: "test-generator" - condition: "quality_check.passed" - -cli: - aliases: - review: "agent run code-reviewer" - test: "workflow run test-suite" - deploy: "workflow run deployment" -``` - -### Environment Management - -```bash -# Manage multiple environments -codebolt env create staging -codebolt env create production - -# Switch environments -codebolt env use staging - -# Configure environment-specific settings -codebolt env config staging --set api_url=https://staging-api.company.com -codebolt env config production --set api_url=https://api.company.com - -# List environments -codebolt env list - -# Export environment configuration -codebolt env export staging --output staging-config.json -``` - -## Output Formats and Integration - -### Output Formats - -```bash -# JSON output for programmatic processing -codebolt analyze --format json | jq '.issues[] | select(.severity == "high")' - -# Table format for human readability -codebolt agent list --format table - -# CSV format for spreadsheet import -codebolt metrics --format csv --output metrics.csv - -# XML format for legacy systems -codebolt report generate --format xml --output report.xml - -# Custom format with templates -codebolt report generate --template custom-template.mustache --output custom-report.html -``` - -### Integration with External Tools - -#### Slack Integration -```bash -# Send results to Slack -codebolt analyze --format json | codebolt notify slack \ - --channel "#dev-team" \ - --template analysis-summary - -# Configure Slack webhook -codebolt config set integrations.slack.webhook_url $SLACK_WEBHOOK_URL -``` - -#### JIRA Integration -```bash -# Create JIRA issues from analysis results -codebolt analyze --format json | codebolt jira create-issues \ - --project DEV \ - --issue-type Bug \ - --assignee-field component_owner - -# Update existing JIRA issues -codebolt jira update-issue DEV-123 \ - --field status=Resolved \ - --comment "Fixed by automated analysis" -``` - -#### Database Integration -```bash -# Store results in database -codebolt analyze --format json | codebolt db store \ - --connection postgresql://user:pass@localhost/codebolt \ - --table analysis_results - -# Query historical data -codebolt db query \ - --connection postgresql://user:pass@localhost/codebolt \ - --query "SELECT * FROM analysis_results WHERE created_at > NOW() - INTERVAL '7 days'" -``` - -## Performance and Optimization - -### Parallel Processing - -```bash -# Process multiple files in parallel -codebolt batch process \ - --pattern "src/**/*.ts" \ - --parallel 8 \ - --chunk-size 10 - -# Parallel workflow execution -codebolt workflow run-parallel \ - --workflows "test-suite,security-scan,performance-test" \ - --max-concurrent 3 -``` - -### Caching and Incremental Processing - -```bash -# Enable caching for faster subsequent runs -codebolt config set cache.enabled true -codebolt config set cache.ttl 3600 # 1 hour - -# Incremental analysis (only changed files) -codebolt analyze --incremental \ - --since HEAD~1 # Since last commit - -# Clear cache when needed -codebolt cache clear -codebolt cache clear --pattern "analysis_*" -``` - -### Resource Management - -```bash -# Limit resource usage -codebolt config set limits.max_memory 2GB -codebolt config set limits.max_cpu_percent 50 -codebolt config set limits.timeout 600 # 10 minutes - -# Monitor resource usage -codebolt monitor resources --real-time -``` - -## Troubleshooting and Debugging - -### Debug Mode - -```bash -# Enable debug logging -codebolt --debug analyze code - -# Verbose output -codebolt --verbose workflow run ci-pipeline - -# Trace execution -codebolt --trace agent run code-reviewer -``` - -### Health Checks - -```bash -# System health check -codebolt doctor - --check-dependencies - --check-permissions - --check-connectivity - -# Agent health check -codebolt agent doctor code-reviewer - --test-configuration - --test-connectivity - --validate-permissions - -# Workflow validation -codebolt workflow validate ci-pipeline - --check-syntax - --check-dependencies - --dry-run -``` - -### Log Management - -```bash -# View logs -codebolt logs - --level error # Filter by level - --since 1h # Last hour - --follow # Follow new logs - --agent code-reviewer # Specific agent - -# Export logs -codebolt logs export - --format json - --output logs.json - --compress - -# Clear logs -codebolt logs clear --older-than 30d -``` - -## Best Practices - -### Script Organization - -```bash -# Use configuration files -codebolt --config ./configs/production.json analyze - -# Environment-specific configurations -codebolt --env production workflow run deploy - -# Modular scripts -#!/bin/bash -source ./scripts/common.sh -source ./scripts/codebolt-helpers.sh - -run_quality_checks() { - codebolt workflow run quality-checks --wait -} - -deploy_if_quality_passes() { - if run_quality_checks; then - codebolt workflow run deploy --env $1 - else - echo "Quality checks failed, deployment aborted" - exit 1 - fi -} -``` - -### Error Handling - -```bash -#!/bin/bash -set -e # Exit on any error - -# Function to handle errors -handle_error() { - echo "Error occurred in line $1" - codebolt notify slack --channel "#alerts" --message "Build failed at line $1" - exit 1 -} - -trap 'handle_error $LINENO' ERR - -# Your Codebolt operations here -codebolt workflow run ci-pipeline --wait -``` - -### Performance Optimization - -```bash -# Use parallel processing for independent operations -codebolt batch process \ - --pattern "src/**/*.ts" \ - --parallel $(nproc) \ - --chunk-size 5 - -# Cache results for repeated operations -codebolt config set cache.enabled true - -# Use incremental processing -codebolt analyze --incremental --since HEAD~1 -``` - -## Next Steps - -Ready to master the Codebolt CLI? Here's your learning path: - -1. **Start with Basic Commands**: Get familiar with core operations -2. **Learn Scripting**: Create automation scripts for your workflows -3. **Integrate with CI/CD**: Add Codebolt to your build pipelines -4. **Optimize Performance**: Use parallel processing and caching -5. **Advanced Integration**: Connect with external tools and services - -## Related Documentation - -- [Task Flow](3_CustomAgents/core/task-flow/overview.md) - Create workflows that can be executed via CLI -- [Agents](3_CustomAgents/agents/overview.md) - Manage and run agents from the command line -- [API Reference](../../api-reference.md) - Complete CLI command reference - -## Community Resources - -- **CLI Examples**: Real-world CLI usage examples -- **Script Library**: Community-contributed automation scripts -- **Integration Guides**: Step-by-step integration tutorials -- **Best Practices**: Learn from experienced CLI users - -The Codebolt CLI transforms how you integrate AI-powered development tools into your existing workflows. From simple automation scripts to complex CI/CD pipelines, the CLI provides the flexibility and power you need to scale Codebolt across your entire development process. diff --git a/docs/5_api/1_overview.md b/docs/5_api/1_overview.md index 73f557d..a41b0bd 100644 --- a/docs/5_api/1_overview.md +++ b/docs/5_api/1_overview.md @@ -11,7 +11,7 @@ CodeboltAI has been built from ground up so that the entire editor can be fully There are two types of interfaces that are available to the AI Agents. 1. [Direct API Access](/docs/api/apiaccess/) -2. [MCP Access](/docs/api/mcpAPI/) +2. [MCP Access](/docs/api/mcp%20access/) ## Direct API Access @@ -19,5 +19,5 @@ There are two types of interfaces that are available to the AI Agents. ## MCP Access -We have also provided a simplified Interface in the form of [MCP (Model Context Protocol)](/docs/api/mcpAPI/) that can be used to interact with the Codebolt application. -This can be used directly by the LLMs through agents to interact with the Codebolt application. \ No newline at end of file +We have also provided a simplified Interface in the form of [MCP (Model Context Protocol)](/docs/api/mcp%20access/) that can be used to interact with the Codebolt application. +This can be used directly by the LLMs through agents to interact with the Codebolt application. diff --git a/docs/5_api/ApiAccess/1-index.md b/docs/5_api/ApiAccess/1-index.md index 2b3786c..46fe58d 100644 --- a/docs/5_api/ApiAccess/1-index.md +++ b/docs/5_api/ApiAccess/1-index.md @@ -81,7 +81,7 @@ cbapicategory: ## Overview -Codebolt exposes all the major functions needed to create an AI Agent using the [CodeboltJS SDK](). The SDK provides a list of functions that you can use when creating a Codebolt Agent. Although these functions can be used in any mode, but they are primarily used for [Agent creation in Direct Function Mode](). +Codebolt exposes all the major functions needed to create an AI Agent using the CodeboltJS SDK. The SDK provides a list of functions that you can use when creating a Codebolt Agent. Although these functions can be used in any mode, but they are primarily used for Agent creation in Direct Function Mode. The major functions exposed are: diff --git a/docs/5_api/ApiAccess/_category_.json b/docs/5_api/ApiAccess/_category_.json index 8a57ebe..3b2c2f0 100644 --- a/docs/5_api/ApiAccess/_category_.json +++ b/docs/5_api/ApiAccess/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/index" + "id": "api/ApiAccess/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/agent/_category_.json b/docs/5_api/ApiAccess/agent/_category_.json index 2bdaa79..ec67378 100644 --- a/docs/5_api/ApiAccess/agent/_category_.json +++ b/docs/5_api/ApiAccess/agent/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/agent/index" + "id": "api/ApiAccess/agent/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/browser/_category_.json b/docs/5_api/ApiAccess/browser/_category_.json index 6551163..f7bb3c0 100644 --- a/docs/5_api/ApiAccess/browser/_category_.json +++ b/docs/5_api/ApiAccess/browser/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/browser/index" + "id": "api/ApiAccess/browser/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/cbstate/_category_.json b/docs/5_api/ApiAccess/cbstate/_category_.json index 167f41f..a601c69 100644 --- a/docs/5_api/ApiAccess/cbstate/_category_.json +++ b/docs/5_api/ApiAccess/cbstate/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/cbstate/index" + "id": "api/ApiAccess/cbstate/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/chat/_category_.json b/docs/5_api/ApiAccess/chat/_category_.json index afb5a8d..6bbc67c 100644 --- a/docs/5_api/ApiAccess/chat/_category_.json +++ b/docs/5_api/ApiAccess/chat/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/chat/index" + "id": "api/ApiAccess/chat/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/codeparsers/_category_.json b/docs/5_api/ApiAccess/codeparsers/_category_.json index d3e89f5..549b44c 100644 --- a/docs/5_api/ApiAccess/codeparsers/_category_.json +++ b/docs/5_api/ApiAccess/codeparsers/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/codeparsers/index" + "id": "api/ApiAccess/codeparsers/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/codeutils/_category_.json b/docs/5_api/ApiAccess/codeutils/_category_.json index 8fa782a..9edca68 100644 --- a/docs/5_api/ApiAccess/codeutils/_category_.json +++ b/docs/5_api/ApiAccess/codeutils/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/codeutils/index" + "id": "api/ApiAccess/codeutils/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/dbmemory/_category_.json b/docs/5_api/ApiAccess/dbmemory/_category_.json index ea1f790..f54ab6c 100644 --- a/docs/5_api/ApiAccess/dbmemory/_category_.json +++ b/docs/5_api/ApiAccess/dbmemory/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/dbmemory/index" + "id": "api/ApiAccess/dbmemory/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/debug/_category_.json b/docs/5_api/ApiAccess/debug/_category_.json index 13f00c1..eda927f 100644 --- a/docs/5_api/ApiAccess/debug/_category_.json +++ b/docs/5_api/ApiAccess/debug/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/debug/index" + "id": "api/ApiAccess/debug/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/fs/_category_.json b/docs/5_api/ApiAccess/fs/_category_.json index a3910bf..d8eed91 100644 --- a/docs/5_api/ApiAccess/fs/_category_.json +++ b/docs/5_api/ApiAccess/fs/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/fs/index" + "id": "api/ApiAccess/fs/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/git/_category_.json b/docs/5_api/ApiAccess/git/_category_.json index 066221b..58838ce 100644 --- a/docs/5_api/ApiAccess/git/_category_.json +++ b/docs/5_api/ApiAccess/git/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/git/index" + "id": "api/ApiAccess/git/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/llm/_category_.json b/docs/5_api/ApiAccess/llm/_category_.json index daa3aa8..9662cee 100644 --- a/docs/5_api/ApiAccess/llm/_category_.json +++ b/docs/5_api/ApiAccess/llm/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/llm/index" + "id": "api/ApiAccess/llm/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/outputparsers/_category_.json b/docs/5_api/ApiAccess/outputparsers/_category_.json index 5f0db92..d86095c 100644 --- a/docs/5_api/ApiAccess/outputparsers/_category_.json +++ b/docs/5_api/ApiAccess/outputparsers/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/outputparsers/index" + "id": "api/ApiAccess/outputparsers/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/project/_category_.json b/docs/5_api/ApiAccess/project/_category_.json index 2029ca9..416aa90 100644 --- a/docs/5_api/ApiAccess/project/_category_.json +++ b/docs/5_api/ApiAccess/project/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/project/index" + "id": "api/ApiAccess/project/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/rag/_category_.json b/docs/5_api/ApiAccess/rag/_category_.json index 397a033..6545880 100644 --- a/docs/5_api/ApiAccess/rag/_category_.json +++ b/docs/5_api/ApiAccess/rag/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/rag/index" + "id": "api/ApiAccess/rag/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/taskplaner/_category_.json b/docs/5_api/ApiAccess/taskplaner/_category_.json index 6747e2c..93064b5 100644 --- a/docs/5_api/ApiAccess/taskplaner/_category_.json +++ b/docs/5_api/ApiAccess/taskplaner/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/taskplaner/index" + "id": "api/ApiAccess/taskplaner/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/terminal/_category_.json b/docs/5_api/ApiAccess/terminal/_category_.json index d449a70..e78a62e 100644 --- a/docs/5_api/ApiAccess/terminal/_category_.json +++ b/docs/5_api/ApiAccess/terminal/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/terminal/index" + "id": "api/ApiAccess/terminal/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/tokenizer/_category_.json b/docs/5_api/ApiAccess/tokenizer/_category_.json index 99244b5..05ecf98 100644 --- a/docs/5_api/ApiAccess/tokenizer/_category_.json +++ b/docs/5_api/ApiAccess/tokenizer/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/tokenizer/index" + "id": "api/ApiAccess/tokenizer/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/tool/_category_.json b/docs/5_api/ApiAccess/tool/_category_.json index c04cfa9..1731550 100644 --- a/docs/5_api/ApiAccess/tool/_category_.json +++ b/docs/5_api/ApiAccess/tool/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/tool/index" + "id": "api/ApiAccess/tool/index" } } \ No newline at end of file diff --git a/docs/5_api/ApiAccess/vectordb/_category_.json b/docs/5_api/ApiAccess/vectordb/_category_.json index a446a80..0343131 100644 --- a/docs/5_api/ApiAccess/vectordb/_category_.json +++ b/docs/5_api/ApiAccess/vectordb/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/apiaccess/vectordb/index" + "id": "api/ApiAccess/vectordb/index" } } \ No newline at end of file diff --git a/docs/5_api/Mcp Access/1-index.md b/docs/5_api/Mcp Access/1-index.md index 82d52f5..90e0011 100644 --- a/docs/5_api/Mcp Access/1-index.md +++ b/docs/5_api/Mcp Access/1-index.md @@ -6,7 +6,8 @@ Codebolt provides access to the various functions in a MCP Tool format, where wh In Typical Tools Calling format, you will write the following Code to send the tool data in Manual Format: For sending the Request to the LLM: -``` + +```js var tools = [ { name: "WriteFile", @@ -21,12 +22,14 @@ var tools = [ ``` And when you call the LLM using: -``` + +```js var result = codebolt.llm.inference(message, tools) ``` and you then when you get the result, you will then parse the tool call result from the result and call the relevant api in a format like: -``` + +```js let toolexecutionresult = {}; foreach(tool in result.tools){ if(tool === "fileRead"){ @@ -43,17 +46,19 @@ foreach(tool in result.tools){ } ``` -You can then send the Tool Execution Result back to the LLM in the [Agent Execution Loop]() using something like: -``` +You can then send the Tool Execution Result back to the LLM in the Agent Execution Loop using something like: + +```js codebolt.llm.inference(message, [...tools,...toolexecutionResult]) ``` ### 1.1.2 Automated Tool Management with Tool Access API -As we see in [1.1.1]() for each tool we need to write the Tool Array giving the MCP Tool Name, Detail of the MCP Tool along with the schema of the input. Also when we get the response from the LLM, then we have to manually check the tool that has been called, also then we have manually format the functions and inputs and call each of the api. +As we see in section 1.1.1 for each tool we need to write the Tool Array giving the MCP Tool Name, Detail of the MCP Tool along with the schema of the input. Also when we get the response from the LLM, then we have to manually check the tool that has been called, also then we have manually format the functions and inputs and call each of the api. You can simplify the creation of the tool Json using the MCP Access in the following format: -``` + +```js var tools = codeboltjs.tools.getTools([ {toolbox: filesystem, toolName: 'read_file'}, {toolbox: filesystem, toolName: 'write_file'} @@ -78,14 +83,14 @@ var tools = [ Calling this getTools gives the complete json including a unique name, description, schema, for the tool. -All the functionalities exposed in the [API Access]() are also exposed as Tool Format. +All the functionalities exposed in the API Access are also exposed as Tool Format. Also now when you receive the response from the LLM, since the Tool Names are consistent and pre-defined, we can simply let codebolt process the response automatically. #### 1.1.2.1 Process all Tools using a single api: Since the tools are in defined name and schema, you can directly process them. -``` +```js var llmResult = codebolt.llm.inference(message, tools) var toolsexecutionresult = codebolt.tools.executeTool(llmResult.tools) ``` @@ -94,7 +99,7 @@ var toolsexecutionresult = codebolt.tools.executeTool(llmResult.tools) If you want more control then you can process the tools one by one in a loop. This is much handy if you have added any custom tools at the code level. -``` +```js var toolexeutionresult = []; var result = codebolt.llm.inference(message, tools) foreach (resulttool in result.tools){ @@ -110,7 +115,7 @@ foreach (resulttool in result.tools){ Processing Tools One By One allows you to add Custom Functions in Tool Call from the Agent. Example: when writing an Agent, you want to add a Custom Calculator Add Tool along with other tools, then you can add the tool from the agent and then process the tool before sending it for default tool processing. A Sample Code would be: -``` +```js var tools = codeboltjs.tools.getTools([ {toolbox: filesystem, toolName: 'read_file'}, {toolbox: filesystem, toolName: 'write_file'} @@ -140,16 +145,18 @@ foreach (resulttool in llmResult.tools){ In the above example, we have added a custom Tool Call called as mycalculatoradd, which has been added by the agent and this gets processed at agent level. This allows agent creators to create custom tools at the agent level, instead of relying on the Codebolt provided Tools or custom MCPs added by the user. -Please read more about the different ways in which [agent creators can add and run tools from the Agent logic]() +Please read more about the different ways in which agent creators can add and run tools from the Agent logic ## 1.2 Custom Functionality Calling The Mcp tools call can also be used as an alternative to directly calling the API Access Library. So for file read you can either call: -``` + +```js codebolt.fs.readfile(filename, filecontent, filepath) ``` or you can call -``` + +```js codebolt.tool.executeTool("codebolt_readfile", filename, filecontent, filepath) ``` diff --git a/docs/5_api/Mcp Access/_category_.json b/docs/5_api/Mcp Access/_category_.json index 2de891b..6883cfb 100644 --- a/docs/5_api/Mcp Access/_category_.json +++ b/docs/5_api/Mcp Access/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/mcpAPI/index" + "id": "api/Mcp Access/index" } } \ No newline at end of file diff --git a/docs/5_api/Mcp Access/index.md b/docs/5_api/Mcp Access/index.md index 0a1610e..03cbefc 100644 --- a/docs/5_api/Mcp Access/index.md +++ b/docs/5_api/Mcp Access/index.md @@ -10,26 +10,26 @@ List of MCP APIs available in CodeboltAI. These MCPs are wrappers on top of APIs ## Available MCP Servers -1. [Browser](/docs/api/mcpAPI/browser) - `codebolt.browser` - Browser automation and web interaction tools -2. [Git](/docs/api/mcpAPI/git) - `codebolt.git` - Git repository management and version control -3. [Terminal](/docs/api/mcpAPI/terminal) - `codebolt.terminal` - Command execution and terminal operations -4. [File System](/docs/api/mcpAPI/fs) - `codebolt.fs` - File and directory operations -5. [Codebase](/docs/api/mcpAPI/codebase) - `codebolt.codebase` - Code search and analysis tools -6. [Agent](/docs/api/mcpAPI/agent) - `codebolt.agent` - Agent management and lifecycle operations -7. [Memory](/docs/api/mcpAPI/memory) - `codebolt.memory` - Memory storage and retrieval -8. [Vector](/docs/api/mcpAPI/vector) - `codebolt.vector` - Vector database operations -9. [RAG](/docs/api/mcpAPI/rag) - `codebolt.rag` - Retrieval Augmented Generation tools -10. [Notification](/docs/api/mcpAPI/notification) - `codebolt.notification` - Notification and messaging system -11. [Debug](/docs/api/mcpAPI/debug) - `codebolt.debug` - Debugging and logging utilities -12. [State](/docs/api/mcpAPI/state) - `codebolt.state` - Application state management -13. [Task](/docs/api/mcpAPI/task) - `codebolt.task` - Task management and tracking -14. [Tokenizer](/docs/api/mcpAPI/tokenizer) - `codebolt.tokenizer` - Text tokenization utilities -15. [Chat](/docs/api/mcpAPI/chat) - `codebolt.chat` - Chat and conversation management -16. [Problem Matcher](/docs/api/mcpAPI/problem_matcher) - `codebolt.problem_matcher` - Error and issue detection -17. [Config](/docs/api/mcpAPI/config) - `codebolt.config` - Configuration management -18. [Project](/docs/api/mcpAPI/project) - `codebolt.project` - Project management operations -19. [Message](/docs/api/mcpAPI/message) - `codebolt.message` - Message processing and communication -20. [Code Utils](/docs/api/mcpAPI/code_utils) - `codebolt.code_utils` - Code analysis and utility functions +1. [Browser](/docs/api/mcp%20access/browser) - `codebolt.browser` - Browser automation and web interaction tools +2. [Git](/docs/api/mcp%20access/git) - `codebolt.git` - Git repository management and version control +3. [Terminal](/docs/api/mcp%20access/terminal) - `codebolt.terminal` - Command execution and terminal operations +4. [File System](/docs/api/mcp%20access/fs) - `codebolt.fs` - File and directory operations +5. [Codebase](/docs/api/mcp%20access/codebase) - `codebolt.codebase` - Code search and analysis tools +6. [Agent](/docs/api/mcp%20access/agent) - `codebolt.agent` - Agent management and lifecycle operations +7. [Memory](/docs/api/mcp%20access/memory) - `codebolt.memory` - Memory storage and retrieval +8. [Vector](/docs/api/mcp%20access/vector) - `codebolt.vector` - Vector database operations +9. [RAG](/docs/api/mcp%20access/rag) - `codebolt.rag` - Retrieval Augmented Generation tools +10. [Notification](/docs/api/mcp%20access/notification) - `codebolt.notification` - Notification and messaging system +11. [Debug](/docs/api/mcp%20access/debug) - `codebolt.debug` - Debugging and logging utilities +12. [State](/docs/api/mcp%20access/state) - `codebolt.state` - Application state management +13. [Task](/docs/api/mcp%20access/task) - `codebolt.task` - Task management and tracking +14. [Tokenizer](/docs/api/mcp%20access/tokenizer) - `codebolt.tokenizer` - Text tokenization utilities +15. [Chat](/docs/api/mcp%20access/chat) - `codebolt.chat` - Chat and conversation management +16. [Problem Matcher](/docs/api/mcp%20access/problem_matcher) - `codebolt.problem_matcher` - Error and issue detection +17. [Config](/docs/api/mcp%20access/config) - `codebolt.config` - Configuration management +18. [Project](/docs/api/mcp%20access/project) - `codebolt.project` - Project management operations +19. [Message](/docs/api/mcp%20access/message) - `codebolt.message` - Message processing and communication +20. [Code Utils](/docs/api/mcp%20access/code_utils) - `codebolt.code_utils` - Code analysis and utility functions ## Sample Usage diff --git a/docs/5_api/Utility Functions/_category_.json b/docs/5_api/Utility Functions/_category_.json index 8300a24..2644314 100644 --- a/docs/5_api/Utility Functions/_category_.json +++ b/docs/5_api/Utility Functions/_category_.json @@ -6,6 +6,6 @@ "className": "red", "link": { "type": "doc", - "id": "api/codeboltutils/index" + "id": "api/Utility Functions/index" } } \ No newline at end of file diff --git a/docs/5_api/Utility Functions/index.md b/docs/5_api/Utility Functions/index.md index 1992fac..2aeb542 100644 --- a/docs/5_api/Utility Functions/index.md +++ b/docs/5_api/Utility Functions/index.md @@ -1,15 +1,15 @@ --- cbapicategory: - name: PromptBuilder - link: /docs/api/apiaccess/codeboltutils/promptBuilder + link: /docs/api/utility%20functions/promptBuilder description: Constructs a smart prompt for the AI agent by combining tools, environment details, system instructions, and task-specific information. - name: LLMOutputHandler - link: /docs/api/apiaccess/codeboltutils/llmoutputhandler + link: /docs/api/utility%20functions/llmoutputhandler description: Processes the AI model’s response, manages tool executions, handles user communication, and detects when the task is completed. - name: FollowUpQuestionBuilder - link: /docs/api/apiaccess/codeboltutils/followupquestionbuilder + link: /docs/api/utility%20functions/followupquestionbuilder description: Creates the next prompt for the AI agent by incorporating previous conversation, tool results, and summarizing long interactions when needed. --- diff --git a/docs/developer21/index.md b/docs/developer21/index.md new file mode 100644 index 0000000..5932792 --- /dev/null +++ b/docs/developer21/index.md @@ -0,0 +1 @@ +# API diff --git a/docusaurus.config.ts b/docusaurus.config.ts index eccbf78..1789c78 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -76,24 +76,24 @@ const config: Config = { position: 'left', label: 'User Guide', }, - { - type: 'docSidebar', - sidebarId: 'devSidebar', - position: 'left', - label: 'Developer Guide', - }, - // { - // type: 'docSidebar', - // sidebarId: 'toolSidebar', - // position: 'left', - // label: 'Tools', - // }, // { // type: 'docSidebar', - // sidebarId: 'appSidebar', + // sidebarId: 'devSidebar', // position: 'left', - // label: 'Apps', + // label: 'Developer Guide', // }, + { + type: 'docSidebar', + sidebarId: 'customAgentsSidebar', + position: 'left', + label: 'Custom Agents', + }, + { + type: 'docSidebar', + sidebarId: 'multiAgentsSidebar', + position: 'left', + label: 'Multi-Agent Orchestration', + }, { type: 'docSidebar', sidebarId: 'jsapiSidebar', diff --git a/sidebars.ts b/sidebars.ts index c0ef813..58d4d11 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -12,9 +12,12 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs'; */ const sidebars: SidebarsConfig = { // By default, Docusaurus generates a sidebar from the docs folder structure - jsapiSidebar: [{type: 'autogenerated', dirName: 'api'}], - userSidebar: [{type: 'autogenerated', dirName: 'user'}], - devSidebar: [{type: 'autogenerated', dirName: 'developer'}], + jsapiSidebar: [{type: 'autogenerated', dirName: '5_api'}], + userSidebar: [{type: 'autogenerated', dirName: '2_Docs'}], + // devSidebar: [{type: 'autogenerated', dirName: 'developer21'}], + customAgentsSidebar: [{type: 'autogenerated', dirName: '3_CustomAgents'}], + multiAgentsSidebar: [{type: 'autogenerated', dirName: '4_MultiAgentOrchestration'}], + // appSidebar: [{type: 'autogenerated', dirName: 'apps'}], // toolSidebar: [{type: 'autogenerated', dirName: 'tools'}], diff --git a/src/css/custom.css b/src/css/custom.css index b98dce5..2d1209f 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -256,4 +256,9 @@ body { } [data-theme='dark'] .footer { background-color: rgba(34, 31, 29, 0.9); +} + +p{ + margin: 0; + padding: 0; } \ No newline at end of file diff --git a/static/customagent/createagent.png b/static/customagent/createagent.png new file mode 100644 index 0000000..d3b9491 Binary files /dev/null and b/static/customagent/createagent.png differ diff --git a/static/customagent/login.png b/static/customagent/login.png new file mode 100644 index 0000000..8450897 Binary files /dev/null and b/static/customagent/login.png differ diff --git a/static/customagent/publishagent.png b/static/customagent/publishagent.png new file mode 100644 index 0000000..c2f6f5e Binary files /dev/null and b/static/customagent/publishagent.png differ diff --git a/static/img/get_started.png b/static/img/get_started.png index 99d5d6a..21fdf31 100644 Binary files a/static/img/get_started.png and b/static/img/get_started.png differ diff --git a/static/img/onboarding-default-models.png b/static/img/onboarding-default-models.png new file mode 100644 index 0000000..75cb775 Binary files /dev/null and b/static/img/onboarding-default-models.png differ diff --git a/static/img/onboarding-review-settings.png b/static/img/onboarding-review-settings.png new file mode 100644 index 0000000..916d237 Binary files /dev/null and b/static/img/onboarding-review-settings.png differ diff --git a/static/img/open-project.png b/static/img/open-project.png new file mode 100644 index 0000000..5524e10 Binary files /dev/null and b/static/img/open-project.png differ diff --git a/static/img/quick-create.png b/static/img/quick-create.png new file mode 100644 index 0000000..53cd562 Binary files /dev/null and b/static/img/quick-create.png differ diff --git a/static/img/template.png b/static/img/template.png index 9694e13..d34f340 100644 Binary files a/static/img/template.png and b/static/img/template.png differ diff --git a/static/img/welcome-screen.png b/static/img/welcome-screen.png new file mode 100644 index 0000000..2a2dbbb Binary files /dev/null and b/static/img/welcome-screen.png differ