From 76c8d1172404e2828c8adae69339dbe0c042f8d4 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 14:59:21 +1100 Subject: [PATCH 01/33] Update features/development/webcontainer.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/webcontainer.mdx | 86 +++++++++------------------ 1 file changed, 28 insertions(+), 58 deletions(-) diff --git a/features/development/webcontainer.mdx b/features/development/webcontainer.mdx index 253a4a3..bc691b2 100644 --- a/features/development/webcontainer.mdx +++ b/features/development/webcontainer.mdx @@ -1,83 +1,53 @@ --- title: WebContainer -description: Manage multiple development server instances with seamless port switching and real-time preview management for complex applications. +description: Switch between different parts of your app while it's running --- -Manage multiple development server instances running in WebContainer environments. The port dropdown provides seamless switching between different preview instances and server configurations. +WebContainer lets you run your app and see it working. If your app has multiple parts (like a website and a backend), you can easily switch between them. -## Overview +## What is WebContainer? -When running multiple development servers or microservices, the WebContainer Preview Management system allows you to switch between different application instances with a simple dropdown interface. +Think of WebContainer like a mini computer inside CodinIT. It runs your code and shows you what it looks like, just like opening a website in your browser. - - Quick switching between server instances + + Jump between different parts of your app - - Multiple preview environments + + Run several things at once - - Active preview identification + + Know which part you're looking at -## Preview Management +## How to Use It - - +### Switching Between Parts - ### Server Instance Selection +When your app is running, you might see different "ports" (think of them as different doors to your app). You can click a dropdown to switch between them. - Organized access to all running preview instances: - - **Port-based sorting** - Numerical ordering of available ports - - **Active indication** - Clear highlighting of current preview - - **Quick switching** - One-click navigation between instances - - **Instance persistence** - Maintains selection across sessions +- Click the port number to see all available parts +- Select the one you want to view +- Your preview updates instantly - +### When You Need Multiple Parts - +Some apps have different pieces that work together: - ### Complex Application Management +- **Website** - What users see and click on +- **Backend** - The part that handles data and logic +- **Tools** - Extra helpers for testing or building - Handle applications with multiple server components: - - **Frontend servers** - Main application interfaces - - **API servers** - Backend service endpoints - - **Development tools** - Additional development servers - - **Microservices** - Individual service previews +You can view each part separately to make sure everything works correctly. - +### Navigating Your App - - - ### Address Bar Integration - - Seamlessly integrated with preview navigation: - - **URL path support** - Navigate within selected instance - - **Port preservation** - Maintains port context during navigation - - **Reload functionality** - Refresh current preview instance - - **External access** - Open previews in new tabs/windows - - - - -## Usage Scenarios - - - Full-Stack Apps - Microservices - Multi-Tenant Apps - Development Tools - - -### Common Use Cases - -- **Full-stack applications** - Frontend and backend servers -- **Microservice architectures** - Multiple service endpoints -- **Development tooling** - Build tools, testing servers -- **Multi-environment** - Different configurations +Once you pick a part to view: +- Type URLs in the address bar to visit different pages +- Click the refresh button to reload +- Open in a new tab to see it in your regular browser - **Port Management**: The port dropdown automatically detects and lists all available WebContainer preview instances, - making it easy to switch between different parts of your application during development. + **Easy Switching**: CodinIT automatically finds all the running parts of your app. Just pick the one you want to see from the dropdown menu. From fb5e307df511d327a841997116c12045dff58ace Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 14:59:53 +1100 Subject: [PATCH 02/33] Update features/development/terminal.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/terminal.mdx | 107 +++++++++++------------------- 1 file changed, 39 insertions(+), 68 deletions(-) diff --git a/features/development/terminal.mdx b/features/development/terminal.mdx index b6103c8..a84f54b 100644 --- a/features/development/terminal.mdx +++ b/features/development/terminal.mdx @@ -1,94 +1,65 @@ --- title: Terminal -description: Advanced terminal emulation with full command-line integration, multiple sessions, and seamless project environment access. +description: Type commands to control your project, just like a computer's command line --- -The Terminal Interface provides a fully-featured command-line environment directly within your development workspace, enabling seamless execution of build commands, package management, and system operations. +The Terminal is like a text-based remote control for your project. Instead of clicking buttons, you type commands to tell your computer what to do. -## Overview +## What is the Terminal? -Built on XTerm.js, the terminal component offers professional-grade terminal emulation with support for multiple sessions, theming, and interactive command execution. It integrates deeply with your project's environment, providing access to all development tools and scripts. +Think of the Terminal as a way to talk directly to your computer using text commands. It's like texting your computer to ask it to do things. - - Run build scripts, package managers, and development tools + + Tell your computer what to do by typing - - Multiple terminal tabs for different workflows + + Open several terminals at once - - Consistent theming with your development environment + + Watch what happens when you run commands -## Key Features +## What Can You Do? - - - ### Advanced Terminal Capabilities +### Running Commands - Professional terminal emulation supporting: - - **Full ANSI escape sequences** - Rich text formatting and colors - - **Mouse support** - Interactive terminal applications - - **Unicode support** - International character display - - **Web links** - Clickable URLs in terminal output +You can type commands to: +- Start your app so you can see it working +- Install new tools and libraries +- Check if your code has any problems +- Save your work to GitHub - +### Common Commands - - ### Project Environment Access +Here are some commands you might use: +- `npm install` - Download tools your project needs +- `npm start` - Start your app +- `npm test` - Check if everything works correctly +- `git status` - See what files you've changed - Complete access to your development environment: - - **Project directory** - Automatic navigation to workspace - - **Environment variables** - Access to configured variables - - **Installed tools** - Node.js, npm, git, and other tools - - **File permissions** - Full read/write access to project files +### Using Multiple Terminals - +You can open several terminal tabs at once, like having multiple conversations: +- One tab runs your app +- Another tab runs tests +- A third tab is ready for quick commands - - ### Enhanced User Experience +This way, you don't have to stop one thing to do another. - Modern terminal features for improved productivity: - - **Command history** - Navigate through previous commands - - **Auto-completion** - Intelligent command suggestions - - **Search functionality** - Find text within terminal output - - **Copy/paste support** - Standard clipboard operations - - **Live action console** - Real-time streaming output for running commands +### Helpful Features - +The terminal has some handy tricks: +- **Command history** - Press the up arrow to see commands you typed before +- **Copy and paste** - Copy text in and out of the terminal +- **Search** - Find specific text in the terminal output +- **Live updates** - See results appear as they happen - - ### Real-Time Command Monitoring - - Monitor command execution with live streaming output: - - **Real-time output** - See command output as it happens - - **Progress tracking** - Visual progress indicators for long-running tasks - - **Command context** - Know which command is currently executing - - **Streaming display** - Continuous output updates without page refresh - - - **Enable Live Console**: Toggle this feature in Settings → Features to see real-time command output in a floating console. - - - - - -## Usage Modes - - - Read-Write Mode - Read-Only Mode - Background Execution - - -### Terminal States - -- **Active Session** - Full command execution and interaction -- **Read-Only** - Output display without input capability -- **Background** - Commands running without visible interface + + **Live Console**: Turn on the live console in Settings → Features to see command results in a floating window while you work. + - **Pro Tip**: Use multiple terminal tabs to run development servers, build processes, and testing simultaneously - without switching contexts. + **Quick Tip**: Open multiple terminal tabs to run your app in one tab while typing other commands in another tab. From ed76829fc1dc13746697ba3628b107a36ef69fce Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:00:24 +1100 Subject: [PATCH 03/33] Update features/development/code-editor.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/code-editor.mdx | 106 +++++++++++---------------- 1 file changed, 42 insertions(+), 64 deletions(-) diff --git a/features/development/code-editor.mdx b/features/development/code-editor.mdx index af0a740..b71835d 100644 --- a/features/development/code-editor.mdx +++ b/features/development/code-editor.mdx @@ -1,90 +1,68 @@ --- title: Code Editor Panel -description: Professional code editing environment with syntax highlighting, intelligent file management, and seamless terminal integration. +description: Where you write and organize your code files --- -The Code Editor Panel serves as your primary workspace for writing, editing, and managing code files. It combines a powerful code editor with intuitive file navigation and terminal integration in a unified interface. +The Code Editor is where you write your code. It's like a super-smart text editor that understands programming and helps you write better code. -## Overview +## What is the Code Editor? -Designed for modern development workflows, the editor panel provides everything you need for efficient coding: syntax highlighting, intelligent file management, and seamless terminal access. The resizable layout adapts to your preferred working style. +Think of the Code Editor as a special notebook for writing code. It colors your code to make it easier to read and helps you find mistakes. - - Advanced editor with syntax highlighting and intelligence + + Type your code with helpful colors and hints - - Hierarchical file browsing with advanced operations + + See all your project files in a tree - - Built-in command line access + + Use the terminal without leaving the editor -## Main Interface +## Main Parts - - - ### Project File Tree +### Finding Your Files - Navigate your project structure with powerful browsing features: - - **Hierarchical display** - Expandable folder structure - - **File type indicators** - Visual icons for different file types - - **Unsaved changes** - Clear indicators for modified files - - **Hidden file filtering** - Automatic exclusion of system files +On the left side, you'll see all your project files organized like folders on your computer: +- Click folders to open them and see what's inside +- Click files to open and edit them +- Icons show you what type of file it is (JavaScript, image, etc.) +- A dot appears next to files you've changed but haven't saved - +### Writing Code - - ### Main Editing Area +The big area in the middle is where you write your code: +- **Colors** - Different parts of your code show up in different colors to make it easier to read +- **Suggestions** - As you type, the editor suggests what you might want to write next +- **Find and replace** - Search for words in your code and change them +- **Multiple spots** - Edit several places at once - Professional code editing with modern features: - - **Syntax highlighting** - Support for all major programming languages - - **Auto-completion** - Intelligent code suggestions - - **Multiple cursors** - Simultaneous editing at multiple locations - - **Find and replace** - Advanced search within files +### Using the Terminal - +At the bottom, you can open a terminal to run commands: +- Open multiple terminal tabs for different tasks +- Make it bigger or smaller by dragging +- See commands you ran before +- Run commands without leaving your code - - ### Integrated Command Line +## What You Can Do With Files - Execute commands without leaving your coding environment: - - **Multiple terminal tabs** - Different command sessions - - **Resizable panels** - Adjust terminal size as needed - - **Command history** - Access to previous commands - - **Environment integration** - Full project context +You can manage your files in many ways: +- **Create** - Make new files and folders +- **Delete** - Remove files you don't need +- **Rename** - Change file names +- **Upload** - Drag files from your computer into the editor +- **Search** - Find files quickly by name - - +### Reviewing AI Changes -## File Operations - - - Create Files/Folders - Delete/Rename - Drag & Drop Upload - File Locking - Diff Approval - - -### File Management Features - -- **Context menus** - Right-click for quick operations -- **Drag and drop** - Upload files from your computer -- **File locking** - Prevent conflicts in team environments -- **Search integration** - Quick file location -- **Diff approval workflow** - Review and approve AI-generated file changes before applying them - -### Diff Approval Workflow - -CodinIT now includes an optional diff approval system that lets you review AI-generated changes before they're applied to your files: - -- **Visual diff comparison** - See exactly what changes the AI wants to make -- **Side-by-side view** - Compare before and after versions inline -- **Approve or reject** - Full control over which changes get applied -- **Syntax highlighting** - Language-aware diff display for better readability +When the AI wants to change your files, you can review the changes first: +- **See the differences** - Compare the old and new versions side by side +- **Approve or reject** - Choose which changes to keep +- **Colored highlights** - See exactly what's being added or removed - **Enable Diff Approval**: Toggle this feature in Settings → Features to review all AI file changes before they're applied to your project. + **Review Changes**: Turn on diff approval in Settings → Features to check all AI changes before they're saved to your files. From ce6da41a6a90335d035f2b6c072bb2e0374dc030 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:00:34 +1100 Subject: [PATCH 04/33] Update features/development/workbench.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/workbench.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/features/development/workbench.mdx b/features/development/workbench.mdx index d93170d..5f88ed5 100644 --- a/features/development/workbench.mdx +++ b/features/development/workbench.mdx @@ -1,13 +1,13 @@ --- title: Workbench -description: Master the CodinIT development workbench with code editing, live preview, device simulation, and change tracking in one unified interface. +description: Your complete workspace for building apps - write code, see it work, and track changes --- -The Workbench is your complete development environment, providing everything you need to build, test, and deploy applications in one unified interface. +The Workbench is your main workspace in CodinIT. It's where you write code, see your app running, and check what you've changed. -## Overview +## What is the Workbench? -The workbench combines code editing, live preview, and change tracking into a seamless development experience. Whether you're building a web application, mobile app, or any other project, the workbench adapts to your workflow. +Think of the Workbench as your desk where you have everything you need to build an app. You can write code, test it, and see what's different from before - all in one place. From 6e0979918897ac189e6a2d7de3836b6d6e9161cf Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:00:43 +1100 Subject: [PATCH 05/33] Update features/development/workbench.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/workbench.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/features/development/workbench.mdx b/features/development/workbench.mdx index 5f88ed5..a40d6ab 100644 --- a/features/development/workbench.mdx +++ b/features/development/workbench.mdx @@ -10,20 +10,20 @@ The Workbench is your main workspace in CodinIT. It's where you write code, see Think of the Workbench as your desk where you have everything you need to build an app. You can write code, test it, and see what's different from before - all in one place. - - Full-featured code editor with file management, search, and terminal integration + + Write and organize your code files - - Real-time application preview with device simulation and responsive testing + + See your app running on different devices - - Visual diff comparison and version history for all your file changes + + See what you've changed in your files -## Main Views +## Three Main Views -The workbench provides three primary views that you can switch between based on your current task: +The workbench has three different views. You can switch between them depending on what you want to do: From 7fef98888fd2fe2bf86c5cfd9646fc105755a936 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:01:04 +1100 Subject: [PATCH 06/33] Update features/development/workbench.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/workbench.mdx | 75 ++++++++++++------------------ 1 file changed, 29 insertions(+), 46 deletions(-) diff --git a/features/development/workbench.mdx b/features/development/workbench.mdx index a40d6ab..a9474b0 100644 --- a/features/development/workbench.mdx +++ b/features/development/workbench.mdx @@ -27,62 +27,45 @@ The workbench has three different views. You can switch between them depending o - ## Code Editing Interface + ## Writing Code - The code view is your primary workspace for writing and managing code. It features a resizable layout with multiple panels working together seamlessly. + This is where you write and organize your code files. - - - ### File Tree Panel - - Navigate your project structure with an intuitive file tree that supports: - - **Hierarchical browsing** - Expand and collapse folders to find files quickly - - **File type indicators** - Visual icons showing file types (JavaScript, CSS, images, etc.) - - **Unsaved changes** - Clear indicators for files with pending changes - - **Hidden file filtering** - Automatically hides common directories like `node_modules` - - - **Quick Tip**: Use the search bar within the file tree to quickly locate specific files by name. - - + ### Your Files - - ### Main Editing Area + On the left, you see all your project files in a tree: + - Click folders to open them + - Click files to edit them + - Icons show what type of file it is + - A dot shows files you haven't saved yet - A powerful code editor with features designed for modern development: - - **Syntax highlighting** - Support for all major programming languages - - **Auto-completion** - Intelligent code suggestions as you type - - **Multiple cursors** - Edit multiple locations simultaneously - - **Find and replace** - Search within files with regex support + + **Quick Tip**: Use the search box to find files by name. + - #### File Management - - **Breadcrumb navigation** - See your current location in the file hierarchy - - **Save/Reset buttons** - Quick access to save changes or revert to original state - - **Auto-save** - Automatic saving prevents data loss - + ### The Editor - - ### Project-Wide Search + The big area in the middle is where you write code: + - **Colors** - Your code is colored to make it easier to read + - **Suggestions** - Get help as you type + - **Find and replace** - Search for text and change it + - **Edit multiple spots** - Change several places at once - Find anything in your codebase instantly: - - **Text search** - Search for specific words, phrases, or patterns - - **File filtering** - Limit searches to specific file types - - **Case sensitivity** - Toggle case-sensitive matching - - **Regular expressions** - Advanced pattern matching for complex searches + You can save your work or undo changes with the buttons at the top. - Results are grouped by file with line numbers and highlighted matches for easy navigation. - + ### Search Everything - - ### Command Line Access + Need to find something in your whole project? + - Type what you're looking for + - See results from all files + - Click a result to jump to that file - Run commands directly within your development environment: - - **Multiple terminal tabs** - Work with different command sessions - - **Resizable panels** - Adjust terminal size to fit your workflow - - **Command history** - Access previously run commands - - **Environment integration** - Full access to your project's environment - - + ### Terminal + + At the bottom, you can type commands: + - Open multiple terminal tabs + - Make it bigger or smaller + - Run commands to start your app or install tools From d97937e2067e30f7449505092301b65405053e91 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:01:27 +1100 Subject: [PATCH 07/33] Update features/development/workbench.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/workbench.mdx | 73 ++++++++++++------------------ 1 file changed, 30 insertions(+), 43 deletions(-) diff --git a/features/development/workbench.mdx b/features/development/workbench.mdx index a9474b0..6abab8e 100644 --- a/features/development/workbench.mdx +++ b/features/development/workbench.mdx @@ -70,64 +70,51 @@ The workbench has three different views. You can switch between them depending o - ## Live Application Preview + ## See Your App Running - See your application come to life with real-time preview capabilities that adapt to any device or screen size. + This view shows your app working, just like it would on a real phone, tablet, or computer. - - - ### Real-Time Application Viewing - - Experience your application exactly as users will see it: - - **Instant updates** - Changes appear immediately as you code - - **Full interactivity** - Test buttons, forms, and user interactions - - **Error display** - See runtime errors and debugging information - - **Loading states** - Observe how your app behaves during data fetching - + ### Live Preview - - ### Test Across Devices + Watch your app in action: + - **Instant updates** - See changes as soon as you save your code + - **Click and test** - Try buttons and forms to make sure they work + - **See errors** - If something breaks, you'll see what went wrong - Ensure your application works perfectly on every device: + ### Test on Different Devices - - - Test on iPhone SE, iPhone 12/13, iPhone Pro Max, and various Android sizes + Make sure your app looks good everywhere: + + + + iPhone and Android phones of different sizes - - iPad Mini, iPad Air, iPad Pro 11", and iPad Pro 12.9" configurations + + iPads and other tablets - - Small, medium, and large laptop sizes plus full desktop resolutions + + Laptops and desktop screens - - 4K displays and other large format screens + + Large monitors and TVs - **Orientation Support**: Test both portrait and landscape orientations for mobile and tablet devices. - + You can also flip devices sideways (landscape) or upright (portrait) to test both ways. - - ### Screen Size Flexibility + ### Change the Size - Verify your responsive design works across all breakpoints: - - **Custom sizing** - Set exact pixel dimensions for testing - - **Resize handles** - Drag to adjust preview size in real-time - - **Breakpoint testing** - Quickly jump between common screen sizes - - **Frame simulation** - See how your app looks within device frames - + You can adjust the preview size: + - Pick a device from the list + - Drag the edges to make it bigger or smaller + - Type in exact sizes if you need to - - ### Visual Documentation + ### Take Screenshots - Capture and share your application's appearance: - - **Full-page screenshots** - Capture entire application views - - **Element selection** - Focus on specific UI components - - **Multiple formats** - Export in various image formats - - **Annotation tools** - Add notes and highlights to screenshots - - + Capture pictures of your app: + - Take a screenshot of the whole page + - Save it to share with others + - Add notes or highlights if needed From e97e0e17817129de2ab443bb4a4a91521eb27020 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:01:45 +1100 Subject: [PATCH 08/33] Update features/development/workbench.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/workbench.mdx | 82 +++++++++++++----------------- 1 file changed, 36 insertions(+), 46 deletions(-) diff --git a/features/development/workbench.mdx b/features/development/workbench.mdx index 6abab8e..c119137 100644 --- a/features/development/workbench.mdx +++ b/features/development/workbench.mdx @@ -118,52 +118,42 @@ The workbench has three different views. You can switch between them depending o - - ## File Change Tracking - - Understand exactly what has changed in your files with powerful comparison tools and version history. - - - - ### Side-by-Side Changes - - See differences clearly with syntax-highlighted comparisons: - - **Added lines** - Green highlighting for new content - - **Removed lines** - Red highlighting for deleted content - - **Inline changes** - Character-level differences within lines - - **Context lines** - Surrounding code for better understanding - - - - ### Modification Summary - - Get quantitative insights into your changes: - - **Addition count** - Number of lines added to files - - **Deletion count** - Number of lines removed from files - - **File status** - Modified, new, or deleted file indicators - - **Change timeline** - When modifications were made - - - - ### Change Timeline - - Track the evolution of your files over time: - - **Multiple versions** - View different states of the same file - - **Timestamp tracking** - See exactly when changes were made - - **Revert capability** - Restore previous versions if needed - - **Change grouping** - Related modifications bundled together - - - - ### Quick File Access - - Jump directly to files that have been modified: - - **Modified files dropdown** - Quick access to all changed files - - **Search functionality** - Find specific changed files - - **File type filtering** - Focus on particular file types - - **Change indicators** - Visual badges showing modification counts - - + + ## See What You Changed + + This view shows you exactly what's different in your files compared to before. + + ### Compare Old and New + + See your changes side by side: + - **Green lines** - New stuff you added + - **Red lines** - Things you removed + - **Highlighted words** - Specific words that changed + - **Context** - See the code around your changes + + ### Change Summary + + Get a quick overview: + - **Lines added** - How many new lines you wrote + - **Lines removed** - How many lines you deleted + - **File status** - Which files are new, changed, or deleted + - **When** - See when you made the changes + + ### History + + Look back at previous versions: + - **Different versions** - See how your file looked before + - **Time stamps** - Know when each change happened + - **Undo changes** - Go back to an older version if needed + - **Grouped changes** - Related changes shown together + + ### Find Changed Files + + Quickly jump to files you've edited: + - **Dropdown menu** - See all changed files + - **Search** - Find a specific file + - **Filter** - Show only certain types of files + - **Badges** - See how many changes each file has From 6b341d3938c1599a823e55ba4a0026aa783fc42a Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:01:58 +1100 Subject: [PATCH 09/33] Update features/development/workbench.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/workbench.mdx | 33 +++++++++--------------------- 1 file changed, 10 insertions(+), 23 deletions(-) diff --git a/features/development/workbench.mdx b/features/development/workbench.mdx index c119137..78dea19 100644 --- a/features/development/workbench.mdx +++ b/features/development/workbench.mdx @@ -158,35 +158,22 @@ The workbench has three different views. You can switch between them depending o -## Key Features +## How to Build an App - - Real-time Preview - Device Simulation - Code Intelligence - Git Integration - Terminal Access - Change Tracking - - -### Development Workflow - -The workbench supports your complete development cycle: +Here's how you use the workbench to build something: - - Use the powerful code editor with syntax highlighting, auto-completion, and intelligent suggestions to write clean, - efficient code. + + Use the code view to write your app. The editor helps you with colors and suggestions. - - Switch to preview mode to see your application on different devices and screen sizes, ensuring it works perfectly - everywhere. + + Switch to preview view to see your app running. Try it on different devices to make sure it looks good everywhere. - - Use the diff view to understand what has changed, review modifications, and ensure code quality before committing. + + Use the changes view to see what you modified. Make sure everything looks right before saving. - - Use built-in deployment tools to push your code to GitHub, deploy to hosting platforms, or share with team members. + + Save your work to GitHub and deploy it so others can use your app. From a1e00459de2087f1c5987f1049d77fd4cb750465 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:02:18 +1100 Subject: [PATCH 10/33] Update features/development/workbench.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- features/development/workbench.mdx | 68 +++++++++++------------------- 1 file changed, 24 insertions(+), 44 deletions(-) diff --git a/features/development/workbench.mdx b/features/development/workbench.mdx index 78dea19..1c09945 100644 --- a/features/development/workbench.mdx +++ b/features/development/workbench.mdx @@ -177,59 +177,39 @@ Here's how you use the workbench to build something: -## Additional Tools +## Other Helpful Tools -Beyond the main views, the workbench includes several supporting tools to enhance your development experience. +The workbench has extra tools to help you: - - - ### Project Deployment +### Save to GitHub - Share your work with the world using integrated deployment tools: - - **GitHub integration** - Push directly to GitHub repositories - - **Repository creation** - Create new repos with proper configuration - - **Commit management** - Generate meaningful commit messages - - **Branch handling** - Work with different branches and merge strategies +Share your code with others: +- **Push to GitHub** - Save your code online +- **Create repositories** - Make a new project on GitHub +- **Branches** - Work on different versions of your code - +### Manage Files - - ### Advanced File Operations +Keep your files organized: +- **Sync files** - Make sure everything is up to date +- **Download** - Save your whole project as a ZIP file +- **Import** - Bring in files from somewhere else - Keep your local and remote files in sync: - - **File synchronization** - Sync changes between local and remote environments - - **Download options** - Export your project as a ZIP file - - **Import capabilities** - Bring in files from external sources - - **Conflict resolution** - Handle file conflicts gracefully +### Work with Others - +Build apps with your team: +- **File locking** - Prevent two people from editing the same file at once +- **Notifications** - Know when someone changes a file +- **Comments** - Leave notes for your teammates - - ### Team Development +### Fix Problems - Work effectively with your team: - - **File locking** - Prevent conflicts when multiple people edit the same files - - **Change notifications** - See when team members modify shared files - - **Comment system** - Add notes and feedback on specific code sections - - **Review workflows** - Structured processes for code review and approval - - - - - ### Development Optimization - - Ensure your application performs well: - - **Performance monitoring** - Track loading times and resource usage - - **Error tracking** - Identify and debug runtime issues - - **Console access** - View browser console output and debugging information - - **Network inspection** - Monitor API calls and data flow - - - - -## Getting Started +Make sure your app works well: +- **Check speed** - See how fast your app loads +- **Find errors** - Spot and fix bugs +- **Console** - See messages from your app +- **Network** - Watch how your app talks to servers - **Quick Start**: Open any project file to automatically activate the workbench. The interface will adapt based on your - project type and current development needs. + **Getting Started**: Just open a file to start using the workbench. It will show you the tools you need. From 2cabe0f30e20275cc8e21109ff86d2e7784e5725 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:02:37 +1100 Subject: [PATCH 11/33] Update prompting/prompt-engineering-guide.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- prompting/prompt-engineering-guide.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/prompting/prompt-engineering-guide.mdx b/prompting/prompt-engineering-guide.mdx index c9e2d41..2a968bf 100644 --- a/prompting/prompt-engineering-guide.mdx +++ b/prompting/prompt-engineering-guide.mdx @@ -1,13 +1,13 @@ --- title: 'Prompt Engineering Guide' -description: 'Master AI prompt engineering techniques for better code generation. Learn advanced LLM prompting strategies & optimize AI interactions.' +description: 'How to talk to AI to get better code' --- -Master the art of AI prompt engineering to get the best code generation results from LLMs (Large Language Models). This comprehensive guide covers advanced techniques for structuring AI prompts, optimizing for different AI models like Claude and GPT-4, and maximizing the quality of AI-generated code and intelligent development responses. +Learn how to ask the AI for what you want in a way that gets you the best results. Think of it like giving clear instructions to a helpful assistant. -## Understanding LLM capabilities for AI code generation +## How AI Understands You -Different AI models (LLMs) have different coding strengths and limitations. Effective AI prompt engineering involves adapting your communication style to leverage each LLM's code generation capabilities optimally for better AI-powered development results. +Different AI models are good at different things. The key is to be clear about what you want, just like explaining something to a friend. --- From 82ccbec0809d7b2dc03b26fdded89203459caaff Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:02:59 +1100 Subject: [PATCH 12/33] Update prompting/prompt-engineering-guide.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- prompting/prompt-engineering-guide.mdx | 63 ++++++++++++-------------- 1 file changed, 29 insertions(+), 34 deletions(-) diff --git a/prompting/prompt-engineering-guide.mdx b/prompting/prompt-engineering-guide.mdx index 2a968bf..ab9948e 100644 --- a/prompting/prompt-engineering-guide.mdx +++ b/prompting/prompt-engineering-guide.mdx @@ -11,52 +11,47 @@ Different AI models are good at different things. The key is to be clear about w --- -## Technology stack specification for AI code generation +## Tell the AI What Tools to Use -### Be explicit about technologies for better LLM results +### Be Specific About Your Tools -AI models (LLMs) work best when you clearly specify your preferred technology stack for code generation. This ensures the AI-generated code uses the right frameworks, libraries, and architectural patterns from the start for optimal AI-powered development. +The AI works better when you tell it exactly what tools and technologies you want to use. It's like telling a chef what ingredients to cook with. -**Clear stack specification for AI prompting:** +**Good example:** ``` -Build a modern e-commerce dashboard using AI code generation with: -- React with TypeScript for the frontend -- Supabase for backend and database -- Tailwind CSS for styling -- React Query for data fetching -- React Router for navigation +Build an online store dashboard with: +- React for the website +- Supabase for saving data +- Tailwind CSS to make it look nice +- React Router to move between pages ``` -### Recommended Technology Combinations +### Popular Tool Combinations -| Category | Primary Choice | Alternatives | Use Case | -| ---------------------- | ------------------ | ------------------------------ | ---------------------------- | -| **Frontend Framework** | React + TypeScript | Vue.js, Svelte, SolidJS | Interactive web applications | -| **Styling** | Tailwind CSS | CSS Modules, Styled Components | Utility-first styling | -| **Backend** | Supabase | Express.js, FastAPI | Full-stack applications | -| **State Management** | Zustand | Redux, Jotai | Complex application state | -| **Data Fetching** | TanStack Query | SWR, Apollo | Server state management | +| What You're Building | Good Tools to Use | What It's For | +| ---------------------- | ------------------ | ---------------------------- | +| **Website** | React + TypeScript | Making interactive websites | +| **Styling** | Tailwind CSS | Making things look pretty | +| **Saving Data** | Supabase | Storing user information | +| **Managing Data** | Zustand | Keeping track of app information | -### Framework-Specific Considerations +### Tips for Different Frameworks -**React Applications:** +**If you're using React:** +- Say if you want modern or old-style components +- Mention how you want to handle data +- Tell it how pages should connect -- Specify component structure (functional vs class components) -- Include state management preferences -- Define routing approach (React Router, Next.js App Router) +**If you're using Vue:** +- Specify which Vue style you prefer +- Mention any UI libraries you like +- Say what build tool you're using -**Vue.js Applications:** - -- Specify composition API vs options API -- Include UI library preferences (Quasar, Vuetify) -- Define build tool (Vite, Vue CLI) - -**Backend Integration:** - -- Specify API patterns (REST, GraphQL) -- Include authentication requirements -- Define data validation approach (Zod, Joi) +**For the Backend:** +- Say if you want REST or GraphQL APIs +- Mention if you need user login +- Tell it how to check if data is correct ## Advanced AI prompting techniques for code generation From 2d945b84b888fec4c368ff49b859a9a556982284 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:03:23 +1100 Subject: [PATCH 13/33] Update prompting/prompt-engineering-guide.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- prompting/prompt-engineering-guide.mdx | 74 +++++++++++++------------- 1 file changed, 36 insertions(+), 38 deletions(-) diff --git a/prompting/prompt-engineering-guide.mdx b/prompting/prompt-engineering-guide.mdx index ab9948e..10de38d 100644 --- a/prompting/prompt-engineering-guide.mdx +++ b/prompting/prompt-engineering-guide.mdx @@ -53,64 +53,62 @@ Build an online store dashboard with: - Mention if you need user login - Tell it how to check if data is correct -## Advanced AI prompting techniques for code generation +## How to Ask Better Questions -### Contextual information for better LLM results +### Give the AI Context -**Provide relevant context for AI code generation:** +**Help the AI understand your situation:** -- Include existing code snippets when relevant for AI understanding -- Reference specific files or components for LLM context -- Mention current technology constraints for AI-powered development -- Specify performance requirements for optimized code generation +- Show it code you already have +- Tell it which files you're working on +- Mention any limits (like "needs to work on old phones") +- Say if speed is important -**Progressive refinement with AI prompting:** +**Start Simple, Then Add Details:** -- Start with high-level requirements for AI planning -- Add implementation details iteratively for better LLM results -- Use follow-up prompts for AI clarification -- Build upon previous AI responses for iterative development +- First, explain what you want in general +- Then add more specific details +- Ask follow-up questions if needed +- Build on what the AI already created -### LLM-specific optimization for AI coding +### Tips for Different AI Models -**Claude/Gemini AI models:** +**For Claude or Gemini:** -- Provide comprehensive context upfront for better AI code generation -- Use structured formats (numbered lists, sections) for LLM understanding -- Include examples and edge cases for robust AI development -- Specify output format preferences for consistent code generation +- Give all the information at once +- Use numbered lists to organize your thoughts +- Include examples of what you want +- Say how you want the answer formatted -**GPT AI models:** +**For GPT:** -- Break complex requests into smaller parts for better LLM processing -- Use clear, direct language for optimal AI code generation -- Provide concrete examples for accurate LLM understanding -- Specify desired output structure for consistent AI results +- Break big requests into smaller pieces +- Use simple, clear language +- Show examples of what you mean +- Be specific about what you want -### Error Prevention +### Avoid Common Mistakes -**Common Pitfalls to Avoid:** +**Don't do this:** -- Vague requirements that lead to assumptions -- Missing technical specifications -- Inconsistent naming conventions -- Unspecified integration requirements +- Be too vague ("make it better") +- Forget to mention important details +- Use different names for the same thing +- Forget to say how things should connect -**Validation Techniques:** +**Do this instead:** -- Include acceptance criteria -- Specify testing requirements -- Define success metrics -- Request validation checkpoints +- Include clear goals ("make the button blue and centered") +- Specify what success looks like +- Say how you'll test it +- Ask for checkpoints along the way - **Version Specification**: When possible, specify framework versions to ensure compatibility and avoid deprecated - features. + **Version Numbers**: If you know which version of a tool you're using, tell the AI. This helps it give you code that works. - **Iterative Refinement**: Start with a clear prompt, then use follow-up messages to add details and make adjustments - as needed. + **Start Simple**: Begin with a clear request, then add more details in follow-up messages. ## AI prompt engineering best practices summary From bd458141808a6a405188de772ecd053f2d204846 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:03:43 +1100 Subject: [PATCH 14/33] Update prompting/prompt-engineering-guide.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- prompting/prompt-engineering-guide.mdx | 61 +++++++++++++------------- 1 file changed, 30 insertions(+), 31 deletions(-) diff --git a/prompting/prompt-engineering-guide.mdx b/prompting/prompt-engineering-guide.mdx index 10de38d..d5a2957 100644 --- a/prompting/prompt-engineering-guide.mdx +++ b/prompting/prompt-engineering-guide.mdx @@ -111,49 +111,48 @@ Build an online store dashboard with: **Start Simple**: Begin with a clear request, then add more details in follow-up messages. -## AI prompt engineering best practices summary +## Quick Tips Summary -### Essential AI prompting principles for code generation +### The Main Rules -1. **Clarity first**: Be specific about what you want to build with AI code generation and how it should work -2. **Technology specification**: Clearly state your preferred frameworks and libraries for LLM understanding -3. **Context provision**: Include relevant background information and constraints for better AI results -4. **Iterative AI approach**: Start simple, then add complexity through follow-up prompts for optimal code generation +1. **Be clear**: Say exactly what you want and how it should work +2. **Name your tools**: Tell the AI which technologies to use +3. **Give context**: Share relevant information and any limits +4. **Start simple**: Begin with basics, then add details -### AI code generation quality checklist +### Checklist Before You Ask -**Before submitting AI prompts:** +**Before you send your request:** -- ✅ Goal is clearly defined for LLM understanding -- ✅ Technology stack is specified for AI code generation -- ✅ Key features are listed for comprehensive AI development -- ✅ User requirements are outlined for accurate LLM results -- ✅ Success criteria are defined for measurable AI outcomes +- ✅ You clearly explained your goal +- ✅ You listed the tools you want to use +- ✅ You mentioned the main features you need +- ✅ You described what success looks like -**During AI-powered development:** +**While building:** -- 🔄 Provide feedback on AI-generated code for improvement -- 🔄 Request specific modifications from LLM for refinement -- 🔄 Ask for AI explanations when needed for understanding -- 🔄 Use AI discussion mode for architecture planning +- 🔄 Give feedback on what the AI creates +- 🔄 Ask for specific changes +- 🔄 Request explanations if confused +- 🔄 Use discussion mode to plan -### Common Success Patterns +### What Makes a Good Request -**Effective Prompts Include:** +**Good requests have:** -- Specific functionality requirements -- Technology stack preferences -- User experience considerations -- Performance and scalability needs -- Integration requirements +- Clear description of what you want +- List of tools to use +- How it should look and feel +- Any speed or size requirements +- How it connects to other things -**Ineffective Prompts Lack:** +**Bad requests are missing:** -- Clear objectives -- Technical specifications -- Implementation details -- Success criteria +- A clear goal +- Technical details +- Specific instructions +- Definition of "done" - **Remember**: LLMs can only generate code based on the information you provide in prompts. The more specific and complete your AI prompts, the better the code generation results and AI-powered development outcomes. + **Remember**: The AI can only work with what you tell it. The more details you give, the better the results. From 7e664084a6b7b14ddd56954cb8aade34d55282ca Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:04:00 +1100 Subject: [PATCH 15/33] Update prompting/maximize-token-efficiency.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- prompting/maximize-token-efficiency.mdx | 31 ++++++++++++------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/prompting/maximize-token-efficiency.mdx b/prompting/maximize-token-efficiency.mdx index 67229d9..a23e0c1 100644 --- a/prompting/maximize-token-efficiency.mdx +++ b/prompting/maximize-token-efficiency.mdx @@ -1,32 +1,31 @@ --- title: 'Maximize Token Efficiency' -description: Optimize token usage to keep your costs down and work more effectively +description: How to use AI without spending too much --- -Optimize your token usage to reduce costs, improve response times, and work more efficiently with AI models. Understanding how tokens work and implementing best practices can significantly impact your development workflow. +Learn how to use AI smartly so you don't run out of credits or money. Think of tokens like text messages - the more you send, the more it costs. -## Understanding Tokens +## What Are Tokens? -CodinIT uses AI models powered by various providers (Anthropic, OpenAI, Google, etc.). Each interaction consumes **tokens**, which are chunks of text that AI models process. +CodinIT uses AI that runs on "tokens." Tokens are small pieces of text that the AI reads and writes. -### How Tokens Are Used +### How Tokens Get Used -Tokens are consumed in several ways: +Tokens are used when: -- **Input tokens**: Your prompts, questions, and context -- **Output tokens**: AI-generated responses, code, and explanations -- **Context tokens**: Project files and conversation history that provide context +- **You ask questions**: Your messages to the AI +- **AI answers**: The code and explanations the AI gives you +- **Context**: The AI reading your project files to understand what you're building -### Token Consumption Factors +### What Affects Token Usage -- **Model type**: Different models have different token costs and limits -- **Context length**: Larger projects require more tokens for context -- **Response complexity**: Detailed explanations use more tokens than simple answers -- **Conversation length**: Longer chat histories consume more context tokens +- **Which AI model**: Some models cost more than others +- **Project size**: Bigger projects use more tokens +- **Answer length**: Long explanations use more tokens than short ones +- **Chat length**: Longer conversations use more tokens - **Token Limits**: Each AI model has maximum token limits for both input context and output generation. Exceeding these - limits can cause errors or truncated responses. + **Token Limits**: Each AI has a maximum amount of text it can handle at once. If you go over, you might get errors. ## Token Efficiency Strategies From 06cba73cecd3bec01e2913ea7cad1eb0f70bf9ee Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:04:16 +1100 Subject: [PATCH 16/33] Update prompting/maximize-token-efficiency.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- prompting/maximize-token-efficiency.mdx | 28 ++++++++++++------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/prompting/maximize-token-efficiency.mdx b/prompting/maximize-token-efficiency.mdx index a23e0c1..ec7ce43 100644 --- a/prompting/maximize-token-efficiency.mdx +++ b/prompting/maximize-token-efficiency.mdx @@ -28,37 +28,37 @@ Tokens are used when: **Token Limits**: Each AI has a maximum amount of text it can handle at once. If you go over, you might get errors. -## Token Efficiency Strategies +## How to Save Tokens -### Use Built-in Features Over Prompts +### Use Buttons Instead of Typing -Leverage CodinIT's interface features instead of text prompts where possible: +CodinIT has buttons and menus that don't use tokens: -- **Example Prompts**: Use the suggested prompt buttons instead of typing similar requests -- **File Operations**: Use the file tree and editor features instead of asking for file operations -- **Terminal Commands**: Run commands directly in the terminal instead of asking the AI to execute them +- **Example prompts**: Click suggested prompts instead of typing +- **File operations**: Use the file tree to create/delete files +- **Terminal**: Run commands yourself instead of asking AI -### Optimize Your Communication Style +### Write Better Requests -**Be Specific and Concise:** +**Be specific and short:** ``` ❌ "Make this website look better" -✅ "Add a hero section with gradient background, centered heading, and call-to-action button to the homepage" +✅ "Add a hero section with gradient background, centered heading, and button" ``` -**Provide Context Efficiently:** +**Give helpful details:** ``` -❌ "Fix the login page" (requires AI to explore entire codebase) -✅ "Fix the password validation error on /login - the error occurs when password is less than 8 characters" +❌ "Fix the login page" (AI has to search everything) +✅ "Fix the password error on /login - it breaks when password is less than 8 characters" ``` -**Use Structured Requests:** +**Use numbered lists:** ``` ❌ "Add user authentication" -✅ "Add user authentication with: 1) Login form with email/password, 2) Registration form, 3) Password reset, 4) Protected routes" +✅ "Add user authentication with: 1) Login form, 2) Registration form, 3) Password reset, 4) Protected routes" ``` ## Key Efficiency Techniques From 8f92ce13d5e3fbf47eb28a6e26289bcd80ab53ce Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:04:42 +1100 Subject: [PATCH 17/33] Update prompting/maximize-token-efficiency.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- prompting/maximize-token-efficiency.mdx | 84 ++++++++++++------------- 1 file changed, 41 insertions(+), 43 deletions(-) diff --git a/prompting/maximize-token-efficiency.mdx b/prompting/maximize-token-efficiency.mdx index ec7ce43..6e2c9a8 100644 --- a/prompting/maximize-token-efficiency.mdx +++ b/prompting/maximize-token-efficiency.mdx @@ -61,73 +61,71 @@ CodinIT has buttons and menus that don't use tokens: ✅ "Add user authentication with: 1) Login form, 2) Registration form, 3) Password reset, 4) Protected routes" ``` -## Key Efficiency Techniques +## Smart Ways to Save Tokens ### Use Discussion Mode for Planning -Switch to discussion mode when you need guidance without code implementation: +When you just want to talk and plan (not write code), use discussion mode: -- **Planning Phase**: Use discussion mode to plan features before implementing -- **Architecture Decisions**: Get advice on system design and technology choices -- **Code Review**: Discuss code improvements without making changes -- **Learning**: Ask questions and get explanations without consuming implementation tokens +- **Planning**: Talk about features before building them +- **Getting advice**: Ask which tools to use +- **Code review**: Discuss improvements without changing code +- **Learning**: Ask questions without generating code -### Strategic Development Approach +### Plan Before You Build -**Plan Before You Build:** +**Think first:** -- Outline your application structure and features upfront -- Break complex projects into manageable phases -- Identify potential challenges before implementation -- Create a development roadmap to guide your work +- Write down what your app should do +- Break big projects into small pieces +- Think about problems you might face +- Make a plan for what to build first -**Iterative Development:** +**Build step by step:** -- Implement features incrementally rather than all at once -- Test and validate each component before moving to the next -- Use version control to track progress and enable rollbacks -- Focus on core functionality before adding advanced features +- Add one feature at a time +- Test each piece before moving on +- Use Git to save your progress +- Build the main features first, fancy stuff later -### Error Handling Strategies +### Don't Waste Tokens on Errors -**Avoid Repeated Fix Attempts:** +**When something breaks:** -- Don't repeatedly click "Attempt fix" for the same error -- Analyze error messages to understand root causes -- Use discussion mode to get guidance on complex issues -- Implement proper error handling in your code to prevent future issues +- Don't keep clicking "fix" over and over +- Read the error message to understand what's wrong +- Use discussion mode to ask for help +- Add error handling so it doesn't break again -**Add Comprehensive Error Handling:** +**Prevent errors:** -- Include detailed logging to understand error patterns -- Implement graceful error states in your UI -- Add input validation to prevent common errors -- Use try-catch blocks appropriately in your code +- Add logging to see what's happening +- Show friendly error messages to users +- Check user input before using it +- Use try-catch to handle errors gracefully -### Project Size Management +### Keep Your Project Small -**Optimize Project Structure:** +**Organize your files:** -- Keep files under 500 lines when possible -- Split large components into smaller, focused modules -- Remove unused dependencies and code -- Use efficient data structures and algorithms +- Keep files under 500 lines +- Split big files into smaller ones +- Delete code you're not using +- Use simple, efficient code -**Context Window Management:** +**Manage context:** -- Be mindful of how much context your project provides -- Use specific file references instead of broad requests -- Clean up chat history when conversations become too long -- Focus on specific components rather than entire applications +- Don't include your whole project in every request +- Reference specific files instead +- Start a new chat when conversations get too long +- Focus on one part of your app at a time - **Discussion Mode**: Use discussion mode for planning, architecture decisions, and getting guidance without - implementing code changes. + **Discussion Mode**: Use this when you want to talk and plan without writing code. It saves tokens! - **Version Control**: Leverage Git/version control features to manage project state without consuming AI tokens for - undo operations. + **Use Git**: Save your work with Git instead of asking AI to undo things. It's free! ## Model Selection Strategies From b3ede3a565ed1a7e9354e8a6e3abda23e8c9b8be Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:05:07 +1100 Subject: [PATCH 18/33] Update prompting/maximize-token-efficiency.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- prompting/maximize-token-efficiency.mdx | 84 ++++++++++++------------- 1 file changed, 41 insertions(+), 43 deletions(-) diff --git a/prompting/maximize-token-efficiency.mdx b/prompting/maximize-token-efficiency.mdx index 6e2c9a8..aa0ef3a 100644 --- a/prompting/maximize-token-efficiency.mdx +++ b/prompting/maximize-token-efficiency.mdx @@ -128,73 +128,71 @@ When you just want to talk and plan (not write code), use discussion mode: **Use Git**: Save your work with Git instead of asking AI to undo things. It's free! -## Model Selection Strategies +## Choosing the Right AI Model -### Choose Appropriate Models +### Pick the Right Model for the Job -Different AI models have different strengths and token costs: +Different AI models cost different amounts: -- **Use smaller models** for simple tasks, drafting, and initial development -- **Reserve larger models** for complex reasoning, code review, and final polishing -- **Consider model context limits** when working with large codebases -- **Balance cost vs. capability** based on your current development phase +- **Cheaper models** for simple tasks and quick questions +- **Expensive models** for hard problems and important code +- **Check limits** - some models can't handle huge projects +- **Balance cost and quality** based on what you're doing -### Provider-Specific Optimization +### Different AI Models -**Anthropic Claude:** +**Claude (Anthropic):** -- Excellent for reasoning and code generation -- Higher token costs but superior code quality -- Best for complex development tasks +- Great at understanding and writing code +- Costs more but gives better results +- Use for complex projects -**OpenAI GPT:** +**GPT (OpenAI):** -- Fast and cost-effective for many tasks -- Good for quick iterations and prototyping -- Consider GPT-4 for complex reasoning tasks +- Fast and cheaper for many tasks +- Good for trying things out quickly +- Use GPT-4 for harder problems -**Other Providers:** +**Other Models:** -- Evaluate based on specific use cases -- Consider regional availability and data privacy requirements -- Compare pricing and performance for your workload +- Check what they're good at +- Some work better in certain countries +- Compare prices for what you need -## Advanced Optimization Techniques +## Advanced Tips -### Context Management +### Focus Your Requests -**File-Specific Requests:** +**Be specific about files:** -- Reference specific files instead of asking about "the entire codebase" -- Use imports and dependencies to provide necessary context -- Focus on individual components rather than full applications +- Name the exact files you're working on +- Don't ask about "the whole project" +- Focus on one part at a time -**Progressive Development:** +**Build gradually:** -- Build core functionality first, then add features incrementally -- Test each component thoroughly before moving to the next -- Use modular architecture to keep context windows manageable +- Start with the main features +- Test each piece before adding more +- Keep your code organized in small pieces -### Performance Monitoring +### Watch Your Usage -**Track Your Usage:** +**Track what you use:** -- Monitor token consumption across different tasks -- Identify patterns in high-token activities -- Adjust your approach based on usage analytics +- See which tasks use the most tokens +- Notice patterns in what costs more +- Change your approach based on what you learn -**Optimize Workflows:** +**Work smarter:** -- Combine related changes into single requests -- Use batch operations when possible -- Plan complex changes to minimize back-and-forth communication +- Combine related requests into one +- Do multiple things at once when possible +- Plan ahead to avoid going back and forth - **Token Awareness**: Understanding token consumption helps you work more efficiently and control costs. Focus on - quality over quantity in your interactions. + **Be Aware**: Understanding tokens helps you save money. Focus on asking good questions, not lots of questions. - **Continuous Learning**: As you work more with AI models, you'll develop intuition for which approaches are most - token-efficient for different types of tasks. + **Learn as You Go**: The more you use AI, the better you'll get at knowing which approach saves the most tokens. From fcb6e3b1d83e89022e6eb8d41b786e4f3362b3c8 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:05:29 +1100 Subject: [PATCH 19/33] Update model-config/context-windows.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- model-config/context-windows.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/model-config/context-windows.mdx b/model-config/context-windows.mdx index b1f3a79..e26b84b 100644 --- a/model-config/context-windows.mdx +++ b/model-config/context-windows.mdx @@ -1,18 +1,18 @@ --- title: "Context Window Guide" -description: "Understand and manage AI model context windows to optimize performance, control costs, and work effectively with large codebases." +description: "How much the AI can remember at once" --- -## What is a context window? +## What is a Context Window? -A context window is the maximum amount of text an AI model can process at once. Think of it as the model's "working memory" - it determines how much of your conversation and code the model can consider when generating responses. +A context window is how much text the AI can look at and remember at one time. Think of it like the AI's short-term memory. - **What are tokens?** Tokens are small chunks of text that AI models read. A token is roughly ¾ of a word. For example, the word "hamburger" becomes two tokens: "ham" and "burger". When we talk about context window sizes like "128K tokens," that means the AI can read about 96,000 words at once. + **What are tokens?** Tokens are small pieces of text. About 4 letters = 1 token. So "hamburger" is 2 tokens: "ham" and "burger". When we say "128K tokens," that means the AI can remember about 96,000 words at once. - **Key point**: Larger context windows allow the model to understand more of your codebase at once, but may increase costs and response times. + **Important**: Bigger context windows let the AI see more of your project, but they cost more money and take longer. ### Quick reference From b755b5c8aab76b182c6f606ae32dcf291b925e5a Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:05:51 +1100 Subject: [PATCH 20/33] Update model-config/context-windows.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- model-config/context-windows.mdx | 40 ++++++++++++++++---------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/model-config/context-windows.mdx b/model-config/context-windows.mdx index e26b84b..f17f83e 100644 --- a/model-config/context-windows.mdx +++ b/model-config/context-windows.mdx @@ -15,34 +15,34 @@ A context window is how much text the AI can look at and remember at one time. T **Important**: Bigger context windows let the AI see more of your project, but they cost more money and take longer. -### Quick reference +### Size Guide -| Size | Tokens | Approximate Words | Use Case | +| Size | Tokens | About How Many Words | Good For | | --------------- | ------ | ----------------- | ------------------------- | -| **Small** | 8K-32K | 6,000-24,000 | Single files, quick fixes | -| **Medium** | 128K | ~96,000 | Most coding projects | -| **Large** | 200K | ~150,000 | Complex codebases | -| **Extra Large** | 400K+ | ~300,000+ | Entire applications | -| **Massive** | 1M+ | ~750,000+ | Multi-project analysis | +| **Small** | 8K-32K | 6,000-24,000 | One file, quick fixes | +| **Medium** | 128K | ~96,000 | Most projects | +| **Large** | 200K | ~150,000 | Big projects | +| **Extra Large** | 400K+ | ~300,000+ | Whole apps | +| **Huge** | 1M+ | ~750,000+ | Multiple projects | -### Model context windows +### Different AI Models -| Model | Context Window | Effective Window\* | Notes | +| AI Model | Context Window | Actually Works Well\* | Notes | | --------------------- | -------------- | ------------------ | ------------------------------ | -| **Claude Sonnet 4.5** | 1M tokens | ~500K tokens | Best quality at high context | -| **GPT-5** | 400K tokens | ~300K tokens | Three modes affect performance | -| **Gemini 2.5 Pro** | 1M+ tokens | ~600K tokens | Excellent for documents | -| **DeepSeek V3** | 128K tokens | ~100K tokens | Optimal for most tasks | -| **Qwen3 Coder** | 256K tokens | ~200K tokens | Good balance | +| **Claude Sonnet 4.5** | 1M tokens | ~500K tokens | Best for big projects | +| **GPT-5** | 400K tokens | ~300K tokens | Has three different modes | +| **Gemini 2.5 Pro** | 1M+ tokens | ~600K tokens | Great for reading documents | +| **DeepSeek V3** | 128K tokens | ~100K tokens | Good for most things | +| **Qwen3 Coder** | 256K tokens | ~200K tokens | Nice balance | -\*Effective window is where the model maintains high quality. Beyond this point, the AI may start "forgetting" earlier parts of your conversation. +\*The AI works best up to this point. After that, it might start forgetting earlier parts of your chat. -### What counts toward context +### What Uses Up the Context Window -1. **Your current conversation** - All messages in the chat -2. **File contents** - Any files you've shared or CodinIT has read -3. **Tool outputs** - Results from executed commands -4. **System prompts** - CodinIT's instructions (minimal impact) +1. **Your messages** - Everything you and the AI say in the chat +2. **Your files** - Files the AI reads from your project +3. **Command results** - Output from commands that run +4. **System instructions** - CodinIT's background instructions (uses very little) ### Optimization strategies From e8f91135d1b4aa714d9d7cacf934f6f15c5834e2 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:06:17 +1100 Subject: [PATCH 21/33] Update model-config/context-windows.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- model-config/context-windows.mdx | 70 ++++++++++++++++---------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/model-config/context-windows.mdx b/model-config/context-windows.mdx index f17f83e..78a1089 100644 --- a/model-config/context-windows.mdx +++ b/model-config/context-windows.mdx @@ -44,67 +44,67 @@ A context window is how much text the AI can look at and remember at one time. T 3. **Command results** - Output from commands that run 4. **System instructions** - CodinIT's background instructions (uses very little) -### Optimization strategies +### How to Save Context Space #### 1. Start fresh for new features ```mdx -/new - Creates a new task with clean context +/new - Start a new chat with empty context ``` -Benefits: +Why this helps: -- Maximum context available -- No irrelevant history -- Better model focus +- You get the full context window +- No old, irrelevant messages +- AI focuses better -#### 2. Use @ mentions strategically +#### 2. Only include files you need -Instead of including entire files: +Instead of including everything: -- `@filename.ts` - Include only when needed -- Use search instead of reading large files -- Reference specific functions rather than whole files +- `@filename.ts` - Only mention files when necessary +- Use search instead of reading big files +- Reference specific parts, not whole files -#### 3. Enable auto-compact +#### 3. Turn on auto-compact -CodinIT can automatically summarize long conversations to free up space in the context window: +CodinIT can automatically shorten long conversations: -- Settings → Features → Auto-compact -- Preserves important context -- Reduces token usage +- Go to Settings → Features → Auto-compact +- Keeps important stuff +- Uses fewer tokens -## Context window warnings +## Warning Signs -### Signs you're hitting limits +### How to Tell You're Running Out of Space -| Warning Sign | What It Means | Solution | +| Warning Sign | What It Means | What to Do | | ----------------------------- | ----------------------------- | ------------------------------------- | -| **"Context window exceeded"** | Hard limit reached | Start new task or enable auto-compact | -| **Slower responses** | Model struggling with context | Reduce included files | -| **Repetitive suggestions** | Context fragmentation | Summarize and start fresh | -| **Missing recent changes** | Context overflow | Use checkpoints to track changes | +| **"Context window exceeded"** | You hit the limit | Start a new chat or turn on auto-compact | +| **Slow responses** | AI is struggling | Include fewer files | +| **AI repeats itself** | Context is too fragmented | Start fresh | +| **AI forgets recent changes** | Too much context | Use checkpoints | -### Best practices by project size +### Tips by Project Size -#### Small projects (\< 50 files) +#### Small projects (less than 50 files) -- Any model works well -- Include relevant files freely -- No special optimization needed +- Any AI model works fine +- Include files freely +- Don't worry about optimization #### Medium projects (50-500 files) -- Use 128K+ context models -- Include only working set of files -- Clear context between features +- Use AI with 128K+ context +- Only include files you're working on +- Start new chats between features #### Large projects (500+ files) -- Use 200K+ context models -- Focus on specific modules -- Use search instead of reading many files -- Break work into smaller tasks +- Use AI with 200K+ context +- Focus on one part at a time +- Search instead of reading many files +- Break work into smaller pieces ## Advanced context management From 059550279b3bf78f619f0e39eb52de929376a65a Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:06:49 +1100 Subject: [PATCH 22/33] Update model-config/context-windows.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- model-config/context-windows.mdx | 72 ++++++++++++++++---------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/model-config/context-windows.mdx b/model-config/context-windows.mdx index 78a1089..bed2279 100644 --- a/model-config/context-windows.mdx +++ b/model-config/context-windows.mdx @@ -106,39 +106,39 @@ CodinIT can automatically shorten long conversations: - Search instead of reading many files - Break work into smaller pieces -## Advanced context management +## Advanced Tips -### Plan/Act mode optimization +### Use Plan/Act Mode Smartly -Leverage Plan/Act mode for better context usage: +Use different AI models for different tasks: -- **Plan Mode**: Use smaller context for discussion and planning -- **Act Mode**: Include necessary files when you're ready to write code +- **Plan Mode**: Use cheaper AI for talking and planning +- **Act Mode**: Use better AI when writing code -Configuration example: +Example: ``` -Plan Mode: DeepSeek V3 (128K) - Lower cost planning -Act Mode: Claude Sonnet (1M) - Maximum context for coding +Plan Mode: DeepSeek V3 (128K) - Cheap for planning +Act Mode: Claude Sonnet (1M) - Better for coding ``` -### Context pruning strategies +### How CodinIT Saves Space -These are ways CodinIT can reduce the amount of text in your context window: +CodinIT can automatically remove less important text: -1. **Temporal pruning**: Remove older parts of your conversation that are no longer relevant -2. **Semantic pruning**: Keep only the code sections related to your current task -3. **Hierarchical pruning**: Keep the big picture but remove fine details +1. **Remove old messages**: Delete old parts of the conversation +2. **Keep relevant code**: Only keep code related to what you're doing now +3. **Keep summaries**: Keep the main ideas but remove details -### Token counting tips +### Counting Tokens -#### Rough estimates +#### Quick math -- **1 token ≈ 0.75 words** (so 1,000 tokens is about 750 words) -- **1 token ≈ 4 characters** +- **1 token ≈ 3/4 of a word** (1,000 tokens = about 750 words) +- **1 token ≈ 4 letters** - **100 lines of code ≈ 500-1000 tokens** -#### File size guidelines +#### File sizes | File Type | Tokens per KB | | -------------- | ------------- | @@ -147,34 +147,34 @@ These are ways CodinIT can reduce the amount of text in your context window: | **Markdown** | ~200-300 | | **Plain text** | ~200-250 | -## Context window FAQ +## Common Questions -### Q: Why do responses get worse with very long conversations? +### Q: Why does the AI get worse with long conversations? -**A:** Models can lose focus with too much context. The "effective window" is typically 50-70% of the advertised limit. +**A:** The AI loses focus when there's too much to remember. It works best with 50-70% of its maximum. -### Q: Should I use the largest context window available? +### Q: Should I always use the biggest context window? -**A:** Not always. Larger contexts increase cost and can reduce response quality. Match the context to your task size. +**A:** No. Bigger contexts cost more and can make the AI worse. Use what you need for your task. -### Q: How can I tell how much context I'm using? +### Q: How do I know how much context I'm using? -**A:** CodinIT shows token usage in the interface. Watch for the context meter approaching limits. +**A:** CodinIT shows you a meter. Watch it to see when you're getting close to the limit. -### Q: What happens when I exceed the context limit? +### Q: What happens if I go over the limit? -**A:** CodinIT will either: +**A:** CodinIT will: -- Automatically compact the conversation (if enabled) -- Show an error and suggest starting a new task -- Truncate older messages (with warning) +- Automatically shorten the conversation (if you turned that on) +- Show an error and tell you to start a new chat +- Remove old messages (with a warning) -## Recommendations by use case +## What to Use When -| Use Case | Recommended Context | Model Suggestion | +| What You're Doing | Context Size | Which AI | | ----------------------- | ------------------- | ----------------- | | **Quick fixes** | 32K-128K | DeepSeek V3 | -| **Feature development** | 128K-200K | Qwen3 Coder | -| **Large refactoring** | 400K+ | Claude Sonnet 4.5 | -| **Code review** | 200K-400K | GPT-5 | -| **Documentation** | 128K | Any budget model | \ No newline at end of file +| **Building features** | 128K-200K | Qwen3 Coder | +| **Big changes** | 400K+ | Claude Sonnet 4.5 | +| **Reviewing code** | 200K-400K | GPT-5 | +| **Writing docs** | 128K | Any cheap model | \ No newline at end of file From 869d6a0dfdab2c81cc403b46dbc0277f70321006 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:07:09 +1100 Subject: [PATCH 23/33] Update model-config/model-comparison.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- model-config/model-comparison.mdx | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/model-config/model-comparison.mdx b/model-config/model-comparison.mdx index 3d52e5f..78361ff 100644 --- a/model-config/model-comparison.mdx +++ b/model-config/model-comparison.mdx @@ -1,29 +1,29 @@ --- title: "Model Comparison & Pricing" -description: "Compare AI models by performance, features, and pricing to choose the best solution for your development needs and budget." +description: "Which AI to use and how much it costs" --- -### Premium Models +### Expensive but Good Models -| Model | Provider | Context Window | Input Price\* | Output Price\* | Best For | +| AI Model | Company | Memory Size | Reading Cost\* | Writing Cost\* | Best For | | --------------------- | --------- | -------------- | ------------- | -------------- | -------------------------------------- | -| **Claude Sonnet 4.5** | Anthropic | 1M tokens | \$3-6 | \$15-22.50 | Reliable tool usage, complex codebases | -| **GPT-5** | OpenAI | 400K tokens | \$1.25 | \$10 | Latest OpenAI tech, three modes | -| **Gemini 2.5 Pro** | Google | 1M+ tokens | TBD | TBD | Large codebases, document analysis | -| **Qwen3 Coder** | Multiple | 256K tokens | \$0.20 | \$0.80 | Coding tasks, open source flexibility | +| **Claude Sonnet 4.5** | Anthropic | 1M tokens | \$3-6 | \$15-22.50 | Complex projects, reliable results | +| **GPT-5** | OpenAI | 400K tokens | \$1.25 | \$10 | Latest tech, three modes | +| **Gemini 2.5 Pro** | Google | 1M+ tokens | TBD | TBD | Big projects, reading documents | +| **Qwen3 Coder** | Multiple | 256K tokens | \$0.20 | \$0.80 | Writing code, open source | -\*Per million tokens +\*Per million tokens (about 750,000 words) -### Budget Models +### Cheap Models -| Model | Provider | Context Window | Input Price\* | Output Price\* | Notes | +| AI Model | Company | Memory Size | Reading Cost\* | Writing Cost\* | Notes | | ---------------- | -------- | -------------- | ------------- | -------------- | ------------------------------- | -| **DeepSeek V3** | DeepSeek | 128K tokens | \$0.14 | \$0.28 | Great value for daily coding | -| **DeepSeek R1** | DeepSeek | 128K tokens | \$0.55 | \$2.19 | Budget reasoning champion | -| **Qwen3 32B** | Multiple | 128K tokens | Varies | Varies | Open source, multiple providers | -| **Z AI GLM 4.5** | Z AI | 128K tokens | TBD | TBD | MIT licensed, hybrid reasoning | +| **DeepSeek V3** | DeepSeek | 128K tokens | \$0.14 | \$0.28 | Great value for everyday coding | +| **DeepSeek R1** | DeepSeek | 128K tokens | \$0.55 | \$2.19 | Cheap but smart | +| **Qwen3 32B** | Multiple | 128K tokens | Varies | Varies | Open source, many providers | +| **Z AI GLM 4.5** | Z AI | 128K tokens | TBD | TBD | Free license, smart reasoning | -\*Per million tokens +\*Per million tokens (about 750,000 words) ## Performance Comparison From 1f1f8e6eef69f9b22c52010132d50d731a98e873 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:07:31 +1100 Subject: [PATCH 24/33] Update model-config/model-comparison.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- model-config/model-comparison.mdx | 44 +++++++++++++++---------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/model-config/model-comparison.mdx b/model-config/model-comparison.mdx index 78361ff..b2cf7f9 100644 --- a/model-config/model-comparison.mdx +++ b/model-config/model-comparison.mdx @@ -25,39 +25,39 @@ description: "Which AI to use and how much it costs" \*Per million tokens (about 750,000 words) -## Performance Comparison +## Which One to Pick -| Priority | Recommended Model | Why | +| What Matters Most | Best AI | Why | | ----------- | ----------------------- | ------------------------------- | -| **Speed** | Qwen3 Coder on Cerebras | Fastest inference available | -| **Quality** | Claude Sonnet 4.5 | Most reliable for complex tasks | -| **Balance** | DeepSeek V3 | Good quality at low cost | +| **Speed** | Qwen3 Coder on Cerebras | Fastest | +| **Quality** | Claude Sonnet 4.5 | Most reliable for hard tasks | +| **Value** | DeepSeek V3 | Good quality, low cost | -### Tool Reliability +### How Reliable Are They? -Models ranked by tool usage reliability: +Ranked from most to least reliable: -1. **Claude Sonnet 4.5** - Most reliable tool execution -2. **GPT-5** - Excellent but occasional formatting issues -3. **Gemini 2.5 Pro** - Good for standard tools -4. **DeepSeek V3** - Reliable for basic tools -5. **Qwen3 variants** - May need retry for complex tools +1. **Claude Sonnet 4.5** - Almost always works correctly +2. **GPT-5** - Very good but sometimes has formatting issues +3. **Gemini 2.5 Pro** - Good for normal tasks +4. **DeepSeek V3** - Reliable for simple tasks +5. **Qwen3 variants** - Might need to try again for hard tasks -### Typical Task Costs +### What Things Cost -| Task Type | Token Usage (avg) | Claude Sonnet | DeepSeek V3 | Difference | +| What You're Doing | How Much Text | Claude Sonnet | DeepSeek V3 | Difference | | -------------------------- | ----------------- | ------------- | ----------- | ----------- | -| **Simple Bug Fix** | 5K tokens | \$0.05 | \$0.001 | 50x cheaper | -| **Feature Implementation** | 50K tokens | \$0.50 | \$0.01 | 50x cheaper | -| **Large Refactoring** | 200K tokens | \$2.00 | \$0.04 | 50x cheaper | +| **Fix a small bug** | 5K tokens | \$0.05 | \$0.001 | 50x cheaper | +| **Add a feature** | 50K tokens | \$0.50 | \$0.01 | 50x cheaper | +| **Big code changes** | 200K tokens | \$2.00 | \$0.04 | 50x cheaper | -### Monthly Budget Estimates +### Monthly Budget Examples -| Budget | Claude Usage | DeepSeek Usage | Mixed Strategy | +| Your Budget | Using Claude | Using DeepSeek | Smart Mix | | --------------- | ------------- | --------------- | --------------------------------- | -| **\$10/month** | ~20 features | ~1000 features | Plan: DeepSeek, Act: Claude | -| **\$50/month** | ~100 features | ~5000 features | Critical: Claude, Rest: DeepSeek | -| **\$100/month** | ~200 features | ~10000 features | Complex: Claude, Simple: DeepSeek | +| **\$10/month** | ~20 features | ~1000 features | Plan with DeepSeek, code with Claude | +| **\$50/month** | ~100 features | ~5000 features | Important stuff: Claude, rest: DeepSeek | +| **\$100/month** | ~200 features | ~10000 features | Hard tasks: Claude, easy tasks: DeepSeek | ### Provider Features From 30a13475152810638f5f62eeeba9fd14c07008b5 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:07:48 +1100 Subject: [PATCH 25/33] Update model-config/model-comparison.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- model-config/model-comparison.mdx | 36 +++++++++++++++---------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/model-config/model-comparison.mdx b/model-config/model-comparison.mdx index b2cf7f9..ec90a87 100644 --- a/model-config/model-comparison.mdx +++ b/model-config/model-comparison.mdx @@ -59,30 +59,30 @@ Ranked from most to least reliable: | **\$50/month** | ~100 features | ~5000 features | Important stuff: Claude, rest: DeepSeek | | **\$100/month** | ~200 features | ~10000 features | Hard tasks: Claude, easy tasks: DeepSeek | -### Provider Features +### Where to Get AI -| Provider | Models Available | Billing | API Stability | Support | +| Provider | AI Models Available | How You Pay | Reliability | Help | | ------------------ | ---------------- | ------------ | ------------- | --------- | -| **CodinIT** | Multiple | Credit-based | High | In-app | -| **Anthropic** | Claude only | Usage-based | High | Email | -| **OpenRouter** | 100+ models | Usage-based | High | Discord | -| **OpenAI** | GPT only | Usage-based | High | Forum | -| **Local (Ollama)** | Open source | Free | N/A | Community | +| **CodinIT** | Many | Buy credits | High | In the app | +| **Anthropic** | Claude only | Pay as you go | High | Email | +| **OpenRouter** | 100+ models | Pay as you go | High | Discord chat | +| **OpenAI** | GPT only | Pay as you go | High | Online forum | +| **Local (Ollama)** | Open source | Free | Depends on your computer | Community help | -### Provider Selection Guide +### Which Provider to Choose -Choose your provider based on: +Pick based on what you need: -- **Simplicity**: CodinIT (no API key management) -- **Variety**: OpenRouter (access to all models) -- **Direct Access**: Individual providers (Anthropic, OpenAI) -- **Privacy**: Ollama or LM Studio (local models) +- **Easy to use**: CodinIT (no setup needed) +- **Lots of choices**: OpenRouter (access to all AI models) +- **Direct**: Anthropic or OpenAI (go straight to the source) +- **Private**: Ollama or LM Studio (runs on your computer) -## Community Usage Stats +## What Others Are Using -Real-time usage data from the CodinIT community: +What the CodinIT community uses: -- View current trends at [OpenRouter's CodinIT stats](https://openrouter.ai/apps?url=https%3A%2F%2Fcodinit.dev%2F) +- See live stats at [OpenRouter's CodinIT page](https://openrouter.ai/apps?url=https%3A%2F%2Fcodinit.dev%2F) - Most popular: Claude Sonnet 4.5 (40%) -- Rising star: DeepSeek V3 (25%) -- Budget favorite: Qwen3 variants (20%) \ No newline at end of file +- Growing fast: DeepSeek V3 (25%) +- Budget pick: Qwen3 variants (20%) \ No newline at end of file From ce1e8da4d83d4d43badafd51207f61ae3c9d5e08 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:08:32 +1100 Subject: [PATCH 26/33] Update providers/aws-bedrock.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- providers/aws-bedrock.mdx | 84 +++++++++++++++++++-------------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/providers/aws-bedrock.mdx b/providers/aws-bedrock.mdx index e8f6afb..256aed8 100644 --- a/providers/aws-bedrock.mdx +++ b/providers/aws-bedrock.mdx @@ -1,26 +1,26 @@ --- title: "AWS Bedrock" sidebarTitle: "API Key" -description: "Set up AWS Bedrock with CodinIT using API Keys to access frontier models like Claude and Amazon Nova." +description: "How to connect AWS Bedrock AI to CodinIT" --- -Access leading AI models through AWS Bedrock with simplified API Key setup. +Use AWS Bedrock to access powerful AI models like Claude through Amazon's cloud service. -**Website:** [https://docs.aws.amazon.com/bedrock/](https://docs.aws.amazon.com/bedrock/latest/userguide/what-is-bedrock.html) +**Website:** [AWS Bedrock Docs](https://docs.aws.amazon.com/bedrock/latest/userguide/what-is-bedrock.html) -## Setup Steps +## How to Set It Up -### 1. Create Bedrock API Key +### Step 1: Get Your API Key -1. **Sign in:** [AWS Console](https://aws.amazon.com/console) -2. **Access Bedrock:** Go to [Bedrock Console](https://console.aws.amazon.com/bedrock) -3. **Create API Key:** Create a new Long Lived API Key - - Default policy: `AmazonBedrockLimitedAccess` - - [View policy details](https://docs.aws.amazon.com/bedrock/latest/userguide/security-iam.html#managed-policies) +1. **Log in:** Go to [AWS Console](https://aws.amazon.com/console) +2. **Open Bedrock:** Visit [Bedrock Console](https://console.aws.amazon.com/bedrock) +3. **Make an API Key:** Create a new Long Lived API Key + - Use the default setting: `AmazonBedrockLimitedAccess` + - [See what this allows](https://docs.aws.amazon.com/bedrock/latest/userguide/security-iam.html#managed-policies) -### 2. Configure IAM Permissions +### Step 2: Set Permissions -**Minimal permissions required:** +**You need these permissions:** ```json { "Version": "2012-10-17", @@ -36,44 +36,44 @@ Access leading AI models through AWS Bedrock with simplified API Key setup. } ``` -Create custom policy and attach to IAM user associated with your API key. +Create this policy and attach it to your API key user. -**Important:** -- For model listing in CodinIT, add `bedrock:ListFoundationModels` permission -- For AWS Marketplace models (e.g., Anthropic Claude), use `AmazonBedrockLimitedAccess` policy -- For Anthropic models, submit First Time Use (FTU) form via [Playground](https://console.aws.amazon.com/bedrock/home#/text-generation-playground) +**Important notes:** +- To see model lists in CodinIT, add `bedrock:ListFoundationModels` permission +- For Claude models, use `AmazonBedrockLimitedAccess` policy +- For Anthropic models, fill out the First Time Use form in the [Playground](https://console.aws.amazon.com/bedrock/home#/text-generation-playground) -### 3. Choose Region +### Step 3: Pick a Region -Select region for latency/compliance needs: -- `us-east-1` (N. Virginia) -- `us-west-2` (Oregon) -- `eu-west-1` (Ireland) -- `ap-southeast-1` (Singapore) +Choose where the AI runs (closer = faster): +- `us-east-1` (Virginia, USA) +- `us-west-2` (Oregon, USA) +- `eu-west-1` (Ireland, Europe) +- `ap-southeast-1` (Singapore, Asia) -**Note:** Some models require [Inference Profile](https://docs.aws.amazon.com/bedrock/latest/userguide/inference-profiles-support.html) - check "Cross Region Inference" box if needed. +**Note:** Some models need [Cross Region Inference](https://docs.aws.amazon.com/bedrock/latest/userguide/inference-profiles-support.html) - check that box if needed. -### 4. Configure CodinIT +### Step 4: Connect to CodinIT -1. Install CodinIT extension in VS Code -2. Click settings icon (⚙️) -3. Select **AWS Bedrock** as API Provider +1. Install CodinIT in VS Code +2. Click the settings icon (⚙️) +3. Choose **AWS Bedrock** as your AI provider 4. Enter your **API Key** -5. Specify **AWS Region** (e.g., `us-east-1`) -6. Select **Model** (e.g., `anthropic.claude-3-5-sonnet-20241022-v2:0`) -7. Save and test +5. Type your **AWS Region** (like `us-east-1`) +6. Pick a **Model** (like `anthropic.claude-3-5-sonnet-20241022-v2:0`) +7. Save and test it -## Security Best Practices +## Staying Safe -1. **Secure access:** Prefer AWS SSO/federated roles over long-lived API keys when possible -2. **Network security:** Consider [AWS PrivateLink](https://docs.aws.amazon.com/vpc/latest/userguide/endpoint-services-overview.html) -3. **Monitoring:** Enable CloudTrail for API logging and CloudWatch for metrics -4. **Cost management:** Use AWS Cost Explorer and set billing alerts -5. **Regular audits:** Review IAM roles and CloudTrail logs periodically +1. **Use secure login:** Use AWS SSO instead of API keys when you can +2. **Network safety:** Consider using [AWS PrivateLink](https://docs.aws.amazon.com/vpc/latest/userguide/endpoint-services-overview.html) +3. **Watch activity:** Turn on CloudTrail to see what's happening +4. **Control costs:** Use AWS Cost Explorer and set up billing alerts +5. **Check regularly:** Review your settings and logs often -## Notes +## Good to Know -- **Pricing:** Usage-based, see [AWS Bedrock Pricing](https://aws.amazon.com/bedrock/pricing/) -- **Compliance:** HIPAA and SOC 2 Type II compliant -- **Documentation:** [AWS Bedrock User Guide](https://docs.aws.amazon.com/bedrock/latest/userguide/what-is-bedrock.html) -- **IAM Best Practices:** [AWS IAM Best Practices](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html) +- **Cost:** You pay for what you use - see [AWS Bedrock Pricing](https://aws.amazon.com/bedrock/pricing/) +- **Security:** Meets HIPAA and SOC 2 Type II standards +- **Help:** [AWS Bedrock User Guide](https://docs.aws.amazon.com/bedrock/latest/userguide/what-is-bedrock.html) +- **Best practices:** [AWS IAM Best Practices](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html) From cebcfb899e3b39bd695d12b939f0750fe353a85a Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:08:57 +1100 Subject: [PATCH 27/33] Update integrations/git.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- integrations/git.mdx | 37 ++++++++++++++++++------------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/integrations/git.mdx b/integrations/git.mdx index b9eb1c9..0b5e249 100644 --- a/integrations/git.mdx +++ b/integrations/git.mdx @@ -1,38 +1,37 @@ --- title: 'Git Integration' -description: 'Advanced Git integration with proxy functionality, GitHub templates, automatic commits, and seamless version control workflows.' +description: 'How to save your code to GitHub and work with version control' --- -CodinIT provides comprehensive Git integration that goes beyond basic repository management to include advanced features like Git proxy operations, GitHub template integration, and seamless version control workflows. +CodinIT connects to GitHub so you can save your code online, work with others, and keep track of changes. -## Overview +## What Can You Do? -The Git integration system offers multiple layers of functionality: +CodinIT helps you with GitHub in several ways: - - Remote Git operations through secure proxy + + Save your code online automatically - - Quick project setup from GitHub templates + + Begin projects using pre-made templates - - Automatic commits and branch management + + See what changed and when -### Key Features +### Main Features -- **Git Proxy Operations**: Execute Git commands on remote repositories -- **Template Integration**: Import and use GitHub repository templates -- **Automatic Commits**: Seamless version control without manual Git commands -- **Branch Management**: Create, switch, and merge branches -- **Repository Sync**: Bidirectional synchronization with GitHub -- **Conflict Resolution**: Intelligent merge conflict handling +- **Automatic saving**: CodinIT saves your code to GitHub for you +- **Use templates**: Start projects from GitHub templates +- **Auto commits**: Your changes are saved automatically +- **Branches**: Work on different versions of your code +- **Stay in sync**: Keep your local and online code matching +- **Fix conflicts**: Help when two people change the same thing - **Freedom of Choice**: Your code always lives in Git, giving you complete control and the ability to work with any - Git-compatible tools or services. + **Your Code, Your Control**: Your code is always saved in Git, so you can use any Git tool you want. ## Git Proxy Operations From 6d334db28ff90c87d15c97bd8fdc7bd482611f70 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:09:20 +1100 Subject: [PATCH 28/33] Update integrations/git.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- integrations/git.mdx | 90 ++++++++++++++++++++++---------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/integrations/git.mdx b/integrations/git.mdx index 0b5e249..48edfda 100644 --- a/integrations/git.mdx +++ b/integrations/git.mdx @@ -34,67 +34,67 @@ CodinIT helps you with GitHub in several ways: **Your Code, Your Control**: Your code is always saved in Git, so you can use any Git tool you want. -## Git Proxy Operations +## Working with GitHub -### Remote Git Command Execution +### What You Can Do -The Git proxy allows secure execution of Git commands on remote repositories: +CodinIT can do these Git things for you: -**Supported Operations:** +**Basic operations:** -- Repository cloning and fetching -- Branch creation and switching -- Commit and push operations -- Merge conflict resolution -- Status checking and diff viewing +- Copy projects from GitHub +- Create and switch branches +- Save and upload changes +- Fix conflicts when they happen +- Check what changed -**Usage Example:** +**Example commands:** ```bash -# Clone a repository +# Copy a project git clone https://github.com/user/repo.git -# Create and switch to new branch +# Make a new branch git checkout -b feature/new-feature -# Push changes +# Upload your changes git push origin main ``` -### Security and Access Control +### Security -**Authentication Methods:** +**How you log in:** -- Personal Access Tokens (PAT) -- SSH keys (when supported) -- OAuth integration with GitHub -- Repository-specific permissions +- Personal Access Tokens (a special password) +- SSH keys (a secure key file) +- OAuth (log in with GitHub) +- Permission for specific projects -**Security Features:** +**Staying safe:** -- Command validation and sanitization -- Rate limiting and abuse prevention -- Audit logging of all operations -- Secure credential storage +- Commands are checked for safety +- Limits to prevent abuse +- Records of what you do +- Secure password storage -## GitHub Template Integration +## Starting from Templates -### Template-Based Project Creation +### Use Pre-Made Projects -Quickly start projects using GitHub repository templates: +Start quickly with ready-made project templates: -**Available Template Types:** +**Types of templates:** -- Frontend frameworks (React, Vue, Angular) +- Website frameworks (React, Vue, Angular) - Backend APIs (Express, FastAPI, NestJS) -- Full-stack applications -- Mobile app templates -- DevOps and deployment templates +- Complete apps (frontend + backend) +- Mobile app starters +- Deployment setups -**Template Usage:** +**How to use a template:** ```typescript -// Import template via API +// Start from a template const template = await fetch('/api/github-template', { method: 'POST', body: JSON.stringify({ @@ -104,23 +104,23 @@ const template = await fetch('/api/github-template', { }); ``` -### Custom Template Creation +### Make Your Own Templates -**Creating Templates:** +**Creating templates:** -- Convert existing repositories to templates -- Define template variables and configuration -- Set up automated setup scripts -- Include documentation and examples +- Turn your project into a template +- Set up variables and settings +- Add setup scripts +- Include instructions -**Template Structure:** +**Template folder structure:** ``` template-repo/ -├── template.json # Template configuration -├── setup.js # Automated setup script -├── README.md # Usage instructions -└── src/ # Template source code +├── template.json # Settings +├── setup.js # Setup script +├── README.md # Instructions +└── src/ # Your code ``` ## Repository Management From 35abd44ad898d77249db726e5d7194e9025bc0b5 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:10:09 +1100 Subject: [PATCH 29/33] Update integrations/git.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- integrations/git.mdx | 341 ++++++++++++------------------------------- 1 file changed, 90 insertions(+), 251 deletions(-) diff --git a/integrations/git.mdx b/integrations/git.mdx index 48edfda..b5bc97c 100644 --- a/integrations/git.mdx +++ b/integrations/git.mdx @@ -123,301 +123,140 @@ template-repo/ └── src/ # Your code ``` -## Repository Management +## Managing Your Projects -### Creating New Repositories +### Creating New Projects -**From Existing Projects:** +**Start a new project:** -```typescript -// API endpoint for repository creation -POST /api/github-template -{ - "action": "create-repo", - "name": "my-new-project", - "private": false, - "description": "Project created with CodinIT" -} -``` - -**Repository Configuration:** - -- **Visibility**: Public or private repositories -- **Branch Protection**: Main branch protection rules -- **Collaborators**: Team member access management -- **Topics and Labels**: Organization and categorization -- **GitHub Actions**: Automated CI/CD workflows - -### Importing Existing Repositories - -**Supported Import Methods:** - -- Direct GitHub repository URLs -- GitHub organization repositories -- Private repository access -- Large repository handling - -**Import Process:** - -```typescript -// Repository import via API -const importResult = await fetch('/api/git-proxy/import', { - method: 'POST', - body: JSON.stringify({ - url: 'https://github.com/user/repo.git', - branch: 'main', - depth: 1, // Shallow clone for large repos - }), -}); -``` - -**Post-Import Setup:** - -- Dependency installation -- Environment configuration -- Build verification -- Development server startup - -### Repository Synchronization - -**Bidirectional Sync:** - -- Automatic commit creation on file changes -- Pull request synchronization -- Conflict detection and resolution -- Branch status monitoring - -**Sync Configuration:** - -```json -{ - "sync": { - "autoCommit": true, - "pullInterval": 30000, - "conflictStrategy": "manual", - "ignorePatterns": [".env", "node_modules"] - } -} -``` - -## Advanced Git Operations - -### Branch Management - -**Creating and Managing Branches:** +You can create a new GitHub repository right from CodinIT: +- Choose public (anyone can see) or private (only you can see) +- Add a description +- Set up protection rules +- Add team members +- Set up automatic testing -```bash -# Create new feature branch -git checkout -b feature/user-authentication - -# Switch between branches -git checkout main -git checkout feature/user-authentication - -# Merge branches -git merge feature/user-authentication -``` - -**Branch Protection Rules:** - -- Required pull request reviews -- Required status checks -- Restrictions on force pushes -- Branch naming conventions - -### Commit Strategies - -**Atomic Commits:** - -- Each commit represents one logical change -- Clear, descriptive commit messages -- Related changes grouped together -- Easy to understand and revert - -**Commit Message Conventions:** - -``` -feat: add user authentication system -fix: resolve login form validation bug -docs: update API documentation -refactor: simplify user state management -``` +### Bringing in Existing Projects -### Conflict Resolution +**Import from GitHub:** -**Handling Merge Conflicts:** +You can bring in projects you already have on GitHub: +- Paste the GitHub URL +- Choose which branch to use +- CodinIT will download it and set it up -```bash -# Check for conflicts -git status - -# Resolve conflicts in files -# Then add resolved files -git add resolved-file.js - -# Complete the merge -git commit -``` - -**Prevention Strategies:** - -- Regular branch synchronization -- Clear ownership of code areas -- Code review requirements -- Automated testing before merges - -## Git Hooks and Automation +After importing: +- Install needed tools +- Set up settings +- Make sure it builds correctly +- Start the development server -### Pre-commit Quality Checks - -**Automated Validation:** - -```bash -# .git/hooks/pre-commit -#!/bin/sh -npm run lint -npm run test -npm run type-check -``` - -**Code Quality Gates:** - -- ESLint for code style -- Prettier for formatting -- TypeScript type checking -- Unit test execution - -### CI/CD Integration - -**GitHub Actions Workflows:** - -```yaml -# .github/workflows/ci.yml -name: CI Pipeline -on: [push, pull_request] - -jobs: - test: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - name: Setup Node.js - uses: actions/setup-node@v3 - with: - node-version: '18' - - name: Install dependencies - run: npm ci - - name: Run tests - run: npm test - - name: Build project - run: npm run build -``` +### Keeping Things in Sync -**Deployment Automation:** +**Automatic syncing:** -- Automatic preview deployments -- Production deployment on merge -- Rollback capabilities -- Environment-specific configurations +CodinIT keeps your code in sync with GitHub: +- Saves changes automatically +- Checks for updates every 30 seconds +- Helps fix conflicts +- Watches branch status -## Troubleshooting +## Common Problems and Solutions - - ### Git Authentication Problems + + ### Can't Connect to GitHub - **Common Issues:** - - Expired personal access tokens - - Incorrect repository permissions - - Two-factor authentication conflicts - - SSH key configuration problems + **Common problems:** + - Your access token expired + - You don't have permission + - Two-factor authentication issues + - SSH key problems - **Solutions:** - - Regenerate GitHub personal access tokens - - Verify repository access permissions - - Use SSH keys for secure authentication - - Check token expiration dates + **How to fix:** + - Make a new GitHub access token + - Check your repository permissions + - Use SSH keys for better security + - Check when your token expires - - ### Repository Synchronization Issues + + ### Code Won't Sync - **Common Issues:** - - Merge conflicts during sync - - Divergent branch histories - - Large file handling problems - - Network connectivity issues + **Common problems:** + - Conflicts when merging + - Branches went different directions + - Large files causing issues + - Internet connection problems - **Solutions:** - - Resolve conflicts manually or use merge tools - - Force push only when necessary and safe - - Use Git LFS for large files - - Check network stability and retry operations + **How to fix:** + - Fix conflicts by hand + - Only force push when you're sure it's safe + - Use Git LFS for big files + - Check your internet and try again - - ### Git Operation Performance + + ### Git is Slow - **Common Issues:** - - Slow clone operations for large repositories - - Memory issues with large histories - - Network latency problems - - Disk space constraints + **Common problems:** + - Big projects take forever to download + - Running out of memory + - Slow internet + - Not enough disk space - **Solutions:** - - Use shallow clones for large repositories - - Implement Git LFS for binary files - - Optimize network settings - - Clean up unnecessary branches and tags + **How to fix:** + - Use shallow clones (download less history) + - Use Git LFS for binary files + - Check your internet connection + - Delete old branches you don't need -## Best Practices +## Good Habits -### Repository Organization +### Organizing Your Code -**Branch Strategy:** +**Branch names:** -- `main`/`master`: Production-ready code -- `develop`: Integration branch for features -- `feature/*`: Individual feature development -- `hotfix/*`: Critical bug fixes -- `release/*`: Release preparation +- `main`: The working version +- `develop`: Where you combine new features +- `feature/*`: New features you're building +- `hotfix/*`: Quick fixes for urgent bugs +- `release/*`: Getting ready to release -**Commit Hygiene:** +**Commit messages:** -- Write clear, descriptive commit messages -- Keep commits focused and atomic -- Use conventional commit format -- Squash related commits before merging +- Write clear messages about what you changed +- Keep each commit focused on one thing +- Use a standard format +- Combine related commits before merging -### Collaboration Workflows +### Working with Others -**Code Review Process:** +**Code review:** -- Create feature branches for all changes -- Submit pull requests for review -- Require approvals before merging -- Use automated checks and tests +- Make a branch for each change +- Ask others to review your code +- Get approval before merging +- Use automatic tests -**Team Coordination:** +**Team coordination:** -- Regular branch synchronization -- Clear ownership of code areas -- Documentation of processes -- Regular team communication +- Sync branches regularly +- Know who's working on what +- Write down your processes +- Talk to your team often - **Git Mastery**: Effective Git usage is a key skill for modern development. Mastering these advanced features will - significantly improve your development workflow. + **Git is Important**: Learning Git well will make you a better developer. These skills help you work on any project. - **Learn Continuously**: Git has extensive capabilities. Consider exploring advanced features like interactive - rebasing, advanced merge strategies, and custom hooks. + **Keep Learning**: Git can do a lot more than what's covered here. Explore features like rebasing and custom hooks as you get more comfortable. ## Branching and merging From 2275f1e1697e0964e72f66b32494ea97d3ae70e1 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:10:25 +1100 Subject: [PATCH 30/33] Update mcp/mcp-overview.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- mcp/mcp-overview.mdx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/mcp/mcp-overview.mdx b/mcp/mcp-overview.mdx index f65b602..f380e84 100644 --- a/mcp/mcp-overview.mdx +++ b/mcp/mcp-overview.mdx @@ -1,23 +1,23 @@ --- title: MCP Integration -description: Model Context Protocol integration for connecting external services and tools +description: Connect CodinIT to other services and tools --- -The Model Context Protocol (MCP) integration system enables seamless connection between your development environment and external services, APIs, and tools. MCP provides a standardized way to extend your application's capabilities through secure, approved tool executions. +MCP (Model Context Protocol) lets CodinIT connect to other services like databases, payment systems, and more. Think of it like adding plugins to make CodinIT more powerful. -## Overview +## What is MCP? -MCP allows you to connect to various external services like databases, payment processors, analytics platforms, and AI services. Each connection provides tools that can be executed with proper approval workflows, ensuring security while maintaining productivity. +MCP lets you connect CodinIT to other services you use. For example, you can connect to a database to save user data, or to Stripe to process payments. - - Connect to databases, APIs, and external services + + Link to databases, APIs, and other tools - - Execute approved operations with security controls + + Do things in those services safely - - Pre-configured integrations for popular services + + Pre-built connections for popular services From 20e3142b9f77437c20f6fa3525962695a0ea3449 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:10:42 +1100 Subject: [PATCH 31/33] Update mcp/mcp-overview.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- mcp/mcp-overview.mdx | 73 +++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 45 deletions(-) diff --git a/mcp/mcp-overview.mdx b/mcp/mcp-overview.mdx index f380e84..36c1f05 100644 --- a/mcp/mcp-overview.mdx +++ b/mcp/mcp-overview.mdx @@ -21,60 +21,43 @@ MCP lets you connect CodinIT to other services you use. For example, you can con -## System Architecture +## How It Works - - - ### Main System Components - - The MCP system consists of several interconnected components working together: - - - - Central hub for managing all MCP connections and activities - - - Pre-configured templates for popular services and APIs - - - Catalog of all available tools from connected servers - - - Complete log of all tool executions and their results - - - - +### Main Parts - - ### Connection Protocols +MCP has a few main parts: - MCP supports multiple connection protocols for different use cases: - - - STDIO - Local Processes - SSE - Server-Sent Events - HTTP - REST APIs - + + + Where you manage all your connections + + + Ready-made connections you can use + + + All the actions you can do + + + Record of what you've done + + - **STDIO Servers**: Local command-line tools and scripts - **SSE Servers**: Real-time streaming connections - **HTTP Servers**: RESTful API integrations +### Types of Connections - +MCP can connect in different ways: - - ### Approval & Security +- **STDIO**: Local tools on your computer +- **SSE**: Real-time streaming connections +- **HTTP**: Web-based APIs - Built-in security controls ensure safe tool execution: +### Staying Safe - - **Tool Approval**: Manual approval required for tool execution - - **Auto-Approval**: Trusted tools can be pre-approved - - **Timeout Protection**: Automatic denial after timeout period - - **Parameter Validation**: Input validation before execution +MCP keeps you safe: - - +- **Approval needed**: You have to approve actions before they run +- **Auto-approve**: You can trust certain actions to run automatically +- **Timeout**: Actions are cancelled if they take too long +- **Check inputs**: Makes sure the data is valid before running ## Getting Started From 50697538c5867bf66fe2372762f8b4b302ffec49 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:11:04 +1100 Subject: [PATCH 32/33] Update mcp/mcp-overview.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- mcp/mcp-overview.mdx | 101 +++++++++++++++++-------------------------- 1 file changed, 39 insertions(+), 62 deletions(-) diff --git a/mcp/mcp-overview.mdx b/mcp/mcp-overview.mdx index 36c1f05..18f321a 100644 --- a/mcp/mcp-overview.mdx +++ b/mcp/mcp-overview.mdx @@ -59,93 +59,70 @@ MCP keeps you safe: - **Timeout**: Actions are cancelled if they take too long - **Check inputs**: Makes sure the data is valid before running -## Getting Started +## How to Start - Click the MCP integrations button in the toolbar to open the main panel - Explore pre-configured templates for popular services - Fill in required credentials and connection details - Verify the integration works before saving - Use approved tools in your development workflow + Click the MCP button in the toolbar + See what ready-made connections are available + Enter your login info and settings + Make sure it works before saving + Start using the tools in your project -## Marketplace Integrations +## Available Services - - - ### Database & Storage - - Connect to databases and storage services: - - - **Supabase**: PostgreSQL with real-time subscriptions - - **Custom Databases**: Any PostgreSQL-compatible database - - **File Systems**: Local and remote file operations - - - - - ### Payment Processing - - Integrate payment and subscription services: - - - **Stripe**: Payment processing and subscriptions - - **Custom Payment APIs**: Third-party payment processors +### Databases - - - - ### Analytics Platforms +Save and get data: - Connect to analytics and monitoring services: +- **Supabase**: Database with real-time updates +- **Custom Databases**: Any PostgreSQL database +- **File Systems**: Save files locally or online - - **PostHog**: Product analytics and feature flags - - **Custom Analytics**: Internal analytics platforms +### Payments - +Handle money: - - ### Communication Tools +- **Stripe**: Accept payments and subscriptions +- **Custom Payment APIs**: Other payment services - Integrate messaging and collaboration platforms: +### Analytics - - **Slack**: Team communication and notifications - - **Custom APIs**: Internal communication systems +Track how people use your app: - +- **PostHog**: See what users do +- **Custom Analytics**: Your own tracking systems - - ### Development Services +### Communication - Connect to development and deployment tools: +Send messages: - - **GitHub**: Repository management and code collaboration - - **Vercel**: Deployment and hosting platform - - **21st.dev**: Component generation and development tools +- **Slack**: Team chat and notifications +- **Custom APIs**: Your own messaging systems - +### Development - - ### Artificial Intelligence +Build and deploy: - Integrate AI and machine learning services: +- **GitHub**: Save code and work with others +- **Vercel**: Put your app online +- **21st.dev**: Generate components - - **Claude Code**: AI-powered code generation - - **OpenAI**: GPT models and AI capabilities - - **Custom AI APIs**: Proprietary AI services +### AI Services - +Use artificial intelligence: - - ### Productivity Tools +- **Claude Code**: AI that writes code +- **OpenAI**: GPT models +- **Custom AI APIs**: Your own AI services - Connect to productivity and knowledge platforms: +### Productivity - - **HubSpot**: CRM and marketing automation - - **Notion**: Knowledge base and documentation - - **Custom Tools**: Internal productivity systems +Get organized: - - +- **HubSpot**: Manage customers +- **Notion**: Take notes and organize +- **Custom Tools**: Your own productivity apps ## Server Management From ddc3fdd22266dd7bffef285b47b74c16adba0937 Mon Sep 17 00:00:00 2001 From: Gerome Elassaad Date: Tue, 30 Dec 2025 15:11:47 +1100 Subject: [PATCH 33/33] Update mcp/mcp-overview.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> --- mcp/mcp-overview.mdx | 236 ++++++++++++++++--------------------------- 1 file changed, 87 insertions(+), 149 deletions(-) diff --git a/mcp/mcp-overview.mdx b/mcp/mcp-overview.mdx index 18f321a..9bbdef6 100644 --- a/mcp/mcp-overview.mdx +++ b/mcp/mcp-overview.mdx @@ -124,198 +124,136 @@ Get organized: - **Notion**: Take notes and organize - **Custom Tools**: Your own productivity apps -## Server Management +## Managing Connections - - - ### Manual Server Configuration +### Adding New Services - Add custom MCP servers with full configuration control: +Add your own custom connections: - - **Server Types**: STDIO, SSE, or HTTP connections - - **Authentication**: API keys, tokens, and custom headers - - **Environment Variables**: Runtime configuration - - **Connection Testing**: Verify configuration before saving +- Choose connection type (STDIO, SSE, or HTTP) +- Enter your API keys or tokens +- Set up any special settings +- Test it before saving - +### Checking Status - - ### Connection Health +See how your connections are doing: - Monitor the status of all connected servers: +- Check if they're connected +- See how many tools are available +- Get alerts if something's wrong +- Automatic reconnection if disconnected - - **Connection Status**: Real-time availability checking - - **Tool Count**: Number of available tools per server - - **Error Reporting**: Connection and authentication issues - - **Auto-Reconnection**: Automatic retry on connection loss +### Editing Connections - +Manage your existing connections: - - ### Configuration Management +- Update login info +- Delete ones you don't use +- Manage multiple at once +- Save and restore settings - Manage existing server configurations: +## Using Tools - - **Edit Settings**: Update credentials and configuration - - **Delete Servers**: Remove unused integrations - - **Bulk Operations**: Manage multiple servers simultaneously - - **Export/Import**: Backup and restore configurations +### Finding Tools - - +Look through available actions: -## Tool Execution Workflow +- See all available tools +- Search by name or type +- See what info each tool needs +- Read instructions for each tool - - - ### Finding Available Tools +### Running Tools Safely - Browse and search through all available tools: +Execute tools with safety checks: - - **Tool Registry**: Complete catalog of available operations - - **Search & Filter**: Find tools by name, server, or category - - **Parameter Preview**: View required and optional parameters - - **Documentation**: Access tool descriptions and usage examples +- Review before running +- Check that inputs are correct +- Auto-cancel after 30 seconds +- Trust certain tools to run automatically - +### Tracking Usage - - ### Secure Tool Execution +See what you've done: - Execute tools with built-in security controls: +- History of all actions +- How long things took +- Errors and problems +- Most-used tools - - **Approval Interface**: Review tool calls before execution - - **Parameter Validation**: Ensure correct input values - - **Timeout Protection**: Automatic denial after 30 seconds - - **Trusted Tools**: Pre-approve frequently used operations - - - - - ### Track Tool Usage - - Monitor and analyze tool execution patterns: - - - **Execution History**: Complete log of all tool calls - - **Performance Metrics**: Execution time and success rates - - **Error Analysis**: Failed executions and error details - - **Usage Statistics**: Most frequently used tools - - - - -## Advanced Features - - - Auto-Approval - Bulk Operations - Export/Import - Real-time Monitoring - - -### Advanced Capabilities - -- **Auto-Approval**: Pre-approve trusted tools for instant execution -- **Bulk Operations**: Manage multiple servers and tools simultaneously -- **Data Export**: Export execution history and configurations -- **Real-time Updates**: Live status monitoring and notifications - -## Best Practices +## Tips for Success - **Security First**: Always review tool parameters before approval, especially for operations that modify data or - execute commands. + **Safety First**: Always check what a tool will do before approving it, especially if it changes data. - **Start Small**: Begin with marketplace templates for popular services, then add custom integrations as needed. + **Start Simple**: Use ready-made connections first, then add custom ones later. - **Credential Management**: Store API keys and tokens securely. MCP configurations are stored locally and never - transmitted to external servers. + **Keep Secrets Safe**: Store API keys securely. MCP keeps everything on your computer and doesn't send it anywhere. -## Troubleshooting - - - - ### Server Connection Problems - - Common connection issues and solutions: - - - **Network Errors**: Check internet connectivity and firewall settings - - **Authentication Failures**: Verify API keys and credentials - - **Server Unavailable**: Check service status and retry later - - **Configuration Errors**: Validate server URLs and parameters - - - - - ### Tool Execution Problems - - Issues with tool execution and approval: +## Fixing Problems - - **Approval Timeouts**: Tools auto-deny after 30 seconds - - **Parameter Errors**: Check required field validation - - **Permission Issues**: Verify API permissions and scopes - - **Rate Limiting**: Respect API rate limits and retry logic +### Can't Connect - +Common connection problems: - - ### Performance Optimization +- **No internet**: Check your internet and firewall +- **Wrong password**: Check your API keys +- **Service down**: Check if the service is working +- **Wrong settings**: Double-check your URLs and settings - Improve MCP system performance: +### Tools Won't Run - - **Connection Pooling**: Reuse connections for better performance - - **Caching**: Cache frequently accessed data - - **Batch Operations**: Group multiple operations when possible - - **Monitoring**: Track performance metrics and bottlenecks +Problems running tools: - - +- **Timeout**: Tools cancel after 30 seconds +- **Wrong info**: Check required fields +- **No permission**: Make sure your API key has permission +- **Too many requests**: Wait a bit and try again -## Integration Examples +### Running Slow - - - ### Connecting to Supabase +Make things faster: - ```typescript - // Example: Query user data from Supabase - const users = await mcp.executeTool('supabase', 'query_users', { - table: 'users', - filter: { status: 'active' } - }); - ``` +- Reuse connections +- Save frequently-used data +- Do multiple things at once when possible +- Watch for slow spots - +## Examples - - ### Stripe Integration +### Database Example - ```typescript - // Example: Process a payment - const payment = await mcp.executeTool('stripe', 'create_payment_intent', { - amount: 1000, - currency: 'usd', - customer_id: 'cus_123' - }); - ``` +```typescript +// Get user data from Supabase +const users = await mcp.executeTool('supabase', 'query_users', { + table: 'users', + filter: { status: 'active' } +}); +``` - +### Payment Example - - ### Claude Code Integration +```typescript +// Process a payment with Stripe +const payment = await mcp.executeTool('stripe', 'create_payment_intent', { + amount: 1000, + currency: 'usd', + customer_id: 'cus_123' +}); +``` - ```typescript - // Example: Generate code with AI - const code = await mcp.executeTool('claude-code', 'generate_component', { - component_type: 'React', - description: 'User profile form' - }); - ``` +### AI Example - - +```typescript +// Generate code with AI +const code = await mcp.executeTool('claude-code', 'generate_component', { + component_type: 'React', + description: 'User profile form' +}); +```