|
| 1 | +# Overview |
| 2 | + |
| 3 | +Natural language interface for exploring, editing, and managing code with contextual AI assistance in Chat mode |
| 4 | + |
| 5 | +## What is Chat? |
| 6 | +Chat is Codebolt AI assistant that lives in your sidebar, letting you interact with your codebase through natural language. You can ask questions, request code edits, get terminal command suggestions, and more - all without switching context. |
| 7 | + |
| 8 | + |
| 9 | +<video width="800px" height="500px" autoplay controls> |
| 10 | + <source src="/application/video/chat.mp4" type="video/mp4" /> |
| 11 | + Your browser does not support the video tag. |
| 12 | +</video> |
| 13 | + |
| 14 | +## Core Capabilities |
| 15 | + |
| 16 | +<div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px', margin: '20px 0'}}> |
| 17 | + <div style={{border: '1px solid #e1e5e9', borderRadius: '8px', padding: '20px', backgroundColor: '#f8f9fa'}}> |
| 18 | + <div style={{fontSize: '24px', marginBottom: '12px'}}>📄</div> |
| 19 | + <h3 style={{margin: '0 0 8px 0', fontSize: '18px', fontWeight: '600'}}>Understand Code</h3> |
| 20 | + <p style={{margin: '0', color: '#666', fontSize: '14px'}}>Ask questions about unfamiliar code, get explanations, or explore your codebase</p> |
| 21 | + </div> |
| 22 | + |
| 23 | + <div style={{border: '1px solid #e1e5e9', borderRadius: '8px', padding: '20px', backgroundColor: '#f8f9fa'}}> |
| 24 | + <div style={{fontSize: '24px', marginBottom: '12px'}}>💾</div> |
| 25 | + <h3 style={{margin: '0 0 8px 0', fontSize: '18px', fontWeight: '600'}}>Edit Code</h3> |
| 26 | + <p style={{margin: '0', color: '#666', fontSize: '14px'}}>Make small tweaks or large multi-file changes without manually navigating files</p> |
| 27 | + </div> |
| 28 | + |
| 29 | + <div style={{border: '1px solid #e1e5e9', borderRadius: '8px', padding: '20px', backgroundColor: '#f8f9fa'}}> |
| 30 | + <div style={{fontSize: '24px', marginBottom: '12px'}}>⚡</div> |
| 31 | + <h3 style={{margin: '0 0 8px 0', fontSize: '18px', fontWeight: '600'}}>Run Commands</h3> |
| 32 | + <p style={{margin: '0', color: '#666', fontSize: '14px'}}>Get terminal command suggestions for your specific use case</p> |
| 33 | + </div> |
| 34 | + |
| 35 | + <div style={{border: '1px solid #e1e5e9', borderRadius: '8px', padding: '20px', backgroundColor: '#f8f9fa'}}> |
| 36 | + <div style={{fontSize: '24px', marginBottom: '12px'}}>∞</div> |
| 37 | + <h3 style={{margin: '0 0 8px 0', fontSize: '18px', fontWeight: '600'}}>Automate workflows</h3> |
| 38 | + <p style={{margin: '0', color: '#666', fontSize: '14px'}}>Let Codebolt search, reason and execute to automate your workflows</p> |
| 39 | + </div> |
| 40 | +</div> |
| 41 | + |
| 42 | +## Getting Started |
| 43 | + |
| 44 | +Access Chat in the sidebar with `⌘+L` (Mac) or `Ctrl+I` (Windows/Linux). Type your request in natural language, and the AI will respond accordingly. |
| 45 | + |
| 46 | +## What can I do with Chat? |
| 47 | + |
| 48 | +<div style={{overflow: 'hidden', marginBottom: '8px'}}> |
| 49 | + <details> |
| 50 | + <summary> |
| 51 | + Build Features |
| 52 | + </summary> |
| 53 | + <div style={{padding: '24px', backgroundColor: '#ffffff', color: '#64748b', lineHeight: '1.6'}}> |
| 54 | + <p style={{margin: '0 0 16px 0'}}> |
| 55 | + Chat has the ability to learn your codebase and make changes to it on your behalf. This is a powerful way to implement new features, and is the perfect tool for feature requests. |
| 56 | + </p> |
| 57 | + <p style={{margin: '0 0 16px 0'}}> |
| 58 | + Simply explain to the chat, using <strong>Agent mode</strong>, what feature you would like it to implement. Chat will look at your codebase, and any relevant files, and suggest any necessary changes across these fields. |
| 59 | + </p> |
| 60 | + <p style={{margin: '0'}}> |
| 61 | + In addition to code edits, Chat may suggest other changes, like adding new files, or adding packages with a package manager. |
| 62 | + </p> |
| 63 | + </div> |
| 64 | + </details> |
| 65 | +</div> |
| 66 | + |
| 67 | +<div style={{overflow: 'hidden', marginBottom: '8px', backgroundColor: '#ffffff',}}> |
| 68 | + <details> |
| 69 | + <summary> |
| 70 | + Refactor code |
| 71 | + </summary> |
| 72 | + <div style={{padding: '24px', backgroundColor: '#ffffff', color: '#64748b', lineHeight: '1.6'}}> |
| 73 | + <p style={{margin: '0 0 16px 0'}}> |
| 74 | + Need to clean up messy code or reorganize your project? Codebolt can help make your code better and easier to maintain. |
| 75 | + </p> |
| 76 | + <p style={{margin: '0'}}> |
| 77 | + Just describe what you want to improve, like "Make this code faster" or "Organize these files better." Codebolt will understand your project and make the changes safely. |
| 78 | + </p> |
| 79 | + </div> |
| 80 | + </details> |
| 81 | +</div> |
| 82 | + |
| 83 | +<div style={{overflow: 'hidden', marginBottom: '8px', backgroundColor: '#ffffff',}}> |
| 84 | + <details> |
| 85 | + <summary> |
| 86 | + Setup new projects |
| 87 | + </summary> |
| 88 | + <div style={{padding: '24px', backgroundColor: '#ffffff', color: '#64748b', lineHeight: '1.6'}}> |
| 89 | + <p style={{margin: '0 0 16px 0'}}> |
| 90 | + Starting a new project from scratch? Codebolt makes it super easy! |
| 91 | + </p> |
| 92 | + <p style={{margin: '0'}}> |
| 93 | + Tell it what kind of app you want to build - like a website, mobile app, or API. Codebolt will create all the folders, install the right tools, and write starter code so you can begin coding right away. |
| 94 | + </p> |
| 95 | + </div> |
| 96 | + </details> |
| 97 | +</div> |
| 98 | + |
| 99 | +## Modes |
| 100 | + |
| 101 | +Chat offers different modes optimized for specific tasks: |
| 102 | + |
| 103 | +- **Auto**: Acts as a universal agent—Codebolt will autonomously understand your codebase and make broad, codebase-wide changes as needed. |
| 104 | +- **Ask**: Get explanations, answers, and feature planning help from the AI about your codebase. |
| 105 | +- **Act**: Make targeted edits using only the specific context you provide. |
| 106 | +- **Local Agent**: Create a custom agent tailored to your unique workflows. |
| 107 | + |
| 108 | + |
| 109 | +## Context |
| 110 | + |
| 111 | +Chat understands your codebase by analyzing: |
| 112 | + |
| 113 | +1. **Open files**: What you're currently viewing |
| 114 | +2. **@ Symbol**: Use @ to select specific files, folders, and docs you want to reference |
| 115 | +3. **# Symbol**: Used to select a specific agent from the agent marketplace |
| 116 | + |
| 117 | +### Using @ to Select Content |
| 118 | + |
| 119 | +The @ symbol lets you precisely choose what Chat should focus on: |
| 120 | + |
| 121 | +- **@filename.js** - Select a specific file |
| 122 | +- **@foldername/** - Include an entire folder |
| 123 | +- **@docs/** - Reference documentation files |
| 124 | +- **@README.md** - Pick specific documentation |
| 125 | + |
| 126 | +Simply type @ and start typing to see available options. This helps Chat give you more accurate answers by focusing on exactly the code and files you're asking about. |
| 127 | + |
| 128 | +The interface suggests relevant context based on your query, ensuring accurate responses. |
| 129 | + |
| 130 | +## Code Edits |
| 131 | + |
| 132 | +When Chat suggests code changes: |
| 133 | + |
| 134 | +1. **Review**: See the proposed changes in a diff view |
| 135 | +2. **Apply**: In Ask mode, explicitly apply changes with the "Apply" button |
| 136 | +3. **Accept/Reject**: After changes are made, decide whether to keep or discard them |
| 137 | + |
| 138 | +Codebolt's custom model applies suggested edits to files with thousands of lines in seconds. |
| 139 | + |
| 140 | +## Checkpoints |
| 141 | + |
| 142 | +Sometimes you may want to revert to a previous state of your codebase. Codebolt helps you with this by automatically creating checkpoints of your codebase at each request you make, as well every time the AI makes changes to your codebase. |
| 143 | + |
| 144 | +To revert to a previous state, you can either: |
| 145 | + |
| 146 | +- Click the `Restore Checkpoint` button that appears within the input box of a previous request |
| 147 | +- Click the + button that shows at the left of a message in the chat history when hovered |
| 148 | + |
| 149 | +## Model Selection |
| 150 | + |
| 151 | +By default, Codebolt has an 'auto-select' option, which will intelligently select the best premium model for your request. This will always use 1 premium request as is, unless you have certain settings enabled that increase this, like long-context mode. |
| 152 | + |
| 153 | +If you want more granular control over which model is used, you can manually select a model from the model picker. |
| 154 | + |
| 155 | +When using custom modes, you can also select a fixed model for each mode, such as selecting `o1` for a `Planning` mode. |
| 156 | + |
0 commit comments