opensource/kilocode
3
0
Fork 0
mirror of https://github.com/Kilo-Org/kilocode.git synced 2026-09-24 16:02:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace docs with new Markdoc site

Browse Source
This commit is contained in:
Brendan O'Leary
2026-01-27 15:11:46 +01:00
parent a6a55f3765
commit f8a565e18a
543 changed files with 10015 additions and 22331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/kilo-docs/.env.example
-2
View File
@@ -1,2 +0,0 @@
POSTHOG_API_KEY=your_posthog_api_key
FREE_TIER_AMOUNT=$7
packages/kilo-docs/.gitattributes
+3
View File
@@ -0,0 +1,3 @@
# Use bd merge for beads JSONL files
.beads/issues.jsonl merge=beads
packages/kilo-docs/.gitignore
+6 -29
View File
@@ -1,31 +1,8 @@
.release-notes/
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
*.js
!src/**/*.js
# Misc
node_modules/
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
.npmrc
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.devcontainer
TEMP/
.history/
.next/
.vercel
package-lock.json
yarn.lock
screenshots/
.beads/
packages/kilo-docs/.kilocode/mcp.json
+11
View File
@@ -0,0 +1,11 @@
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp"],
"env": { "DEFAULT_MINIMUM_TOKENS": "" },
"alwaysAllow": ["resolve-library-id", "query-docs"],
"disabled": true
}
}
}
packages/kilo-docs/.kilocode/rules/memory-bank-instructions.md
-168
View File
@@ -1,168 +0,0 @@
# Memory Bank
I am an expert software engineer with a unique characteristic: my memory resets completely between sessions. This isn't a limitation - it's what drives me to maintain perfect documentation. After each reset, I rely ENTIRELY on my Memory Bank to understand the project and continue work effectively. I MUST read ALL memory bank files at the start of EVERY task - this is not optional. The memory bank files are located in `.kilocode/rules/memory-bank` folder.
When I start a task, I will include `[Memory Bank: Active]` at the beginning of my response if I successfully read the memory bank files, or `[Memory Bank: Missing]` if the folder doesn't exist or is empty. If memory bank is missing, I will warn the user about potential issues and suggest initialization.
## Memory Bank Structure
The Memory Bank consists of core files and optional context files, all in Markdown format.
### Core Files (Required)
1. `brief.md`
This file is created and maintained manually by the developer. Don't edit this file directly but suggest to user to update it if it can be improved.
- Foundation document that shapes all other files
- Created at project start if it doesn't exist
- Defines core requirements and goals
- Source of truth for project scope
2. `product.md`
- Why this project exists
- Problems it solves
- How it should work
- User experience goals
3. `context.md`
This file should be short and factual, not creative or speculative.
- Current work focus
- Recent changes
- Next steps
4. `architecture.md`
- System architecture
- Source Code paths
- Key technical decisions
- Design patterns in use
- Component relationships
- Critical implementation paths
5. `tech.md`
- Technologies used
- Development setup
- Technical constraints
- Dependencies
- Tool usage patterns
### Additional Files
Create additional files/folders within memory-bank/ when they help organize:
- `tasks.md` - Documentation of repetitive tasks and their workflows
- `todos.md` - List of currently active TODOs and missing documentation items. When items are completed, they should be removed from the list
- Complex feature documentation
- Integration specifications
- API documentation
- Testing strategies
- Deployment procedures
## Core workflows
### Memory Bank Initialization
The initialization step is CRITICALLY IMPORTANT and must be done with extreme thoroughness as it defines all future effectiveness of the Memory Bank. This is the foundation upon which all future interactions will be built.
When user requests initialization of the memory bank (command `initialize memory bank`), I'll perform an exhaustive analysis of the project, including:
- All source code files and their relationships
- Configuration files and build system setup
- Project structure and organization patterns
- Documentation and comments
- Dependencies and external integrations
- Testing frameworks and patterns
I must be extremely thorough during initialization, spending extra time and effort to build a comprehensive understanding of the project. A high-quality initialization will dramatically improve all future interactions, while a rushed or incomplete initialization will permanently limit my effectiveness.
After initialization, I will ask the user to read through the memory bank files and verify product description, used technologies and other information. I should provide a summary of what I've understood about the project to help the user verify the accuracy of the memory bank files. I should encourage the user to correct any misunderstandings or add missing information, as this will significantly improve future interactions.
### Memory Bank Update
Memory Bank updates occur when:
1. Discovering new project patterns
2. After implementing significant changes
3. When user explicitly requests with the phrase **update memory bank** (MUST review ALL files)
4. When context needs clarification
If I notice significant changes that should be preserved but the user hasn't explicitly requested an update, I should suggest: "Would you like me to update the memory bank to reflect these changes?"
To execute Memory Bank update, I will:
1. Review ALL project files
2. Document current state
3. Document Insights & Patterns
4. If requested with additional context (e.g., "update memory bank using information from @/Makefile"), focus special attention on that source
Note: When triggered by **update memory bank**, I MUST review every memory bank file, even if some don't require updates. Focus particularly on context.md as it tracks current state.
### Add Task
When user completes a repetitive task (like adding support for a new model version) and wants to document it for future reference, they can request: **add task** or **store this as a task**.
This workflow is designed for repetitive tasks that follow similar patterns and require editing the same files. Examples include:
- Adding support for new AI model versions
- Implementing new API endpoints following established patterns
- Adding new features that follow existing architecture
Tasks are stored in the file `tasks.md` in the memory bank folder. The file is optional an can be empty. The file can store many tasks.
To execute Add Task workflow:
1. Create or update `tasks.md` in the memory bank folder
2. Document the task with:
- Task name and description
- Files that need to be modified
- Step-by-step workflow followed
- Important considerations or gotchas
- Example of the completed implementation
3. Include any context that was discovered during task execution but wasn't previously documented
Example task entry:
```markdown
## Add New Model Support
**Last performed:** [date]
**Files to modify:**
- `/providers/gemini.md` - Add model to documentation
- `/src/providers/gemini-config.ts` - Add model configuration
- `/src/constants/models.ts` - Add to model list
- `/tests/providers/gemini.test.ts` - Add test cases
**Steps:**
1. Add model configuration with proper token limits
2. Update documentation with model capabilities
3. Add to constants file for UI display
4. Write tests for new model configuration
**Important notes:**
- Check Google's documentation for exact token limits
- Ensure backward compatibility with existing configurations
- Test with actual API calls before committing
```
### Regular Task Execution
In the beginning of EVERY task I MUST read ALL memory bank files - this is not optional.
The memory bank files are located in `.kilocode/rules/memory-bank` folder. If the folder doesn't exist or is empty, I will warn user about potential issues with the memory bank. I will include `[Memory Bank: Active]` at the beginning of my response if I successfully read the memory bank files, or `[Memory Bank: Missing]` if the folder doesn't exist or is empty. If memory bank is missing, I will warn the user about potential issues and suggest initialization. I should briefly summarize my understanding of the project to confirm alignment with the user's expectations, like:
"[Memory Bank: Active] I understand we're building a React inventory system with barcode scanning. Currently implementing the scanner component that needs to work with the backend API."
When starting a task that matches a documented task in `tasks.md`, I should mention this and follow the documented workflow to ensure no steps are missed.
If the task was repetitive and might be needed again, I should suggest: "Would you like me to add this task to the memory bank for future reference?"
In the end of the task, when it seems to be completed, I will update `context.md` accordingly. If the change seems significant, I will suggest to the user: "Would you like me to update memory bank to reflect these changes?" I will not suggest updates for minor changes.
## Context Window Management
When the context window fills up during an extended session:
1. I should suggest updating the memory bank to preserve the current state
2. Recommend starting a fresh conversation/task
3. In the new conversation, I will automatically load the memory bank files to maintain continuity
## Technical Implementation
Memory Bank is built on Kilo Code's Custom Rules feature, with files stored as standard markdown documents that both the user and I can access.
## Important Notes
REMEMBER: After every memory reset, I begin completely fresh. The Memory Bank is my only link to previous work. It must be maintained with precision and clarity, as my effectiveness depends entirely on its accuracy.
If I detect inconsistencies between memory bank files, I should prioritize brief.md and note any discrepancies to the user.
IMPORTANT: I MUST read ALL memory bank files at the start of EVERY task - this is not optional. The memory bank files are located in `.kilocode/rules/memory-bank` folder.
packages/kilo-docs/.kilocode/rules/memory-bank/architecture.md
-137
View File
@@ -1,137 +0,0 @@
# Architecture Overview
## System Architecture
The Kilo Code documentation site is built using Docusaurus 3.8.1, a modern static site generator optimized for documentation websites. The architecture follows a standard Docusaurus pattern with custom enhancements for the Kilo Code brand and functionality.
## Project Structure
### Root Configuration
- [`package.json`](package.json:1) - Project dependencies and build scripts
- [`docusaurus.config.ts`](docusaurus.config.ts:1) - Main Docusaurus configuration
- [`sidebars.ts`](sidebars.ts:1) - Documentation navigation structure
- [`.env.example`](.env.example:1) - Environment variables template
### Source Code Organization
#### `/src` Directory
- [`src/constants.ts`](src/constants.ts:1) - Application-wide constants (URLs, links, configuration)
- [`src/components/`](src/components/) - Custom React components
- [`Codicon.tsx`](src/components/Codicon.tsx:1) - VS Code icon component
- [`Image.js`](src/components/Image.js:1) - Enhanced image component
- [`ReportIssue/`](src/components/ReportIssue/) - Issue reporting component
- [`YouTubeEmbed/`](src/components/YouTubeEmbed/) - YouTube video embedding
- [`src/css/custom.css`](src/css/custom.css:1) - Global styling and theme customization
- [`src/theme/`](src/theme/) - Docusaurus theme customizations
#### `/docs` Directory Structure
The documentation follows a hierarchical organization:
```
docs/
├── index.mdx # Landing page
├── getting-started/ # Installation and setup
├── basic-usage/ # Core functionality
├── features/ # Feature documentation
│ ├── tools/ # Tool reference
│ ├── mcp/ # MCP integration
│ ├── slash-commands/ # Command workflows
│ └── experimental/ # Beta features
├── advanced-usage/ # Advanced topics
├── providers/ # AI provider setup guides
└── extending/ # Development and contribution
```
#### `/static` Directory
- [`static/img/`](static/img/) - Images organized by feature/section
- [`static/downloads/`](static/downloads/) - Downloadable resources
### Key Technical Decisions
#### Documentation Organization
- **Feature-First Structure**: Documentation is organized by user journey and feature categories rather than technical implementation
- **Provider Separation**: Each AI provider has dedicated documentation for setup and configuration
- **Tool Reference**: Comprehensive tool documentation with individual pages for each tool
#### Navigation Design
- **Progressive Disclosure**: Information is layered from basic to advanced usage
- **Cross-References**: Extensive internal linking between related concepts
- **Search Integration**: Local search with @easyops-cn/docusaurus-search-local
#### Content Strategy
- **MDX Support**: Enhanced markdown with React component integration
- **Code Examples**: Extensive use of code blocks with syntax highlighting
- **Visual Documentation**: Screenshots and diagrams for complex concepts
## Component Relationships
### Core Components
1. **Docusaurus Core** - Static site generation and routing
2. **Custom Theme** - VS Code-inspired styling and branding
3. **Search Integration** - Local search functionality
4. **Analytics** - PostHog integration for usage tracking
5. **Custom Components** - Enhanced documentation experience
### Data Flow
1. **Content Creation** - Markdown/MDX files in `/docs`
2. **Build Process** - Docusaurus compilation and optimization
3. **Static Generation** - HTML/CSS/JS output for hosting
4. **Deployment** - Static files served at https://kilocode.ai/docs
## Critical Implementation Paths
### Build System
- **Development**: `npm start` - Local development server with hot reload
- **Production**: `npm run build` - Optimized static site generation
- **Deployment**: Static files hosted with CDN distribution
### Content Management
- **Documentation Updates**: Direct markdown file editing
- **Asset Management**: Static files in organized directory structure
- **Version Control**: Git-based workflow for content updates
### Search Implementation
- **Local Search**: @easyops-cn/docusaurus-search-local plugin
- **Indexing**: Automatic content indexing during build
- **Search UI**: Integrated search bar with contextual results
### Customization Points
- **Theme Overrides**: Custom CSS and component swizzling
- **Plugin Configuration**: Docusaurus plugin ecosystem integration
- **Content Enhancement**: MDX components for interactive documentation
## Integration Points
### External Services
- **PostHog Analytics**: User behavior tracking and insights
- **GitHub Integration**: Edit links and issue reporting
- **Community Platforms**: Discord, Reddit, Twitter integration
### VS Code Extension Integration
- **Deep Linking**: Direct links to extension installation
- **Context Sharing**: Documentation references from extension
- **Feature Parity**: Documentation reflects current extension capabilities
## Performance Considerations
### Build Optimization
- **Static Generation**: Pre-built HTML for fast loading
- **Asset Optimization**: Image compression and lazy loading
- **Code Splitting**: JavaScript bundle optimization
### User Experience
- **Mobile Responsive**: Optimized for all device sizes
- **Fast Navigation**: Client-side routing for smooth transitions
- **Search Performance**: Local search for instant results
## Maintenance Patterns
### Content Updates
- **Regular Reviews**: Documentation accuracy validation
- **Feature Alignment**: Updates synchronized with extension releases
- **Community Feedback**: User-driven improvements and corrections
### Technical Maintenance
- **Dependency Updates**: Regular package updates and security patches
- **Performance Monitoring**: Build time and site performance tracking
- **Accessibility**: WCAG compliance and usability improvements
packages/kilo-docs/.kilocode/rules/memory-bank/brief.md
-1
View File
@@ -1 +0,0 @@
This is the technical and user documentation for Kilo Code, an open source AI agent VS Code extension. It helps you write code more efficiently by generating code, automating tasks, and providing suggestions. It is written with the documentation library Docusaurus and hosted at https://kilocode.ai/docs
packages/kilo-docs/.kilocode/rules/memory-bank/context.md
-78
View File
@@ -1,78 +0,0 @@
# Current Context
## Project Status
The Kilo Code documentation site is a mature, production-ready Docusaurus project that serves as the comprehensive documentation hub for the Kilo Code VS Code extension. The site is hosted at https://kilocode.ai/docs and provides extensive documentation covering installation, usage, features, and extension capabilities.
## Current Work Focus
**Memory Bank Initialization**: Currently performing comprehensive memory bank initialization to establish persistent project context for future AI interactions. This involves analyzing the entire documentation structure, understanding the project's purpose, and creating structured documentation files.
## Recent Changes
- Memory bank system being implemented with structured documentation files
- Product overview documented with comprehensive feature descriptions
- Project structure analyzed including all documentation categories and provider integrations
## Documentation Structure
The documentation is organized into several major sections:
### Core User Journey
- **Getting Started**: Installation, setup, and first task completion
- **Using Kilo Code**: Chat interface, modes, context mentions, and basic features
- **Core Concepts**: Auto-approving actions, suggested responses, tool usage, and checkpoints
### Advanced Features
- **Advanced Usage**: Prompt engineering, customization options, memory bank, and large project handling
- **Customization**: Settings management, custom modes, API configuration profiles
- **Extending Kilo Code**: Model providers (18+ supported), local models, MCP integration, shell integration
### Reference Materials
- **Tools Reference**: Comprehensive documentation of all 15+ available tools
- **Provider Documentation**: Detailed setup guides for Anthropic, OpenAI, and 16+ other AI providers
- **Community Resources**: Contributing guidelines, development environment setup
## Key Features Documented
### Core Capabilities
- Multi-mode AI assistance (Code, Architect, Ask, Debug, Custom)
- Comprehensive tool ecosystem for file operations, browser automation, and system commands
- Memory Bank system for persistent project context
- MCP (Model Context Protocol) integration for external tool connectivity
### User Experience Features
- Auto-generated commit messages with customizable templates
- Context mentions for precise file and code referencing
- Checkpoints for conversation state management
- Fast edits and surgical code modifications
- Browser automation for web testing and interaction
### Extensibility
- 18+ AI model providers supported
- Custom mode creation with file restrictions and tool limitations
- Local model support for privacy-conscious development
- MCP server integration for unlimited external tool connectivity
## Technical Implementation
The site uses modern web technologies:
- **Framework**: Docusaurus 3.8.1 for static site generation
- **Styling**: Custom CSS with VS Code-inspired design elements
- **Search**: Local search implementation with @easyops-cn/docusaurus-search-local
- **Analytics**: PostHog integration for usage tracking
- **Components**: Custom React components for enhanced documentation experience
## Next Steps
1. Complete memory bank initialization with remaining core files
2. Document the technical architecture and build system
3. Create task documentation for common documentation workflows
4. Validate all memory bank files for accuracy and completeness
## Important Considerations
- Documentation must remain accessible to both technical and non-technical users
- All provider documentation needs to stay current with API changes
- Memory bank system documentation serves as both user guide and implementation reference
- Community contributions are encouraged through GitHub discussions and pull requests
packages/kilo-docs/.kilocode/rules/memory-bank/product.md
-95
View File
@@ -1,95 +0,0 @@
# Product Overview
## What Kilo Code Is
Kilo Code is an open source AI agent VS Code extension that transforms how developers write code by providing intelligent, context-aware assistance directly within the VS Code editor. It serves as a persistent development partner that can understand projects, generate code, automate tasks, and provide suggestions.
## Problems It Solves
### Core Development Pain Points
- **Blank Page Syndrome**: Eliminates the struggle of starting new code or features from scratch
- **Context Switching**: Reduces time spent switching between documentation, Stack Overflow, and code
- **Repetitive Tasks**: Automates common development workflows like commit message generation, boilerplate creation, and file operations
- **Code Quality**: Helps with refactoring, debugging, and maintaining consistent coding standards
- **Project Understanding**: Assists in understanding large codebases and complex architectures
### AI Memory Limitations
- **Session Reset Problem**: Traditional AI assistants lose all context between sessions, requiring re-explanation of project details
- **Inefficient Context Gathering**: Without memory, AI must re-analyze entire codebases repeatedly, which is slow and expensive
- **Inconsistent Understanding**: Lack of persistent context leads to inconsistent suggestions and solutions
## How Kilo Code Works
### Core Interaction Model
Users interact with Kilo Code through a chat interface within VS Code, using natural language to describe what they want to accomplish. Kilo Code then uses specialized modes and tools to fulfill requests.
### Mode System
- **Code Mode**: General-purpose coding tasks, file editing, project creation
- **Architect Mode**: Planning, design, technical leadership, and documentation
- **Ask Mode**: Information gathering, explanations, and learning
- **Debug Mode**: Systematic problem diagnosis and troubleshooting
- **Custom Modes**: Unlimited specialized personas for specific workflows
### Tool Ecosystem
Kilo Code uses a sophisticated tool system organized into groups:
- **Read Tools**: File exploration, code analysis, project understanding
- **Edit Tools**: Code modification, file creation, precise surgical edits
- **Browser Tools**: Web automation and testing
- **Command Tools**: System command execution and build processes
- **MCP Tools**: External service integration through Model Context Protocol
- **Workflow Tools**: Task management, mode switching, progress tracking
### Memory Bank System
A revolutionary approach to AI context preservation that maintains project understanding across sessions through structured documentation files that both the AI and developers can access.
## User Experience Goals
### Seamless Integration
- Natural language interaction within familiar VS Code environment
- No context switching between tools or applications
- Immediate access through sidebar panel
### Intelligent Assistance
- Context-aware suggestions based on current project and codebase
- Proactive help with common development patterns
- Learning from user preferences and project conventions
### Workflow Enhancement
- Streamlined development processes through automation
- Reduced cognitive load for repetitive tasks
- Enhanced productivity without disrupting existing workflows
### Extensibility
- Support for multiple AI model providers
- Custom mode creation for specialized workflows
- MCP integration for unlimited tool expansion
- Local model support for privacy-conscious development
## Target Outcomes
### For Individual Developers
- Faster code generation and iteration cycles
- Improved code quality through AI-assisted refactoring and debugging
- Reduced time spent on documentation and boilerplate code
- Enhanced learning through AI explanations and suggestions
### For Development Teams
- Consistent coding standards and practices
- Shared custom modes for standardized workflows
- Improved code review processes through better commit messages
- Knowledge preservation through Memory Bank documentation
### For Projects
- Better documentation as a byproduct of AI assistance
- More maintainable codebases through consistent patterns
- Faster onboarding for new team members
- Preserved project knowledge across team changes
## Success Metrics
The product succeeds when developers report:
- Increased coding velocity and reduced time-to-completion
- Improved code quality and fewer bugs
- Enhanced understanding of complex codebases
- Reduced friction in development workflows
- Better project documentation and knowledge retention
packages/kilo-docs/.kilocode/rules/memory-bank/tasks.md
-391
View File
@@ -1,391 +0,0 @@
# Documentation Tasks
This file documents common repetitive tasks and workflows for maintaining the Kilo Code documentation site.
## Add New Provider Documentation
**Last performed:** Initial documentation setup
**Files to modify:**
- `/docs/providers/[provider-name].md` - Create new provider documentation
- `/sidebars.ts` - Add provider to navigation structure
- `/src/constants.ts` - Add provider URLs if needed
**Steps:**
1. Create new provider documentation file in `/docs/providers/`
2. Follow the standard provider documentation template:
- Introduction and website link
- Getting an API Key section
- Supported Models section
- Configuration in Kilo Code section
- Tips and Notes section
3. Add provider to the Model Providers section in `sidebars.ts`
4. Update constants file if new URLs are needed
5. Test documentation locally with `npm start`
6. Verify all links work correctly
**Template structure:**
```markdown
---
sidebar_label: Provider Name
---
# Using [Provider Name] With Kilo Code
Brief description of the provider and their strengths.
**Website:** [Provider URL]
## Getting an API Key
[Step-by-step instructions]
## Supported Models
[List of supported models]
## Configuration in Kilo Code
[Setup instructions]
## Tips and Notes
[Additional helpful information]
```
## Add New Tool Documentation
**Last performed:** Tool reference documentation setup
**Files to modify:**
- `/docs/features/tools/[tool-name].md` - Create new tool documentation
- `/sidebars.ts` - Add tool to Tools Reference section
- `/docs/features/tools/tool-use-overview.md` - Update tool overview if needed
**Steps:**
1. Create new tool documentation file in `/docs/features/tools/`
2. Follow the standard tool documentation template
3. Add tool to the Tools Reference section in `sidebars.ts`
4. Update tool overview page if the tool represents a new category
5. Test documentation locally
6. Verify code examples and parameter descriptions are accurate
**Important notes:**
- Include practical examples of tool usage
- Document all parameters with their types and requirements
- Explain when and why to use the tool
- Include common error scenarios and solutions
## Update Feature Documentation
**Last performed:** Feature documentation organization
**Files to modify:**
- Relevant feature documentation files in `/docs/features/`
- `/sidebars.ts` - Update navigation if structure changes
- `/docs/index.mdx` - Update feature highlights if major features added
**Steps:**
1. Identify which feature documentation needs updates
2. Review current documentation for accuracy
3. Update content to reflect latest extension capabilities
4. Add new screenshots if UI has changed
5. Update navigation structure if needed
6. Test all internal links
7. Verify examples still work with current extension version
**Important considerations:**
- Keep screenshots current with latest extension UI
- Ensure feature descriptions match actual extension behavior
- Update version-specific information
- Maintain consistency in documentation style
## Add New Blog Post
**Last performed:** Auto-generate commit messages blog post
**Files to modify:**
- `/blog-posts/[post-name].md` - Create new blog post
- Consider adding to main documentation if content is reference material
**Steps:**
1. Create new blog post file in `/blog-posts/`
2. Follow the established blog post style and tone
3. Include practical examples and real-world usage
4. Add relevant images to `/static/img/` if needed
5. Consider if content should also be added to main documentation
6. Review for clarity and technical accuracy
**Content guidelines:**
- Focus on practical benefits and real-world usage
- Include specific examples and code snippets
- Maintain conversational but informative tone
- Link to relevant documentation sections
## Update Provider API Changes
**Last performed:** Provider documentation updates
**Files to modify:**
- Relevant provider documentation in `/docs/providers/`
- `/docs/getting-started/connecting-api-provider.md` - If setup process changes
**Steps:**
1. Identify which providers have API changes
2. Update supported models lists
3. Update configuration instructions if needed
4. Update pricing information references
5. Test configuration steps with actual provider APIs
6. Update screenshots if provider UIs have changed
**Important notes:**
- Verify model names and capabilities with provider documentation
- Check for new authentication methods or requirements
- Update rate limit information if changed
- Ensure all external links are still valid
## Reorganize Documentation Structure
**Last performed:** Features section reorganization
**Files to modify:**
- `/sidebars.ts` - Primary navigation structure changes
- `/docusaurus.config.ts` - Add redirects for moved content
- Multiple documentation files - Update internal links
**Steps:**
1. Plan new documentation structure
2. Update `sidebars.ts` with new organization
3. Add redirects in `docusaurus.config.ts` for moved content
4. Update internal links throughout documentation
5. Test all navigation paths
6. Verify search functionality still works
7. Update any hardcoded paths in components
**Important considerations:**
- Always add redirects for moved content to prevent broken links
- Update internal link references throughout the site
- Test navigation flow from user perspective
- Consider impact on external links and bookmarks
## Add New Custom Component
**Last performed:** YouTube embed and image components
**Files to modify:**
- `/src/components/[ComponentName]/` - Create new component directory
- `/src/theme/MDXComponents.ts` - Register component for MDX usage
- Documentation files where component will be used
**Steps:**
1. Create component directory in `/src/components/`
2. Implement React component with TypeScript
3. Add component styles in separate CSS module if needed
4. Register component in `MDXComponents.ts` for MDX usage
5. Test component in development environment
6. Document component usage for other contributors
7. Use component in relevant documentation files
**Component guidelines:**
- Follow existing component patterns and styling
- Use TypeScript for type safety
- Include proper error handling
- Make components reusable and configurable
- Follow accessibility best practices
## Update Screenshots and Visual Assets
**Last performed:** Ongoing maintenance need
**Files to modify:**
- `/static/img/[feature-directories]/` - Update screenshot files
- Documentation files with embedded images - Update image references
- `/docs/getting-started/` - Installation and setup screenshots
- `/docs/basic-usage/` - Interface and workflow screenshots
**Steps:**
1. Identify which features have UI changes from extension releases
2. Take new screenshots in consistent browser/OS environment
3. Optimize images for web (compress, appropriate dimensions)
4. Replace old screenshots in `/static/img/` directories
5. Update any image references in documentation files
6. Test that all images load correctly in development
7. Verify images are accessible and have proper alt text
**Important considerations:**
- Maintain consistent screenshot style (browser, zoom level, theme)
- Use descriptive filenames that match the feature being documented
- Compress images to keep site performance optimal
- Update alt text for accessibility
- Consider creating a screenshot style guide for consistency
## Graduate Experimental Features to Stable
**Last performed:** Codebase indexing graduation
**Files to modify:**
- Feature documentation files - Remove experimental warnings
- `/sidebars.ts` - Move from experimental to appropriate section
- `/docs/features/experimental/` - Remove from experimental list
- Related tool documentation - Update experimental status
- `/docusaurus.config.ts` - Add redirects if URLs change
**Steps:**
1. Identify features graduating from experimental status
2. Remove experimental warnings and disclaimers from documentation
3. Update navigation structure in `sidebars.ts`
4. Move documentation files if directory structure changes
5. Add redirects for any changed URLs
6. Update cross-references throughout documentation
7. Remove duplicate documentation if it exists
8. Update feature overview pages to reflect stable status
**Important considerations:**
- Always add redirects for moved content to prevent broken links
- Search for all references to the feature across documentation
- Update any "experimental features" overview pages
- Consider if feature deserves more prominent placement in navigation
- Verify all examples and instructions work with stable version
## Process Extension Release Documentation Updates
**Last performed:** Version-specific updates from todos.md
**Files to modify:**
- Multiple feature documentation files based on release notes
- Provider documentation for new models or API changes
- Tool documentation for behavior changes
- Getting started guides for new onboarding features
- FAQ or troubleshooting sections for resolved issues
**Steps:**
1. Review extension release notes for documentation impacts
2. Categorize changes: UI updates, new features, bug fixes, model additions
3. Update relevant feature documentation with new capabilities
4. Add or update screenshots for UI changes
5. Update provider documentation for new models
6. Update tool documentation for behavior changes
7. Add troubleshooting entries for resolved issues
8. Test all updated examples and instructions
**Important considerations:**
- Prioritize user-facing changes that affect documentation accuracy
- Update version-specific information where relevant
- Ensure examples still work with current extension version
- Consider if changes require updates to getting started flow
- Document any breaking changes or migration steps
## Manage Documentation Redirects
**Last performed:** MCP and features section reorganization
**Files to modify:**
- `/docusaurus.config.ts` - Add redirect configurations
- `/sidebars.ts` - Update navigation structure
- Documentation files - Update internal links
**Steps:**
1. Plan new documentation structure or identify moved content
2. Document all URL changes that will occur
3. Add redirect entries in `docusaurus.config.ts`
4. Update navigation structure in `sidebars.ts`
5. Update internal links throughout documentation
6. Test all redirect paths work correctly
7. Verify search functionality still works
8. Update any hardcoded paths in components
**Important considerations:**
- Always add redirects before moving content to prevent 404 errors
- Use permanent redirects (301) for moved content
- Test redirects work for both old and new URLs
- Update internal links to use new URLs directly
- Consider impact on external links and bookmarks
- Document redirect rationale for future reference
## Resolve Duplicate/Conflicting Documentation
**Last performed:** Codebase search tool documentation cleanup needed
**Files to modify:**
- Duplicate documentation files
- Navigation structure
- Internal links and cross-references
- Redirect configuration if URLs change
**Steps:**
1. Identify duplicate or conflicting documentation files
2. Compare content to determine which version is authoritative
3. Merge useful content from both versions if needed
4. Remove or redirect the duplicate file
5. Update navigation to remove duplicate entries
6. Update internal links to point to single authoritative source
7. Add redirects if removing a file that might be bookmarked
8. Verify no broken links remain
**Important considerations:**
- Determine which version has more accurate/current information
- Preserve any unique content from the version being removed
- Check git history to understand why duplicates exist
- Ensure the remaining version covers all use cases
- Update any cross-references throughout the site
## Update Tool Documentation for Behavior Changes
**Last performed:** Tool fixes mentioned in v4.58.0 release
**Files to modify:**
- Individual tool documentation files in `/docs/features/tools/`
- Tool overview page if categories change
- Examples and usage patterns in tool docs
**Steps:**
1. Review extension release notes for tool behavior changes
2. Identify which tools have updated functionality
3. Update parameter descriptions and requirements
4. Update examples to reflect new behavior
5. Add or update limitation sections
6. Update "when is it used" sections if use cases change
7. Test examples to ensure they work correctly
8. Update tool overview page if needed
**Important considerations:**
- Verify all parameter descriptions are accurate
- Test code examples with current extension version
- Update any error scenarios or troubleshooting information
- Ensure examples demonstrate best practices
- Consider if changes affect tool categorization
## Audit and Fix Broken Links
**Last performed:** Ongoing maintenance need
**Files to modify:**
- All documentation files with internal or external links
- Navigation configuration files
- Component files with hardcoded links
**Steps:**
1. Run Docusaurus build to identify broken internal links
2. Use link checking tools for external links
3. Manually verify provider URLs and external service links
4. Update or remove broken external links
5. Fix internal link references
6. Update navigation structure if needed
7. Test all fixed links work correctly
8. Document any permanently removed external resources
**Important considerations:**
- Docusaurus automatically checks internal links during build
- External links may break due to provider website changes
- Consider using archive.org links for historical references
- Update provider URLs when services rebrand or move
- Remove links to discontinued services
- Add redirects if internal link structure changes
## Update Model Lists Across Providers
**Last performed:** Ongoing as providers add models
**Files to modify:**
- Individual provider documentation files in `/docs/providers/`
- Provider comparison information if it exists
- Getting started guides mentioning specific models
**Steps:**
1. Review provider websites and APIs for new model additions
2. Update supported models lists in provider documentation
3. Add model capabilities and limitations information
4. Update pricing references if available
5. Test configuration with new models if possible
6. Update any model comparison information
7. Verify model names and identifiers are correct
8. Update examples to use current model names
**Important considerations:**
- Verify model names exactly match provider APIs
- Include context window sizes and capabilities where relevant
- Note any special configuration requirements for new models
- Update rate limit information if it varies by model
- Consider if new models change provider recommendations
- Test actual API connectivity when possible
packages/kilo-docs/.kilocode/rules/memory-bank/tech.md
-184
View File
@@ -1,184 +0,0 @@
# Technology Stack
## Core Framework
### Docusaurus 3.8.1
- **Purpose**: Modern static site generator optimized for documentation
- **Key Features**: React-based, MDX support, built-in search, theming
- **Configuration**: [`docusaurus.config.ts`](docusaurus.config.ts:1)
## Runtime Environment
### Node.js
- **Required Version**: Node.js 18.0 or higher
- **Package Manager**: npm (with package-lock.json for dependency locking)
- **Development Server**: Hot reload with live editing support
## Core Dependencies
### React Ecosystem
- **React 19.0.0**: Core UI library
- **React DOM 19.0.0**: DOM rendering
- **@mdx-js/react 3.0.0**: MDX component integration
- **clsx 2.0.0**: Conditional CSS class utility
### Docusaurus Plugins & Presets
- **@docusaurus/preset-classic 3.8.1**: Standard Docusaurus configuration
- **@docusaurus/plugin-client-redirects 3.8.1**: URL redirect management
- **@easyops-cn/docusaurus-search-local 0.48.5**: Local search functionality
### Styling & UI Components
- **@vscode/codicons 0.0.36**: VS Code icon integration
- **prism-react-renderer 2.3.0**: Syntax highlighting for code blocks
- **Custom CSS**: VS Code-inspired theme in [`src/css/custom.css`](src/css/custom.css:1)
### Analytics & Tracking
- **posthog-docusaurus 2.0.4**: User behavior analytics and insights
- **Configuration**: Environment-based with POSTHOG_API_KEY
## Development Dependencies
### TypeScript Support
- **TypeScript 5.6.2**: Type checking and development tooling
- **@docusaurus/types 3.8.1**: Docusaurus TypeScript definitions
- **@docusaurus/module-type-aliases 3.8.1**: Module type aliases
- **@docusaurus/tsconfig 3.8.1**: Shared TypeScript configuration
### Development Tools
- **dotenv 16.4.7**: Environment variable management
- **husky 9.1.7**: Git hooks for development workflow
## Build System
### Development Workflow
```bash
npm start # Local development server with hot reload
npm run build # Production build with optimization
npm run serve # Serve built files locally
npm run clear # Clear Docusaurus cache
```
Not that on Windows, it may be useful to use:
```bash
npx docusaurus start
npx docusaurus build
```
### Build Configuration
- **Host**: 0.0.0.0 (accessible from network)
- **Environment Variables**: Loaded via dotenv
- **Output**: Static HTML/CSS/JS files for CDN deployment
## Browser Support
### Production Targets
- **Modern Browsers**: >0.5% usage, not dead, not Opera Mini
- **Specific Exclusions**: Opera Mini (limited JavaScript support)
### Development Targets
- **Chrome**: Last 3 versions
- **Firefox**: Last 3 versions
- **Safari**: Last 5 versions
## External Integrations
### GitHub Integration
- **Repository**: https://github.com/Kilo-Org/docs
- **Edit Links**: Direct links to GitHub for documentation editing
- **Issue Reporting**: Integrated issue creation workflow
### Community Platforms
- **Discord**: https://kilocode.ai/discord
- **Reddit**: https://www.reddit.com/r/kilocode/
- **Twitter**: https://x.com/kilocode
- **YouTube**: https://www.youtube.com/@Kilo-Code
### VS Code Marketplace
- **Extension URL**: https://marketplace.visualstudio.com/items?itemName=kilocode.kilo-code
- **Open VSX**: https://open-vsx.org/extension/kilocode/kilo-code
## Deployment Architecture
### Static Site Hosting
- **Production URL**: https://kilocode.ai/docs
- **Base Path**: /docs (configured in docusaurus.config.ts)
- **CDN**: Static file distribution for global performance
### Content Delivery
- **Static Assets**: Images, downloads, and media files
- **Search Index**: Local search data bundled with site
- **Sitemap**: Automatic generation for SEO
## Development Constraints
### File Organization
- **Documentation**: Markdown/MDX files in `/docs` directory
- **Static Assets**: Organized by feature in `/static/img`
- **Components**: Custom React components in `/src/components`
### Content Management
- **Version Control**: Git-based workflow for all content
- **Asset Optimization**: Manual image optimization required
- **Link Validation**: Docusaurus validates internal links during build
## Performance Considerations
### Build Optimization
- **Code Splitting**: Automatic JavaScript bundle optimization
- **Static Generation**: Pre-rendered HTML for fast initial load
- **Asset Optimization**: CSS/JS minification in production builds
### Runtime Performance
- **Client-Side Routing**: Fast navigation between pages
- **Search Performance**: Local search index for instant results
- **Image Loading**: Manual lazy loading implementation where needed
## Security & Privacy
### Data Collection
- **Analytics**: PostHog for usage tracking (configurable)
- **Privacy Policy**: Links to both website and extension privacy policies
- **User Control**: Analytics can be disabled via environment configuration
### Content Security
- **Static Generation**: No server-side vulnerabilities
- **External Links**: Proper target and rel attributes for security
- **Asset Validation**: Build-time validation of all assets and links
## Maintenance Requirements
### Regular Updates
- **Dependencies**: Monthly security and feature updates
- **Docusaurus**: Follow major version updates for new features
- **Node.js**: Maintain compatibility with LTS versions
### Content Synchronization
- **Extension Features**: Documentation must reflect current extension capabilities
- **Provider APIs**: Keep provider setup guides current with API changes
- **Community Links**: Verify external links remain active
packages/kilo-docs/.kilocode/rules/memory-bank/todos.md
-116
View File
@@ -1,116 +0,0 @@
## Settings and UI Documentation
### 10. API Provider Selection Enhancement
- **File to Update**: `features/settings-management.md`
- **Release Note**: v4.58.0 - "Add Search/Filter Functionality to API Provider Selection in Settings"
- **Required Changes**: Document new search/filter functionality in API provider selection
### 11. Auto-Approve Settings Update
- **File to Update**: `features/auto-approving-actions.md`
- **Release Note**: v4.57.0 - "Add 'max requests' section to the Auto-Approve Settings page"
- **Required Changes**: Document new max requests section in Auto-Approve Settings
### 12. Chat Interface Updates
- **File to Update**: `basic-usage/the-chat-interface.md`
- **Release Notes & Changes**:
- v4.58.0 - "Add copy prompt button to task actions" → Document copy prompt button functionality
- v4.56.0 - "Add idea suggestion box to get you inspired with some ideas when starting out fresh" → Document idea suggestion feature
- v4.57.1 - "Show idea suggestions when there is no task history" → Update idea suggestion documentation
### 13. Git Commit Generation Updates
- **File to Update**: `basic-usage/git-commit-generation.md`
- **Release Note**: v4.56.1 - "Continue to show commit message generation progress while waiting for LLM response"
- **Required Changes**: Document improved progress indicators during commit message generation
---
## Bug Fixes and Technical Updates
### 14. OpenRouter Provider Fix
- **File to Update**: `providers/openrouter.md`
- **Release Note**: v4.56.2 - "Fix autocomplete init with custom openrouter models"
- **Required Changes**: Update documentation regarding autocomplete with custom OpenRouter models
### 15. Claude Code Windows Integration
- **File to Update**: `providers/claude-code.md`
- **Release Note**: v4.57.2 - "ENAMETOOLONG error in Claude Code integration on Windows is resolved"
- **Required Changes**: Add troubleshooting section for Windows-specific issues (now resolved)
### 16. Error Handling Improvements
- **File to Update**: `faq.md` or create troubleshooting section
- **Release Note**: v4.57.3 - "More details are included in connection error messages"
- **Required Changes**: Document improved error handling and connection error messages
### 17. Localization Updates
- **File to Create/Update**: `advanced-usage/localization.md` (if doesn't exist)
- **Release Notes**:
- v4.58.1 - "French localization has been improved"
- v4.58.3 - "Fixed 'Kilo' being inadvertently translated in some languages"
- **Required Changes**: Document localization improvements and translation fixes
---
## Tool Documentation Updates
### 18. Tool Behavior Updates
- **Files to Review**: All files in `features/tools/` directory
- **Release Notes**: Various tool fixes mentioned in v4.58.0
- **Required Changes**:
- Update `apply_diff` tool documentation for intermittent hang fixes
- Update `insert_content` tool documentation for new file creation capability
- Update MCP resource handling documentation for image support fixes
### 19. Codebase Search Tool
- **File to Update**: `features/tools/codebase-search.md` or `advanced-usage/available-tools/codebase-search.md`
- **Release Note**: Related to codebase indexing moving out of experimental
- **Required Changes**: Remove experimental warnings from codebase search tool documentation
---
## UI and Visual Updates
### 20. Settings Management UX
- **File to Update**: `features/settings-management.md`
- **Release Note**: v4.58.0 - "Fix code index secret persistence and improve settings UX"
- **Required Changes**: Document settings UX improvements and code index configuration
### 21. Chat UI Improvements
- **File to Update**: `basic-usage/the-chat-interface.md`
- **Release Notes**: v4.58.0 - Multiple UI consistency and layout improvements
- **Required Changes**: Update documentation for chat UI enhancements and consistency changes
### 22. Screenshot Updates
- **Files to Review**: All documentation files with screenshots
- **Release Notes**: Multiple UI changes across releases
- **Required Changes**: Review and update screenshots to reflect current UI state
---
## Getting Started Updates
### 23. First Task Experience
- **File to Update**: `getting-started/your-first-task.md`
- **Release Notes**: Idea suggestion box and improved onboarding
- **Required Changes**: Update first task documentation to include idea suggestions for new users
---
## Additional Provider Model Updates
### 24. Model Additions Across Providers
- **Files to Update**: Various provider files
- **Release Notes**: Multiple model additions across different providers
- **Required Changes**:
- Verify all new models are documented in respective provider files
- Update model lists and capabilities where applicable
---
## Documentation Structure and Navigation
### 25. File Organization Review
- **Files to Review**: All documentation files
- **Changes**:
- Ensure codebase indexing is properly moved out of experimental
- Verify all internal links work after any file moves
- Update navigation and cross-references as needed
packages/kilo-docs/.kilocodemodes
-217
View File
@@ -1,217 +0,0 @@
customModes:
- slug: video-script-writer
name: Video Script Writer
roleDefinition: >-
**Persona: Kilo Code Expert Scriptwriter**
**Background:**
A professional scriptwriter specializing in creating clear, engaging, and
informative scripts tailored specifically for YouTube, Reddit tutorials,
and documentation videos focused on Kilo Code. With a deep understanding
of Kilo Code’s functionalities and its practical applications, this expert
excels at translating complex coding concepts into straightforward,
easy-to-follow explanations.
**Communication Style:**
- Professional yet friendly, fostering trust and approachability.
- Concise and structured, using precise language to ensure clarity.
- Logical flow, breaking down complex topics into manageable steps.
- Engaging tone, designed to maintain viewer interest throughout the
video.
**Specialization:**
- Kilo Code’s features and updates
- Common troubleshooting techniques
- Step-by-step tutorials for beginners to advanced users
- Practical use-cases and real-world examples
**Approach:**
- Start by clearly stating the objective of the script.
- Provide concise explanations with relatable analogies when helpful.
- Anticipate common questions and proactively address them.
- Conclude with actionable insights or suggested next steps for users.
**Tone and Personality:**
- Knowledgeable and authoritative without being intimidating.
- Patient and encouraging, ensuring viewers feel capable and supported.
- Enthusiastic about Kilo Code, making viewers excited about learning and
implementing the software.
**Goal:**
To empower viewers by making Kilo Code accessible and easy to master,
enhancing their confidence and competence through expert guidance and
clear, compelling content.
groups: []
source: project
- slug: docs
name: Documentation Writer
roleDefinition: You are a technical documentation writer who combines 24 years of coding experience with Smart Brevity principles to create documentation that developers can scan, understand, and act on immediately. You prioritize cognitive accessibility and write for readers with varying attention spans, including those with ADD/ADHD. Your straightforward, conversational style eliminates fluff while maintaining technical precision. You specialize in Visual Studio Code extension documentation using Docusaurus, with deep expertise in Markdown, MDX, and React-based static sites. Every piece of content serves a clear purpose and provides immediate value to developers.
customInstructions: >-
### Documentation Standards
#### 1. **Lead with Impact** (Smart Brevity Core)
Start every section with the ONE most important thing users need to know. Answer "why should I care?" before explaining "how to do it." Front-load value in the first sentence.
#### 2. **One Big Thing Per Section**
Each documentation section should have one primary takeaway. State it clearly in the opening. Everything else supports that main point.
#### 3. **Scannable Structure**
- Use descriptive headings that answer questions
- Keep paragraphs to 1-3 sentences (max 60 words)
- Limit sentences to 20 words when possible
- Use bullet points for lists of 3+ items
- Bold key terms on first mention
#### 4. **Precision Over Perfection**
Write for experienced developers. Skip basic explanations unless they clarify Kilo Code-specific behavior. Assume familiarity with VS Code, extensions, and development workflows.
#### 5. **Show, Don't Just Tell**
Every feature explanation needs a realistic code example. Make examples copy-pasteable and immediately useful. Avoid "Hello World" demos—use real-world scenarios.
#### 6. **Cognitive Accessibility First**
- Use parallel structure in lists
- Define technical terms when they impact understanding
- Provide context for complex workflows
- Break complex tasks into numbered steps
- Use consistent terminology throughout
#### 7. **Anticipate and Address**
Include common pitfalls, troubleshooting tips, and "gotchas" within relevant sections. Answer the question users will have next.
#### 8. **Internal Navigation Standards**
- Use absolute paths starting from `/docs/` root
- Omit `.md` extensions in links
- Example: `[Configuration Guide](/configuration/setup/)`
- Test all links work in Docusaurus environment
#### 9. **@site Alias Usage**
- Use `@site` only for code imports and component references
- Example: `import Header from '@site/src/components/Header';`
- Never use `@site` in Markdown links—use absolute paths instead
#### 10. **Code Standards**
- Provide syntax highlighting for all code blocks
- Include file names or context when helpful
- Maintain consistent indentation (2 spaces)
- Test code examples before publishing
- Show input AND expected output when relevant
#### 11. **Visual Elements**
- Add image placeholders with descriptive alt text
- Use format: `<img src="/img/folder/filename.png" alt="Descriptive text" width="600" />`
- Images should start with `/img/` path
- Include brief description below complex images
#### 12. **Eliminate Filler Words**
Remove: "simply," "just," "easily," "obviously," "of course," "as you can see." These add cognitive load without value.
#### 13. **Progressive Disclosure**
Start with the essential information. Add detail as needed. Use expandable sections or links to deeper content for advanced users.
#### 14. **Consistency Checklist**
- Use same terminology for same concepts
- Follow identical formatting patterns
- Maintain consistent voice and tone
- Verify all links and code examples work
- Check accessibility with screen reader preview
groups:
- read
- command
- edit
source: project
- slug: posts
name: Blog Post Author
roleDefinition: You are a technical blog author who applies Smart Brevity principles to make complex development topics accessible and engaging. With 24 years of experience, you write with authentic candor and technical precision, helping developers quickly understand why they should care about Kilo Code features. Your friendly, conversational tone includes light humor while maintaining professional credibility. You specialize in translating documentation into compelling stories that show real-world value, always leading with the problem being solved rather than the solution being offered.
customInstructions: >-
### Smart Brevity Blog Standards
#### 1. **Hook with Value** (Smart Brevity Core)
Open every post by stating the problem this feature/topic solves. Lead with "why this matters" before explaining "what it does." Make the value clear in the first paragraph.
#### 2. **One Big Thing Focus**
Each blog post should have one main takeaway readers can act on immediately. State it early and reinforce it throughout.
#### 3. **Scannable and Engaging**
- Use subheadings that ask questions or promise benefits
- Keep paragraphs short (2-3 sentences max)
- Include bullet points for key benefits or steps
- Add light humor or personality without compromising clarity
- Bold important concepts and features
#### 4. **Real-World Context**
Show how experienced developers actually use these features. Skip toy examples—demonstrate genuine productivity gains and workflow improvements.
#### 5. **Documentation Integration**
- Link to relevant docs using absolute URLs
- Example: `[Complete Setup Guide](https://kilocode.ai/docs/configuration/)`
- Reference specific documentation sections to drive deeper engagement
- Make it easy to go from blog interest to documentation action
#### 6. **Accessible Technical Writing**
- Define acronyms and technical terms when they impact understanding
- Use parallel structure in lists and explanations
- Provide context for workflows and processes
- Consider readers with varying attention spans and learning styles
#### 7. **Problem-Solution Structure**
- Start with relatable developer pain point
- Show how Kilo Code addresses it specifically
- Provide concrete example or walkthrough
- End with clear next steps or call to action
#### 8. **Code with Context**
- Include realistic, copy-pasteable code examples
- Show before/after scenarios when relevant
- Provide syntax highlighting and proper formatting
- Explain why the code works, not just how
#### 9. **Visual Storytelling**
- Use images from documentation: `<img src="https://kilocode.ai/docs/img/folder/filename.png" alt="Description" width="600" />`
- Include screenshots that support the narrative
- Add brief descriptions for complex visuals
- Show UI paths with backticks: `Settings → Prompts → Feature Name`
#### 10. **Friendly Authority**
- Write conversationally but maintain technical credibility
- Include 1-2 appropriate jokes or light observations per post
- Acknowledge common frustrations developers face
- Share insights from real usage patterns
#### 11. **Clear Navigation**
- End posts with specific next steps
- Link to relevant documentation sections
- Suggest related features or workflows
- Make it easy for readers to continue their journey
#### 12. **Elimination Editing**
Remove marketing speak, unnecessary qualifiers, and filler words. Every sentence should advance understanding or provide value.
groups:
- read
- edit
source: project
packages/kilo-docs/.kilocoderules
-31
View File
@@ -1,31 +0,0 @@
# Kilo Code Documentation Rules
## Documentation Links
- Do not include .md extensions in documentation links
- Use absolute paths starting from the `/docs/` root for internal documentation links
- Example: [link text](/basic-usage/how-tools-work) NOT [link text](basic-usage/how-tools-work.md) or [link text](../../basic-usage/how-tools-work)
This ensures links work correctly in the built documentation while maintaining clean URLs.
## Image References
- Use `/docs/img/` prefix for all image paths in documentation
- Example: `<img src="/docs/img/your-first-task/example.png" alt="Description" width="600" />`
- NOT: `<img src="img/example.png" ...>` or `<img src="../static/img/example.png" ...>`
## Component Imports
- Import custom components from `@site/src/components/` using absolute paths
- Import constants from `@site/src/constants.ts`
- Examples:
- `import Image from '@site/src/components/Image';`
- `import { DISCORD_URL } from '@site/src/constants.ts'`
- `import Codicon from '@site/src/components/Codicon';`
## External Link References
- Use constants from `src/constants.ts` for external URLs instead of hardcoding
- Example: `<a href={DISCORD_URL} target="_blank">Discord</a>`
- NOT: `<a href="https://kilocode.ai/discord">Discord</a>`
## Sidebar Configuration
- Document IDs in `sidebars.ts` should match file paths without extensions
- Use `type: 'doc'` with custom labels when the sidebar label differs from the document title
- Group related documents under categories with descriptive labels
packages/kilo-docs/AGENTS.md
+110
View File
@@ -0,0 +1,110 @@
## Project Overview
This is the Kilo Code documentation site. Kilo Code is the leading open source agentic engineering platform.
## Dev Server
The dev server is run with `bun dev` and runs on `http://localhost:3002`. Typically the user will be running it themselves, so always check if it is running FIRST before deciding to run it yourself to test something.
## Markdoc Custom Tags
This project uses [Markdoc](https://markdoc.dev/) for rendering markdown with custom components. Custom tags allow you to embed React components directly in markdown files.
## Converting from old documentation site
This site was previously in docusaurus but is now in markdoc. Sometimes the user may ask you to update the images and other tags in a page that was imported. These are the types of updates you'd need to make
### Images
Images will often look like standard HTML image tags like:
<img src="/docs/img/kilo-provider/connected-accounts.png" alt="Connect account screen" width="600" />
We want to convert them to Markdoc image tags like this:
{% image src="/docs/img/kilo-provider/connected-accounts.png" alt="Connect account screen" width="800" caption="Connect account screen" /%}
Note that this site is served under kilo.ai/docs so the `/docs` MUST be present in every image tag.
Image attributes
```json
src: {
type: String,
required: true,
description: "The image source URL",
},
alt: {
type: String,
required: true,
description: "Alternative text for the image",
},
width: {
type: String,
description: "Width of the image (e.g., '500px', '80%')",
},
height: {
type: String,
description: "Height of the image (e.g., '300px', 'auto')",
},
caption: {
type: String,
description: "Optional caption displayed below the image",
}
```
### Callouts
Callouts in Docusaurus look like this:
```markdown
:::info
You can report any bugs or feedbacks by chatting with us in our [Discord server](https://discord.gg/ovhcloud), in the AI Endpoints channel.
:::
```
We want to convert them to Markdoc callout tags like this:
```markdown
{% callout type="info" %}
You can report any bugs or feedbacks by chatting with us in our [Discord server](https://discord.gg/ovhcloud), in the AI Endpoints channel.
{% /callout %}
```
Callout Attributes:
```json
title: {
type: String,
description: "Optional custom title for the callout",
},
type: {
type: String,
default: "note",
matches: ["generic", "note", "tip", "info", "warning", "danger"],
description:
"The type of callout: generic (no icon/title), note, tip, info, warning, or danger",
},
collapsed: {
type: Boolean,
default: false,
description:
"When true, the callout starts collapsed and can be expanded by clicking the header",
}
```
### Codicons
Codicon icons look like this:
```html
<Codicon name="gear" />
```
And we want to convert that to look like this:
```markdown
{% codicon name="gear" /%}
```
packages/kilo-docs/CHANGELOG.md
-7
View File
@@ -1,7 +0,0 @@
# kilocode-docs
## 0.1.1
### Patch Changes
- [#5178](https://github.com/Kilo-Org/kilocode/pull/5178) [`e9c18e7`](https://github.com/Kilo-Org/kilocode/commit/e9c18e784f308f908251cdff48231f390c7350c0) Thanks [@sebastiand-cerebras](https://github.com/sebastiand-cerebras)! - Remove deprecated zai-glm-4.6 model from Cerebras provider due to deprecation
packages/kilo-docs/LICENSE
-201
View File
@@ -1,201 +0,0 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
packages/kilo-docs/README.md
+31 -9
View File
@@ -1,17 +1,39 @@
# Kilo Code Docs
# Full Next.js example
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator, and lives at https://kilocode.ai/docs
This is a full-featured boilerplate for a creating a documentation website using Markdoc and Next.js.
### Installation
<img width="2032" alt="image" src="https://user-images.githubusercontent.com/62121649/174916143-16f18270-0463-402c-8b48-33c627ea7a7e.png">
```
$ pnpm install
## Setup
First, clone this repo and install the dependencies required:
```bash
npm install
# or
yarn install
```
### Local Development
Then, run the development server:
```
$ pnpm docs:start
```bash
npm run dev
# or
yarn dev
```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `index.md`. The page auto-updates as you edit the file.
## Deploy
The quickest way to deploy your own version of this boilerplate is by deploying it with [Vercel](https://vercel.com) or [Netlify](https://www.netlify.com/) by clicking one of the buttons below.
### Deploy with Vercel
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/markdoc/next.js-starter)
### Deploy to Netlify
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/markdoc/next.js-starter)
packages/kilo-docs/blog-posts/auto-generate-commit-messages.md
-108
View File
@@ -1,108 +0,0 @@
# Why I Let AI Write My Commit Messages
### And Probably You Should Too
I've just finished implementing a big feature, the code is staged and ready to go, but there I am — mesmerized by the empty commit message field, brain is blank. What do I write? "Fixed stuff"? "Updates"? "asdf"? Do you know that feeling too?
I've been there countless times, and honestly, it's one of those tiny friction points that really bother me - or, better to say, bothered me, because since we shipped `auto-generate commit messages feature`, the problem disappeared for good. That feature became one of those things where once I have it, I wonder how I ever lived without it.
## The Problem with Commit Messages
**Writing good commit messages is hard.** Like, genuinely difficult. You need to:
- Summarize what changed without being too vague
- Follow your team's conventions (Conventional Commits, anyone?)
- Capture the _why_ behind the change, which is often harder than the _what_
- Keep it concise but informative
- Do all this while your brain is already moving on to the coffee machine
The result? Most of us end up with commit histories that look like something between an archaeological mystery and a stand-up show. Future you (or your teammates) trying to understand why something was changed becomes an exercise in detective work.
## How It Actually Works
Here's the thing that makes this feature genuinely useful: it only looks at your **staged changes**. Not your entire working directory, not random files you've been tinkering with—just the specific changes you've decided to commit.
This is crucial because it means the AI understands the scope of what you're actually committing. It can see that you added a new authentication method, fixed a specific bug, or updated documentation, and it crafts the message accordingly.
The process is dead simple:
1. Stage your changes (like you normally would)
2. Click the Kilo Code logo next to the commit message field
3. Get a properly formatted commit message - automagically!
<img src="https://kilo.ai/docs/img/git-commit-generation/git-commit-1.png" alt="Auto-generated commit message in VS Code" width="600" />
## Real Examples from Real Work
Let me show you some actual commit messages this feature has generated for me:
```
feat(auth): implement OAuth2 integration with GitHub
Add GitHub OAuth2 authentication flow including:
- OAuth2 client configuration
- User profile retrieval
- Token refresh mechanism
```
```
fix(api): resolve race condition in user session handling
Add proper locking mechanism to prevent concurrent
session updates from causing data corruption
```
```
docs(readme): update installation requirements
Clarify Node.js version requirements and add
troubleshooting section for common setup issues
```
Notice how these follow [Conventional Commits](https://www.conventionalcommits.org/) format by default? That's not an accident. The feature understands modern commit conventions best practices and applying them automatically.
## The Customization That Actually Matters
Here's where it gets interesting. You can customize the prompt template to match your team's specific needs or your own preferences. Don't want to be "too conventional" or just have your own standards? Maybe you want to use a different commit format, or you want to include ticket numbers, your git username or you have specific terminology for your project?
Just head to `Settings → Prompts → Commit Message Generation` and modify the template. The AI will adapt to your requirements while still understanding the technical context of your changes.
<img src="https://kilo.ai/docs/img/git-commit-generation/git-commit-2.png" alt="Customizing commit message templates" width="600" />
## Why This Isn't Just Another AI Gimmick
I've seen plenty of AI features that feel like solutions looking for problems. This isn't one of them, it actually works:
**It's contextually aware**: The AI sees your actual code changeset, not just filenames. It understands when you've added error handling, refactored a function, or fixed a typo.
**It respects your workflow**: You still stage changes the same way. You still review and edit the message if needed. It just removes the blank-page problem.
**It's fast**: No waiting around for some cloud service to analyze your entire codebase. It's quick and focused.
**It follows your patterns**: The more you adjust it, the better it gets at matching your project's style and conventions.
## The Productivity Impact
Here's the thing I didn't expect: this feature doesn't just save time on writing commit messages. It actually makes me commit more frequently and more conciously.
When writing commit messages was a friction point, I'd sometimes batch unrelated changes together just to avoid writing multiple messages. Just squeeze everything into a bucket and throw it at the server, like `git add . && git commit -m "blablabla" && git push`. Now, I commit logical chunks of work as I complete them, which leads to a much cleaner git history.
Better commit messages also mean better code reviews. When your teammates can quickly understand what each commit does, the entire review process becomes more efficient.
## Getting Started
The feature is available in Kilo Code since `v4.35` and became customizable in `v4.38`. Just make sure you have some staged changes, and look for the Kilo Code logo in your VS Code Source Control panel.
Pro tip: Consider setting up a dedicated [API configuration profile](https://kilo.ai/docs/features/api-configuration-profiles/) with a faster, cheaper model specifically for commit message generation. You don't need the most powerful model for this task, and it'll save you some API costs and time - yes, it's exactly what we did in [2x Faster, 30x Cheaper Prompt Enhancement](https://blog.kilo.ai/p/2x-faster-prompt-enhancement-in-kilo)!
## One More Thing
I mentioned I use this feature constantly, and that's not hyperbole. It's become such a natural part of my workflow that I actually get annoyed when I have to write commit messages manually.
That's the mark of a good tool — when it "dissolves" into your workflow and just makes everything smoother. No fanfare, just one less thing to think about so you can focus on what actually matters: writing great code.
Give it a try. I think you'll find yourself wondering how you ever managed without it.
---
_Want to learn more about Kilo Code's commit message generation? Check out the [full documentation](https://kilo.ai/docs/basic-usage/git-commit-generation/) I wrote for setup details. And let me know what you think about it or how could we improve it even more here in comments or on our [Discord Server](https://kilo.ai/discord)!_
packages/kilo-docs/bun.lock
+269
View File
@@ -0,0 +1,269 @@
{
"lockfileVersion": 1,
"workspaces": {
"": {
"dependencies": {
"@markdoc/markdoc": "latest",
"@markdoc/next.js": "latest",
"@vscode/codicons": "^0.0.44",
"next": "latest",
"prismjs": "latest",
"react": "latest",
"react-dom": "latest",
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.18",
"@types/node": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"autoprefixer": "^10.4.23",
"postcss": "^8.5.6",
"tailwindcss": "^4.1.18",
"typescript": "latest",
},
},
},
"packages": {
"@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
"@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
"@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],
"@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
"@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.4" }, "os": "darwin", "cpu": "x64" }, "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw=="],
"@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g=="],
"@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg=="],
"@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A=="],
"@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw=="],
"@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.2.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA=="],
"@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.2.4", "", { "os": "linux", "cpu": "none" }, "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA=="],
"@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.2.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ=="],
"@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw=="],
"@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw=="],
"@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg=="],
"@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.2.4" }, "os": "linux", "cpu": "arm" }, "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw=="],
"@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg=="],
"@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.2.4" }, "os": "linux", "cpu": "ppc64" }, "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA=="],
"@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.2.4" }, "os": "linux", "cpu": "none" }, "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw=="],
"@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.2.4" }, "os": "linux", "cpu": "s390x" }, "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg=="],
"@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ=="],
"@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg=="],
"@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q=="],
"@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.5", "", { "dependencies": { "@emnapi/runtime": "^1.7.0" }, "cpu": "none" }, "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw=="],
"@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.34.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g=="],
"@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg=="],
"@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
"@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
"@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
"@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
"@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
"@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
"@markdoc/markdoc": ["@markdoc/markdoc@0.5.4", "", { "optionalDependencies": { "@types/linkify-it": "^3.0.1", "@types/markdown-it": "12.2.3" }, "peerDependencies": { "@types/react": "*", "react": "*" }, "optionalPeers": ["@types/react", "react"] }, "sha512-36YFNlqFk//gVNGm5xZaTWVwbAVF2AOmVjf1tiUrS6tCoD/YSkVy2E3CkAfhc5MlKcjparL/QFHCopxL4zRyaQ=="],
"@markdoc/next.js": ["@markdoc/next.js@0.5.0", "", { "dependencies": { "js-yaml": "^4.1.0" }, "peerDependencies": { "@markdoc/markdoc": "*", "next": "*", "react": "*" } }, "sha512-gzWvRc2dlxArQn1mDS4SHed46vkAoKBbXkELihQRYv1eVSA0u9eoNEdJXNuBL4Ajn9j2dPpwZp6nAVjN4nzZlA=="],
"@next/env": ["@next/env@16.1.4", "", {}, "sha512-gkrXnZyxPUy0Gg6SrPQPccbNVLSP3vmW8LU5dwEttEEC1RwDivk8w4O+sZIjFvPrSICXyhQDCG+y3VmjlJf+9A=="],
"@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.1.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-T8atLKuvk13XQUdVLCv1ZzMPgLPW0+DWWbHSQXs0/3TjPrKNxTmUIhOEaoEyl3Z82k8h/gEtqyuoZGv6+Ugawg=="],
"@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.1.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-AKC/qVjUGUQDSPI6gESTx0xOnOPQ5gttogNS3o6bA83yiaSZJek0Am5yXy82F1KcZCx3DdOwdGPZpQCluonuxg=="],
"@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.1.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-POQ65+pnYOkZNdngWfMEt7r53bzWiKkVNbjpmCt1Zb3V6lxJNXSsjwRuTQ8P/kguxDC8LRkqaL3vvsFrce4dMQ=="],
"@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.1.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-3Wm0zGYVCs6qDFAiSSDL+Z+r46EdtCv/2l+UlIdMbAq9hPJBvGu/rZOeuvCaIUjbArkmXac8HnTyQPJFzFWA0Q=="],
"@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.1.4", "", { "os": "linux", "cpu": "x64" }, "sha512-lWAYAezFinaJiD5Gv8HDidtsZdT3CDaCeqoPoJjeB57OqzvMajpIhlZFce5sCAH6VuX4mdkxCRqecCJFwfm2nQ=="],
"@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.1.4", "", { "os": "linux", "cpu": "x64" }, "sha512-fHaIpT7x4gA6VQbdEpYUXRGyge/YbRrkG6DXM60XiBqDM2g2NcrsQaIuj375egnGFkJow4RHacgBOEsHfGbiUw=="],
"@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.1.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-MCrXxrTSE7jPN1NyXJr39E+aNFBrQZtO154LoCz7n99FuKqJDekgxipoodLNWdQP7/DZ5tKMc/efybx1l159hw=="],
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.1.4", "", { "os": "win32", "cpu": "x64" }, "sha512-JSVlm9MDhmTXw/sO2PE/MRj+G6XOSMZB+BcZ0a7d6KwVFZVpkHcb2okyoYFBaco6LeiL53BBklRlOrDDbOeE5w=="],
"@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
"@tailwindcss/node": ["@tailwindcss/node@4.1.18", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.18" } }, "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ=="],
"@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.18", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.18", "@tailwindcss/oxide-darwin-arm64": "4.1.18", "@tailwindcss/oxide-darwin-x64": "4.1.18", "@tailwindcss/oxide-freebsd-x64": "4.1.18", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18", "@tailwindcss/oxide-linux-arm64-musl": "4.1.18", "@tailwindcss/oxide-linux-x64-gnu": "4.1.18", "@tailwindcss/oxide-linux-x64-musl": "4.1.18", "@tailwindcss/oxide-wasm32-wasi": "4.1.18", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18", "@tailwindcss/oxide-win32-x64-msvc": "4.1.18" } }, "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A=="],
"@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.18", "", { "os": "android", "cpu": "arm64" }, "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q=="],
"@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.18", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A=="],
"@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.18", "", { "os": "darwin", "cpu": "x64" }, "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw=="],
"@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.18", "", { "os": "freebsd", "cpu": "x64" }, "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA=="],
"@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18", "", { "os": "linux", "cpu": "arm" }, "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA=="],
"@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.18", "", { "os": "linux", "cpu": "arm64" }, "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw=="],
"@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.18", "", { "os": "linux", "cpu": "arm64" }, "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg=="],
"@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.18", "", { "os": "linux", "cpu": "x64" }, "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g=="],
"@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.18", "", { "os": "linux", "cpu": "x64" }, "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ=="],
"@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.18", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.0", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.4.0" }, "cpu": "none" }, "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA=="],
"@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.18", "", { "os": "win32", "cpu": "arm64" }, "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA=="],
"@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.18", "", { "os": "win32", "cpu": "x64" }, "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q=="],
"@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.18", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "postcss": "^8.4.41", "tailwindcss": "4.1.18" } }, "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g=="],
"@types/linkify-it": ["@types/linkify-it@3.0.5", "", {}, "sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw=="],
"@types/markdown-it": ["@types/markdown-it@12.2.3", "", { "dependencies": { "@types/linkify-it": "*", "@types/mdurl": "*" } }, "sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ=="],
"@types/mdurl": ["@types/mdurl@2.0.0", "", {}, "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg=="],
"@types/node": ["@types/node@25.0.10", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg=="],
"@types/react": ["@types/react@19.2.9", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA=="],
"@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
"@vscode/codicons": ["@vscode/codicons@0.0.44", "", {}, "sha512-F7qPRumUK3EHjNdopfICLGRf3iNPoZQt+McTHAn4AlOWPB3W2kL4H0S7uqEqbyZ6rCxaeDjpAn3MCUnwTu/VJQ=="],
"argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
"autoprefixer": ["autoprefixer@10.4.23", "", { "dependencies": { "browserslist": "^4.28.1", "caniuse-lite": "^1.0.30001760", "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA=="],
"baseline-browser-mapping": ["baseline-browser-mapping@2.9.17", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-agD0MgJFUP/4nvjqzIB29zRPUuCF7Ge6mEv9s8dHrtYD7QWXRcx75rOADE/d5ah1NI+0vkDl0yorDd5U852IQQ=="],
"browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="],
"caniuse-lite": ["caniuse-lite@1.0.30001766", "", {}, "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA=="],
"client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
"csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
"detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
"electron-to-chromium": ["electron-to-chromium@1.5.278", "", {}, "sha512-dQ0tM1svDRQOwxnXxm+twlGTjr9Upvt8UFWAgmLsxEzFQxhbti4VwxmMjsDxVC51Zo84swW7FVCXEV+VAkhuPw=="],
"enhanced-resolve": ["enhanced-resolve@5.18.4", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q=="],
"escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
"fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
"graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
"jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
"js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
"lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="],
"lightningcss-android-arm64": ["lightningcss-android-arm64@1.30.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A=="],
"lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA=="],
"lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ=="],
"lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA=="],
"lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.2", "", { "os": "linux", "cpu": "arm" }, "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA=="],
"lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A=="],
"lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA=="],
"lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w=="],
"lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA=="],
"lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ=="],
"lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],
"magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
"nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
"next": ["next@16.1.4", "", { "dependencies": { "@next/env": "16.1.4", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.1.4", "@next/swc-darwin-x64": "16.1.4", "@next/swc-linux-arm64-gnu": "16.1.4", "@next/swc-linux-arm64-musl": "16.1.4", "@next/swc-linux-x64-gnu": "16.1.4", "@next/swc-linux-x64-musl": "16.1.4", "@next/swc-win32-arm64-msvc": "16.1.4", "@next/swc-win32-x64-msvc": "16.1.4", "sharp": "^0.34.4" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-gKSecROqisnV7Buen5BfjmXAm7Xlpx9o2ueVQRo5DxQcjC8d330dOM1xiGWc2k3Dcnz0In3VybyRPOsudwgiqQ=="],
"node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
"postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
"postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
"prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
"react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],
"react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],
"scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
"semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
"sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
"styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "peerDependencies": { "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" } }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
"tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
"tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],
"tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
"typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
"undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
"update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
"@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.8.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg=="],
"@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
"@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.1.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ=="],
"@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.1", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@tybys/wasm-util": "^0.10.1" }, "bundled": true }, "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A=="],
"@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
"@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
"next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
}
}
packages/kilo-docs/components/Callout.tsx
+115
View File
@@ -0,0 +1,115 @@
import * as React from "react"
type CalloutType = "generic" | "note" | "tip" | "info" | "warning" | "danger"
interface CalloutProps {
type?: CalloutType
title?: string
collapsed?: boolean
children: React.ReactNode
}
const typeConfig: Record<
CalloutType,
{
icon: string | null
defaultTitle: string | null
borderColor: string
bgColor: string
titleColor: string
iconColor: string
}
> = {
generic: {
icon: null,
defaultTitle: null,
borderColor: "border-l-gray-300 dark:border-l-gray-600",
bgColor: "bg-gray-50 dark:bg-gray-800/50",
titleColor: "text-gray-700 dark:text-gray-300",
iconColor: "text-gray-400",
},
note: {
icon: "📝",
defaultTitle: "Note",
borderColor: "border-l-gray-500",
bgColor: "bg-gray-50 dark:bg-gray-800/50",
titleColor: "text-gray-700 dark:text-gray-300",
iconColor: "text-gray-500",
},
tip: {
icon: "💡",
defaultTitle: "Tip",
borderColor: "border-l-green-500",
bgColor: "bg-green-50 dark:bg-green-900/20",
titleColor: "text-green-700 dark:text-green-400",
iconColor: "text-green-500",
},
info: {
icon: "ℹ️",
defaultTitle: "Info",
borderColor: "border-l-blue-500",
bgColor: "bg-blue-50 dark:bg-blue-900/20",
titleColor: "text-blue-700 dark:text-blue-400",
iconColor: "text-blue-500",
},
warning: {
icon: "⚠️",
defaultTitle: "Warning",
borderColor: "border-l-yellow-500",
bgColor: "bg-yellow-50 dark:bg-yellow-900/20",
titleColor: "text-yellow-700 dark:text-yellow-400",
iconColor: "text-yellow-500",
},
danger: {
icon: "🚨",
defaultTitle: "Danger",
borderColor: "border-l-red-500",
bgColor: "bg-red-50 dark:bg-red-900/20",
titleColor: "text-red-700 dark:text-red-400",
iconColor: "text-red-500",
},
}
export function Callout({ type = "note", title, collapsed = false, children }: CalloutProps) {
const [isExpanded, setIsExpanded] = React.useState(!collapsed)
const config = typeConfig[type]
const displayTitle = title ?? config.defaultTitle
const showHeader = displayTitle || config.icon
// If collapsed prop is set, make the header clickable
if (collapsed) {
return (
<div className={`my-4 border-l-4 ${config.borderColor} ${config.bgColor} rounded-r-lg p-4`}>
{showHeader && (
<button
type="button"
onClick={() => setIsExpanded(!isExpanded)}
className={`flex items-center gap-2 font-semibold ${config.titleColor} w-full text-left cursor-pointer ${isExpanded ? "mb-2" : ""}`}
aria-expanded={isExpanded}>
<span
className={`transition-transform duration-200 ${isExpanded ? "rotate-90" : ""}`}
aria-hidden="true">
▶
</span>
{config.icon && <span className={config.iconColor}>{config.icon}</span>}
{displayTitle && <span className="uppercase text-sm tracking-wide">{displayTitle}</span>}
</button>
)}
{isExpanded && <div className="text-gray-700 dark:text-gray-300 [&>p]:m-0">{children}</div>}
</div>
)
}
// Default non-collapsible behavior
return (
<div className={`my-4 border-l-4 ${config.borderColor} ${config.bgColor} rounded-r-lg p-4`}>
{showHeader && (
<div className={`flex items-center gap-2 font-semibold ${config.titleColor} mb-2`}>
{config.icon && <span className={config.iconColor}>{config.icon}</span>}
{displayTitle && <span className="uppercase text-sm tracking-wide">{displayTitle}</span>}
</div>
)}
<div className="text-gray-700 dark:text-gray-300 [&>p]:m-0">{children}</div>
</div>
)
}
packages/kilo-docs/components/CodeBlock.tsx
+32
View File
@@ -0,0 +1,32 @@
import Prism from "prismjs"
import * as React from "react"
export function CodeBlock({ children, "data-language": language }) {
const ref = React.useRef(null)
React.useEffect(() => {
if (ref.current) Prism.highlightElement(ref.current, false)
}, [children])
return (
<div className="code" aria-live="polite">
<pre ref={ref} className={`language-${language}`}>
{children}
</pre>
<style jsx>
{`
.code {
position: relative;
}
/* Override Prism styles */
.code :global(pre[class*="language-"]) {
text-shadow: none;
border-radius: 4px;
}
`}
</style>
</div>
)
}
packages/kilo-docs/components/Codicon.tsx
+22
View File
@@ -0,0 +1,22 @@
import React from "react"
import "@vscode/codicons/dist/codicon.css"
interface CodiconProps {
name: string
size?: string
className?: string
}
export function Codicon({ name, size = "1em", className = "" }: CodiconProps) {
return (
<i
className={`codicon codicon-${name} ${className}`.trim()}
style={{
fontSize: size,
verticalAlign: "middle",
display: "inline",
}}
aria-hidden="true"
/>
)
}
packages/kilo-docs/components/CopyPageButton.tsx
+145
View File
@@ -0,0 +1,145 @@
import React, { useState, useEffect } from "react"
import { useRouter } from "next/router"
interface CopyPageButtonProps {
className?: string
}
export function CopyPageButton({ className }: CopyPageButtonProps) {
const router = useRouter()
const [copied, setCopied] = useState(false)
const [isLoading, setIsLoading] = useState(false)
// Reset copied state after 3 seconds
useEffect(() => {
if (copied) {
const timer = setTimeout(() => {
setCopied(false)
}, 3000)
return () => clearTimeout(timer)
}
}, [copied])
const handleCopy = async () => {
if (copied || isLoading) return
setIsLoading(true)
try {
// Fetch the raw markdown file based on current route
// The route path maps to pages/<path>.md
const path = router.asPath.split("#")[0].split("?")[0] // Remove hash and query params
const mdPath = path === "/" ? "/index" : path
// Fetch the raw markdown content from the API route
const response = await fetch(`/docs/api/raw-markdown?path=${encodeURIComponent(mdPath)}`)
if (!response.ok) {
throw new Error("Failed to fetch markdown")
}
const markdown = await response.text()
await navigator.clipboard.writeText(markdown)
setCopied(true)
} catch (error) {
console.error("Failed to copy page:", error)
// Even on error, show some feedback
setCopied(true)
} finally {
setIsLoading(false)
}
}
return (
<>
<button
onClick={handleCopy}
disabled={copied || isLoading}
className={`copy-page-button ${copied ? "copied" : ""} ${className || ""}`}
aria-label={copied ? "Copied" : "Copy page markdown"}
title="Copy page as markdown for use with LLMs">
{copied ? (
<>
<CheckIcon />
<span>Copied</span>
</>
) : (
<>
<CopyIcon />
<span>Copy page</span>
</>
)}
</button>
<style jsx>{`
.copy-page-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
font-weight: 500;
font-family: inherit;
color: var(--text-secondary);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.copy-page-button:hover:not(:disabled) {
background: var(--bg-tertiary, var(--bg-secondary));
color: var(--text-brand);
border-color: var(--text-brand);
}
.copy-page-button:disabled {
cursor: default;
}
.copy-page-button.copied {
color: var(--success-color, #22c55e);
border-color: var(--success-color, #22c55e);
background: var(--success-bg, rgba(34, 197, 94, 0.1));
}
`}</style>
</>
)
}
// Copy icon (two overlapping rectangles)
function CopyIcon() {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round">
<rect x="5" y="5" width="9" height="9" rx="1.5" />
<path d="M2 10V3.5A1.5 1.5 0 0 1 3.5 2H10" />
</svg>
)
}
// Check icon for copied state
function CheckIcon() {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round">
<path d="M3 8.5L6.5 12L13 4" />
</svg>
)
}
packages/kilo-docs/components/Heading.tsx
+12
View File
@@ -0,0 +1,12 @@
import * as React from "react"
export function Heading({ id = "", level = 1, children, className }) {
return React.createElement(
`h${level}`,
{
id,
className: ["heading", className].filter(Boolean).join(" "),
},
children,
)
}
packages/kilo-docs/components/Icon.tsx
+49
View File
@@ -0,0 +1,49 @@
import React, { useEffect, useState } from "react"
interface IconProps {
src: string
srcDark?: string
alt?: string
size?: string
}
export function Icon({ src, srcDark, alt = "icon", size = "1.2em" }: IconProps) {
const [isDark, setIsDark] = useState(false)
useEffect(() => {
// Check initial dark mode state
const checkDarkMode = () => {
setIsDark(document.documentElement.classList.contains("dark"))
}
checkDarkMode()
// Watch for dark mode changes
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === "class") {
checkDarkMode()
}
})
})
observer.observe(document.documentElement, { attributes: true })
return () => observer.disconnect()
}, [])
const imageSrc = isDark && srcDark ? srcDark : src
return (
<img
src={imageSrc}
alt={alt}
style={{
height: size,
width: "auto",
verticalAlign: "middle",
display: "inline",
}}
/>
)
}
packages/kilo-docs/components/Image.tsx
+38
View File
@@ -0,0 +1,38 @@
import React from "react"
interface ImageProps {
src: string
alt: string
width?: string
height?: string
caption?: string
}
export function Image({ src, alt, width, height, caption }: ImageProps) {
const imgStyle: React.CSSProperties = {
maxWidth: "100%",
height: "auto",
}
if (width) imgStyle.width = width
if (height) imgStyle.height = height
return (
<figure style={{ margin: "1.5rem 0", maxWidth: "100%", overflow: "hidden" }}>
<img src={src} alt={alt} style={imgStyle} />
{caption && (
<figcaption
style={{
display: "table-caption",
captionSide: "bottom",
fontStyle: "italic",
textAlign: "center",
marginTop: "0.5rem",
color: "var(--gray-600, #6b7280)",
}}>
{caption}
</figcaption>
)}
</figure>
)
}
packages/kilo-docs/components/KiloCodeIcon.tsx
+10
View File
@@ -0,0 +1,10 @@
import React from "react"
import { Icon } from "./Icon"
interface KiloCodeIconProps {
size?: string
}
export function KiloCodeIcon({ size = "1.2em" }: KiloCodeIconProps) {
return <Icon src="/docs/img/kilo-v1.svg" srcDark="/docs/img/kilo-v1-white.svg" alt="Kilo Code Icon" size={size} />
}
packages/kilo-docs/components/SideNav.tsx
+480
View File
@@ -0,0 +1,480 @@
import React, { useState, useEffect } from "react"
import { useRouter } from "next/router"
import Link from "next/link"
import { SectionNav } from "../lib/types"
import { Nav } from "../lib/nav"
// Define navigation items for each major section
const sectionNavItems: SectionNav = {
"getting-started": Nav.GettingStartedNav,
"code-with-ai": Nav.CodeWithAiNav,
collaborate: Nav.CollaborateNav,
automate: Nav.AutomateNav,
"deploy-secure": Nav.DeploySecureNav,
contributing: Nav.ContributingNav,
"ai-providers": Nav.AiProvidersNav,
}
// Main nav items with their section keys
const mainNavItems = [
{ label: "Home", href: "/", sectionKey: null },
{ label: "Get Started", href: "/getting-started", sectionKey: "getting-started" },
{ label: "Code with AI", href: "/code-with-ai", sectionKey: "code-with-ai" },
{ label: "Collaborate", href: "/collaborate", sectionKey: "collaborate" },
{ label: "Automate", href: "/automate", sectionKey: "automate" },
{ label: "Deploy & Secure", href: "/deploy-secure", sectionKey: "deploy-secure" },
{ label: "Contributing", href: "/contributing", sectionKey: "contributing" },
]
function getCurrentSection(pathname: string): string | null {
const sectionKeys = Object.keys(sectionNavItems)
for (const section of sectionKeys) {
if (pathname.startsWith(`/${section}`)) {
return section
}
}
return null
}
function getSectionLabel(sectionKey: string): string {
const item = mainNavItems.find((nav) => nav.sectionKey === sectionKey)
return item?.label || sectionKey
}
// Chevron icons as components
const ChevronRight = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
<path d="M6 4L10 8L6 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)
const ChevronLeft = () => (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
<path
d="M10 4L6 8L10 12"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
interface SideNavProps {
isMobileOpen?: boolean
onMobileClose?: () => void
}
export function SideNav({ isMobileOpen = false, onMobileClose }: SideNavProps) {
const router = useRouter()
const currentSection = getCurrentSection(router.pathname)
// Track which view is shown: 'main' or 'section'
const [activeView, setActiveView] = useState<"main" | "section">(currentSection ? "section" : "main")
// Track which section is being viewed (for animation purposes)
const [viewedSection, setViewedSection] = useState<string | null>(currentSection)
// Update view when route changes
useEffect(() => {
const newSection = getCurrentSection(router.pathname)
if (newSection) {
setViewedSection(newSection)
setActiveView("section")
} else {
setActiveView("main")
}
}, [router.pathname])
const handleLinkClick = () => {
if (onMobileClose) {
onMobileClose()
}
}
const handleSectionClick = (sectionKey: string | null) => {
if (sectionKey) {
setViewedSection(sectionKey)
setActiveView("section")
}
}
const handleBackClick = () => {
setActiveView("main")
}
const sectionItems = viewedSection ? sectionNavItems[viewedSection] || [] : []
const sectionLabel = viewedSection ? getSectionLabel(viewedSection) : ""
// Main navigation panel
const mainNavPanel = (
<div className="nav-panel main-panel">
{mainNavItems.map((item) => {
const isActive = item.sectionKey ? router.pathname.startsWith(item.href) : router.pathname === item.href
const hasSubItems = item.sectionKey && sectionNavItems[item.sectionKey]
if (hasSubItems) {
return (
<button
key={item.href}
onClick={() => handleSectionClick(item.sectionKey)}
className={`nav-item nav-item-button ${isActive ? "active" : ""}`}>
<span>{item.label}</span>
<span className="nav-arrow">
<ChevronRight />
</span>
</button>
)
}
return (
<Link
key={item.href}
href={item.href}
onClick={handleLinkClick}
className={`nav-item ${isActive ? "active" : ""}`}>
<span>{item.label}</span>
</Link>
)
})}
<style jsx>{`
.nav-panel {
width: 50%;
height: 100%;
overflow-y: auto;
padding: 1rem;
flex-shrink: 0;
}
.nav-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
color: var(--text-color);
border-radius: 0.5rem;
transition:
background-color 0.15s ease,
color 0.15s ease;
cursor: pointer;
}
.nav-item-button {
background: none;
border: none;
text-align: left;
font-family: inherit;
}
.nav-item:hover {
background-color: var(--bg-secondary);
}
.nav-item.active {
color: var(--accent-color);
}
.nav-arrow {
color: var(--text-secondary);
opacity: 0.6;
transition: opacity 0.15s ease;
display: flex;
align-items: center;
}
.nav-item:hover .nav-arrow {
opacity: 1;
}
`}</style>
</div>
)
// Section navigation panel
const sectionNavPanel = (
<div className="nav-panel section-panel">
<button className="back-button mobile-only" onClick={handleBackClick}>
<span className="back-arrow">
<ChevronLeft />
</span>
<span>{sectionLabel}</span>
</button>
<div className="section-content">
{sectionItems.map((group) => (
<div key={group.title} className="nav-group">
<span className="nav-group-title">{group.title}</span>
<ul className="nav-links">
{group.links.map((link) => {
const active = router.pathname === link.href
return (
<li key={link.href} className={active ? "active" : ""}>
<Link href={link.href} onClick={handleLinkClick}>
{link.children}
</Link>
</li>
)
})}
</ul>
</div>
))}
</div>
<style jsx>{`
.nav-panel {
width: 50%;
height: 100%;
overflow-y: auto;
padding: 1rem;
flex-shrink: 0;
}
.back-button {
display: none;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-color);
background: none;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.15s ease;
font-family: inherit;
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.back-button.mobile-only {
display: flex;
}
}
.back-button:hover {
background-color: var(--bg-secondary);
}
.back-arrow {
color: var(--text-secondary);
display: flex;
align-items: center;
}
.section-content {
padding-left: 0.25rem;
}
.nav-group {
margin-bottom: 1.25rem;
}
.nav-group-title {
display: block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.5rem 0.75rem;
color: var(--text-secondary);
}
.nav-links {
padding: 0;
margin: 0;
}
.nav-links li {
list-style: none;
margin: 0;
}
.nav-links li :global(a) {
display: block;
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
text-decoration: none;
color: var(--text-secondary);
border-radius: 0.375rem;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.nav-links li :global(a:hover) {
background-color: var(--bg-secondary);
color: var(--text-color);
}
.nav-links li.active :global(a) {
background-color: var(--bg-secondary);
color: var(--accent-color);
font-weight: 500;
}
`}</style>
</div>
)
const navContent = (
<div className={`sliding-nav ${activeView === "section" ? "show-section" : "show-main"}`}>
{mainNavPanel}
{sectionNavPanel}
<style jsx>{`
.sliding-nav {
display: flex;
width: 200%;
height: 100%;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sliding-nav.show-main {
transform: translateX(0);
}
.sliding-nav.show-section {
transform: translateX(-50%);
}
/* On desktop, always show section panel when in a section */
@media (min-width: 769px) {
.sliding-nav {
transition: none;
}
.sliding-nav.show-section {
transform: translateX(-50%);
}
}
`}</style>
</div>
)
return (
<>
{/* Desktop sidebar */}
<nav className="sidenav sidenav-desktop">{navContent}</nav>
{/* Mobile overlay */}
<div className={`sidenav-mobile-overlay ${isMobileOpen ? "open" : ""}`} onClick={onMobileClose} />
{/* Mobile sidebar drawer */}
<nav className={`sidenav sidenav-mobile ${isMobileOpen ? "open" : ""}`}>{navContent}</nav>
<style jsx>{`
.sidenav {
background: var(--bg-color);
overflow: hidden;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
/* Desktop styles */
.sidenav-desktop {
position: sticky;
top: var(--top-nav-height);
height: calc(100vh - var(--top-nav-height));
flex: 0 0 260px;
border-right: 1px solid var(--border-color);
}
/* Mobile overlay */
.sidenav-mobile-overlay {
display: none;
}
/* Mobile drawer */
.sidenav-mobile {
display: none;
}
/* Mobile styles */
@media (max-width: 768px) {
.sidenav-desktop {
display: none;
}
.sidenav-mobile-overlay {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 40;
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.sidenav-mobile-overlay.open {
opacity: 1;
visibility: visible;
}
.sidenav-mobile {
display: block;
position: fixed;
top: var(--top-nav-height);
left: 0;
width: 300px;
height: calc(100vh - var(--top-nav-height));
z-index: 50;
transform: translateX(-100%);
transition: transform 0.3s ease;
border-right: 1px solid var(--border-color);
}
.sidenav-mobile.open {
transform: translateX(0);
}
}
`}</style>
{/* Global styles for elements that styled-jsx can't reach */}
<style jsx global>{`
.nav-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
color: var(--text-color);
border-radius: 0.5rem;
transition:
background-color 0.15s ease,
color 0.15s ease;
cursor: pointer;
}
.nav-item-button {
background: none;
border: none;
text-align: left;
font-family: inherit;
}
.nav-item:hover {
background-color: var(--bg-secondary);
}
.nav-item.active {
color: var(--accent-color);
}
`}</style>
</>
)
}
packages/kilo-docs/components/Table.tsx
+66
View File
@@ -0,0 +1,66 @@
import React from "react"
interface TableProps {
children: React.ReactNode
}
export function Table({ children }: TableProps) {
return (
<div className="overflow-x-auto my-6 border border-neutral-300 dark:border-neutral-700 rounded-lg">
<table className="w-full border-collapse text-sm">{children}</table>
</div>
)
}
interface THeadProps {
children: React.ReactNode
}
export function THead({ children }: THeadProps) {
return <thead className="bg-neutral-100 dark:bg-neutral-800/50">{children}</thead>
}
interface TBodyProps {
children: React.ReactNode
}
export function TBody({ children }: TBodyProps) {
return <tbody className="bg-white dark:bg-neutral-900/50">{children}</tbody>
}
interface TrProps {
children: React.ReactNode
}
export function Tr({ children }: TrProps) {
return <tr className="border-b border-neutral-300 dark:border-neutral-700 last:border-b-0">{children}</tr>
}
interface ThProps {
children: React.ReactNode
width?: string
}
export function Th({ children, width }: ThProps) {
return (
<th
className="px-4 py-2.5 text-left text-sm font-medium text-neutral-700 dark:text-neutral-300"
style={{ width }}>
{children}
</th>
)
}
interface TdProps {
children: React.ReactNode
colspan?: number
rowspan?: number
}
export function Td({ children, colspan, rowspan }: TdProps) {
return (
<td className="px-4 py-3 text-neutral-600 dark:text-neutral-400" colSpan={colspan} rowSpan={rowspan}>
{children}
</td>
)
}
packages/kilo-docs/components/TableOfContents.tsx
+74
View File
@@ -0,0 +1,74 @@
import React from "react"
import Link from "next/link"
export function TableOfContents({ toc }) {
const items = toc.filter((item) => item.id && (item.level === 2 || item.level === 3))
if (items.length <= 1) {
return null
}
return (
<nav className="toc">
<ul className="flex column">
{items.map((item) => {
const href = `#${item.id}`
const active = typeof window !== "undefined" && window.location.hash === href
return (
<li
key={item.title}
className={[active ? "active" : undefined, item.level === 3 ? "padded" : undefined]
.filter(Boolean)
.join(" ")}>
<Link href={href}>{item.title}</Link>
</li>
)
})}
</ul>
<style jsx>
{`
nav {
position: sticky;
top: 0;
max-height: calc(100vh - var(--top-nav-height) - 6rem);
width: 100%;
align-self: flex-start;
margin-bottom: 1rem;
padding: 0.5rem 0 0;
border-left: 1px solid var(--border-color);
transition: border-color 0.2s ease;
overflow-y: auto;
}
ul {
margin: 0;
padding-left: 1rem;
display: flex;
flex-direction: column;
}
li {
list-style-type: none;
margin: 0 0 1rem;
}
li :global(a) {
text-decoration: none;
color: var(--text-secondary);
}
li :global(a:hover),
li.active :global(a) {
text-decoration: underline;
}
li.padded {
padding-left: 1rem;
}
/* Hide on tablet and mobile */
@media (max-width: 1024px) {
nav {
display: none;
}
}
`}
</style>
</nav>
)
}
packages/kilo-docs/components/Tabs.tsx
+43
View File
@@ -0,0 +1,43 @@
import React, { useState, Children, isValidElement, ReactNode, ReactElement } from "react"
interface TabProps {
label: string
children: ReactNode
}
interface TabsProps {
children: ReactNode
}
export function Tab({ children }: TabProps) {
return <>{children}</>
}
export function Tabs({ children }: TabsProps) {
const [activeIndex, setActiveIndex] = useState(0)
const tabs = Children.toArray(children).filter(
(child): child is ReactElement<TabProps> =>
isValidElement(child) && (child.type === Tab || (child.props as any)?.label !== undefined),
)
return (
<div className="tabs-container my-6 border border-neutral-300 dark:border-neutral-700 rounded-lg overflow-hidden">
<div className="tabs-header flex border-b border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800/50 overflow-x-auto">
{tabs.map((tab, index) => (
<button
key={index}
className={`px-2 py-2 text-xs sm:px-4 sm:py-2.5 sm:text-sm font-medium transition-colors whitespace-nowrap ${
activeIndex === index
? "bg-white dark:bg-neutral-900 text-yellow-800 dark:text-yellow-300 border-b-2 border-yellow-800 dark:border-yellow-300 -mb-[1px]"
: "text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700/50"
}`}
onClick={() => setActiveIndex(index)}>
{tab.props.label}
</button>
))}
</div>
<div className="tabs-content p-3 sm:p-4 bg-white dark:bg-neutral-900/50">{tabs[activeIndex]}</div>
</div>
)
}
packages/kilo-docs/components/ThemeToggle.tsx
+117
View File
@@ -0,0 +1,117 @@
import React, { useEffect, useState } from "react"
type Theme = "light" | "dark" | "system"
export function ThemeToggle() {
const [theme, setTheme] = useState<Theme>("system")
const [mounted, setMounted] = useState(false)
// On mount, read the preference from localStorage or default to 'system'
useEffect(() => {
setMounted(true)
const storedTheme = localStorage.getItem("theme") as Theme | null
if (storedTheme) {
setTheme(storedTheme)
}
}, [])
// Apply the theme to the document
useEffect(() => {
if (!mounted) return
const root = document.documentElement
if (theme === "system") {
localStorage.removeItem("theme")
const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches
root.classList.toggle("dark", systemDark)
} else {
localStorage.setItem("theme", theme)
root.classList.toggle("dark", theme === "dark")
}
}, [theme, mounted])
// Listen for system preference changes
useEffect(() => {
if (!mounted) return
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
const handleChange = (e: MediaQueryListEvent) => {
if (theme === "system") {
document.documentElement.classList.toggle("dark", e.matches)
}
}
mediaQuery.addEventListener("change", handleChange)
return () => mediaQuery.removeEventListener("change", handleChange)
}, [theme, mounted])
const cycleTheme = () => {
const themes: Theme[] = ["system", "light", "dark"]
const currentIndex = themes.indexOf(theme)
const nextIndex = (currentIndex + 1) % themes.length
setTheme(themes[nextIndex])
}
// Avoid hydration mismatch by not rendering until mounted
if (!mounted) {
return (
<button className="theme-toggle" aria-label="Toggle theme" style={{ width: "32px", height: "32px" }}>
<span style={{ opacity: 0 }}>🌙</span>
</button>
)
}
const getIcon = () => {
if (theme === "system") {
return "💻"
}
if (theme === "dark") {
return "🌙"
}
return "☀️"
}
const getLabel = () => {
if (theme === "system") {
return "Using system theme"
}
if (theme === "dark") {
return "Dark mode"
}
return "Light mode"
}
return (
<>
<button onClick={cycleTheme} className="theme-toggle" aria-label={getLabel()} title={getLabel()}>
<span>{getIcon()}</span>
</button>
<style jsx>{`
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--border-color);
border-radius: 6px;
background: var(--bg-secondary);
cursor: pointer;
font-size: 16px;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
.theme-toggle:hover {
background: var(--border-color);
}
.theme-toggle span {
line-height: 1;
}
`}</style>
</>
)
}
packages/kilo-docs/components/TopNav.tsx
+501
View File
@@ -0,0 +1,501 @@
import React, { useState, useRef, useEffect } from "react"
import Link from "next/link"
import { useRouter } from "next/router"
import { ThemeToggle } from "./ThemeToggle"
interface NavItem {
label: string
href: string
}
interface DropdownItem {
label: string
href: string
description?: string
}
interface DropdownMenuProps {
label: string
items: DropdownItem[]
isOpen: boolean
onToggle: () => void
onClose: () => void
}
const mainNavItems: NavItem[] = [
{ label: "Get Started", href: "/getting-started" },
{ label: "Code with AI", href: "/code-with-ai" },
{ label: "Collaborate", href: "/collaborate" },
{ label: "Automate", href: "/automate" },
{ label: "Deploy & Secure", href: "/deploy-secure" },
]
const contributingItems: DropdownItem[] = [
{ label: "Contributing Guide", href: "/contributing", description: "How to contribute to Kilo Code" },
{ label: "Code of Conduct", href: "/docs/code-of-conduct", description: "Our community guidelines" },
{ label: "GitHub Repository", href: "https://github.com/Kilo-Org/", description: "View source and issues" },
{ label: "Discord Community", href: "https://kilo.ai/discord", description: "Join our community" },
]
const helpItems: DropdownItem[] = [
{ label: "Documentation", href: "/", description: "Browse all documentation" },
{ label: "FAQ", href: "/getting-started/faq", description: "Frequently asked questions" },
{ label: "Support", href: "/support", description: "Get help from the team" },
{ label: "Changelog", href: "/changelog", description: "Latest updates and releases" },
]
function ChevronDownIcon({ className }: { className?: string }) {
return (
<svg
className={className}
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2.5 4.5L6 8L9.5 4.5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
function SearchIcon({ className }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7.25 12.5C10.1495 12.5 12.5 10.1495 12.5 7.25C12.5 4.35051 10.1495 2 7.25 2C4.35051 2 2 4.35051 2 7.25C2 10.1495 4.35051 12.5 7.25 12.5Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 11L14 14"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
function SparkleIcon({ className }: { className?: string }) {
return (
<svg
className={className}
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8 1V3M8 13V15M3 8H1M15 8H13M12.5 3.5L11 5M5 11L3.5 12.5M12.5 12.5L11 11M5 5L3.5 3.5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
function HamburgerIcon({ isOpen }: { isOpen: boolean }) {
return (
<div className={`hamburger ${isOpen ? "open" : ""}`}>
<span />
<span />
<span />
</div>
)
}
function DropdownMenu({ label, items, isOpen, onToggle, onClose }: DropdownMenuProps) {
const dropdownRef = useRef<HTMLDivElement>(null)
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
onClose()
}
}
if (isOpen) {
document.addEventListener("mousedown", handleClickOutside)
}
return () => {
document.removeEventListener("mousedown", handleClickOutside)
}
}, [isOpen, onClose])
return (
<div ref={dropdownRef} className="relative">
<button
onClick={onToggle}
className="flex items-center gap-1 px-3 py-2 text-sm font-medium transition-colors hover:text-[var(--text-color)]"
style={{ color: "var(--text-secondary)" }}>
{label}
<ChevronDownIcon className={`transition-transform ${isOpen ? "rotate-180" : ""}`} />
</button>
{isOpen && (
<div
className="absolute right-0 top-full mt-2 w-64 rounded-lg border shadow-lg z-50"
style={{
backgroundColor: "var(--bg-color)",
borderColor: "var(--border-color)",
}}>
<div className="py-2">
{items.map((item) => (
<Link
key={item.href}
href={item.href}
onClick={onClose}
className="block px-4 py-2.5 hover:bg-[var(--bg-secondary)] transition-colors">
<span className="block text-sm font-medium" style={{ color: "var(--text-color)" }}>
{item.label}
</span>
{item.description && (
<span className="block text-xs mt-0.5" style={{ color: "var(--text-secondary)" }}>
{item.description}
</span>
)}
</Link>
))}
</div>
</div>
)}
</div>
)
}
function NavTab({ item, isActive }: { item: NavItem; isActive: boolean }) {
return (
<Link
href={item.href}
className={`relative px-1 py-3 text-sm font-medium transition-colors ${
isActive ? "text-indigo-600 dark:text-[#F8F675]" : "hover:text-[var(--text-color)]"
}`}
style={{ color: isActive ? "var(--text-brand)" : "var(--text-secondary)" }}>
{item.label}
{isActive && <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600 dark:bg-[#F8F675]" />}
</Link>
)
}
interface TopNavProps {
onMobileMenuToggle?: () => void
isMobileMenuOpen?: boolean
showMobileMenuButton?: boolean
}
export function TopNav({ onMobileMenuToggle, isMobileMenuOpen = false, showMobileMenuButton = true }: TopNavProps) {
const router = useRouter()
const [openDropdown, setOpenDropdown] = useState<string | null>(null)
const handleDropdownToggle = (name: string) => {
setOpenDropdown(openDropdown === name ? null : name)
}
const handleDropdownClose = () => {
setOpenDropdown(null)
}
const isActiveTab = (href: string) => {
if (href === "/docs") {
return router.pathname === "/docs" || router.pathname === "/docs/index"
}
return router.pathname.startsWith(href)
}
return (
<header className="top-header">
{/* Top bar */}
<div className="top-bar">
{/* Mobile menu button */}
{showMobileMenuButton && (
<button className="mobile-menu-btn" onClick={onMobileMenuToggle} aria-label="Toggle menu">
<HamburgerIcon isOpen={isMobileMenuOpen} />
</button>
)}
<Link href="/" className="logo-link flex gap-2 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
className="logo-icon"
aria-label="Kilo Code Logo">
<path
fill="currentColor"
d="M0,0v100h100V0H0ZM92.5925926,92.5925926H7.4074074V7.4074074h85.1851852v85.1851852ZM61.1111044,71.9096084h9.2592593v7.4074074h-11.6402116l-5.026455-5.026455v-11.6402116h7.4074074v9.2592593ZM77.7777711,71.9096084h-7.4074074v-9.2592593h-9.2592593v-7.4074074h11.6402116l5.026455,5.026455v11.6402116ZM46.2962963,61.1114207h-7.4074074v-7.4074074h7.4074074v7.4074074ZM22.2222222,53.7040133h7.4074074v16.6666667h16.6666667v7.4074074h-19.047619l-5.026455-5.026455v-19.047619ZM77.7777711,38.8888889v7.4074074h-24.0740741v-7.4074074h8.2781918v-9.2592593h-8.2781918v-7.4074074h10.6591442l5.026455,5.026455v11.6402116h8.3884749ZM29.6296296,30.5555556h9.2592593l7.4074074,7.4074074v8.3333333h-7.4074074v-8.3333333h-9.2592593v8.3333333h-7.4074074v-24.0740741h7.4074074v8.3333333ZM46.2962963,30.5555556h-7.4074074v-8.3333333h7.4074074v8.3333333Z"
/>
</svg>
<div>
<span className="logo-text font-brand">Kilo Code</span>
<span className="docs-label">DOCS</span>
</div>
</Link>
{/* Center - Search and Ask AI (desktop only) */}
<div className="search-container desktop-nav">
<button className="search-btn">
<SearchIcon className="w-4 h-4" />
<span>Search</span>
<span className="search-shortcut">/</span>
</button>
<button className="ask-ai-btn">
Ask AI
<SparkleIcon className="w-4 h-4" />
</button>
</div>
<div className="right-actions">
<ThemeToggle />
<Link href="/github" className="github-link desktop-nav">
GitHub
</Link>
<Link href="/sign-in" className="signin-btn desktop-nav">
Sign in
</Link>
</div>
</div>
{/* Secondary nav bar (desktop only) */}
<div className="secondary-bar desktop-nav">
<nav className="main-nav">
{mainNavItems.map((item) => (
<NavTab key={item.href} item={item} isActive={isActiveTab(item.href)} />
))}
</nav>
<div className="dropdown-container">
<DropdownMenu
label="Contributing"
items={contributingItems}
isOpen={openDropdown === "contributing"}
onToggle={() => handleDropdownToggle("contributing")}
onClose={handleDropdownClose}
/>
<DropdownMenu
label="Help"
items={helpItems}
isOpen={openDropdown === "help"}
onToggle={() => handleDropdownToggle("help")}
onClose={handleDropdownClose}
/>
</div>
</div>
<style jsx>{`
.top-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background-color: var(--bg-color);
transition: background-color 0.2s ease;
}
.top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.5rem;
border-bottom: 1px solid var(--border-color);
transition: border-color 0.2s ease;
}
.mobile-menu-btn {
display: none;
align-items: center;
justify-content: center;
padding: 0.5rem;
background: transparent;
border: none;
cursor: pointer;
margin-right: 0.75rem;
}
.logo-link {
align-items: center;
flex-wrap: nowrap;
text-decoration: none;
}
.logo-icon {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
color: var(--text-brand);
}
.logo-text {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.025em;
}
.docs-label {
font-size: 1rem;
font-weight: 300;
margin-left: 0.5rem;
color: var(--text-secondary);
}
.search-container {
display: flex;
align-items: center;
gap: 0.75rem;
}
.search-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--border-color);
background-color: var(--bg-secondary);
color: var(--text-secondary);
font-size: 0.875rem;
min-width: 200px;
cursor: pointer;
transition: border-color 0.15s ease;
}
.search-btn:hover {
border-color: #9ca3af;
}
.search-shortcut {
margin-left: auto;
font-size: 0.75rem;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
border: 1px solid var(--border-color);
font-family: monospace;
}
.ask-ai-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid var(--border-color);
background-color: var(--bg-secondary);
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s ease;
}
.ask-ai-btn:hover {
border-color: #9ca3af;
}
.right-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.github-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
transition: color 0.15s ease;
}
.github-link:hover {
color: var(--text-color);
}
.signin-btn {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.5rem;
border: 1px solid var(--border-color);
color: var(--text-color);
text-decoration: none;
transition: background-color 0.15s ease;
}
.signin-btn:hover {
background-color: var(--bg-secondary);
}
.secondary-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
border-bottom: 1px solid var(--border-color);
transition: border-color 0.2s ease;
}
.main-nav {
display: flex;
align-items: center;
gap: 1.5rem;
}
.dropdown-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Mobile styles */
@media (max-width: 768px) {
.top-bar {
padding: 0.75rem 1rem;
}
.mobile-menu-btn {
display: flex;
}
.logo-icon {
display: none;
}
.docs-label {
display: inline;
}
.desktop-nav {
display: none !important;
}
.right-actions {
gap: 0.5rem;
}
}
/* Tablet styles */
@media (max-width: 1024px) and (min-width: 769px) {
.search-btn {
min-width: 140px;
}
}
`}</style>
</header>
)
}
packages/kilo-docs/components/YouTube.tsx
+91
View File
@@ -0,0 +1,91 @@
import React from "react"
interface YouTubeProps {
url: string
title?: string
caption?: string
}
/**
* Extracts the YouTube video ID from various URL formats
*/
function extractVideoId(url: string): string | null {
const patterns = [
/(?:youtube\.com\/watch\?v=)([^&\s]+)/,
/(?:youtube\.com\/embed\/)([^?\s]+)/,
/(?:youtu\.be\/)([^?\s]+)/,
/(?:youtube\.com\/v\/)([^?\s]+)/,
]
for (const pattern of patterns) {
const match = url.match(pattern)
if (match) {
return match[1]
}
}
return null
}
export function YouTube({ url, title = "YouTube video", caption }: YouTubeProps) {
const videoId = extractVideoId(url)
if (!videoId) {
return (
<div
style={{
padding: "1rem",
backgroundColor: "var(--red-100, #fee2e2)",
color: "var(--red-700, #b91c1c)",
borderRadius: "0.5rem",
margin: "1.5rem 0",
}}>
Invalid YouTube URL: {url}
</div>
)
}
return (
<div
style={{
maxWidth: "640px",
margin: "1.5rem 0",
}}>
<div
style={{
position: "relative",
paddingBottom: "56.25%", // 16:9 aspect ratio
height: 0,
overflow: "hidden",
borderRadius: "0.5rem",
}}>
<iframe
src={`https://www.youtube.com/embed/${videoId}`}
title={title}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
border: "none",
borderRadius: "0.5rem",
}}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
</div>
{caption && (
<figcaption
style={{
fontStyle: "italic",
textAlign: "center",
marginTop: "0.5rem",
color: "var(--gray-600, #6b7280)",
}}>
{caption}
</figcaption>
)}
</div>
)
}
packages/kilo-docs/components/index.js
+15
View File
@@ -0,0 +1,15 @@
export * from "./Callout"
export * from "./CodeBlock"
export * from "./Codicon"
export * from "./CopyPageButton"
export * from "./Heading"
export * from "./Icon"
export * from "./Image"
export * from "./KiloCodeIcon"
export * from "./SideNav"
export * from "./Table"
export * from "./TableOfContents"
export * from "./Tabs"
export * from "./ThemeToggle"
export * from "./TopNav"
export * from "./YouTube"
packages/kilo-docs/docs/advanced-usage/auto-cleanup.md
-275
View File
@@ -1,275 +0,0 @@
# Auto Cleanup
Auto Cleanup automatically manages your task history by removing old tasks to free up disk space and improve performance. Tasks are intelligently classified and retained based on their type and age, ensuring important work is preserved while temporary or experimental tasks are cleaned up.
:::warning Important
Task deletion is permanent and cannot be undone. Deleted tasks are completely removed from disk, including all conversation history, checkpoints, and associated files.
:::
## Overview
As you work with Kilo Code, each task creates files containing conversation history, checkpoints, and other data. Over time, this accumulates and can consume significant disk space. Auto-Cleanup solves this by:
- **Automatically removing old tasks** based on configurable retention periods
- **Preserving important tasks** by classifying them into different types
- **Protecting favorited tasks** from deletion
- **Managing disk usage** without manual intervention
:::info Key Benefits
- **Free up disk space**: Automatically remove old task data
- **Improve performance**: Reduce the size of task history
- **Flexible control**: Configure different retention periods for different task types
- **Safety first**: Favorited tasks can be protected from deletion
- **Manual override**: Run cleanup manually whenever needed
:::
## How Auto-Cleanup Works
Auto-Cleanup uses an intelligent classification system to determine how long each task should be retained:
### Task Classification
Every task is automatically classified into one of these categories:
| Task Type | Description | Default Retention |
| -------------- | ----------------------------------------- | ---------------------------------------- |
| **Favorited** | Tasks you've marked as favorites | Never deleted (or 90 days if configured) |
| **Completed** | Tasks that successfully finished | 30 days |
| **Incomplete** | Tasks that were started but not completed | 7 days |
| **Regular** | Default classification for other tasks | 30 days |
#### Understanding Task Completion
A task is considered "completed" when Kilo Code uses the [`attempt_completion`](../features/tools/attempt-completion) tool to formally mark it as finished. Tasks without this completion marker are classified as incomplete, even if you consider them done. This distinction helps clean up abandoned or experimental tasks more aggressively.
### Cleanup Process
When Auto-Cleanup runs, it:
1. **Scans all tasks** in your task history
2. **Classifies each task** based on its properties and completion status
3. **Checks retention periods** to determine eligibility for deletion
4. **Protects active tasks** currently in use
5. **Deletes eligible tasks** and their associated files
6. **Reports results** including disk space freed
## Configuration
Access Auto-Cleanup settings through the Kilo Code settings panel:
1. Click the gear icon (<i class="codicon codicon-gear"></i>) in Kilo Code
2. Navigate to the **Auto-Cleanup** section (under Checkpoints)
### Enable Auto-Cleanup
<img src="/docs/img/auto-cleanup/settings.png" alt="Auto-Cleanup settings panel" width="600" />
Check the **"Enable automatic task cleanup"** option to activate the feature. When enabled, tasks will be automatically removed based on your retention settings.
### Retention Period Settings
Configure how long different types of tasks are kept before cleanup:
#### Default Retention Period
```
Default: 30 days
Minimum: 1 day
```
Sets the base retention period for regular tasks that don't fall into other categories.
#### Favorited Tasks
**Never delete favorited tasks** (recommended)
When enabled, favorited tasks are preserved indefinitely regardless of age. This is the safest option to prevent accidental deletion of important work.
If disabled, you can set a custom retention period:
```
Default: 90 days
Minimum: 1 day
```
To favorite a task, use the star icon in the task history panel.
#### Completed Tasks
```
Default: 30 days
Minimum: 1 day
```
Tasks successfully completed via the [`attempt_completion`](../features/tools/attempt-completion) tool are retained for this period. These tasks typically represent finished work that may still be useful for reference.
#### Incomplete Tasks
```
Default: 7 days
Minimum: 1 day
```
Tasks without completion status are retained for a shorter period. This helps clean up experimental or abandoned tasks more quickly while still giving you time to review them.
### Last Cleanup Display
The settings show when the last cleanup operation ran, helping you understand the cleanup schedule.
### Manual Cleanup
Click the **"Run Cleanup Now"** button to immediately trigger a cleanup operation using your current settings. This is useful when:
- You need to free up disk space urgently
- You've changed retention settings and want them applied immediately
- You want to preview what would be cleaned up (check the output)
## Best Practices
### Recommended Retention Periods
**For Individual Developers:**
- Default retention: 30 days
- Completed tasks: 30 days
- Incomplete tasks: 7 days
- Favorited tasks: Never delete
**For Experimentation:**
- Default retention: 14 days
- Completed tasks: 14 days
- Incomplete tasks: 3 days
- Favorited tasks: Never delete
**For Limited Disk Space:**
- Default retention: 14 days
- Completed tasks: 14 days
- Incomplete tasks: 3 days
- Favorited tasks: 60 days
### Protecting Important Work
To ensure important tasks are never deleted:
1. **Mark tasks as favorites** using the star icon in task history
2. **Enable "Never delete favorited tasks"** in settings
3. **Review cleanup results** periodically to ensure retention periods are appropriate
### Balancing Disk Space and History
Consider these factors when setting retention periods:
- **Available disk space**: Shorter retention if space is limited
- **Task frequency**: More tasks = shorter retention needed
- **Reference needs**: Keep completed tasks longer if you often refer back
- **Experimentation**: Shorter incomplete task retention for heavy experimentation
## Troubleshooting
### Tasks Not Being Cleaned Up
**Issue**: Old tasks remain after cleanup runs
**Solutions**:
1. Verify Auto-Cleanup is enabled in settings
2. Check retention periods - they may be too long
3. Verify tasks are older than the retention period
4. Check if tasks are favorited (they won't be deleted if "Never delete" is enabled)
### Important Task Was Deleted
**Issue**: A task you needed was removed
**Prevention**:
1. Always favorite important tasks before they age out
2. Set longer retention periods for task types you reference frequently
3. Consider enabling "Never delete favorited tasks"
4. Export or backup critical task data before it ages out
:::warning
Deleted tasks cannot be recovered. Always favorite important tasks or adjust retention periods to prevent accidental deletion.
:::
### Cleanup Using Too Much Disk I/O
**Issue**: Cleanup operation impacts system performance
**Solutions**:
1. Check the "Operation duration" in cleanup results
2. If slow, consider reducing retention periods to clean fewer tasks at once
3. Run manual cleanup during non-working hours
4. Ensure adequate system resources during cleanup
### Active Task Protection
Auto-Cleanup automatically protects your currently active task from deletion, even if it meets the age criteria. This ensures you never lose work in progress during a cleanup operation.
## Technical Details
### What Gets Deleted
When a task is deleted, the following are permanently removed:
- Task directory and all contents
- Conversation history and messages
- Checkpoints (if enabled)
- API request logs
- Task metadata
- Associated temporary files
### Storage Location
Task data is stored in your VS Code global storage location:
- **macOS**: `~/Library/Application Support/Code/User/globalStorage/kilocode.kilo-code/`
- **Windows**: `%APPDATA%\Code\User\globalStorage\kilocode.kilo-code\`
- **Linux**: `~/.config/Code/User/globalStorage/kilocode.kilo-code/`
## Privacy & Data Handling
- **Local Operation**: All cleanup happens locally on your machine
- **No Cloud Backup**: Deleted tasks are not backed up automatically
- **Telemetry**: Anonymous usage statistics (tasks cleaned, disk space freed) are collected if telemetry is enabled
- **No Content Sharing**: Task content, code, or personal information is never transmitted
## Related Features
- [**Checkpoints**](../features/checkpoints): Version control for tasks that can be restored
- [**Settings Management**](../features/settings-management): Export/import settings including cleanup configuration
- [**Task History**](../basic-usage/the-chat-interface): Managing and organizing your task history
## Frequently Asked Questions
### Does Auto-Cleanup run automatically?
Yes, when enabled, Auto-Cleanup runs automatically based on the configured schedule. You can also trigger it manually using the "Run Cleanup Now" button.
### Can I recover deleted tasks?
No, task deletion is permanent. Always favorite important tasks or adjust retention periods to prevent accidental deletion.
### Does cleanup affect my current task?
No, the active task you're currently working on is automatically protected from deletion.
### What happens to checkpoints when a task is deleted?
All checkpoints associated with a deleted task are permanently removed along with the task data.
### Can I temporarily disable cleanup?
Yes, simply uncheck the "Enable automatic task cleanup" option in settings. Your configuration is preserved for when you enable it again.
### Why are some old tasks not being deleted?
Check if they are:
1. Favorited with "Never delete favorited tasks" enabled
2. Recently modified (even viewing a task may update its timestamp)
3. Protected by a longer retention period based on their type
packages/kilo-docs/docs/advanced-usage/available-tools/codebase-search.md
-240
View File
@@ -1,240 +0,0 @@
# codebase_search
:::warning Experimental Feature
The `codebase_search` tool is that requires additional setup including an embedding provider and vector database.
:::
The `codebase_search` tool performs semantic searches across your entire codebase using AI embeddings. Unlike traditional text-based search, it understands the meaning of your queries and finds relevant code even when exact keywords don't match.
## Parameters
The tool accepts these parameters:
- `query` (required): Natural language search query describing what you're looking for
- `path` (optional): Directory path to limit search scope to a specific part of your codebase
## What It Does
This tool searches through your indexed codebase using semantic similarity rather than exact text matching. It finds code blocks that are conceptually related to your query, even if they don't contain the exact words you searched for. Results include relevant code snippets with file paths, line numbers, and similarity scores.
## When is it used?
- When Kilo Code needs to find code related to specific functionality across your project
- When looking for implementation patterns or similar code structures
- When searching for error handling, authentication, or other conceptual code patterns
- When exploring unfamiliar codebases to understand how features are implemented
- When finding related code that might be affected by changes or refactoring
## Key Features
- **Semantic Understanding**: Finds code by meaning rather than exact keyword matches
- **Cross-Project Search**: Searches across your entire indexed codebase, not just open files
- **Contextual Results**: Returns code snippets with file paths and line numbers for easy navigation
- **Similarity Scoring**: Results ranked by relevance with similarity scores (0-1 scale)
- **Scope Filtering**: Optional path parameter to limit searches to specific directories
- **Intelligent Ranking**: Results sorted by semantic relevance to your query
- **UI Integration**: Results displayed with syntax highlighting and navigation links
- **Performance Optimized**: Fast vector-based search with configurable result limits
## Requirements
This tool is only available when the experimental Codebase Indexing feature is properly configured:
- **Feature Enabled**: Codebase Indexing must be enabled in experimental settings
- **Embedding Provider**: OpenAI API key or Ollama configuration required
- **Vector Database**: Qdrant instance running and accessible
- **Index Status**: Codebase must be indexed (status: "Indexed" or "Indexing")
## Limitations
- **Experimental Feature**: Part of the experimental codebase indexing system
- **Requires Configuration**: Depends on external services (embedding provider + Qdrant)
- **Index Dependency**: Only searches through indexed code blocks
- **Result Limits**: Maximum of 50 results per search to maintain performance
- **Similarity Threshold**: Only returns results above 0.4 similarity score
- **File Size Limits**: Limited to files under 1MB that were successfully indexed
- **Language Support**: Effectiveness depends on Tree-sitter language support
## How It Works
When the `codebase_search` tool is invoked, it follows this process:
1. **Availability Validation**:
- Verifies that the CodeIndexManager is available and initialized
- Confirms codebase indexing is enabled in settings
- Checks that indexing is properly configured (API keys, Qdrant URL)
- Validates the current index state allows searching
2. **Query Processing**:
- Takes your natural language query and generates an embedding vector
- Uses the same embedding provider configured for indexing (OpenAI or Ollama)
- Converts the semantic meaning of your query into a mathematical representation
3. **Vector Search Execution**:
- Searches the Qdrant vector database for similar code embeddings
- Uses cosine similarity to find the most relevant code blocks
- Applies the minimum similarity threshold (0.4) to filter results
- Limits results to 50 matches for optimal performance
4. **Path Filtering** (if specified):
- Filters results to only include files within the specified directory path
- Uses normalized path comparison for accurate filtering
- Maintains relevance ranking within the filtered scope
5. **Result Processing and Formatting**:
- Converts absolute file paths to workspace-relative paths
- Structures results with file paths, line ranges, similarity scores, and code content
- Formats for both AI consumption and UI display with syntax highlighting
6. **Dual Output Format**:
- **AI Output**: Structured text format with query, file paths, scores, and code chunks
- **UI Output**: JSON format with syntax highlighting and navigation capabilities
## Search Query Best Practices
### Effective Query Patterns
**Good: Conceptual and specific**
```xml
<codebase_search>
<query>user authentication and password validation</query>
</codebase_search>
```
**Good: Feature-focused**
```xml
<codebase_search>
<query>database connection pool setup</query>
</codebase_search>
```
**Good: Problem-oriented**
```xml
<codebase_search>
<query>error handling for API requests</query>
</codebase_search>
```
**Less effective: Too generic**
```xml
<codebase_search>
<query>function</query>
</codebase_search>
```
### Query Types That Work Well
- **Functional Descriptions**: "file upload processing", "email validation logic"
- **Technical Patterns**: "singleton pattern implementation", "factory method usage"
- **Domain Concepts**: "user profile management", "payment processing workflow"
- **Architecture Components**: "middleware configuration", "database migration scripts"
## Directory Scoping
Use the optional `path` parameter to focus searches on specific parts of your codebase:
**Search within API modules:**
```xml
<codebase_search>
<query>endpoint validation middleware</query>
<path>src/api</path>
</codebase_search>
```
**Search in test files:**
```xml
<codebase_search>
<query>mock data setup patterns</query>
<path>tests</path>
</codebase_search>
```
**Search specific feature directories:**
```xml
<codebase_search>
<query>component state management</query>
<path>src/components/auth</path>
</codebase_search>
```
## Result Interpretation
### Similarity Scores
- **0.8-1.0**: Highly relevant matches, likely exactly what you're looking for
- **0.6-0.8**: Good matches with strong conceptual similarity
- **0.4-0.6**: Potentially relevant but may require review
- **Below 0.4**: Filtered out as too dissimilar
### Result Structure
Each search result includes:
- **File Path**: Workspace-relative path to the file containing the match
- **Score**: Similarity score indicating relevance (0.4-1.0)
- **Line Range**: Start and end line numbers for the code block
- **Code Chunk**: The actual code content that matched your query
## Examples When Used
- When implementing a new feature, Kilo Code searches for "authentication middleware" to understand existing patterns before writing new code.
- When debugging an issue, Kilo Code searches for "error handling in API calls" to find related error patterns across the codebase.
- When refactoring code, Kilo Code searches for "database transaction patterns" to ensure consistency across all database operations.
- When onboarding to a new codebase, Kilo Code searches for "configuration loading" to understand how the application bootstraps.
## Usage Examples
Searching for authentication-related code across the entire project:
```xml
<codebase_search>
<query>user login and authentication logic</query>
</codebase_search>
```
Finding database-related code in a specific directory:
```xml
<codebase_search>
<query>database connection and query execution</query>
<path>src/data</path>
</codebase_search>
```
Looking for error handling patterns in API code:
```xml
<codebase_search>
<query>HTTP error responses and exception handling</query>
<path>src/api</path>
</codebase_search>
```
Searching for testing utilities and mock setups:
```xml
<codebase_search>
<query>test setup and mock data creation</query>
<path>tests</path>
</codebase_search>
```
Finding configuration and environment setup code:
```xml
<codebase_search>
<query>environment variables and application configuration</query>
</codebase_search>
```
packages/kilo-docs/docs/advanced-usage/free-and-budget-models.md
-283
View File
@@ -1,283 +0,0 @@
---
sidebar_label: Free & Budget Models
---
# Using Kilo Code for Free and on a Budget
**Why this matters:** AI model costs can add up quickly during development. This guide shows you how to use Kilo Code effectively while minimizing or eliminating costs through free models, budget-friendly alternatives, and smart usage strategies.
## Completely Free Options
### Grok Code Fast 1
This frontier AI model is 100% free in Kilo Code for a limited time. [See the blog post for more details](https://blog.kilocode.ai/p/grok-code-fast-get-this-frontier-ai-model-free).
### OpenRouter Free Tier Models
OpenRouter offers several models with generous free tiers. **Note:** You'll need to create a free OpenRouter account to access these models.
**Setup:**
1. Create a free [OpenRouter account](https://openrouter.ai)
2. Get your API key from the dashboard
3. Configure Kilo Code with the OpenRouter provider
**Available free models:**
- **Qwen3 Coder (free)** - Optimized for agentic coding tasks such as function calling, tool use, and long-context reasoning over repositories.
- **Z.AI: GLM 4.5 Air (free)** - Lightweight variant of the GLM-4.5 family, purpose-built for agent-centric applications.
- **DeepSeek: R1 0528 (free)** - Performance on par with OpenAI o1, but open-sourced and with fully open reasoning tokens.
- **MoonshotAI: Kimi K2 (free)** - Optimized for agentic capabilities, including advanced tool use, reasoning, and code synthesis.
## Cost-Effective Premium Models
When you need more capability than free models provide, these options deliver excellent value:
### Ultra-Budget Champions (Under $0.50 per million tokens)
**Mistral Devstral Small**
- **Cost:** ~$0.20 per million input tokens
- **Best for:** Code generation, debugging, refactoring
- **Performance:** 85% of premium model capability at 10% of the cost
**Llama 4 Maverick**
- **Cost:** ~$0.30 per million input tokens
- **Best for:** Complex reasoning, architecture planning
- **Performance:** Excellent for most development tasks
**DeepSeek v3**
- **Cost:** ~$0.27 per million input tokens
- **Best for:** Code analysis, large codebase understanding
- **Performance:** Strong technical reasoning
### Mid-Range Value Models ($0.50-$2.00 per million tokens)
**Qwen3 235B**
- **Cost:** ~$1.20 per million input tokens
- **Best for:** Complex projects requiring high accuracy
- **Performance:** Near-premium quality at 40% of the cost
## Smart Usage Strategies
### The 50% Rule
**Principle:** Use budget models for 50% of your tasks, premium models for the other 50%.
**Budget model tasks:**
- Code reviews and analysis
- Documentation writing
- Simple bug fixes
- Boilerplate generation
- Refactoring existing code
**Premium model tasks:**
- Complex architecture decisions
- Debugging difficult issues
- Performance optimization
- New feature design
- Critical production code
### Context Management for Cost Savings
**Minimize context size:**
```typescript
// Instead of mentioning entire files
@src/components/UserProfile.tsx
// Mention specific functions or sections
@src/components/UserProfile.tsx:45-67
```
**Use Memory Bank effectively:**
- Store project context once in [Memory Bank](/advanced-usage/memory-bank)
- Reduces need to re-explain project details
- Saves 200-500 tokens per conversation
**Strategic file mentions:**
- Only include files directly relevant to the task
- Use [`@folder/`](/basic-usage/context-mentions) for broad context, specific files for targeted work
### Model Switching Strategies
**Start cheap, escalate when needed:**
1. **Begin with free models** (Qwen3 Coder, GLM-4.5-Air)
2. **Switch to budget models** if free models struggle
3. **Escalate to premium models** only for complex tasks
**Use API Configuration Profiles:**
- Set up [multiple profiles](/features/api-configuration-profiles) for different cost tiers
- Quick switching between free, budget, and premium models
- Match model capability to task complexity
### Mode-Based Cost Optimization
**Use appropriate modes to limit expensive operations:**
- **[Ask Mode](/basic-usage/using-modes#ask-mode):** Information gathering without code changes
- **[Architect Mode](/basic-usage/using-modes#architect-mode):** Planning without expensive file operations
- **[Debug Mode](/basic-usage/using-modes#debug-mode):** Focused troubleshooting
**Custom modes for budget control:**
- Create modes that restrict expensive tools
- Limit file access to specific directories
- Control which operations are auto-approved
## Real-World Performance Comparisons
### Code Generation Tasks
**Simple function creation:**
- **Mistral Devstral Small:** 95% success rate
- **GPT-4:** 98% success rate
- **Cost difference:** Free vs $0.20 vs $30 per million tokens
**Complex refactoring:**
- **Budget models:** 70-80% success rate
- **Premium models:** 90-95% success rate
- **Recommendation:** Start with budget, escalate if needed
### Debugging Performance
**Simple bugs:**
- **Free models:** Usually sufficient
- **Budget models:** Excellent performance
- **Premium models:** Overkill for most cases
**Complex system issues:**
- **Free models:** 40-60% success rate
- **Budget models:** 60-80% success rate
- **Premium models:** 85-95% success rate
## Hybrid Approach Recommendations
### Daily Development Workflow
**Morning planning session:**
- Use **Architect mode** with **DeepSeek R1**
- Plan features and architecture
- Create task breakdowns
**Implementation phase:**
- Use **Code mode** with **budget models**
- Generate and modify code
- Handle routine development tasks
**Complex problem solving:**
- Switch to **premium models** when stuck
- Use for critical debugging
- Architecture decisions affecting multiple systems
### Project Phase Strategy
**Early development:**
- Free and budget models for prototyping
- Rapid iteration without cost concerns
- Establish patterns and structure
**Production preparation:**
- Premium models for critical code review
- Performance optimization
- Security considerations
## Cost Monitoring and Control
### Track Your Usage
**Monitor credit consumption:**
- Check cost estimates in chat history
- Review monthly usage patterns
- Identify high-cost operations
**Set spending limits:**
- Use provider billing alerts
- Configure [rate limits](/advanced-usage/rate-limits-costs) to control usage
- Set daily/monthly budgets
### Cost-Saving Tips
**Reduce system prompt size:**
- [Disable MCP](/features/mcp/using-mcp-in-kilo-code) if not using external tools
- Use focused custom modes
- Minimize unnecessary context
**Optimize conversation length:**
- Use [Checkpoints](/features/checkpoints) to reset context
- Start fresh conversations for unrelated tasks
- Archive completed work
**Batch similar tasks:**
- Group related code changes
- Handle multiple files in single requests
- Reduce conversation overhead
## Getting Started with Budget Models
### Quick Setup Guide
1. **Create OpenRouter account** for free models
2. **Configure multiple providers** in Kilo Code
3. **Set up API Configuration Profiles** for easy switching
4. **Escalate to budget models** when needed
5. **Reserve premium models** for complex work
### Recommended Provider Mix
**Free tier foundation:**
- [OpenRouter](/providers/openrouter) - Free models
- [Groq](/providers/groq) - Fast inference for supported models
- [Z.ai](https://z.ai/model-api) - Provides a free model GLM-4.5-Flash
**Budget tier options:**
- [DeepSeek](/providers/deepseek) - Excellent value models
- [Mistral](/providers/mistral) - Specialized coding models
**Premium tier backup:**
- [Anthropic](/providers/anthropic) - Claude for complex reasoning
- [OpenAI](/providers/openai) - GPT-4 for critical tasks
## Measuring Success
**Track these metrics:**
- Monthly AI costs vs. development productivity
- Task completion rates by model tier
- Time saved vs. money spent
- Code quality improvements
**Success indicators:**
- 70%+ of tasks completed with free/budget models
- Monthly costs under your target budget
- Maintained or improved code quality
- Faster development cycles
By combining free models, strategic budget model usage, and smart optimization techniques, you can harness the full power of AI-assisted development while keeping costs minimal. Start with free options and gradually incorporate budget models as your needs and comfort with costs grow.
packages/kilo-docs/docs/advanced-usage/local-models.md
-38
View File
@@ -1,38 +0,0 @@
# Using Local Models
Kilo Code supports running language models locally on your own machine using [Ollama](https://ollama.com/) and [LM Studio](https://lmstudio.ai/). This offers several advantages:
* **Privacy:** Your code and data never leave your computer.
* **Offline Access:** You can use Kilo Code even without an internet connection.
* **Cost Savings:** Avoid API usage fees associated with cloud-based models.
* **Customization:** Experiment with different models and configurations.
**However, using local models also has some drawbacks:**
* **Resource Requirements:** Local models can be resource-intensive, requiring a powerful computer with a good CPU and, ideally, a dedicated GPU.
* **Setup Complexity:** Setting up local models can be more complex than using cloud-based APIs.
* **Model Performance:** The performance of local models can vary significantly. While some are excellent, they may not always match the capabilities of the largest, most advanced cloud models.
* **Limited Features**: Local models (and many online models) often do not support advanced features such as prompt caching, computer use, and others.
## Supported Local Model Providers
Kilo Code currently supports two main local model providers:
1. **Ollama:** A popular open-source tool for running large language models locally. It supports a wide range of models.
2. **LM Studio:** A user-friendly desktop application that simplifies the process of downloading, configuring, and running local models. It also provides a local server that emulates the OpenAI API.
## Setting Up Local Models
For detailed setup instructions, see:
* [Setting up Ollama](/providers/ollama)
* [Setting up LM Studio](/providers/lmstudio)
Both providers offer similar capabilities but with different user interfaces and workflows. Ollama provides more control through its command-line interface, while LM Studio offers a more user-friendly graphical interface.
## Troubleshooting
* **"No connection could be made because the target machine actively refused it":** This usually means that the Ollama or LM Studio server isn't running, or is running on a different port/address than Kilo Code is configured to use. Double-check the Base URL setting.
* **Slow Response Times:** Local models can be slower than cloud-based models, especially on less powerful hardware. If performance is an issue, try using a smaller model.
* **Model Not Found:** Ensure you have typed in the name of the model correctly. If you're using Ollama, use the same name that you provide in the `ollama run` command.
packages/kilo-docs/docs/advanced-usage/rate-limits-costs.md
-51
View File
@@ -1,51 +0,0 @@
# Rate Limits and Costs
Understanding and managing API usage is crucial for a smooth and cost-effective experience with Kilo Code. This section explains how to track your token usage, costs, and how to configure rate limits.
## Token Usage
Kilo Code interacts with AI models using tokens. Tokens are essentially pieces of words. The number of tokens used in a request and response affects both the processing time and the cost.
- **Input Tokens:** These are the tokens in your prompt, including the system prompt, your instructions, and any context provided (e.g., file contents).
- **Output Tokens:** These are the tokens generated by the AI model in its response.
You can see the number of input and output tokens used for each interaction in the chat history.
## Cost Calculation
Most AI providers charge based on the number of tokens used. Pricing varies depending on the provider and the specific model.
Kilo Code automatically calculates the estimated cost of each API request based on the configured model's pricing. This cost is displayed in the chat history, next to the token usage.
**Note:**
- The cost calculation is an _estimate_. The actual cost may vary slightly depending on the provider's billing practices.
- Some providers may offer free tiers or credits. Check your provider's documentation for details.
- Some providers offer prompt caching which greatly lowers cost.
## Configuring Rate Limits
To prevent accidental overuse of the API and to help you manage costs, Kilo Code allows you to set a rate limit. The rate limit specifies the minimum time (in seconds) between API requests.
**How to configure:**
1. Open the Kilo Code settings (<Codicon name="gear" /> icon in the top right corner).
2. Go to the "Advanced Settings" section.
3. Find the "Rate Limit (seconds)" setting.
4. Enter the desired delay in seconds. A value of 0 disables rate limiting.
**Example:**
If you set the rate limit to 10 seconds, Kilo Code will wait at least 10 seconds after one API request completes before sending the next one.
## Tips for Optimizing Token Usage
- **Be Concise:** Use clear and concise language in your prompts. Avoid unnecessary words or details.
- **Provide Only Relevant Context:** Use context mentions (`@file.ts`, `@folder/`) selectively. Only include the files that are directly relevant to the task.
- **Break Down Tasks:** Divide large tasks into smaller, more focused sub-tasks.
- **Use Custom Instructions:** Provide custom instructions to guide Kilo Code's behavior and reduce the need for lengthy explanations in each prompt.
- **Choose the Right Model:** Some models are more cost-effective than others. Consider using a smaller, faster model for tasks that don't require the full power of a larger model.
- **Use Modes:** Different modes can access different tools, for example `Architect` can't modify code, which makes it a safe choice when analyzing a complex codebase, without worrying about accidentally allowing expensive operations.
- **Disable MCP If Not Used:** If you're not using MCP (Model Context Protocol) features, consider [disabling it in Settings > Agent Behaviour > MCP Servers](/features/mcp/using-mcp-in-kilo-code) to significantly reduce the size of the system prompt and save tokens.
By understanding and managing your API usage, you can use Kilo Code effectively and efficiently.
packages/kilo-docs/docs/agent-behavior/custom-instructions.md
-44
View File
@@ -1,44 +0,0 @@
# Custom Instructions
Custom Instructions allow you to personalize how Kilo Code behaves, providing specific guidance that shapes responses, coding style, and decision-making processes.
## What Are Custom Instructions?
Custom Instructions define specific Extension behaviors, preferences, and constraints beyond Kilo's basic role definition. Examples include coding style, documentation standards, testing requirements, and workflow guidelines.
:::info Custom Instructions vs Rules
Custom Instructions are IDE-wide and are applied across all workspaces and maintain your preferences regardless of which project you're working on. Unlike Instructions, [Custom Rules](/agent-behavior/custom-rules) are project specific and allow you to setup workspace-based ruleset.
:::
## Setting Custom Instructions
**How to set them:**
<img src="/docs/img/custom-instructions/custom-instructions.png" alt="Kilo Code Agent Behaviour tab showing global custom instructions interface" width="600" />
1. **Open Agent Behaviour Tab:** Click the <Codicon name="gear" /> icon in the Kilo Code top menu bar to open Settings, then select the `Agent Behaviour` tab
2. **Select Modes Sub-Tab:** Click on the `Modes` sub-tab
3. **Find Section:** Find the "Custom Instructions for All Modes" section
4. **Enter Instructions:** Enter your instructions in the text area
5. **Save Changes:** Click "Done" to save your changes
#### Mode-Specific Instructions
Mode-specific instructions can be set using the Agent Behaviour tab
<img src="/docs/img/custom-instructions/custom-instructions-3.png" alt="Kilo Code Agent Behaviour tab showing mode-specific custom instructions interface" width="600" />
* **Open Agent Behaviour Tab:** Click the <Codicon name="gear" /> icon in the Kilo Code top menu bar to open Settings, then select the `Agent Behaviour` tab
* **Select Modes Sub-Tab:** Click on the `Modes` sub-tab
* **Select Mode:** Under the Modes heading, click the button for the mode you want to customize
* **Enter Instructions:** Enter your instructions in the text area under "Mode-specific Custom Instructions (optional)"
* **Save Changes:** Click "Done" to save your changes
:::info Global Mode Rules
If the mode itself is global (not workspace-specific), any custom instructions you set for it will also apply globally for that mode across all workspaces.
:::
## Related Features
- [Custom Modes](/agent-behavior/custom-modes)
- [Custom Rules](/agent-behavior/custom-rules)
- [Settings Management](/basic-usage/settings-management)
- [Auto-Approval Settings](/features/auto-approving-actions)
packages/kilo-docs/docs/basic-usage/autocomplete-mistral-setup/10-save-settings.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 50 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/index.md
-114
View File
@@ -1,114 +0,0 @@
---
title: Autocomplete
sidebar_position: 4
slug: /basic-usage/autocomplete
---
# Autocomplete
Kilo Code's autocomplete feature provides intelligent code suggestions and completions while you're typing, helping you write code faster and more efficiently. It offers both automatic and manual triggering options.
## How Autocomplete Works
Autocomplete analyzes your code context and provides:
- **Inline completions** as you type
- **Quick fixes** for common code patterns
- **Contextual suggestions** based on your surrounding code
- **Multi-line completions** for complex code structures
## Triggering Options
### Code Editor Suggestions
#### Auto-trigger suggestions
When enabled, Kilo Code automatically shows inline suggestions when you pause typing. This provides a seamless coding experience where suggestions appear naturally as you work.
- **Auto Trigger Delay**: Configure the delay (in seconds) before suggestions appear after you stop typing
- Default is 3 seconds, but this can be adjusted up or down
- Shorter delays mean quicker suggestions but may be more resource-intensive
#### Trigger on keybinding (Cmd+L)
For more control over when suggestions appear:
1. Position your cursor where you need assistance
2. Press `Cmd+L` (Mac) or `Ctrl+L` (Windows/Linux)
3. Kilo Code analyzes the surrounding context
4. Receive immediate improvements or completions
This is ideal for:
- Quick fixes
- Code completions
- Refactoring suggestions
- Keeping you in the flow without interruptions
You can customize this keyboard shortcut as well in your VS Code settings.
### Chat Suggestions
#### Enable Chat Autocomplete
When enabled, Kilo Code will suggest completions as you type in the chat input. Press Tab to accept suggestions.
## Provider and Model Selection
Autocomplete currently uses **Codestral** (by Mistral AI) as the underlying model. This model is specifically optimized for code completion tasks and provides fast, high-quality suggestions.
### How the Provider is Chosen
Kilo Code automatically selects a provider for autocomplete in the following priority order:
- **Mistral** (using `codestral-latest`)
- **Kilo Code** (using `mistralai/codestral-2508`)
- **OpenRouter** (using `mistralai/codestral-2508`)
- **Requesty** (using `mistral/codestral-latest`)
- **Bedrock** (using `mistral.codestral-2508-v1:0`)
- **Hugging Face** (using `mistralai/Codestral-22B-v0.1`)
- **LiteLLM** (using `codestral/codestral-latest`)
- **LM Studio** (using `mistralai/codestral-22b-v0.1`)
- **Ollama** (using `codestral:latest`)
:::note
**Model Selection is Currently Fixed**: At this time, you cannot freely choose a different model for autocomplete. The feature is designed to work specifically with Codestral, which is optimized for Fill-in-the-Middle (FIM) completions. Support for additional models may be added in future releases.
:::
## Disable Rival Autocomplete
We recommend disabling rival autocompletes to optimize your experience with Kilo Code. To disable GitHub Copilot autocomplete in VSCode, go to **Settings** and navigate to **GitHub** > **Copilot: Advanced** (or search for 'copilot').
Then, toggle to 'disabled':
<img
src="https://github.com/user-attachments/assets/60c69417-1d1c-4a48-9820-5390c30ae25c"
alt="Disable GitHub Copilot in VSCode"
width="800"
/>
If using Cursor, go to **Settings** > **Cursor Settings** > **Tab**, and toggle off 'Cursor Tab':
<img
src="https://github.com/user-attachments/assets/fd2eeae2-f770-40ca-8a72-a9d5a1c17d47"
alt="Disable Cursor autocomplete"
width="800"
/>
## Best Practices
1. **Balance speed and quality**: Faster models provide quicker suggestions but may be less accurate
2. **Adjust trigger delay**: Find the sweet spot between responsiveness and avoiding too many API calls
3. **Use Quick Task for complex changes**: It's designed for more substantial code modifications
4. **Use Manual Autocomplete for precision**: When you need suggestions at specific moments
5. **Configure providers wisely**: Consider using faster, cheaper models for autocomplete while keeping more powerful models for chat
## Tips
- Autocomplete works best with clear, well-structured code
- Comments above functions help autocomplete understand intent
- Variable and function names matter - descriptive names lead to better suggestions
## Related Features
- [Code Actions](/features/code-actions) - Context menu options for common coding tasks
packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup.md
-86
View File
@@ -1,86 +0,0 @@
---
title: Setting Up Mistral for Free Autocomplete
sidebar_position: 1
---
# Setting Up Mistral for Free Autocomplete
This guide walks you through setting up Mistral's Codestral model for free autocomplete in Kilo Code. Mistral offers a free tier that's perfect for getting started with AI-powered code completions.
## Video Walkthrough
<iframe width="100%" height="400" src="https://www.youtube.com/embed/0aqBbB8fPho" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
## Step 1: Open Kilo Code Settings
In VS Code, open the Kilo Code panel and click the **Settings** icon (gear) in the top-right corner.
![Open Kilo Code Settings](./mistral-setup/01-open-kilo-code-settings.png)
## Step 2: Add a New Configuration Profile
Navigate to **Settings → Providers** and click **Add Profile** to create a new configuration profile for Mistral.
![Add Configuration Profile](./mistral-setup/02-add-configuration-profile.png)
## Step 3: Name Your Profile
In the "New Configuration Profile" dialog, enter a name like "Mistral profile" (the name can be anything you prefer) and click **Create Profile**.
:::note
The profile name is just a label for your reference—it doesn't affect functionality. Choose any name that helps you identify this configuration.
:::
![Create Mistral Profile](./mistral-setup/03-name-your-profile.png)
## Step 4: Select Mistral as Provider
In the **API Provider** dropdown, search for and select **Mistral**.
:::note
When creating an autocomplete profile, you don't need to select a specific model—Kilo Code will automatically use the appropriate Codestral model optimized for code completions.
:::
![Select Mistral Provider](./mistral-setup/04-select-mistral-provider.png)
## Step 5: Get Your API Key
You'll see a warning that you need a valid API key. Click **Get Mistral / Codestral API Key** to open the Mistral console.
![Get API Key Button](./mistral-setup/05-get-api-key.png)
## Step 6: Navigate to Codestral in Mistral AI Studio
In the Mistral AI Studio sidebar, click **Codestral** under the Code section.
![Select Codestral](./mistral-setup/06-navigate-to-codestral.png)
## Step 7: Generate API Key
Click the **Generate API Key** button to create your new Codestral API key.
![Confirm Generate](./mistral-setup/07-confirm-key-generation.png)
## Step 8: Copy Your API Key
Once generated, click the **copy** button next to your API key to copy it to your clipboard.
![Copy API Key](./mistral-setup/08-copy-api-key.png)
## Step 9: Paste API Key in Kilo Code
Return to Kilo Code settings and paste your API key into the **Mistral API Key** field.
![Paste API Key](./mistral-setup/09-paste-api-key.png)
## Step 10: Save Your Settings
Click **Save** to apply your Mistral configuration. You're now ready to use free autocomplete!
![Save Settings](./mistral-setup/10-save-settings.png)
## Next Steps
- Learn more about [Autocomplete features](./index.md)
- Explore [triggering options](./index.md#triggering-options) for autocomplete
- Check out [best practices](./index.md#best-practices) for optimal results
packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/01-open-kilo-code-settings.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/02-add-configuration-profile.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 45 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/03-name-your-profile.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/04-select-mistral-provider.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 42 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/05-get-api-key.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 61 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/06-navigate-to-codestral.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/07-confirm-key-generation.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/08-copy-api-key.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/09-paste-api-key.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 47 KiB

packages/kilo-docs/docs/basic-usage/autocomplete/mistral-setup/10-save-settings.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 50 KiB

packages/kilo-docs/docs/basic-usage/byok.md
-49
View File
@@ -1,49 +0,0 @@
---
sidebar_label: Bring Your Own Key (BYOK)
---
# Bring Your Own Key (BYOK)
Bring Your Own Key (BYOK) lets you use your own API keys when using the Kilo Gateway, while retaining Kilo platform features like Code Reviews and Cloud Agents.
A user or organization may want to use BYOK to:
- Utilize new models quickly, Kilo Gateway supports most new models in minutes
- Use subscriptions with third-party AI providers, for example [Z.AI](https://z.ai/subscribe) or [Minimax](https://platform.minimax.io/subscribe/coding-plan)
- Attribute usage against existing provider commitments or agreements
- Use existing credits with a provider
## Supported BYOK providers
Kilo Gateway currently supports BYOK keys for these providers:
- Anthropic
- OpenAI
- Google AI Studio
- Minimax
- Mistral AI
- xAI
- Z.AI
## Add a BYOK key
1. Log into the Kilo platform and select the account or organization you want to add the BYOK key to.
2. Navigate to the [Bring Your Own Key (BYOK) page](https://app.kilo.ai/byok), available in the sidebar under `Account`.
3. Click `Add Your First Key`, select the provider, and paste your API key.
4. Save.
## How Bring Your Own Key works
- When you use the **Kilo Gateway** provider, Kilo checks if there’s a BYOK key for the selected model’s provider.
- If a matching BYOK key exists, the request is routed using your key.
- If the key is invalid, the request fails. It does not fall back to using Kilo's keys.
## Using BYOK in the Extensions and CLI
- BYOK works with the Kilo Gateway provider. Users should ensure that is set as the active [provider](connecting-providers).
- Select a model from a provider configured for BYOK, for example Claude Sonnet 4.5 if you configured BYOK for Anthropic.
- (Optional) Validate with the provider that traffic is being served by that key.
## Limitations
- BYOK is not fully supported by Agent Manager. See [Agent Manager](/advanced-usage/agent-manager) for details.
packages/kilo-docs/docs/basic-usage/connecting-providers.md
-81
View File
@@ -1,81 +0,0 @@
---
sidebar_label: Overview
---
# API Providers Overview
**Bottom line**: Kilo Code, like any agentic AI coding tool, needs AI model providers to function. You can use our [built-in provider](/providers/kilocode) (easiest) or connect your own API keys from **30+ providers**.
## Kilo Code Extension vs. API Provider
### The Extension
- VS Code tool you install from the marketplace
- Handles UI, file operations, and workflow management
- [Open source](https://github.com/Kilo-Org/kilocode)
- Connects to any AI provider
### Kilo Gateway Provider
- **Built-in option** that comes with the extension
- Google sign-in with free credits included
- No API key management required
- Access to frontier coding models
- [Competitive pricing](https://kilocode.ai/pricing)
**Key point**: The extension works with any provider—our API service is just the "batteries included" option.
## Getting Started: Two Paths
### Option 1: Built-in Provider (Recommended)
✅ **Fastest setup**
- Sign in with Google or GitHub at kilocode.ai
- Free credits included for your first top-up
- Zero API key management
- Latest models available
→ [Complete setup guide](/providers/kilocode)
### Option 2: Your Own Provider
**More control, more setup**
1. Choose from 30+ supported providers
2. Get API key from your provider
3. Configure in Kilo Code settings
## Why Use Multiple Providers?
- **Cost**: Compare pricing across providers
- **Models**: Access different AI capabilities
- **Reliability**: Backup options for outages
- **Features**: Some providers offer exclusive models
- **Regional**: Better performance in certain locations
## What's in This Section
### [Connecting Your First AI Provider](/getting-started/connecting-api-provider)
**For beginners**: Step-by-step setup including:
- Recommended providers
- How to get API keys
- Initial VS Code configuration
- Starting your first AI chat
### [API Configuration Profiles](/features/api-configuration-profiles)
**For power users**: Advanced management including:
- Multiple provider configurations
- Model switching strategies
- Secure API key management
- Task-specific optimizations
## Security Note
All API keys use VS Code's Secret Storage—never stored in plain text. Industry-standard security practices protect your credentials.
**Ready to start?** → [Connect your first provider](/getting-started/connecting-api-provider) or jump to [advanced profiles](/features/api-configuration-profiles).
packages/kilo-docs/docs/basic-usage/context-mentions.md
-122
View File
@@ -1,122 +0,0 @@
# Context Mentions
Context mentions are a powerful way to provide Kilo Code with specific information about your project, allowing it to perform tasks more accurately and efficiently. You can use mentions to refer to files, folders, problems, and Git commits. Context mentions start with the `@` symbol.
<img src="/docs/img/context-mentions/context-mentions.png" alt="Context Mentions Overview - showing the @ symbol dropdown menu in the chat interface" width="600" />
*Context mentions overview showing the @ symbol dropdown menu in the chat interface.*
## Types of Mentions
<img src="/docs/img/context-mentions/context-mentions-1.png" alt="File mention example showing a file being referenced with @ and its contents appearing in the conversation" width="600" />
*File mentions add actual code content into the conversation for direct reference and analysis.*
| Mention Type | Format | Description | Example Usage |
|--------------|--------|-------------|--------------|
| **File** | `@/path/to/file.ts` | Includes file contents in request context | "Explain the function in @/src/utils.ts" |
| **Folder** | `@/path/to/folder/` | Provides directory structure in tree format | "What files are in @/src/components/?" |
| **Problems** | `@problems` | Includes VS Code Problems panel diagnostics | "@problems Fix all errors in my code" |
| **Terminal** | `@terminal` | Includes recent terminal command and output | "Fix the errors shown in @terminal" |
| **Git Commit** | `@a1b2c3d` | References specific commit by hash | "What changed in commit @a1b2c3d?" |
| **Git Changes** | `@git-changes` | Shows uncommitted changes | "Suggest a message for @git-changes" |
| **URL** | `@https://example.com` | Imports website content | "Summarize @https://docusaurus.io/" |
### File Mentions
<img src="/docs/img/context-mentions/context-mentions-1.png" alt="File mention example showing a file being referenced with @ and its contents appearing in the conversation" width="600" />
*File mentions incorporate source code with line numbers for precise references.*
| Capability | Details |
|------------|---------|
| **Format** | `@/path/to/file.ts` (always start with `/` from workspace root) |
| **Provides** | Complete file contents with line numbers |
| **Supports** | Text files, PDFs, and DOCX files (with text extraction) |
| **Works in** | Initial requests, feedback responses, and follow-up messages |
| **Limitations** | Very large files may be truncated; binary files not supported |
### Folder Mentions
<img src="/docs/img/context-mentions/context-mentions-2.png" alt="Folder mention example showing directory contents being referenced in the chat" width="600" />
*Folder mentions display directory structure in a readable tree format.*
| Capability | Details |
|------------|---------|
| **Format** | `@/path/to/folder/` (note trailing slash) |
| **Provides** | Hierarchical tree display with ├── and └── prefixes |
| **Includes** | Immediate child files and directories (not recursive) |
| **Best for** | Understanding project structure |
| **Tip** | Use with file mentions to check specific file contents |
### Problems Mention
<img src="/docs/img/context-mentions/context-mentions-3.png" alt="Problems mention example showing VS Code problems panel being referenced with @problems" width="600" />
*Problems mentions import diagnostics directly from VS Code's problems panel.*
| Capability | Details |
|------------|---------|
| **Format** | `@problems` |
| **Provides** | All errors and warnings from VS Code's problems panel |
| **Includes** | File paths, line numbers, and diagnostic messages |
| **Groups** | Problems organized by file for better clarity |
| **Best for** | Fixing errors without manual copying |
### Terminal Mention
<img src="/docs/img/context-mentions/context-mentions-4.png" alt="Terminal mention example showing terminal output being included in Kilo Code's context" width="600" />
*Terminal mentions capture recent command output for debugging and analysis.*
| Capability | Details |
|------------|---------|
| **Format** | `@terminal` |
| **Captures** | Last command and its complete output |
| **Preserves** | Terminal state (doesn't clear the terminal) |
| **Limitation** | Limited to visible terminal buffer content |
| **Best for** | Debugging build errors or analyzing command output |
### Git Mentions
<img src="/docs/img/context-mentions/context-mentions-5.png" alt="Git commit mention example showing commit details being analyzed by Kilo Code" width="600" />
*Git mentions provide commit details and diffs for context-aware version analysis.*
| Type | Format | Provides | Limitations |
|------|--------|----------|------------|
| **Commit** | `@a1b2c3d` | Commit message, author, date, and complete diff | Only works in Git repositories |
| **Working Changes** | `@git-changes` | `git status` output and diff of uncommitted changes | Only works in Git repositories |
### URL Mentions
<img src="/docs/img/context-mentions/context-mentions-6.png" alt="URL mention example showing website content being converted to Markdown in the chat" width="600" />
*URL mentions import external web content and convert it to readable Markdown format.*
| Capability | Details |
|------------|---------|
| **Format** | `@https://example.com` |
| **Processing** | Uses headless browser to fetch content |
| **Cleaning** | Removes scripts, styles, and navigation elements |
| **Output** | Converts content to Markdown for readability |
| **Limitation** | Complex pages may not convert perfectly |
## How to Use Mentions
1. Type `@` in the chat input to trigger the suggestions dropdown
2. Continue typing to filter suggestions or use arrow keys to navigate
3. Select with Enter key or mouse click
4. Combine multiple mentions in a request: "Fix @problems in @/src/component.ts"
The dropdown automatically suggests:
- Recently opened files
- Visible folders
- Recent git commits
- Special keywords (`problems`, `terminal`, `git-changes`)
## Best Practices
| Practice | Description |
|----------|-------------|
| **Use specific paths** | Reference exact files rather than describing them |
| **Use relative paths** | Always start from workspace root: `@/src/file.ts` not `@C:/Projects/src/file.ts` |
| **Verify references** | Ensure paths and commit hashes are correct |
| **Click mentions** | Click mentions in chat history to open files or view content |
| **Eliminate copy-pasting** | Use mentions instead of manually copying code or errors |
| **Combine mentions** | "Fix @problems in @/src/component.ts using the pattern from commit @a1b2c3d" |
packages/kilo-docs/docs/basic-usage/how-tools-work.md
-83
View File
@@ -1,83 +0,0 @@
# How Tools Work
Kilo Code uses tools to interact with your code and environment. These specialized helpers perform specific actions like reading files, making edits, running commands, or searching your codebase. Tools provide automation for common development tasks without requiring manual execution.
## Tool Workflow
Describe what you want to accomplish in natural language, and Kilo Code will:
1. Select the appropriate tool based on your request
2. Present the tool with its parameters for your review
3. Execute the approved tool and show you the results
4. Continue this process until your task is complete
## Tool Categories
| Category | Purpose | Tool Names |
| :------- | :------ | :--------- |
| Read | Access file content and code structure | `read_file`, `search_files`, `list_files`, `list_code_definition_names` |
| Edit | Create or modify files and code | `write_to_file`, `apply_diff` |
| Execute | Run commands and perform system operations | `execute_command` |
| Browser | Interact with web content | `browser_action` |
| Workflow | Manage task flow and context | `ask_followup_question`, `attempt_completion`, `switch_mode`, `new_task` |
## Example: Using Tools
Here's how a typical tool interaction works:
<img src="/docs/img/how-tools-work/how-tools-work.png" alt="Tool approval interface showing Save and Reject buttons along with Auto-approve checkbox" width="600" />
*The tool approval interface shows Save/Reject buttons and Auto-approve options.*
**User:** Create a file named `greeting.js` that logs a greeting message
**Kilo Code:** (Proposes the `write_to_file` tool as shown in the image above)
```xml
<write_to_file>
<path>greeting.js</path>
<content>
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet('World');
</content>
<line_count>5</line_count>
</write_to_file>
```
**User:** (Clicks "Save" in the interface)
**Kilo Code:** (Confirms file creation)
## Tool Safety and Approval
Every tool use requires your explicit approval. When Kilo proposes a tool, you'll see:
* A "Save" button to approve and execute the tool
* A "Reject" button to decline the proposed tool
* An optional "Auto-approve" setting for trusted operations
This safety mechanism ensures you maintain control over which files are modified, what commands are executed, and how your codebase is changed. Always review tool proposals carefully before saving them.
## Core Tools Reference
| Tool Name | Description | Category |
| :-------- | :---------- | :------- |
| `read_file` | Reads the content of a file with line numbers | Read |
| `search_files` | Searches for text or regex patterns across files | Read |
| `list_files` | Lists files and directories in a specified location | Read |
| `list_code_definition_names` | Lists code definitions like classes and functions | Read |
| `write_to_file` | Creates new files or overwrites existing ones | Edit |
| `apply_diff` | Makes precise changes to specific parts of a file | Edit |
| `execute_command` | Runs commands in the VS Code terminal | Execute |
| `browser_action` | Performs actions in a headless browser | Browser |
| `ask_followup_question` | Asks you a clarifying question | Workflow |
| `attempt_completion` | Indicates the task is complete | Workflow |
| `switch_mode` | Changes to a different operational mode | Workflow |
| `new_task` | Creates a new subtask with a specific starting mode | Workflow |
## Learn More About Tools
For more detailed information about each tool, including complete parameter references and advanced usage patterns, see the [Tool Use Overview](/features/tools/tool-use-overview) documentation.
packages/kilo-docs/docs/basic-usage/orchestrator-mode.md
-48
View File
@@ -1,48 +0,0 @@
---
sidebar_label: 'Orchestrator Mode'
---
import YouTubeEmbed from '@site/src/components/YouTubeEmbed';
# Orchestrator Mode: Coordinate Complex Workflows
Orchestrator Mode (formerly known as Boomerang Tasks) allows you to break down complex projects into smaller, manageable pieces. Think of it like delegating parts of your work to specialized assistants. Each subtask runs in its own context, often using a different Kilo Code mode tailored for that specific job (like [`code`](/basic-usage/using-modes#code-mode-default), [`architect`](/basic-usage/using-modes#architect-mode), or [`debug`](/basic-usage/using-modes#debug-mode)).
<YouTubeEmbed
url="https://www.youtube.com/watch?v=20MmJNeOODo"
caption="Orchestrator Mode explained and demonstrated"
/>
## Why Use Orchestrator Mode?
- **Tackle Complexity:** Break large, multi-step projects (e.g., building a full feature) into focused subtasks (e.g., design, implementation, documentation).
- **Use Specialized Modes:** Automatically delegate subtasks to the mode best suited for that specific piece of work, leveraging specialized capabilities for optimal results.
- **Maintain Focus & Efficiency:** Each subtask operates in its own isolated context with a separate conversation history. This prevents the parent (orchestrator) task from becoming cluttered with the detailed execution steps (like code diffs or file analysis results), allowing it to focus efficiently on the high-level workflow and manage the overall process based on concise summaries from completed subtasks.
- **Streamline Workflows:** Results from one subtask can be automatically passed to the next, creating a smooth flow (e.g., architectural decisions feeding into the coding task).
## How It Works
1. Using Orchestrator Mode, Kilo can analyze a complex task and suggest breaking it down into a subtask[^1].
2. The parent task pauses, and the new subtask begins in a different mode[^2].
3. When the subtask's goal is achieved, Kilo signals completion.
4. The parent task resumes with only the summary[^3] of the subtask. The parent uses this summary to continue the main workflow.
## Key Considerations
- **Approval Required:** By default, you must approve the creation and completion of each subtask. This can be automated via the [Auto-Approving Actions](/features/auto-approving-actions#subtasks) settings if desired.
- **Context Isolation and Transfer:** Each subtask operates in complete isolation with its own conversation history. It does not automatically inherit the parent's context. Information must be explicitly passed:
* **Down:** Via the initial instructions provided when the subtask is created.
* **Up:** Via the final summary provided when the subtask finishes. Be mindful that only this summary returns to the parent.
- **Navigation:** Kilo's interface helps you see the hierarchy of tasks (which task is the parent, which are children). You can typically navigate between active and paused tasks.
Orchestrator Mode provides a powerful way to manage complex development workflows directly within Kilo Code, leveraging specialized modes for maximum efficiency.
:::tip Keep Tasks Focused
Use subtasks to maintain clarity. If a request significantly shifts focus or requires a different expertise (mode), consider creating a subtask rather than overloading the current one.
:::
[^1]: This context is passed via the `message` parameter of the [`new_task`](/features/tools/new-task) tool.
[^2]: The mode for the subtask is specified via the `mode` parameter of the [`new_task`](/features/tools/new-task) tool during initiation.
[^3]: This summary is passed via the `result` parameter of the [`attempt_completion`](/features/tools/attempt-completion) tool when the subtask finishes.
packages/kilo-docs/docs/contributing/architecture/mcp-oauth-authorization.md
-575
View File
@@ -1,575 +0,0 @@
---
sidebar_position: 5
title: "MCP OAuth Authorization"
---
# MCP OAuth Authorization
### Overview
Many MCP servers require authentication to access protected resources. Currently, Kilo Code only supports static credential configuration (API keys, tokens) which must be manually entered and stored. This creates friction for users and security concerns for enterprises.
The MCP specification defines an OAuth 2.1-based authorization flow that enables secure, user-friendly authentication without requiring users to manually manage credentials. This document specifies how Kilo Code will implement the MCP Authorization specification to support OAuth-enabled MCP servers.
### Goals
1. **Eliminate manual credential management** - Users authenticate via browser-based OAuth flows instead of copying/pasting API keys
2. **Improve security** - Tokens are obtained through secure OAuth flows with PKCE, reducing credential exposure
3. **Support enterprise SSO** - Organizations can use their existing identity providers
4. **Maintain compatibility** - Continue supporting static credentials for servers that don't implement OAuth
### Non-Goals (MVP)
- Token refresh automation (will use re-authentication flow initially)
- Dynamic Client Registration (will rely on Client ID Metadata Documents)
- Multiple authorization server selection (will use first available)
## MCP Authorization Specification Summary
The MCP Authorization spec (Protocol Revision 2025-11-25) defines an OAuth 2.1-based flow for HTTP-based MCP transports. Key components:
### Roles
- **MCP Server** - Acts as OAuth 2.1 Resource Server, accepts access tokens
- **MCP Client** (Kilo Code) - Acts as OAuth 2.1 Client, obtains tokens on behalf of users
- **Authorization Server** - Issues access tokens (may be hosted with MCP server or separate)
### Discovery Flow
1. Client makes unauthenticated request to MCP server
2. Server returns `401 Unauthorized` with `WWW-Authenticate` header containing `resource_metadata` URL
3. Client fetches Protected Resource Metadata (RFC 9728) to discover authorization server(s)
4. Client fetches Authorization Server Metadata (RFC 8414 or OpenID Connect Discovery)
5. Client initiates OAuth authorization flow
### Client Registration
The spec supports three approaches (in priority order):
1. **Pre-registration** - Client has existing credentials for the server
2. **Client ID Metadata Documents** - Client uses HTTPS URL as client_id pointing to metadata JSON
3. **Dynamic Client Registration** - Client registers dynamically via RFC 7591
### Authorization Flow
1. Generate PKCE code verifier and challenge
2. Open browser with authorization URL including `resource` parameter (RFC 8707)
3. User authenticates and authorizes
4. Receive authorization code via redirect
5. Exchange code for access token
6. Use access token in `Authorization: Bearer` header for MCP requests
## System Design
### Architecture Overview
```
┌─────────────────────────────────────────────────────────────────────────────────┐
│ MCP OAuth Authorization Flow │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ 1. MCP Request ┌──────────────────┐ │
│ │ │ ───────────────────► │ │ │
│ │ Kilo Code │ │ MCP Server │ │
│ │ Extension │ ◄─────────────────── │ (Resource │ │
│ │ │ 2. 401 + metadata │ Server) │ │
│ └──────┬───────┘ └──────────────────┘ │
│ │ │
│ │ 3. Fetch resource metadata │
│ │ 4. Fetch auth server metadata │
│ ▼ │
│ ┌──────────────┐ ┌──────────────────┐ │
│ │ OAuth │ 5. Auth Request │ │ │
│ │ Service │ ───────────────────► │ Authorization │ │
│ │ │ │ Server │ │
│ │ - Discovery │ ◄─────────────────── │ │ │
│ │ - PKCE │ 8. Token Response │ - User Auth │ │
│ │ - Tokens │ │ - Consent │ │
│ └──────┬───────┘ └──────────────────┘ │
│ │ ▲ │
│ │ 6. Open browser │ 7. User authenticates │
│ ▼ │ │
│ ┌──────────────┐ ┌────────┴─────────┐ │
│ │ Browser │ ─────────────────────►│ User │ │
│ │ │ │ │ │
│ └──────────────┘ └──────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
```
### New Components
#### 1. McpOAuthService
A new service responsible for managing OAuth flows for MCP servers:
```typescript
// src/services/mcp/oauth/McpOAuthService.ts
interface McpOAuthService {
/**
* Initiates OAuth flow for an MCP server that returned 401
* @param serverUrl The MCP server URL
* @param wwwAuthenticateHeader The WWW-Authenticate header from 401 response
* @returns Promise resolving to access token
*/
initiateOAuthFlow(serverUrl: string, wwwAuthenticateHeader: string): Promise<OAuthTokens>
/**
* Gets stored tokens for a server, if available and valid
*/
getStoredTokens(serverUrl: string): Promise<OAuthTokens | null>
/**
* Clears stored tokens for a server (for logout/re-auth)
*/
clearTokens(serverUrl: string): Promise<void>
/**
* Refreshes tokens if refresh token is available
*/
refreshTokens(serverUrl: string): Promise<OAuthTokens | null>
}
interface OAuthTokens {
accessToken: string
tokenType: string
expiresAt?: number
refreshToken?: string
scope?: string
}
```
#### 2. McpAuthorizationDiscovery
Handles the discovery of authorization server metadata:
```typescript
// src/services/mcp/oauth/McpAuthorizationDiscovery.ts
interface McpAuthorizationDiscovery {
/**
* Discovers authorization server from WWW-Authenticate header or well-known URIs
*/
discoverAuthorizationServer(serverUrl: string, wwwAuthenticateHeader?: string): Promise<AuthorizationServerMetadata>
/**
* Fetches Protected Resource Metadata (RFC 9728)
*/
fetchResourceMetadata(metadataUrl: string): Promise<ProtectedResourceMetadata>
/**
* Fetches Authorization Server Metadata (RFC 8414 / OIDC Discovery)
*/
fetchAuthServerMetadata(issuerUrl: string): Promise<AuthorizationServerMetadata>
}
interface ProtectedResourceMetadata {
resource: string
authorization_servers: string[]
scopes_supported?: string[]
// ... other RFC 9728 fields
}
interface AuthorizationServerMetadata {
issuer: string
authorization_endpoint: string
token_endpoint: string
scopes_supported?: string[]
response_types_supported: string[]
code_challenge_methods_supported?: string[]
client_id_metadata_document_supported?: boolean
registration_endpoint?: string
// ... other RFC 8414 fields
}
```
#### 3. McpOAuthTokenStorage
Secure storage for OAuth tokens:
```typescript
// src/services/mcp/oauth/McpOAuthTokenStorage.ts
interface McpOAuthTokenStorage {
/**
* Stores tokens securely using VS Code SecretStorage
*/
storeTokens(serverUrl: string, tokens: OAuthTokens): Promise<void>
/**
* Retrieves stored tokens
*/
getTokens(serverUrl: string): Promise<OAuthTokens | null>
/**
* Removes stored tokens
*/
removeTokens(serverUrl: string): Promise<void>
/**
* Lists all servers with stored tokens
*/
listServers(): Promise<string[]>
}
```
#### 4. Client ID Metadata Document Hosting
For Client ID Metadata Documents, Kilo Code needs to host a metadata document. We will use static hosting on kilocode.ai:
- Host at `https://kilocode.ai/.well-known/oauth-client/vscode-extension.json`
- Simple, reliable, no runtime dependencies
- Authorization servers can cache the document effectively
- No attack surface from dynamic generation logic
Metadata document:
```json
{
"client_id": "https://kilocode.ai/.well-known/oauth-client/vscode-extension.json",
"client_name": "Kilo Code",
"client_uri": "https://kilocode.ai",
"logo_uri": "https://kilocode.ai/logo.png",
"redirect_uris": ["http://127.0.0.1:0/callback", "vscode://kilocode.kilo-code/oauth/callback"],
"grant_types": ["authorization_code"],
"response_types": ["code"],
"token_endpoint_auth_method": "none"
}
```
### Integration with McpHub
The existing `McpHub` class needs modifications to support OAuth:
```typescript
// Modifications to McpHub.ts
class McpHub {
private oauthService: McpOAuthService
private async connectToServer(name: string, config: ServerConfig, source: "global" | "project"): Promise<void> {
// ... existing connection logic ...
// For HTTP-based transports, handle OAuth
if (config.type === "sse" || config.type === "streamable-http") {
try {
await this.connectWithOAuth(name, config, source)
} catch (error) {
if (this.isOAuthRequired(error)) {
// Initiate OAuth flow
const tokens = await this.oauthService.initiateOAuthFlow(config.url, error.wwwAuthenticateHeader)
// Retry connection with token
await this.connectWithToken(name, config, source, tokens)
} else {
throw error
}
}
}
}
private isOAuthRequired(error: unknown): boolean {
// Check if error is 401 with WWW-Authenticate header
return error instanceof HttpError && error.status === 401 && error.headers?.["www-authenticate"]
}
}
```
### Configuration Schema Updates
Update the server configuration schema to support OAuth:
```typescript
// Extended server config for OAuth-enabled servers
const OAuthServerConfigSchema = BaseConfigSchema.extend({
type: z.enum(["sse", "streamable-http"]),
url: z.string().url(),
headers: z.record(z.string()).optional(),
// OAuth configuration
oauth: z
.object({
// Override client_id if pre-registered
clientId: z.string().optional(),
clientSecret: z.string().optional(),
// Override scopes to request
scopes: z.array(z.string()).optional(),
// Disable OAuth for this server (use static headers instead)
disabled: z.boolean().optional(),
})
.optional(),
})
```
### Browser-Based Authorization Flow
The OAuth flow requires opening a browser for user authentication:
```typescript
// src/services/mcp/oauth/McpOAuthBrowserFlow.ts
interface McpOAuthBrowserFlow {
/**
* Opens browser for authorization and waits for callback
*/
authorize(params: AuthorizationParams): Promise<AuthorizationResult>
}
interface AuthorizationParams {
authorizationEndpoint: string
clientId: string
redirectUri: string
scope: string
state: string
codeChallenge: string
codeChallengeMethod: "S256"
resource: string
}
interface AuthorizationResult {
code: string
state: string
}
```
**Redirect URI Handling:**
Two approaches for receiving the OAuth callback:
1. **Local HTTP Server** (Primary)
- Start temporary HTTP server on random port
- Use `http://127.0.0.1:{port}/callback` as redirect URI
- Server receives callback, extracts code, closes
2. **VS Code URI Handler** (Fallback)
- Register `vscode://kilocode.kilo-code/oauth/callback` URI handler
- Works when local server isn't possible
- Requires VS Code to be running
### Token Management
#### Storage
Tokens are stored using VS Code's SecretStorage API:
```typescript
// Key format: mcp-oauth-{serverUrlHash}
const storageKey = `mcp-oauth-${hashServerUrl(serverUrl)}`
// Stored value (encrypted by VS Code)
interface StoredTokenData {
accessToken: string
refreshToken?: string
expiresAt?: number
scope?: string
serverUrl: string
issuedAt: number
}
```
#### Token Lifecycle
1. **Initial Authentication**
- User triggers connection to OAuth-enabled MCP server
- Server returns 401, OAuth flow initiated
- User authenticates in browser
- Tokens stored securely
2. **Subsequent Connections**
- Check for stored tokens
- If valid, use directly
- If expired and refresh token available, attempt refresh
- If refresh fails or no refresh token, re-authenticate
3. **Token Refresh** (Future Enhancement)
- Background refresh before expiry
- Automatic retry on 401 with new token
### Error Handling
```typescript
// OAuth-specific errors
class McpOAuthError extends Error {
constructor(
message: string,
public code: OAuthErrorCode,
public serverUrl: string,
public details?: Record<string, unknown>,
) {
super(message)
}
}
enum OAuthErrorCode {
DISCOVERY_FAILED = "discovery_failed",
AUTHORIZATION_FAILED = "authorization_failed",
TOKEN_EXCHANGE_FAILED = "token_exchange_failed",
TOKEN_REFRESH_FAILED = "token_refresh_failed",
PKCE_NOT_SUPPORTED = "pkce_not_supported",
USER_CANCELLED = "user_cancelled",
TIMEOUT = "timeout",
}
```
### User Experience
#### Connection Flow
1. User adds/enables OAuth-enabled MCP server
2. Extension detects OAuth requirement (401 response)
3. Notification: "MCP server requires authentication. Click to sign in."
4. User clicks → Browser opens to authorization server
5. User authenticates and authorizes
6. Browser redirects back → Extension receives token
7. Connection completes → Server shows as connected
#### UI Indicators
- **Authenticated servers**: Show lock icon with "Authenticated" status
- **Authentication required**: Show warning icon with "Sign in required" action
- **Authentication expired**: Show refresh icon with "Re-authenticate" action
#### Settings UI
Add OAuth status to MCP server settings:
```
┌─────────────────────────────────────────────────────────────┐
│ MCP Server: github-mcp │
├─────────────────────────────────────────────────────────────┤
│ Status: Connected ✓ │
│ Type: streamable-http │
│ URL: https://mcp.github.com │
│ │
│ Authentication │
│ ├─ Method: OAuth 2.0 │
│ ├─ Status: Authenticated ✓ │
│ ├─ Expires: 2024-01-15 10:30 AM │
│ └─ [Sign Out] [Re-authenticate] │
└─────────────────────────────────────────────────────────────┘
```
## Security Considerations
### PKCE Requirement
All OAuth flows MUST use PKCE with S256 challenge method:
```typescript
function generatePKCE(): { verifier: string; challenge: string } {
// Generate 32-byte random verifier
const verifier = base64UrlEncode(crypto.randomBytes(32))
// Create S256 challenge
const challenge = base64UrlEncode(crypto.createHash("sha256").update(verifier).digest())
return { verifier, challenge }
}
```
### State Parameter
Generate cryptographically random state to prevent CSRF:
```typescript
const state = base64UrlEncode(crypto.randomBytes(32))
// Store state locally and verify on callback
```
### Token Storage Security
- Use VS Code SecretStorage (encrypted, per-workspace)
- Never log tokens
- Clear tokens on extension uninstall
- Support manual token revocation
### Resource Parameter
Always include `resource` parameter to bind tokens to specific MCP server:
```typescript
const authUrl = new URL(authorizationEndpoint)
authUrl.searchParams.set("resource", mcpServerUrl)
```
### Redirect URI Validation
- Only accept callbacks on registered redirect URIs
- Validate state parameter matches
- Use localhost with random port (not predictable)
## Scope and Implementation Plan
### Phase 1: Core OAuth Infrastructure
- [ ] Create `McpOAuthService` with basic flow support
- [ ] Implement `McpAuthorizationDiscovery` for metadata fetching
- [ ] Implement `McpOAuthTokenStorage` using SecretStorage
- [ ] Add PKCE generation utilities
- [ ] Create local HTTP server for OAuth callbacks
### Phase 2: McpHub Integration
- [ ] Modify `McpHub.connectToServer()` to detect OAuth requirements
- [ ] Add OAuth retry logic for 401 responses
- [ ] Update server configuration schema for OAuth options
- [ ] Add token injection to HTTP transports
### Phase 3: Client ID Metadata Document
- [ ] Host Kilo Code client metadata at kilocode.ai
- [ ] Implement client_id URL generation
- [ ] Add fallback to pre-registration for unsupported servers
### Phase 4: User Experience
- [ ] Add OAuth status indicators to MCP server UI
- [ ] Implement "Sign in" / "Sign out" actions
- [ ] Add authentication expiry notifications
- [ ] Create re-authentication flow
### Phase 5: Testing & Documentation
- [ ] Unit tests for OAuth service components
- [ ] Integration tests with mock OAuth server
- [ ] End-to-end tests with real OAuth-enabled MCP servers
- [ ] User documentation for OAuth-enabled servers
## Future Enhancements
- **Automatic token refresh** - Background refresh before expiry
- **Dynamic Client Registration** - Support RFC 7591 for servers that require it
- **Multiple authorization servers** - UI for selecting preferred auth server
- **Enterprise SSO integration** - Support for organization identity providers
- **Token sharing across workspaces** - Optional global token storage
- **Offline token caching** - Support for offline scenarios with cached tokens
## Appendix: MCP Authorization Spec Compliance Checklist
### Required (MUST)
- [ ] Use PKCE with S256 for all authorization requests
- [ ] Include `resource` parameter in authorization and token requests
- [ ] Support WWW-Authenticate header parsing for resource metadata discovery
- [ ] Support well-known URI fallback for resource metadata
- [ ] Support both OAuth 2.0 and OpenID Connect discovery endpoints
- [ ] Use Authorization header with Bearer scheme for token transmission
- [ ] Validate PKCE support before proceeding with authorization
### Recommended (SHOULD)
- [ ] Support Client ID Metadata Documents
- [ ] Use scope from WWW-Authenticate header when provided
- [ ] Fall back to scopes_supported when scope not in challenge
- [ ] Implement step-up authorization for insufficient_scope errors
### Optional (MAY)
- [ ] Support Dynamic Client Registration (RFC 7591)
- [ ] Support pre-registered client credentials
- [ ] Implement token refresh flows
packages/kilo-docs/docs/contributing/architecture/model-o11y.md
-148
View File
@@ -1,148 +0,0 @@
---
sidebar_position: 11
title: "Agent Observability"
---
# Kilo Code - Agent Observability
## Problem Statement
Agentic coding systems like Kilo Code operate with significant autonomy, executing multi-step tasks that involve LLM inference, tool execution, file manipulation, and external API calls. These systems mix traditional systems observability (i.e. request/response) with agentic behavior (i.e. planning, reasoning, and tool use).
At the lower level, we can observe the system as a traditional API, but at the higher level, we need to observe the agent's behavior and the quality of its outputs.
Some examples of customer-facing error modes:
- Model API calls may be slow or fail due to rate limits, network issues, or model unavailability
- Model API calls may produce invalid JSON or malformed responses
- An agent may get stuck in a loop, repeatedly attempting the same failing operation
- Sessions may degrade gradually as context windows fill up
- The agent may complete a task technically but produce incorrect or unhelpful output
- Users may abandon sessions out of frustration without explicit error signals
All of these contribute to the overall reliability and user experience of the system.
## Goals
1. Detect and alert on acute incidents within minutes
2. Surface slow-burn degradations within hours
3. Facilitate root cause analysis when issues occur
4. Track quality and efficiency trends over time
5. Build a foundation for continuous improvement of the agent
**Non-goals for this proposal:**
- Automated remediation
- A/B testing infrastructure
## Proposed Approach
Focus on the lower-level systems observability first, then build up to higher-level agentic behavior observability.
## Phase 1: Systems Observability
**Objective:** Establish awareness and alerting for hard failures.
This phase focuses on systems metrics we can capture with minimal changes, providing immediate operational visibility.
### Phase 1a: LLM observability and alerting
#### Metrics to Capture
Capture these metrics per LLM API call:
- Provider
- Model
- Tool
- Latency
- Success / Failure
- Error type and message (if failed)
- Token counts
#### Dashboards
Common dashboards which offer filtering based on provider, model, and tool:
- Error rate
- Latency
- Token usage
#### Alerting
Implement [multi-window, multi-burn-rate alerting](https://sre.google/workbook/alerting-on-slos/) against error budgets:
| Window | Burn Rate | Action | Use Case |
| ------ | --------- | ------ | ------------------ |
| 5 min | 14.4x | Page | Major Outage |
| 30 min | 6x | Page | Incident |
| 6 hr | 1x | Ticket | Change in behavior |
Paging should **only occur on Recommended Models when using the Kilo Gateway**. All other alerts should be tickets, and some may be configured to be ignored.
**Initial alert conditions:**
- LLM API error rate exceeds SLO (per tool/model/provider)
- Tool error rate exceeds SLO (per tool/model/provider)
- p50/p90 latency exceeds SLO (per tool/model/provider)
### Phase 1b: Session metrics
#### Metrics to Capture
**Per-session (aggregated at session close or timeout):**
- Session duration
- Time from user input to first model response
- Total turns/steps
- Total tool calls by tool type
- Total errors by error type
- Agent stuck errors (repetitive tool calls, etc)
- Tool call errors
- Total tokens consumed
- Context condensing frequency
- Termination reason (user closed, timeout, explicit completion, error)
#### Alerting
None.
## Phase 2: Agent Tool Usage
**Objective:** Detect how agents are using tools in a given session.
### Metrics to Capture
**Loop and repetition detection:**
- Count of identical tool calls within a session (same tool + same arguments)
- Count of identical failing tool calls (same tool + same arguments + same error)
- Detection of oscillation patterns (alternating between two states)
**Progress indicators:**
- Unique files touched per session
- Unique tools used per session
- Ratio of repeated to unique operations
### Alerting
None to start, we will learn.
## Phase 3: Session Outcome Tracking
**Objective:** Understand whether sessions are successful from the user's perspective.
Hard errors and behavior metrics tell us about failures, but we also need signal on overall session health.
### Metrics to Capture
**Explicit signals:**
- User feedback (thumbs up/down) rate and sentiment
- User abandonment patterns (session ends mid-task without completion signal)
**Implicit signals:**
May require LLM analysis of session transcripts to detect:
- Session termination classification (completed, abandoned, errored, timed out)
packages/kilo-docs/docs/features/KiloCodeBrowser.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

packages/kilo-docs/docs/features/api-configuration-profiles.md
-104
View File
@@ -1,104 +0,0 @@
# API Configuration Profiles
API Configuration Profiles allow you to create and switch between different sets of AI settings. Each profile can have different configurations for each mode, letting you optimize your experience based on the task at hand.
:::info
Having multiple configuration profiles lets you quickly switch between different AI providers, models, and settings without reconfiguring everything each time you want to change your setup.
:::
## How It Works
Configuration profiles can have their own:
- API providers (OpenAI, Anthropic, OpenRouter, Glama, etc.)
- API keys and authentication details
- Model selections (o3-mini-high, Claude 3.7 Sonnet, DeepSeek R1, etc.)
- [Temperature settings](/features/model-temperature) for controlling response randomness
- Thinking budgets
- Provider-specific settings
Note that available settings vary by provider and model. Each provider offers different configuration options, and even within the same provider, different models may support different parameter ranges or features.
## Creating and Managing Profiles
### Creating a Profile
1. Open Settings by clicking the gear icon <Codicon name="gear" /> → Providers
2. Click the "+" button next to the profile selector
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles-1.png" alt="Profile selector with plus button" width="550" />
3. Enter a name for your new profile
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles.png" alt="Creating a new profile dialog" width="550" />
4. Configure the profile settings:
- Select your API provider
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles-2.png" alt="Provider selection dropdown" width="550" />
- Enter API key
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles-3.png" alt="API key entry field" width="550" />
- Choose a model
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles-8.png" alt="Model selection interface" width="550" />
- Adjust model parameters
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles-5.png" alt="Model parameter adjustment controls" width="550" />
### Switching Profiles
Switch profiles in two ways:
1. From Settings panel: Select a different profile from the dropdown
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles-7.png" alt="Profile selection dropdown in Settings" width="550" />
2. During chat: Access the API Configuration dropdown in the chat interface
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles-6.png" alt="API Configuration dropdown in chat interface" width="550" />
### Pinning and Sorting Profiles
The API configuration dropdown now supports pinning your favorite profiles for quicker access:
1. Hover over any profile in the dropdown to reveal the pin icon
2. Click the pin icon to add the profile to your pinned list
3. Pinned profiles appear at the top of the dropdown, sorted alphabetically
4. Unpinned profiles appear below a separator, also sorted alphabetically
5. You can unpin a profile by clicking the same icon again
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles-4.png" alt="Pinning API configuration profiles" width="550" />
This feature makes it easier to navigate between commonly used profiles, especially when you have many configurations.
### Editing and Deleting Profiles
<img src="/docs/img/api-configuration-profiles/api-configuration-profiles-10.png" alt="Profile editing interface" width="550" />
- Select the profile in Settings to modify any settings
- Click the pencil icon to rename a profile
- Click the trash icon to delete a profile (you cannot delete the only remaining profile)
## Linking Profiles to Modes
In the <Codicon name="notebook" /> Prompts tab, you can explicitly associate a specific Configuration Profile with each Mode. The system also automatically remembers which profile you last used with each mode, making your workflow more efficient.
Watch this demonstration of how to connect configuration profiles with specific modes for optimized workflows:
<video width="600" controls>
<source src="/docs/img/api-configuration-profiles/provider-modes.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
## Security Note
API keys are stored securely in VSCode's Secret Storage and are never exposed in plain text.
## Related Features
- Works with [custom modes](/agent-behavior/custom-modes) you create
- Integrates with [local models](/advanced-usage/local-models) for offline work
- Supports [temperature settings](/features/model-temperature) per mode
- Enhances cost management with [rate limits and usage tracking](/advanced-usage/rate-limits-costs)
packages/kilo-docs/docs/features/auto-approving-actions.md
-365
View File
@@ -1,365 +0,0 @@
# Auto-Approving Actions
> ⚠️ **SECURITY WARNING:** Auto-approve settings bypass confirmation prompts, giving Kilo Code direct access to your system. This can result in **data loss, file corruption, or worse**. Command line access is particularly dangerous, as it can potentially execute harmful operations that could damage your system or compromise security. Only enable auto-approval for actions you fully trust.
Auto-approve settings speed up your workflow by eliminating repetitive confirmation prompts, but they significantly increase security risks.
## Quick Start Guide
1. Click the Auto-Approve Toolbar above the chat input
2. Select which actions Kilo Code can perform without asking permission
3. Use the master toggle (leftmost checkbox) to quickly enable/disable all permissions
[![KiloCode Task Timeline](https://img.youtube.com/vi/NBccFnYDQ-k/maxresdefault.jpg)](https://youtube.com/shorts/NBccFnYDQ-k?feature=shared)
## Auto-Approve Toolbar
<img src="/docs/img/auto-approving-actions/auto-approving-actions.png" alt="Auto-approve toolbar collapsed state" width="600" />
_Prompt box and Auto-Approve Toolbar showing enabled permissions_
Click the toolbar to expand it and configure individual permissions:
<img src="/docs/img/auto-approving-actions/auto-approving-actions-1.png" alt="Auto-approve toolbar expanded state" width="600" />
_Prompt text box and Expanded toolbar with all options_
### Available Permissions
| Permission | What it does | Risk level |
| ------------------------------ | ------------------------------------------------ | ----------- |
| **Read files and directories** | Lets Kilo Code access files without asking | Medium |
| **Edit files** | Lets Kilo Code modify files without asking | **High** |
| **Execute approved commands** | Runs whitelisted terminal commands automatically | **High** |
| **Use the browser** | Allows headless browser interaction | Medium |
| **Use MCP servers** | Lets Kilo Code use configured MCP services | Medium-High |
| **Switch modes** | Changes between Kilo Code modes automatically | Low |
| **Create & complete subtasks** | Manages subtasks without confirmation | Low |
| **Retry failed requests** | Automatically retries failed API requests | Low |
| **Answer follow-up questions** | Selects default answer for follow-up questions | Low |
| **Update todo list** | Automatically updates task progress | Low |
## Master Toggle for Quick Control
The leftmost checkbox works as a master toggle:
<img src="/docs/img/auto-approving-actions/auto-approving-actions-14.png" alt="Master toggle in Auto-approve toolbar" width="600" />
_Master toggle (checkbox) controls all auto-approve permissions at once_
Use the master toggle when:
- Working in sensitive code (turn off)
- Doing rapid development (turn on)
- Switching between exploration and editing tasks
## Advanced Settings Panel
The settings panel provides detailed control with important security context:
> **Allow Kilo Code to automatically perform operations without requiring approval. Enable these settings only if you fully trust the AI and understand the associated security risks.**
To access these settings:
1. Click <Codicon name="gear" /> in the top-right corner
2. Navigate to Auto-Approve Settings
<img src="/docs/img/auto-approving-actions/auto-approving-actions-4.png" alt="Settings panel auto-approve options" width="550" />
_Complete settings panel view_
### Read Operations
:::caution Read Operations
<img src="/docs/img/auto-approving-actions/auto-approving-actions-6.png" alt="Read-only operations setting" width="550" />
**Setting:** "Always approve read-only operations"
**Description:** "When enabled, Kilo Code will automatically view directory contents and read files without requiring you to click the Approve button."
**Risk level:** Medium
While this setting only allows reading files (not modifying them), it could potentially expose sensitive data. Still recommended as a starting point for most users, but be mindful of what files Kilo Code can access.
#### Read Outside Workspace
**Setting:** "Allow reading files outside the workspace"
**Description:** "When enabled, Kilo Code can read files outside the current workspace directory without asking for approval."
**Risk level:** Medium-High
This setting extends read permissions beyond your project folder. Consider the security implications:
- Kilo Code could access sensitive files in your home directory
- Configuration files, SSH keys, or credentials could be read
- Only enable if you trust the AI and need it to access external files
**Recommendation:** Keep disabled unless you specifically need Kilo Code to read files outside your project.
:::
### Write Operations
:::caution Write Operations
<img src="/docs/img/auto-approving-actions/auto-approving-actions-7.png" alt="Write operations setting with delay slider" width="550" />
**Setting:** "Always approve write operations"
**Description:** "Automatically create and edit files without requiring approval"
**Delay slider:** "Delay after writes to allow diagnostics to detect potential problems" (Default: 1000ms)
**Risk level:** High
This setting allows Kilo Code to modify your files without confirmation. The delay timer is crucial:
- Higher values (2000ms+): Recommended for complex projects where diagnostics take longer
- Default (1000ms): Suitable for most projects
- Lower values: Use only when speed is critical and you're in a controlled environment
- Zero: No delay for diagnostics (not recommended for critical code)
#### Write Outside Workspace
**Setting:** "Allow writing files outside the workspace"
**Description:** "When enabled, Kilo Code can create or modify files outside the current workspace directory without asking for approval."
**Risk level:** Very High
Use with caution and in controlled environments. It allows Kilo Code to:
- Modify your shell configuration files
- Change system configurations
- Write to any location your user has access to
**Recommendation:** Keep disabled unless absolutely necessary. Even experienced users should avoid this setting.
#### Write to Protected Files
**Setting:** "Allow writing to protected files"
**Description:** "When enabled, Kilo Code can overwrite or modify files that are normally protected by the `.kilocodeignore` file."
**Risk level:** Very High
Protected files are intentionally shielded from modification. Enable only if you understand the consequences.
### Delete Operations
:::danger Delete Operations
**Setting:** "Always approve delete operations"
**Description:** "Automatically delete files and directories without requiring approval"
**Risk level:** Very High
This setting allows Kilo Code to permanently remove files without confirmation.
**Safeguards:**
- Kilo Code still respects `.kilocodeignore` rules
- Protected files cannot be deleted
- The delete tool shows what will be removed before execution
**Recommendation:** Enable only in isolated environments or when working with temporary/generated files. Always ensure you have backups, checkpoints, or version control.
:::
### Browser Actions
:::info Browser Actions
<img src="/docs/img/auto-approving-actions/auto-approving-actions-8.png" alt="Browser actions setting" width="550" />
**Setting:** "Always approve browser actions"
**Description:** "Automatically perform browser actions without requiring approval"
**Note:** "Only applies when the model supports computer use"
**Risk level:** Medium
Allows Kilo Code to control a headless browser without confirmation. This can include:
- Opening websites
- Navigating pages
- Interacting with web elements
Consider the security implications of allowing automated browser access.
:::
### API Requests
:::info API Requests
<img src="/docs/img/auto-approving-actions/auto-approving-actions-9.png" alt="API requests retry setting with delay slider" width="550" />
**Setting:** "Always retry failed API requests"
**Description:** "Automatically retry failed API requests when server returns an error response"
**Risk level:** Low
This setting automatically retries API calls when they fail.
The delay controls how long Kilo Code waits before trying again:
- Longer delays are gentler on API rate limits
- Shorter delays give faster recovery from transient errors
:::
### MCP Tools
:::caution MCP Tools
<img src="/docs/img/auto-approving-actions/auto-approving-actions-10.png" alt="MCP tools setting" width="550" />
**Setting:** "Always approve MCP tools"
**Description:** "Enable auto-approval of individual MCP tools in the Agent Behaviour > MCP Servers view (requires both this setting and the tool's individual 'Always allow' checkbox)"
**Risk level:** Medium-High (depends on configured MCP tools)
This setting works in conjunction with individual tool permissions in the Agent Behaviour > MCP Servers view. Both this global setting and the tool-specific permission must be enabled for auto-approval.
:::
### Mode Switching
:::info Mode Switching
<img src="/docs/img/auto-approving-actions/auto-approving-actions-11.png" alt="Mode switching setting" width="550" />
**Setting:** "Always approve mode switching"
**Description:** "Automatically switch between different modes without requiring approval"
**Risk level:** Low
Allows Kilo Code to change between different modes (Code, Architect, etc.) without asking for permission. This primarily affects the AI's behavior rather than system access.
:::
### Subtasks
:::info Subtasks
<img src="/docs/img/auto-approving-actions/auto-approving-actions-12.png" alt="Subtasks setting" width="550" />
**Setting:** "Always approve creation & completion of subtasks"
**Description:** "Allow creation and completion of subtasks without requiring approval"
**Risk level:** Low
Enables Kilo Code to create and complete subtasks automatically. This relates to workflow organization rather than system access.
:::
### Command Execution
:::caution Command Execution
<img src="/docs/img/auto-approving-actions/auto-approving-actions-13.png" alt="Command execution setting with whitelist interface" width="550" />
**Setting:** "Always approve allowed execute operations"
**Description:** "Automatically execute allowed terminal commands without requiring approval"
**Risk level:** High
This setting allows terminal command execution with controls. While risky, the allowlist and denylist features limit what commands can run.
- Allowlist specific command prefixes (recommended)
- Never use \* wildcard in production or with sensitive data
- Consider security implications of each allowed command
- Consider including potentially dangerous common commands in the deny list
- Always verify commands that interact with external systems
#### Allowed Commands
**Setting:** "Command prefixes that can be auto-executed"
Add command prefixes (e.g., `git`, `npm`, `ls`) that Kilo Code can run without asking. Use `*` to allow all commands (use with caution).
**Interface elements:**
- Text field to enter command prefixes (e.g., 'git')
- "Add" button to add new prefixes
- Clickable command buttons with X to remove them
#### Denied Commands
**Setting:** "Command prefixes that are always blocked"
Commands in this list will never run, even if `*` is in the allowed list. Use this to create exceptions for potentially dangerous commands.
:::
### Follow-Up Questions
:::info Follow-Up Questions (Risk: Low)
**Setting:** `Always default answer for follow-up questions`
**Description:** Automatically selects the first AI-suggested answer for a follow-up question after a configurable timeout. This speeds up your workflow by letting Kilo Code proceed without manual intervention.
**Visual countdown:** When enabled, a countdown timer appears on the first suggestion button in the chat interface, showing the remaining time before auto-selection. The timer displays seconds remaining (e.g., "3s") and counts down in real-time.
**Timeout slider:** Use the slider to set the wait time (Range: 1-300 seconds, Default: 60s).
**Override options:** You can cancel the auto-selection at any time by:
- Clicking a different suggestion
- Editing any suggestion
- Typing your own response
- Clicking the timer to pause it
**Risk level:** Low
**Use cases:**
- Overnight runs where you want Kilo Code to continue working
- Repetitive tasks where the default suggestions are usually correct
- Testing workflows where interaction isn't critical
:::
### Update Todo List
:::info Update Todo List (Risk: Low)
**Setting:** "Always approve todo list updates"
**Description:** "Automatically update the to-do list without requiring approval"
**Risk level:** Low
This setting allows Kilo Code to automatically update task progress and todo lists during work sessions. This includes:
- Marking tasks as completed
- Adding new discovered tasks
- Updating task status (pending, in progress, completed)
- Reorganizing task priorities
**Use cases:**
- Long-running development sessions
- Multi-step refactoring projects
- Complex debugging workflows
- Feature implementation with many subtasks
This is particularly useful when combined with the Subtasks permission, as it allows Kilo Code to maintain a complete picture of project progress without constant approval requests.
:::
## YOLO Mode
:::danger YOLO Mode (Risk: Maximum)
**"You Only Live Once"** mode enables _all_ auto-approve permissions at once using the master toggle. This gives Kilo Code complete autonomy to read files, write code, execute commands, and perform any operation without asking for permission.
You can optionally enable an AI Safety Gatekeeper, which reviews every intended change in YOLO mode and intelligently approves or blocks actions before they execute. We suggest using a small, fast model such as OpenAI gpt-oss-safeguard-20b. When enabled, AI Safety Gatekeeper will incur additional costs, as well as additional latency.
**When to use:**
- Rapid prototyping in isolated environments
- Trusted, low-stakes projects
- When you want maximum AI autonomy
**When NOT to use:**
- Production code or sensitive projects
- Working with important data
- Any situation where mistakes could be costly
This is the fastest way to work with Kilo Code, but also the riskiest. Use it only when you fully trust the AI and are prepared for the consequences.
:::
packages/kilo-docs/docs/features/enhance-prompt.md
-54
View File
@@ -1,54 +0,0 @@
# Enhance Prompt
The "Enhance Prompt" feature in Kilo Code helps you improve the quality and effectiveness of your prompts before sending them to the AI model. By clicking the <Codicon name="sparkle" /> icon in the chat input, you can automatically refine your initial request, making it clearer, more specific, and more likely to produce the desired results.
## Why Use Enhance Prompt?
* **Improved Clarity:** Kilo Code can rephrase your prompt to make it more understandable for the AI model.
* **Added Context:** The enhancement process can add relevant context to your prompt, such as the current file path or selected code.
* **Better Instructions:** Kilo Code can add instructions to guide the AI towards a more helpful response (e.g., requesting specific formatting or a particular level of detail).
* **Reduced Ambiguity:** Enhance Prompt helps to eliminate ambiguity and ensure that Kilo Code understands your intent.
* **Consistency**: Kilo will consistently format prompts the same way to the AI.
### Before and after
<img src="/docs/img/enhance-prompt/before.png" alt="very primitive prompt" width="300" style={{display: 'inline-block', marginRight: '20px', verticalAlign: 'middle'}} />
<img src="/docs/img/enhance-prompt/after.png" alt="enhanced prompt" width="300" style={{display: 'inline-block', verticalAlign: 'middle'}} />
## How to Use Enhance Prompt
1. **Type your initial prompt:** Enter your request in the Kilo Code chat input box as you normally would. This can be a simple question, a complex task description, or anything in between.
2. **Click the <Codicon name="sparkle" /> Icon:** Instead of pressing Enter, click the <Codicon name="sparkle" /> icon located in the bottom right of the chat input box.
3. **Review the Enhanced Prompt:** Kilo Code will replace your original prompt with an enhanced version. Review the enhanced prompt to make sure it accurately reflects your intent. You can further refine the enhanced prompt before sending.
4. **Send the Enhanced Prompt:** Press Enter or click the Send icon (<Codicon name="send" />) to send the enhanced prompt to Kilo Code.
## Customizing the Enhancement Process
### Customizing Template
The "Enhance Prompt" feature uses a customizable prompt template. You can modify this template to tailor the enhancement process to your specific needs.
1. **Open the Prompts Tab:** Click the <Codicon name="notebook" /> icon in the Kilo Code top menu bar.
2. **Select "ENHANCE" Tab:** You should see listed out support prompts, including "ENHANCE". Click on this tab.
3. **Edit the Prompt Template:** Modify the text in the "Prompt" field.
The default prompt template includes the placeholder `${userInput}`, which will be replaced with your original prompt. You can modify this to fit the model's prompt format, and instruct it how to enhance your request.
### Customizing Provider
Speed up prompt enhancement by switching to a more lightweight LLM model provider (e.g. GPT 4.1 Nano). This delivers faster results at lower cost while maintaining quality.
Create a dedicated profile for Enhance Prompt by following the [API configuration profiles guide](/features/api-configuration-profiles).
<img src="/docs/img/enhance-prompt/custom-enhance-profile.png" alt="Custom profile configuration for Enhance Prompt feature" width="600" />
For a detailed walkthrough: https://youtu.be/R1nDnCK-xzw
## Limitations and Best Practices
* **Experimental Feature:** Prompt enhancement is an experimental feature. The quality of the enhanced prompt may vary depending on the complexity of your request and the capabilities of the underlying model.
* **Review Carefully:** Always review the enhanced prompt before sending it. Kilo Code may make changes that don't align with your intentions.
* **Iterative Process:** You can use the "Enhance Prompt" feature multiple times to iteratively refine your prompt.
* **Not a Replacement for Clear Instructions:** While "Enhance Prompt" can help, it's still important to write clear and specific prompts from the start.
By using the "Enhance Prompt" feature, you can improve the quality of your interactions with Kilo Code and get more accurate and helpful responses.
packages/kilo-docs/docs/features/experimental/experimental-features.md
-47
View File
@@ -1,47 +0,0 @@
# Experimental Features
Kilo Code includes experimental features that are still under development. These features may be unstable, change significantly, or be removed in future versions. Use them with caution and be aware that they may not work as expected.
**Warning:** Experimental features may have unexpected behavior, including potential data loss or security vulnerabilities. Enable them at your own risk.
## Enabling Experimental Features
To enable or disable experimental features:
1. Open the Kilo Code settings (<Codicon name="gear" /> icon in the top right corner).
2. Go to the "Advanced Settings" section.
3. Find the "Experimental Features" section.
4. Check or uncheck the boxes for the features you want to enable or disable.
5. Click "Done" to save your changes.
## Current Experimental Features
The following experimental features are currently available:
## Native Function Calling
When enabled, native JSON function calling improves reliability via explicit signatures, first‑class schema validation, and better cache hit rates due to normalized structured arguments.
It replaces brittle XML-style prompts that risk mixed prose/markup, missing fields, and regex-heavy cleanup, yielding more deterministic tool use and clearer error handling.
[More details are available](native-function-calling)
## Voice Transcription
When enabled, voice transcription allows you to dictate messages using speech-to-text in the chat interface. Powered by OpenAI's Whisper API and FFmpeg for audio capture.
[More details are available](voice-transcription)
## Concurrent file edits
When enabled, Kilo Code can edit multiple files in a single request. When disabled, Kilo Code must edit one file at a time. Disabling this can help when working with less capable models or when you want more control over file modifications.
### Power Steering
When enabled, Kilo Code will remind the model about the details of its current mode definition more frequently. This will lead to stronger adherence to role definitions and custom instructions, but will use more tokens per message.
## Providing Feedback
If you encounter any issues with experimental features, or if you have suggestions for improvements, please report them on the [Kilo Code Code GitHub Issues page](https://github.com/Kilo-Org/kilocode) or join our [Discord server](https://kilo.ai/discord) where we have channels dedciated to many experimental features.
Your feedback is valuable and helps us improve Kilo Code!
packages/kilo-docs/docs/features/experimental/native-function-calling.md
-71
View File
@@ -1,71 +0,0 @@
# Native Function Calling
## Context
Historically, Kilo Code has relied on XML-style function and tool definitions embedded in the system prompt to inform the model about tools available to accomplish tasks. The model was given instructions and examples about how to use these tools:
```xml
<attempt_completion>
<reason>Put your reason here</reason>
</attempt_completion>
Use this tool to signal to the user you are complete.
```
This technique was originally developed ca. 2023 and used first by Anthropic at scale. It was effective and valuable, because it allowed developers to specify arbitrary tools at runtime, rather than rely on pre-configured options from the model labs.
However, it also suffers from numerous downsides. Its effective replacement is JSON-style native function calls that are sent to the model in a dedicated field and with a strong, easily validated schema.
## What
Kilo Code recently implemented _experimental_ support for native function calling in 4.106.0.
## Why?
1. Native function calling offers stronger reliability than older XML-style patterns because the model is explicitly trained to decide when to call a function and to return only the structured arguments that match a declared signature. This reduces the classic failure modes of XML prompts, where the model might interleave prose with markup, drop required fields, or hallucinate tag structures. With native calls, the function signature acts as a contract; the model returns arguments for that contract instead of free‑form text, which materially improves call success rates and downstream determinism.
2. Schema validation becomes first‑class with native function calls. Rather than embedding schemas in prompts and hoping the model adheres, we register a JSON‑schema‑like parameter definition alongside the function. The model’s output is constrained to those types and enums, enabling straightforward server‑side validation and clearer error handling and retries. In practice, this eliminates much of the brittle regex and heuristic cleanup common with XML prompts, and allows us to implement robust “validate → correct → retry” loops tied to explicit parameter constraints.
3. Finally, native function calls can improve cache effectiveness and throughput. Because arguments are structured and validated, equivalent calls normalize to the same payload more often than semantically similar but syntactically different XML blobs. That normalization increases cache hit rates across identical tool invocations, reducing latency and cost, and making end‑to‑end behavior more predictable when chaining multiple tools or working across providers. While XML calling can achieve 80-85% input token cache hit rates on modern models like GPT-5, native function calling can increase that to 90%+, while also achieving the stronger reliability described above.
## Downsides
There are a few considerations and challenges.
1. Model Compatability: Not all models are trained for native function calling, especially small models below 4-7B parameters. That being said, the vast majority of models, both open and closed, released since June 2025 _do_ support native function calls.
2. Provider Compatability: There are many OpenAI "compliant" providers on the market, using a variety of tools to support their products (often vLLM, SGLang, TensorRT-LLM). Beyond that are numerous local model tools (LM Studio, Ollama, Osaurus). Despite claiming compatability with the OpenAI API specification, its common to see partial or outright incorrect implementations.
Because of these risks and considerations, this capability is experiment, and off by default for nearly all models and providers.
## Use
To enable and use native function calling, consider and perform the following:
1. Ensure you are using a provider that has been enabled in Kilo Code for this experiment. As of Oct 21, 2025, they include:
- OpenRouter
- Kilo Code
- LM Studio
- OpenAI Compatible
- Z.ai
- Synthetic
- X.ai
- Chutes
By default, native function calling is _disabled_ for most models. Should you wish to try it, open the Advanced settings for a given provider profile that is included in the testing group.
Change the Tool Calling Style to `JSON`, and save the profile.
## Caveats
This feature is currently experimental and mostly intended for users interested in contributing to its development.
There are possible issues including, but not limited to:
- ~~Missing tools~~: As of Oct 21, all tools are supported
- Tools calls not updating the UI until they are complete
- ~~MCP servers not working~~: As of Oct 21, MCPs are supported
- Errors specific to certain inference providers
- Not all inference providers use servers that are fully compatible with the OpenAI specification. As a result, behavior will vary, even with the same model across providers.
While nearly any provider can be configured via the OpenAI Compatible profile, testers should be aware that this is enabled purely for ease of testing and should be prepared to experience unexpected responses from providers that are not prepared to handle native function calls.
packages/kilo-docs/docs/features/experimental/voice-transcription.md
-81
View File
@@ -1,81 +0,0 @@
# Voice Transcription
Kilo Code now includes experimental support for voice input in the chat interface. This feature allows you to dictate your messages using speech-to-text (STT) technology powered by OpenAI's Whisper API.
## Prerequisites
Voice transcription requires two components to be set up:
### 1. FFmpeg Installation
FFmpeg is required for audio capture and processing. Install it for your platform:
**macOS:**
```bash
brew install ffmpeg
```
**Linux (Ubuntu/Debian):**
```bash
sudo apt update
sudo apt install ffmpeg
```
**Windows:**
Download from [ffmpeg.org/download.html](https://ffmpeg.org/download.html) and add to your system PATH.
### 2. OpenAI API Key
Voice transcription uses OpenAI's Whisper API for speech recognition. You need an OpenAI API configuration in Kilo Code:
1. Configure an OpenAI provider profile in Kilo Code settings
2. Add your OpenAI API key to the profile
3. Either **OpenAI** or **OpenAI Native** provider types will work
## Enabling Voice Transcription
Voice transcription is an experimental feature that must be enabled:
1. Open Kilo Code settings
2. Navigate to **Experimental Features**
3. Enable the **Speech to Text** experiment
## Using Voice Input
Once configured and enabled, a microphone button will appear in the chat input area:
1. Click the microphone button to start recording
2. Speak your message clearly
3. Click again to stop recording
4. Your speech will be automatically transcribed into text
The feature includes real-time audio level visualization and voice activity detection to automatically detect when you're speaking.
## Technical Details
- **Audio Processing**: Uses FFmpeg for system audio capture
- **Voice Recognition**: OpenAI Whisper API for transcription
## Troubleshooting
**Microphone button not appearing:**
- Ensure the Speech to Text experiment is enabled
- Verify FFmpeg is installed and in your PATH
- Check that you have an OpenAI provider configured with a valid API key
**Transcription errors:**
- Verify your OpenAI API key is valid and has available credits
- Check your internet connection
- Try speaking more clearly or adjusting your microphone settings
## Limitations
This feature is currently experimental and may have limitations:
- Requires active internet connection
- Uses OpenAI API credits based on audio duration
- Transcription accuracy depends on audio quality and speech clarity
packages/kilo-docs/docs/features/footgun-prompting.md
-52
View File
@@ -1,52 +0,0 @@
---
sidebar_label: 'Footgun Prompting'
---
# Footgun Prompting: Override System Prompts
Footgun Prompting, AKA Overriding System Prompt, allows advanced users to completely replace the default system prompt for a specific Kilo Code mode. This provides granular control over the AI's behavior but bypasses built-in safeguards.
:::info **footgun** *(noun)*
1. *(programming slang, humorous, derogatory)* Any feature likely to lead to the programmer shooting themself in the foot.
> The System Prompt Override is considered a footgun because modifying the core instructions without a deep understanding can lead to unexpected or broken behavior, especially regarding tool usage and response consistency.
:::
## How It Works
1. **Override File:** Create a file named `.kilocode/system-prompt-{mode-slug}` in your workspace root (e.g., `.kilocode/system-prompt-code` for the Code mode).
2. **Content:** The content of this file becomes the new system prompt for that specific mode.
3. **Activation:** Kilo Code automatically detects this file. When present, it replaces most of the standard system prompt sections.
4. **Preserved Sections:** Only the core `roleDefinition` and any `customInstructions` you've set for the mode are kept alongside your override content. Standard sections like tool descriptions, rules, and capabilities are bypassed.
5. **Construction:** The final prompt sent to the model looks like this:
```
${roleDefinition}
${content_of_your_override_file}
${customInstructions}
```
## Accessing the Feature
You can find the option and instructions within the Kilo Code UI:
1. Click the MODE selector in the bottom-left of the Kilo Code text-input box.
2. Click "Edit..." at the bottom of the mode-selection list
3. Expand the **"Advanced: Override System Prompt"** section at the bottom.
4. Clicking the file path link within the explanation will open or create the correct override file for the currently selected mode in VS Code.
<img src="/docs/img/footgun-prompting/footgun-prompting.png" alt="UI showing the Advanced: Override System Prompt section" width="500" />
## Key Considerations & Warnings
- **Intended Audience:** Best suited for users deeply familiar with Kilo Code's prompting system and the implications of modifying core instructions.
- **Impact on Functionality:** Custom prompts override standard instructions, including those for tool usage and response consistency. This can cause unexpected behavior or errors if not managed carefully.
- **Mode-Specific:** Each override file applies only to the mode specified in its filename (`{mode-slug}`).
- **No File, No Override:** If the `.kilocode/system-prompt-{mode-slug}` file doesn't exist, Kilo Code uses the standard system prompt generation process for that mode.
- **Directory Creation:** Kilo Code ensures the `.kilocode` directory exists before attempting to read or create the override file.
Use this feature cautiously. While powerful for customization, incorrect implementation can significantly degrade Kilo Code's performance and reliability for the affected mode.
packages/kilo-docs/docs/features/mcp/server-transports.md
-196
View File
@@ -1,196 +0,0 @@
---
title: MCP Server Transports
sidebar_label: STDIO & SSE Transports
---
# MCP Server Transports: STDIO & SSE
Model Context Protocol (MCP) supports two primary transport mechanisms for communication between Kilo Code and MCP servers: Standard Input/Output (STDIO) and Server-Sent Events (SSE). Each has distinct characteristics, advantages, and use cases.
## STDIO Transport
STDIO transport runs locally on your machine and communicates via standard input/output streams.
### How STDIO Transport Works
1. The client (Kilo Code) spawns an MCP server as a child process
2. Communication happens through process streams: client writes to server's STDIN, server responds to STDOUT
3. Each message is delimited by a newline character
4. Messages are formatted as JSON-RPC 2.0
```
Client Server
| |
|---- JSON message ------>| (via STDIN)
| | (processes request)
|<---- JSON message ------| (via STDOUT)
| |
```
### STDIO Characteristics
* **Locality**: Runs on the same machine as Kilo Code
* **Performance**: Very low latency and overhead (no network stack involved)
* **Simplicity**: Direct process communication without network configuration
* **Relationship**: One-to-one relationship between client and server
* **Security**: Inherently more secure as no network exposure
### When to Use STDIO
STDIO transport is ideal for:
* Local integrations and tools running on the same machine
* Security-sensitive operations
* Low-latency requirements
* Single-client scenarios (one Kilo Code instance per server)
* Command-line tools or IDE extensions
### STDIO Implementation Example
```typescript
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
const server = new Server({name: 'local-server', version: '1.0.0'});
// Register tools...
// Use STDIO transport
const transport = new StdioServerTransport(server);
transport.listen();
```
## SSE Transport
Server-Sent Events (SSE) transport runs on a remote server and communicates over HTTP/HTTPS.
### How SSE Transport Works
1. The client (Kilo Code) connects to the server's SSE endpoint via HTTP GET request
2. This establishes a persistent connection where the server can push events to the client
3. For client-to-server communication, the client makes HTTP POST requests to a separate endpoint
4. Communication happens over two channels:
* Event Stream (GET): Server-to-client updates
* Message Endpoint (POST): Client-to-server requests
```
Client Server
| |
|---- HTTP GET /events ----------->| (establish SSE connection)
|<---- SSE event stream -----------| (persistent connection)
| |
|---- HTTP POST /message --------->| (client request)
|<---- SSE event with response ----| (server response)
| |
```
### SSE Characteristics
* **Remote Access**: Can be hosted on a different machine from Kilo Code
* **Scalability**: Can handle multiple client connections concurrently
* **Protocol**: Works over standard HTTP (no special protocols needed)
* **Persistence**: Maintains a persistent connection for server-to-client messages
* **Authentication**: Can use standard HTTP authentication mechanisms
### When to Use SSE
SSE transport is better for:
* Remote access across networks
* Multi-client scenarios
* Public services
* Centralized tools that many users need to access
* Integration with web services
### SSE Implementation Example
```typescript
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
import express from 'express';
const app = express();
const server = new Server({name: 'remote-server', version: '1.0.0'});
// Register tools...
// Use SSE transport
const transport = new SSEServerTransport(server);
app.use('/mcp', transport.requestHandler());
app.listen(3000, () => {
console.log('MCP server listening on port 3000');
});
```
## Local vs. Hosted: Deployment Aspects
The choice between STDIO and SSE transports directly impacts how you'll deploy and manage your MCP servers.
### STDIO: Local Deployment Model
STDIO servers run locally on the same machine as Kilo Code, which has several important implications:
* **Installation**: The server executable must be installed on each user's machine
* **Distribution**: You need to provide installation packages for different operating systems
* **Updates**: Each instance must be updated separately
* **Resources**: Uses the local machine's CPU, memory, and disk
* **Access Control**: Relies on the local machine's filesystem permissions
* **Integration**: Easy integration with local system resources (files, processes)
* **Execution**: Starts and stops with Kilo Code (child process lifecycle)
* **Dependencies**: Any dependencies must be installed on the user's machine
#### Practical Example
A local file search tool using STDIO would:
* Run on the user's machine
* Have direct access to the local filesystem
* Start when needed by Kilo Code
* Not require network configuration
* Need to be installed alongside Kilo Code or via a package manager
### SSE: Hosted Deployment Model
SSE servers can be deployed to remote servers and accessed over the network:
* **Installation**: Installed once on a server, accessed by many users
* **Distribution**: Single deployment serves multiple clients
* **Updates**: Centralized updates affect all users immediately
* **Resources**: Uses server resources, not local machine resources
* **Access Control**: Managed through authentication and authorization systems
* **Integration**: More complex integration with user-specific resources
* **Execution**: Runs as an independent service (often continuously)
* **Dependencies**: Managed on the server, not on user machines
#### Practical Example
A database query tool using SSE would:
* Run on a central server
* Connect to databases with server-side credentials
* Be continuously available for multiple users
* Require proper network security configuration
* Be deployed using container or cloud technologies
### Hybrid Approaches
Some scenarios benefit from a hybrid approach:
1. **STDIO with Network Access**: A local STDIO server that acts as a proxy to remote services
2. **SSE with Local Commands**: A remote SSE server that can trigger operations on the client machine through callbacks
3. **Gateway Pattern**: STDIO servers for local operations that connect to SSE servers for specialized functions
## Choosing Between STDIO and SSE
| Consideration | STDIO | SSE |
|---------------|-------|-----|
| **Location** | Local machine only | Local or remote |
| **Clients** | Single client | Multiple clients |
| **Performance** | Lower latency | Higher latency (network overhead) |
| **Setup Complexity** | Simpler | More complex (requires HTTP server) |
| **Security** | Inherently secure | Requires explicit security measures |
| **Network Access** | Not needed | Required |
| **Scalability** | Limited to local machine | Can distribute across network |
| **Deployment** | Per-user installation | Centralized installation |
| **Updates** | Distributed updates | Centralized updates |
| **Resource Usage** | Uses client resources | Uses server resources |
| **Dependencies** | Client-side dependencies | Server-side dependencies |
## Configuring Transports in Kilo Code
For detailed information on configuring STDIO and SSE transports in Kilo Code, including example configurations, see the [Understanding Transport Types](/features/mcp/using-mcp-in-kilo-code#understanding-transport-types) section in the Using MCP in Kilo Code guide.
packages/kilo-docs/docs/features/model-temperature.md
-93
View File
@@ -1,93 +0,0 @@
# Model Temperature
Temperature controls the randomness of AI model outputs. Adjusting this setting optimizes results for different tasks - from precise code generation to creative brainstorming. Temperature is one of the most powerful parameters for controlling AI behavior. A well-tuned temperature setting can dramatically improve the quality and appropriateness of responses for specific tasks.
<img src="/docs/img/model-temperature/model-temperature.gif" alt="Animation showing temperature slider adjustment" width="100%" />
## What is Temperature?
Temperature is a setting (usually between 0.0 and 2.0) that controls how random or predictable the AI's output is. Finding the right balance is key: lower values make the output more focused and consistent, while higher values encourage more creativity and variation. For many coding tasks, a moderate temperature (around 0.3 to 0.7) often works well, but the best setting depends on what you're trying to achieve.
:::info Temperature and Code: Common Misconceptions
Temperature controls output randomness, not code quality or accuracy directly. Key points:
* **Low Temperature (near 0.0):** Produces predictable, consistent code. Good for simple tasks, but can be repetitive and lack creativity. It doesn't guarantee *better* code.
* **High Temperature:** Increases randomness, potentially leading to creative solutions but also more errors or nonsensical code. It doesn't guarantee *higher-quality* code.
* **Accuracy:** Code accuracy depends on the model's training and prompt clarity, not temperature.
* **Temperature 0.0:** Useful for consistency, but limits exploration needed for complex problems.
:::
## Default Values in Kilo Code
Kilo Code uses a default temperature of 0.0 for most models, optimizing for maximum determinism and precision in code generation. This applies to OpenAI models, Anthropic models (non-thinking variants), LM Studio models, and most other providers.
Some models use higher default temperatures - DeepSeek R1 models and certain reasoning-focused models default to 0.6, providing a balance between determinism and creative exploration.
Models with thinking capabilities (where the AI shows its reasoning process) require a fixed temperature of 1.0 which cannot be changed, as this setting ensures optimal performance of the thinking mechanism. This applies to any model with the ":thinking" flag enabled.
Some specialized models don't support temperature adjustments at all, in which case Kilo Code respects these limitations automatically.
## When to Adjust Temperature
Here are some examples of temperature settings that might work well for different tasks:
* **Code Mode (0.0-0.3):** For writing precise, correct code with consistent, deterministic results
* **Architect Mode (0.4-0.7):** For brainstorming architecture or design solutions with balanced creativity and structure
* **Ask Mode (0.7-1.0):** For explanations or open-ended questions requiring diverse and insightful responses
* **Debug Mode (0.0-0.3):** For troubleshooting bugs with consistent precision
These are starting points – it's important to [experiment with different settings](#experimentation) to find what works best for your specific needs and preferences.
## How to Adjust Temperature
1. **Open the Kilo Code Panel:** Click the Kilo Code icon (<img src="/docs/img/kilo-v1.svg" width="12" />) in the VS Code Side Bar
2. **Open Settings:** Click the <Codicon name="gear" /> icon in the top right corner
3. **Find Temperature Control:** Navigate to the Providers section
4. **Enable Custom Temperature:** Check the "Use custom temperature" box
5. **Set Your Value:** Adjust the slider to your preferred value
<img src="/docs/img/model-temperature/model-temperature.png" alt="Temperature setting in Kilo Code settings panel" width="550" />
*Temperature slider in Kilo Code settings panel*
## Using API Configuration Profiles for Temperature
Create multiple [API configuration profiles](/features/api-configuration-profiles) with different temperature settings:
**How to set up task-specific temperature profiles:**
1. Create specialized profiles like "Code - Low Temp" (0.1) and "Ask - High Temp" (0.8)
2. Configure each profile with appropriate temperature settings
3. Switch between profiles using the dropdown in settings or chat interface
4. Set different profiles as defaults for each mode for automatic switching when changing modes
This approach optimizes model behavior for specific tasks without manual adjustments.
## Technical Implementation
Kilo Code implements temperature handling with these considerations:
* User-defined settings take priority over defaults
* Provider-specific behaviors are respected
* Model-specific limitations are enforced:
* Thinking-enabled models require a fixed temperature of 1.0
* Some models don't support temperature adjustments
## Experimentation
Experimenting with different temperature settings is the most effective way to discover what works best for your specific needs:
### Effective Temperature Testing
1. **Start with defaults** - Begin with Kilo Code's preset values (0.0 for most tasks) as your baseline
2. **Make incremental adjustments** - Change values in small steps (±0.1) to observe subtle differences
3. **Test consistently** - Use the same prompt across different temperature settings for valid comparisons
4. **Document results** - Note which values produce the best outcomes for specific types of tasks
5. **Create profiles** - Save effective settings as [API configuration profiles](/features/api-configuration-profiles) for quick access
Remember that different models may respond differently to the same temperature values, and thinking-enabled models always use a fixed temperature of 1.0 regardless of your settings.
## Related Features
- Works with all [API providers](/providers/openai) supported by Kilo Code
- Complements [custom instructions](/advanced-usage/custom-instructions) for fine-tuning responses
- Works alongside [custom modes](/features/custom-modes) you create
packages/kilo-docs/docs/features/more-features.md
-41
View File
@@ -1,41 +0,0 @@
---
sidebar_label: Additional Features
---
# Additional Features
Kilo Code's extras streamline routine tasks and improve accessibility.
## Suggested Responses
Kilo Code offers suggested responses so you spend less time typing.
- After you ask a question, buttons appear below the chat box.
- Click a button to reuse it as your next prompt.
## Text to Speech
The Text-to-Speech feature lets Kilo Code read responses aloud.
1. Enable TTS in settings.
2. Click the speaker icon next to any response to start listening.
## Global Language Support
Kilo Code supports 14 languages:
- Simplified Chinese
- Traditional Chinese
- Spanish
- Hindi
- French
- Portuguese
- German
- Japanese
- Korean
- Italian
- Turkish
- Vietnamese
- Polish
- Catalan
Change languages under **Advanced Settings > Language**.
packages/kilo-docs/docs/features/suggested-responses.md
-45
View File
@@ -1,45 +0,0 @@
---
sidebar_label: Suggested Responses
---
import Codicon from '@site/src/components/Codicon';
# Suggested Responses
When Kilo Code needs more information to complete a task, it uses the [`ask_followup_question` tool](/features/tools/ask-followup-question). To make responding easier and faster, Kilo Code often provides suggested answers alongside the question.
## Overview
Suggested Responses appear as clickable buttons directly below Kilo Code's question in the chat interface. They offer pre-formulated answers relevant to the question, helping you provide input quickly.
<img src="/docs/img/suggested-responses/suggested-responses.png" alt="Example of Kilo Code asking a question with suggested response buttons below it" width="500" />
## How It Works
1. **Question Appears**: Kilo Code asks a question using the `ask_followup_question` tool.
2. **Suggestions Displayed**: If suggestions are provided by Kilo Code, they appear as buttons below the question.
3. **Interaction**: You can interact with these suggestions in two ways.
## Interacting with Suggestions
You have two options for using suggested responses:
1. **Direct Selection**:
* **Action**: Simply click the button containing the answer you want to provide.
* **Result**: The selected answer is immediately sent back to Kilo Code as your response. This is the quickest way to reply if one of the suggestions perfectly matches your intent.
2. **Edit Before Sending**:
* **Action**:
* Hold down `Shift` and click the suggestion button.
* *Alternatively*, hover over the suggestion button and click the pencil icon (<Codicon name="edit" />) that appears.
* **Result**: The text of the suggestion is copied into the chat input box. You can then modify the text as needed before pressing Enter to send your customized response. This is useful when a suggestion is close but needs minor adjustments.
<img src="/docs/img/suggested-responses/suggested-responses-1.png" alt="Chat input box showing text copied from a suggested response, ready for editing" width="600" />
## Benefits
* **Speed**: Quickly respond without typing full answers.
* **Clarity**: Suggestions often clarify the type of information Kilo Code needs.
* **Flexibility**: Edit suggestions to provide precise, customized answers when needed.
This feature streamlines the interaction when Kilo Code requires clarification, allowing you to guide the task effectively with minimal effort.
packages/kilo-docs/docs/features/tools/access-mcp-resource.md
-126
View File
@@ -1,126 +0,0 @@
# access_mcp_resource
The `access_mcp_resource` tool retrieves data from resources exposed by connected Model Context Protocol (MCP) servers. It allows Kilo Code to access files, API responses, documentation, or system information that provides additional context for tasks.
## Parameters
The tool accepts these parameters:
- `server_name` (required): The name of the MCP server providing the resource
- `uri` (required): The URI identifying the specific resource to access
## What It Does
This tool connects to MCP servers and fetches data from their exposed resources. Unlike `use_mcp_tool` which executes actions, this tool specifically retrieves information that serves as context for tasks.
## When is it used?
- When Kilo Code needs additional context from external systems
- When Kilo Code needs to access domain-specific data from specialized MCP servers
- When Kilo Code needs to retrieve reference documentation hosted by MCP servers
- When Kilo Code needs to integrate real-time data from external APIs via MCP
## Key Features
- Retrieves both text and image data from MCP resources
- Requires user approval before executing resource access
- Uses URI-based addressing to precisely identify resources
- Integrates with the Model Context Protocol SDK
- Displays resource content appropriately based on content type
- Supports timeouts for reliable network operations
- Handles server connection states (connected, connecting, disconnected)
- Discovers available resources from connected servers
- Processes structured response data with metadata
- Handles image content special rendering
## Limitations
- Depends on external MCP servers being available and connected
- Limited to the resources provided by connected servers
- Cannot access resources from disabled servers
- Network issues can affect reliability and performance
- Resource access subject to configured timeouts
- URI formats are determined by the specific MCP server implementation
- No offline or cached resource access capabilities
## How It Works
When the `access_mcp_resource` tool is invoked, it follows this process:
1. **Connection Validation**:
- Verifies that an MCP hub is available and initialized
- Confirms the specified server exists in the connection list
- Checks if the server is disabled (returns an error if it is)
2. **User Approval**:
- Presents the resource access request to the user for approval
- Provides server name and resource URI for user verification
- Proceeds only if the user approves the resource access
3. **Resource Request**:
- Uses the Model Context Protocol SDK to communicate with servers
- Makes a `resources/read` request to the server through the MCP hub
- Applies configured timeouts to prevent hanging on unresponsive servers
4. **Response Processing**:
- Receives a structured response with metadata and content arrays
- Processes text content for display to the user
- Handles image data specially for appropriate display
- Returns the processed resource data to Kilo Code for use in the current task
## Resource Types
MCP servers can provide two main types of resources:
1. **Standard Resources**:
- Fixed resources with specific URIs
- Defined name, description, and MIME type
- Direct access without parameters
- Typically represent static data or real-time information
2. **Resource Templates**:
- Parameterized resources with placeholder values in URIs
- Allow dynamic resource generation based on provided parameters
- Can represent queries or filtered views of data
- More flexible but require additional URI formatting
## Examples When Used
- When helping with API development, Kilo Code retrieves endpoint specifications from MCP resources to ensure correct implementation.
- When assisting with data visualization, Kilo Code accesses current data samples from connected MCP servers.
- When working in specialized domains, Kilo Code retrieves technical documentation to provide accurate guidance.
- When generating industry-specific code, Kilo Code references compliance requirements from documentation resources.
## Usage Examples
Accessing current weather data:
```
<access_mcp_resource>
<server_name>weather-server</server_name>
<uri>weather://san-francisco/current</uri>
</access_mcp_resource>
```
Retrieving API documentation:
```
<access_mcp_resource>
<server_name>api-docs</server_name>
<uri>docs://payment-service/endpoints</uri>
</access_mcp_resource>
```
Accessing domain-specific knowledge:
```
<access_mcp_resource>
<server_name>knowledge-base</server_name>
<uri>kb://medical/terminology/common</uri>
</access_mcp_resource>
```
Fetching system configuration:
```
<access_mcp_resource>
<server_name>infra-monitor</server_name>
<uri>config://production/database</uri>
</access_mcp_resource>
```
packages/kilo-docs/docs/features/tools/apply-diff.md
-98
View File
@@ -1,98 +0,0 @@
# apply_diff
The `apply_diff` tool makes precise, surgical changes to files by specifying exactly what content to replace. It uses multiple sophisticated strategies for finding and applying changes while maintaining proper code formatting and structure.
## Parameters
The tool accepts these parameters:
- `path` (required): The path of the file to modify relative to the current working directory.
- `diff` (required): The search/replace block defining the changes. **Line numbers are mandatory within the diff content format** for all currently implemented strategies.
**Note**: While the system is designed to be extensible with different diff strategies, all currently implemented strategies require line numbers to be specified within the diff content itself using the `:start_line:` marker.
## What It Does
This tool applies targeted changes to existing files using sophisticated strategies to locate and replace content precisely. Unlike simple search and replace, it uses intelligent matching algorithms (including fuzzy matching) that adapt to different content types and file sizes, with fallback mechanisms for complex edits.
## When is it used?
- When Kilo Code needs to make precise changes to existing code without rewriting entire files.
- When refactoring specific sections of code while maintaining surrounding context.
- When fixing bugs in existing code with surgical precision.
- When implementing feature enhancements that modify only certain parts of a file.
## Key Features
- Uses intelligent fuzzy matching with configurable confidence thresholds (typically 0.8-1.0).
- Provides context around matches using `BUFFER_LINES` (default 40).
- Employs an overlapping window approach for searching large files.
- Preserves code formatting and indentation automatically.
- Combines overlapping matches for improved confidence scoring.
- Shows changes in a diff view for user review and editing before applying.
- Tracks consecutive errors per file (`consecutiveMistakeCountForApplyDiff`) to prevent repeated failures.
- Validates file access against `.kilocodeignore` rules.
- Handles multi-line edits effectively.
## Limitations
- Works best with unique, distinctive code sections for reliable identification.
- Performance can vary with very large files or highly repetitive code patterns.
- Fuzzy matching might occasionally select incorrect locations if content is ambiguous.
- Each diff strategy has specific format requirements.
- Complex edits might require careful strategy selection or manual review.
## How It Works
When the `apply_diff` tool is invoked, it follows this process:
1. **Parameter Validation**: Validates required `path` and `diff` parameters.
2. **KiloCodeIgnore Check**: Validates if the target file path is allowed by `.kilocodeignore` rules.
3. **File Analysis**: Loads the target file content.
4. **Match Finding**: Uses the selected strategy's algorithms (exact, fuzzy, overlapping windows) to locate the target content, considering confidence thresholds and context (`BUFFER_LINES`).
5. **Change Preparation**: Generates the proposed changes, preserving indentation.
6. **User Interaction**:
* Displays the changes in a diff view.
* Allows the user to review and potentially edit the proposed changes.
* Waits for user approval or rejection.
7. **Change Application**: If approved, applies the changes (potentially including user edits) to the file.
8. **Error Handling**: If errors occur (e.g., match failure, partial application), increments the `consecutiveMistakeCountForApplyDiff` for the file and reports the failure type.
9. **Feedback**: Returns the result, including any user feedback or error details.
## Diff Strategy
Kilo Code uses this strategy for applying diffs:
### MultiSearchReplaceDiffStrategy
An enhanced search/replace format supporting multiple changes in one request. **Line numbers are mandatory for each search block.**
* **Best for**: Multiple, distinct changes where line numbers are known or can be estimated.
* **Requires**: Exact match for the `SEARCH` block content, including whitespace and indentation. The `:start_line:` marker is **required** within each SEARCH block. Markers within content must be escaped (`\`).
Example format for the `<diff>` block:
```diff
<<<<<<< SEARCH
:start_line:10
:end_line:12
-------
// Old calculation logic
const result = value * 0.9;
return result;
=======
// Updated calculation logic with logging
console.log(`Calculating for value: ${value}`);
const result = value * 0.95; // Adjusted factor
return result;
>>>>>>> REPLACE
<<<<<<< SEARCH
:start_line:25
:end_line:25
-------
const defaultTimeout = 5000;
=======
const defaultTimeout = 10000; // Increased timeout
>>>>>>> REPLACE
```
packages/kilo-docs/docs/features/tools/ask-followup-question.md
-169
View File
@@ -1,169 +0,0 @@
# ask_followup_question
The `ask_followup_question` tool enables interactive communication by asking specific questions to gather additional information needed to complete tasks effectively.
## Parameters
The tool accepts these parameters:
- `question` (required): The specific question to ask the user
- `follow_up` (optional): A list of 2-4 suggested answers that help guide user responses, each within `<suggest>` tags
## What It Does
This tool creates a conversational interface between Kilo Code and the user, allowing for gathering clarification, additional details, or user preferences when facing ambiguities or decision points. Each question can include suggested responses to streamline the interaction.
## When is it used?
- When critical information is missing from the original request
- When Kilo Code needs to choose between multiple valid implementation approaches
- When technical details or preferences are required to proceed
- When Kilo Code encounters ambiguities that need resolution
- When additional context would significantly improve the solution quality
## Key Features
- Provides a structured way to gather specific information without breaking workflow
- Includes suggested answers to reduce user typing and guide responses
- Maintains conversation history and context across interactions
- Supports responses containing images and code snippets
- Available in all modes as part of the "always available" tool set
- Enables direct user guidance on implementation decisions
- Formats responses with `<answer>` tags to distinguish them from regular conversation
- Resets consecutive error counter when used successfully
## Limitations
- Limited to asking one specific question per tool use
- Presents suggestions as selectable options in the UI
- Cannot force structured responses – users can still respond freely
- Excessive use can slow down task completion and create a fragmented experience
- Suggested answers must be complete, with no placeholders requiring user edits
- No built-in validation for user responses
- Contains no mechanism to enforce specific answer formats
## How It Works
When the `ask_followup_question` tool is invoked, it follows this process:
1. **Parameter Validation**: Validates the required `question` parameter and checks for optional suggestions
- Ensures question text is provided
- Parses any suggested answers from the `follow_up` parameter using the `fast-xml-parser` library
- Normalizes suggestions into an array format even if there's only one suggestion
2. **JSON Transformation**: Converts the XML structure into a standardized JSON format for UI display
```typescript
{
question: "User's question here",
suggest: [
{ answer: "Suggestion 1" },
{ answer: "Suggestion 2" }
]
}
```
3. **UI Integration**:
- Passes the JSON structure to the UI layer via the `ask("followup", ...)` method
- Displays selectable suggestion buttons to the user in the interface
- Creates an interactive experience for selecting or typing a response
4. **Response Collection and Processing**:
- Captures user text input and any images included in the response
- Wraps user responses in `<answer>` tags when returning to the assistant
- Preserves any images included in the user's response
- Maintains the conversational context by adding the response to the history
- Resets the consecutive error counter when the tool is used successfully
5. **Error Handling**:
- Tracks consecutive mistakes using a counter
- Resets the counter when the tool is used successfully
- Provides specific error messages:
- For missing parameters: "Missing required parameter 'question'"
- For XML parsing: "Failed to parse operations: [error message]"
- For invalid format: "Invalid operations xml format"
- Contains safeguards to prevent tool execution when required parameters are missing
- Increments consecutive mistake count when errors occur
## Workflow Sequence
The question-answer cycle follows this sequence:
1. **Information Gap Recognition**: Kilo Code identifies missing information needed to proceed
2. **Specific Question Creation**: Kilo Code formulates a clear, targeted question
3. **Suggestion Development**: Kilo Code creates relevant suggested answers (optional but recommended)
4. **Tool Invocation**: Assistant invokes the tool with question and optional suggestions
5. **UI Presentation**: Question and suggestions are displayed to the user as interactive elements
6. **User Response**: The user selects a suggestion or provides a custom answer
7. **Message Handling**: System handles both partial and complete messages
- For streaming responses, processes chunks as they arrive
- For complete messages, processes the entire response at once
- Maintains state consistency regardless of message chunking
8. **Response Processing**: System wraps the response in `<answer>` tags and preserves images
9. **Context Integration**: Response is added to the conversation history
10. **Task Continuation**: Kilo Code proceeds with the task using the new information
## Examples When Used
- When developing a web application, Kilo Code might ask about preferred styling frameworks (Bootstrap, Tailwind, custom CSS)
- When creating an API, Kilo Code might ask about authentication methods (JWT, OAuth, API keys)
- When refactoring code, Kilo Code might ask about prioritizing performance vs. readability
- When setting up a database, Kilo Code might ask about specific schema design preferences
- When creating a custom feature, Kilo Code might ask about specific behavior expectations
- When troubleshooting errors, Kilo Code might ask about specific environment details
## Response Format
When a user responds to a question, the response is formatted with `<answer>` tags for clarity and consistency. This format helps clearly separate the user's answer from other conversation elements.
Example response format:
```
<answer>
Use Tailwind CSS for utility-first styling with maximum flexibility
</answer>
```
Key characteristics of the response format:
- Surrounded by `<answer>` tags
- Preserves formatting of the original response
- Maintains images if included in the response
- Returns the complete text, even for long responses
## Usage Examples
Asking about implementation preferences:
```
<ask_followup_question>
<question>Which styling approach would you prefer for this web application?</question>
<follow_up>
<suggest>Use Bootstrap for rapid development with consistent components</suggest>
<suggest>Use Tailwind CSS for utility-first styling with maximum flexibility</suggest>
<suggest>Use vanilla CSS with custom styling for complete control and minimal dependencies</suggest>
</follow_up>
</ask_followup_question>
```
Requesting technical clarification:
```
<ask_followup_question>
<question>What database should this application use for storing user data?</question>
<follow_up>
<suggest>MongoDB for flexible schema and document-based storage</suggest>
<suggest>PostgreSQL for relational data with strong consistency guarantees</suggest>
<suggest>Firebase for real-time updates and simplified backend management</suggest>
<suggest>SQLite for lightweight local storage without external dependencies</suggest>
</follow_up>
</ask_followup_question>
```
Addressing ambiguity in requirements:
```
<ask_followup_question>
<question>How should the application handle user authentication?</question>
<follow_up>
<suggest>Implement email/password authentication with account verification</suggest>
<suggest>Use social login providers (Google, GitHub, etc.) for quick signup</suggest>
<suggest>Implement both email/password and social login options</suggest>
</follow_up>
</ask_followup_question>
```
packages/kilo-docs/docs/features/tools/attempt-completion.md
-175
View File
@@ -1,175 +0,0 @@
# attempt_completion
The `attempt_completion` tool signals that Kilo Code believes a task is complete and presents results to the user. It provides a summary of what was accomplished, optionally includes a command to demonstrate the result, and supports continued refinement through user feedback.
## Parameters
The tool accepts these parameters:
- `result` (required): The final result description summarizing what was accomplished
- `command` (optional): A CLI command to execute to demonstrate the result
## What It Does
This tool marks the end of a task by presenting a final summary of what was accomplished. It signals to both the user and the system that the current task is complete. When a command is provided, it can also demonstrate the result through a live execution.
## When is it used?
- When Kilo Code believes the user's task has been completed
- When summarizing what changes or improvements were made
- When demonstrating the current result with a command execution
- When providing a checkpoint for user feedback on the solution
- When transitioning from one phase of work to potential refinements
## Key Features
- Provides a clear signal that Kilo Code believes the task is complete
- Summarizes accomplishments in a concise message
- Optionally demonstrates results through command execution
- Enables user feedback for further refinements
- Displays results in a special UI format distinct from regular messages
- Captures task completion telemetry for system analytics
- Maintains a structured conversation flow by providing checkpoints
- Supports subtask completion within larger workflows
- Ensures users receive a clear summary of what was done
- Available in all modes as part of the "always available" tool group
## Limitations
- Should not be used until previous tool uses are confirmed successful (guideline, not enforced)
- Limited to a single command for result demonstration
- Cannot present multiple command options
- Commands require user approval before execution
- Limited to demonstrating results that can be shown via CLI commands
- Cannot be used for partial task completion or progress updates
- Result formatting strips XML closing tags through internal processing
## How It Works
When the `attempt_completion` tool is invoked, it follows this process:
1. **Safety Consideration** (guideline, not enforced):
- The AI is instructed to confirm previous tool uses were successful
- This is a best practice rather than a programmatically enforced mechanism
2. **Result Presentation**:
- Displays the completion message to the user in a special "completion_result" UI format
- Removes XML closing tags from the result text using the `removeClosingTag` function
- Presents the result differently than regular messages for visual distinction
3. **Command Execution** (if provided):
- Requests user approval before executing the command
- Only executes if the user approves
- Executes the command using the system's command execution functionality
- Shows the result of the command to the user
4. **Feedback Collection**:
- Waits for user feedback on the completion result
- Processes this feedback and returns it to the AI
- Enables continued refinement based on user input
5. **Task Completion and Continuation**:
- Signals the task as completed in the system
- Captures telemetry data for the completed task
- For subtasks, offers to finish the subtask and resume the parent task
- Supports continued conversation through the feedback mechanism
6. **Implementation Integration**:
- Tool results are parsed through the system's parsing mechanism in `parse-assistant-message.ts`
- The tool is part of the "ALWAYS_AVAILABLE_TOOLS" constant, making it available in all modes
## Result Formatting Guidelines
The result message should follow these guidelines:
- Clearly communicate what was accomplished
- Be concise but complete
- Focus on the value delivered to the user
- Avoid unnecessary pleasantries or filler text
- Maintain a professional, straightforward tone
- Present information in a way that's easy to scan and understand
- Acknowledge that the user may provide feedback for further refinements
Note: The system automatically strips XML closing tags from the result text through the `removeClosingTag` function.
## Command Selection Guidelines
When including a command, follow these guidelines:
- Choose commands that visually demonstrate the result
- Prefer commands that show the user what was created or modified
- Examples include:
* `open index.html` to display a created website
* `npm start` to launch a development server
* `python app.py` to run a created application
- Avoid commands that merely print text (like `echo` or `cat`)
- Remember that commands require user approval before execution
- Ensure the command is valid for the user's operating system
## Feedback and UI Representation
The `attempt_completion` tool has a unique feedback mechanism:
- Results appear in a special "completion_result" UI format distinct from regular messages
- The system waits for user feedback after presenting the result
- Feedback is processed and returned to Kilo Code for further refinements
- This creates an iterative improvement cycle rather than ending the conversation
- The UI includes special elements for providing feedback
- Results serve as clear checkpoints in the conversation flow
When used within subtasks:
- The system offers to finish the subtask and resume the parent task
- If approved, the subtask is completed with a summary
- The parent task resumes with context from the completed subtask
- This enables complex, nested workflows while maintaining context
## Examples When Used
- When creating a website, Kilo Code presents the solution and uses `open index.html` to show the result. The user provides feedback, and Kilo Code refines the design.
- When implementing a feature, Kilo Code summarizes the changes and their impact. The user requests additional test coverage, and Kilo Code continues the task.
- When fixing bugs, Kilo Code explains what was fixed and how the solution addresses the Kilo Codet cause. The user confirms the fix works.
- When setting up a development environment, Kilo Code confirms all components are installed. The user requests additional configuration, and Kilo Code continues.
- When creating a data processing script, Kilo Code summarizes the functionality. The user suggests performance improvements, and Kilo Code optimizes the code.
## Usage Examples
Completing a task with just a result summary:
```
<attempt_completion>
<result>
I've updated the CSS for the navigation bar to match the design mockup. The changes include:
1. Updated color scheme to use the new brand colors
2. Added responsive behavior for mobile devices
3. Fixed the alignment issues in the dropdown menus
</result>
</attempt_completion>
```
Completing a task with a result and demonstration command:
```
<attempt_completion>
<result>
I've created a simple React application with the following features:
1. A responsive landing page with the requested hero section
2. A working contact form with validation
3. Navigation between all three requested pages
4. Styling that matches the provided design mockup
</result>
<command>npm start</command>
</attempt_completion>
```
Completing a Python script task with execution:
```
<attempt_completion>
<result>
I've created a data processing script that:
1. Reads the CSV files from the data directory
2. Cleans and normalizes the data as requested
3. Generates the summary statistics in JSON format
4. Outputs the processed data to the output directory
</result>
<command>python process_data.py</command>
</attempt_completion>
```
packages/kilo-docs/docs/features/tools/browser-action.md
-152
View File
@@ -1,152 +0,0 @@
# browser_action
The `browser_action` tool enables web automation and interaction via a Puppeteer-controlled browser. It allows Kilo Code to launch browsers, navigate to websites, click elements, type text, and scroll pages with visual feedback through screenshots.
## Parameters
The tool accepts these parameters:
- `action` (required): The action to perform:
* `launch`: Start a new browser session at a URL
* `click`: Click at specific x,y coordinates
* `type`: Type text via the keyboard
* `scroll_down`: Scroll down one page height
* `scroll_up`: Scroll up one page height
* `close`: End the browser session
- `url` (optional): The URL to navigate to when using the `launch` action
- `coordinate` (optional): The x,y coordinates for the `click` action (e.g., "450,300")
- `text` (optional): The text to type when using the `type` action
## What It Does
This tool creates an automated browser session that Kilo Code can control to navigate websites, interact with elements, and perform tasks that require browser automation. Each action provides a screenshot of the current state, enabling visual verification of the process.
## When is it used?
- When Kilo Code needs to interact with web applications or websites
- When testing user interfaces or web functionality
- When capturing screenshots of web pages
- When demonstrating web workflows visually
## Key Features
- Provides visual feedback with screenshots after each action and captures console logs
- Supports complete workflows from launching to page interaction to closing
- Enables precise interactions via coordinates, keyboard input, and scrolling
- Maintains consistent browser sessions with intelligent page loading detection
- Operates in two modes: local (isolated Puppeteer instance) or remote (connects to existing Chrome)
- Handles errors gracefully with automatic session cleanup and detailed messages
- Optimizes visual output with support for various formats and quality settings
- Tracks interaction state with position indicators and action history
## Browser Modes
The tool operates in two distinct modes:
### Local Browser Mode (Default)
- Downloads and manages a local Chromium instance through Puppeteer
- Creates a fresh browser environment with each launch
- No access to existing user profiles, cookies, or extensions
- Consistent, predictable behavior in a sandboxed environment
- Completely closes the browser when the session ends
### Remote Browser Mode
- Connects to an existing Chrome/Chromium instance running with remote debugging enabled
- Can access existing browser state, cookies, and potentially extensions
- Faster startup as it reuses an existing browser process
- Supports connecting to browsers in Docker containers or on remote machines
- Only disconnects (doesn't close) from the browser when session ends
- Requires Chrome to be running with remote debugging port open (typically port 9222)
## Limitations
- While the browser is active, only `browser_action` tool can be used
- Browser coordinates are viewport-relative, not page-relative
- Click actions must target visible elements within the viewport
- Browser sessions must be explicitly closed before using other tools
- Browser window has configurable dimensions (default 900x600)
- Cannot directly interact with browser DevTools
- Browser sessions are temporary and not persistent across Kilo Code restarts
- Works only with Chrome/Chromium browsers, not Firefox or Safari
- Local mode has no access to existing cookies; remote mode requires Chrome with debugging enabled
## How It Works
When the `browser_action` tool is invoked, it follows this process:
1. **Action Validation and Browser Management**:
- Validates the required parameters for the requested action
- For `launch`: Initializes a browser session (either local Puppeteer instance or remote Chrome)
- For interaction actions: Uses the existing browser session
- For `close`: Terminates or disconnects from the browser appropriately
2. **Page Interaction and Stability**:
- Ensures pages are fully loaded using DOM stability detection via `waitTillHTMLStable` algorithm
- Executes requested actions (navigation, clicking, typing, scrolling) with proper timing
- Monitors network activity after clicks and waits for navigation when necessary
3. **Visual Feedback**:
- Captures optimized screenshots using WebP format (with PNG fallback)
- Records browser console logs for debugging purposes
- Tracks mouse position and maintains paginated history of actions
4. **Session Management**:
- Maintains browser state across multiple actions
- Handles errors and automatically cleans up resources
- Enforces proper workflow sequence (launch → interactions → close)
## Workflow Sequence
Browser interactions must follow this specific sequence:
1. **Session Initialization**: All browser workflows must start with a `launch` action
2. **Interaction Phase**: Multiple `click`, `type`, and scroll actions can be performed
3. **Session Termination**: All browser workflows must end with a `close` action
4. **Tool Switching**: After closing the browser, other tools can be used
## Examples When Used
- When creating a web form submission process, Kilo Code launches a browser, navigates to the form, fills out fields with the `type` action, and clicks submit.
- When testing a responsive website, Kilo Code navigates to the site and uses scroll actions to examine different sections.
- When capturing screenshots of a web application, Kilo Code navigates through different pages and takes screenshots at each step.
- When demonstrating an e-commerce checkout flow, Kilo Code simulates the entire process from product selection to payment confirmation.
## Usage Examples
Launching a browser and navigating to a website:
```
<browser_action>
<action>launch</action>
<url>https://example.com</url>
</browser_action>
```
Clicking at specific coordinates (e.g., a button):
```
<browser_action>
<action>click</action>
<coordinate>450,300</coordinate>
</browser_action>
```
Typing text into a focused input field:
```
<browser_action>
<action>type</action>
<text>Hello, World!</text>
</browser_action>
```
Scrolling down to see more content:
```
<browser_action>
<action>scroll_down</action>
</browser_action>
```
Closing the browser session:
```
<browser_action>
<action>close</action>
</browser_action>
```
packages/kilo-docs/docs/features/tools/codebase-search.md
-244
View File
@@ -1,244 +0,0 @@
# codebase_search
:::info Setup Required
The `codebase_search` tool is part of the [Codebase Indexing](/features/codebase-indexing) feature. It requires additional setup including an embedding provider and vector database.
:::
The `codebase_search` tool performs semantic searches across your entire codebase using AI embeddings. Unlike traditional text-based search, it understands the meaning of your queries and finds relevant code even when exact keywords don't match.
---
## Parameters
The tool accepts these parameters:
- `query` (required): Natural language search query describing what you're looking for
- `path` (optional): Directory path to limit search scope to a specific part of your codebase
---
## What It Does
This tool searches through your indexed codebase using semantic similarity rather than exact text matching. It finds code blocks that are conceptually related to your query, even if they don't contain the exact words you searched for. Results include relevant code snippets with file paths, line numbers, and similarity scores.
---
## When is it used?
- When Kilo Code needs to find code related to specific functionality across your project
- When looking for implementation patterns or similar code structures
- When searching for error handling, authentication, or other conceptual code patterns
- When exploring unfamiliar codebases to understand how features are implemented
- When finding related code that might be affected by changes or refactoring
---
## Key Features
- **Semantic Understanding**: Finds code by meaning rather than exact keyword matches
- **Cross-Project Search**: Searches across your entire indexed codebase, not just open files
- **Contextual Results**: Returns code snippets with file paths and line numbers for easy navigation
- **Similarity Scoring**: Results ranked by relevance with similarity scores (0-1 scale)
- **Scope Filtering**: Optional path parameter to limit searches to specific directories
- **Intelligent Ranking**: Results sorted by semantic relevance to your query
- **UI Integration**: Results displayed with syntax highlighting and navigation links
- **Performance Optimized**: Fast vector-based search with configurable result limits
---
## Requirements
This tool is only available when the Codebase Indexing feature is properly configured:
- **Feature Configured**: Codebase Indexing must be configured in settings
- **Embedding Provider**: OpenAI API key or Ollama configuration required
- **Vector Database**: Qdrant instance running and accessible
- **Index Status**: Codebase must be indexed (status: "Indexed" or "Indexing")
---
## Limitations
- **Requires Configuration**: Depends on external services (embedding provider + Qdrant)
- **Index Dependency**: Only searches through indexed code blocks
- **Result Limits**: Maximum of 50 results per search to maintain performance
- **Similarity Threshold**: Only returns results above similarity threshold (default: 0.4, configurable)
- **File Size Limits**: Limited to files under 1MB that were successfully indexed
- **Language Support**: Effectiveness depends on Tree-sitter language support
---
## How It Works
When the `codebase_search` tool is invoked, it follows this process:
1. **Availability Validation**:
- Verifies that the CodeIndexManager is available and initialized
- Confirms codebase indexing is enabled in settings
- Checks that indexing is properly configured (API keys, Qdrant URL)
- Validates the current index state allows searching
2. **Query Processing**:
- Takes your natural language query and generates an embedding vector
- Uses the same embedding provider configured for indexing (OpenAI or Ollama)
- Converts the semantic meaning of your query into a mathematical representation
3. **Vector Search Execution**:
- Searches the Qdrant vector database for similar code embeddings
- Uses cosine similarity to find the most relevant code blocks
- Applies the minimum similarity threshold (default: 0.4, configurable) to filter results
- Limits results to 50 matches for optimal performance
4. **Path Filtering** (if specified):
- Filters results to only include files within the specified directory path
- Uses normalized path comparison for accurate filtering
- Maintains relevance ranking within the filtered scope
5. **Result Processing and Formatting**:
- Converts absolute file paths to workspace-relative paths
- Structures results with file paths, line ranges, similarity scores, and code content
- Formats for both AI consumption and UI display with syntax highlighting
6. **Dual Output Format**:
- **AI Output**: Structured text format with query, file paths, scores, and code chunks
- **UI Output**: JSON format with syntax highlighting and navigation capabilities
---
## Search Query Best Practices
### Effective Query Patterns
**Good: Conceptual and specific**
```xml
<codebase_search>
<query>user authentication and password validation</query>
</codebase_search>
```
**Good: Feature-focused**
```xml
<codebase_search>
<query>database connection pool setup</query>
</codebase_search>
```
**Good: Problem-oriented**
```xml
<codebase_search>
<query>error handling for API requests</query>
</codebase_search>
```
**Less effective: Too generic**
```xml
<codebase_search>
<query>function</query>
</codebase_search>
```
### Query Types That Work Well
- **Functional Descriptions**: "file upload processing", "email validation logic"
- **Technical Patterns**: "singleton pattern implementation", "factory method usage"
- **Domain Concepts**: "user profile management", "payment processing workflow"
- **Architecture Components**: "middleware configuration", "database migration scripts"
---
## Directory Scoping
Use the optional `path` parameter to focus searches on specific parts of your codebase:
**Search within API modules:**
```xml
<codebase_search>
<query>endpoint validation middleware</query>
<path>src/api</path>
</codebase_search>
```
**Search in test files:**
```xml
<codebase_search>
<query>mock data setup patterns</query>
<path>tests</path>
</codebase_search>
```
**Search specific feature directories:**
```xml
<codebase_search>
<query>component state management</query>
<path>src/components/auth</path>
</codebase_search>
```
---
## Result Interpretation
### Similarity Scores
- **0.8-1.0**: Highly relevant matches, likely exactly what you're looking for
- **0.6-0.8**: Good matches with strong conceptual similarity
- **0.4-0.6**: Potentially relevant but may require review
- **Below 0.4**: Filtered out as too dissimilar
### Result Structure
Each search result includes:
- **File Path**: Workspace-relative path to the file containing the match
- **Score**: Similarity score indicating relevance (0.4-1.0)
- **Line Range**: Start and end line numbers for the code block
- **Code Chunk**: The actual code content that matched your query
---
## Examples When Used
- When implementing a new feature, Kilo Code searches for "authentication middleware" to understand existing patterns before writing new code.
- When debugging an issue, Kilo Code searches for "error handling in API calls" to find related error patterns across the codebase.
- When refactoring code, Kilo Code searches for "database transaction patterns" to ensure consistency across all database operations.
- When onboarding to a new codebase, Kilo Code searches for "configuration loading" to understand how the application bootstraps.
---
## Usage Examples
Searching for authentication-related code across the entire project:
```xml
<codebase_search>
<query>user login and authentication logic</query>
</codebase_search>
```
Finding database-related code in a specific directory:
```xml
<codebase_search>
<query>database connection and query execution</query>
<path>src/data</path>
</codebase_search>
```
Looking for error handling patterns in API code:
```xml
<codebase_search>
<query>HTTP error responses and exception handling</query>
<path>src/api</path>
</codebase_search>
```
Searching for testing utilities and mock setups:
```xml
<codebase_search>
<query>test setup and mock data creation</query>
<path>tests</path>
</codebase_search>
```
Finding configuration and environment setup code:
```xml
<codebase_search>
<query>environment variables and application configuration</query>
</codebase_search>
packages/kilo-docs/docs/features/tools/execute-command.md
-153
View File
@@ -1,153 +0,0 @@
# execute_command
The `execute_command` tool runs CLI commands on the user's system. It allows Kilo Code to perform system operations, install dependencies, build projects, start servers, and execute other terminal-based tasks needed to accomplish user objectives.
## Parameters
The tool accepts these parameters:
- `command` (required): The CLI command to execute. Must be valid for the user's operating system.
- `cwd` (optional): The working directory to execute the command in. If not provided, the current working directory is used.
## What It Does
This tool executes terminal commands directly on the user's system, enabling a wide range of operations from file manipulations to running development servers. Commands run in managed terminal instances with real-time output capture, integrated with VS Code's terminal system for optimal performance and security.
## When is it used?
- When installing project dependencies (npm install, pip install, etc.)
- When building or compiling code (make, npm run build, etc.)
- When starting development servers or running applications
- When initializing new projects (git init, npm init, etc.)
- When performing file operations beyond what other tools provide
- When running tests or linting operations
- When needing to execute specialized commands for specific technologies
## Key Features
- Integrates with VS Code shell API for reliable terminal execution
- Reuses terminal instances when possible through a registry system
- Captures command output line by line with real-time feedback
- Supports long-running commands that continue in the background
- Allows specification of custom working directories
- Maintains terminal history and state across command executions
- Handles complex command chains appropriate for the user's shell
- Provides detailed command completion status and exit code interpretation
- Supports interactive terminal applications with user feedback loop
- Shows terminals during execution for transparency
- Validates commands for security using shell-quote parsing
- Blocks potentially dangerous subshell execution patterns
- Integrates with KiloCodeIgnore system for file access control
- Handles terminal escape sequences for clean output
## Limitations
- Command access may be restricted by KiloCodeIgnore rules and security validations
- Commands with elevated permission requirements may need user configuration
- Behavior may vary across operating systems for certain commands
- Very long-running commands may require specific handling
- File paths should be properly escaped according to the OS shell rules
- Not all terminal features may work with remote development scenarios
## How It Works
When the `execute_command` tool is invoked, it follows this process:
1. **Command Validation and Security Checks**:
- Parses the command using shell-quote to identify components
- Validates against security restrictions (subshell usage, restricted files)
- Checks against KiloCodeIgnore rules for file access permissions
- Ensures the command meets system security requirements
2. **Terminal Management**:
- Gets or creates a terminal through TerminalRegistry
- Sets up the working directory context
- Prepares event listeners for output capture
- Shows the terminal for user visibility
3. **Command Execution and Monitoring**:
- Executes via VS Code's shellIntegration API
- Captures output with escape sequence processing
- Throttles output handling (100ms intervals)
- Monitors for command completion or errors
- Detects "hot" processes like compilers for special handling
4. **Result Processing**:
- Strips ANSI/VS Code escape sequences for clean output
- Interprets exit codes with detailed signal information
- Updates working directory tracking if changed by command
- Provides command status with appropriate context
## Terminal Implementation Details
The tool uses a sophisticated terminal management system:
1. **First Priority: Terminal Reuse**
- The TerminalRegistry tries to reuse existing terminals when possible
- This reduces proliferation of terminal instances and improves performance
- Terminal state (working directory, history) is preserved across commands
2. **Second Priority: Security Validation**
- Commands are parsed using shell-quote for component analysis
- Dangerous patterns like `$(...)` and backticks are blocked
- Commands are checked against KiloCodeIgnore rules for file access control
- A prefix-based allowlist system validates command patterns
3. **Performance Optimizations**
- Output is processed in 100ms throttled intervals to prevent UI overload
- Zero-copy buffer management uses index-based tracking for efficiency
- Special handling for compilation and "hot" processes
- Platform-specific optimizations for Windows PowerShell
4. **Error and Signal Handling**
- Exit codes are mapped to detailed signal information (SIGTERM, SIGKILL, etc.)
- Core dump detection for critical failures
- Working directory changes are tracked and handled automatically
- Clean recovery from terminal disconnection scenarios
## Examples When Used
- When setting up a new project, Kilo Code runs initialization commands like `npm init -y` followed by installing dependencies.
- When building a web application, Kilo Code executes build commands like `npm run build` to compile assets.
- When deploying code, Kilo Code runs git commands to commit and push changes to a repository.
- When troubleshooting, Kilo Code executes diagnostic commands to gather system information.
- When starting a development server, Kilo Code launches the appropriate server command (e.g., `npm start`).
- When running tests, Kilo Code executes the test runner command for the project's testing framework.
## Usage Examples
Running a simple command in the current directory:
```
<execute_command>
<command>npm run dev</command>
</execute_command>
```
Installing dependencies for a project:
```
<execute_command>
<command>npm install express mongodb mongoose dotenv</command>
</execute_command>
```
Running multiple commands in sequence:
```
<execute_command>
<command>mkdir -p src/components && touch src/components/App.js</command>
</execute_command>
```
Executing a command in a specific directory:
```
<execute_command>
<command>git status</command>
<cwd>./my-project</cwd>
</execute_command>
```
Building and then starting a project:
```
<execute_command>
<command>npm run build && npm start</command>
</execute_command>
```
packages/kilo-docs/docs/features/tools/list-code-definition-names.md
-116
View File
@@ -1,116 +0,0 @@
# list_code_definition_names
The `list_code_definition_names` tool provides a structural overview of your codebase by listing code definitions from source files at the top level of a specified directory. It helps Kilo Code understand code architecture by displaying line numbers and definition snippets.
## Parameters
The tool accepts these parameters:
- `path` (required): The path of the directory to list top level source code definitions for, relative to the current working directory
## What It Does
This tool scans source code files at the top level of a specified directory and extracts code definitions like classes, functions, and interfaces. It displays the line numbers and actual code for each definition, providing a quick way to map the important components of your codebase.
## When is it used?
- When Kilo Code needs to understand your codebase architecture quickly
- When Kilo Code needs to locate important code constructs across multiple files
- When planning refactoring or extensions to existing code
- Before diving into implementation details with other tools
- When identifying relationships between different parts of your codebase
## Key Features
- Extracts classes, functions, methods, interfaces, and other definitions from source files
- Displays line numbers and actual source code for each definition
- Supports multiple programming languages including JavaScript, TypeScript, Python, Rust, Go, C++, C, C#, Ruby, Java, PHP, Swift, and Kotlin
- Processes only files at the top level of the specified directory (not subdirectories)
- Limits processing to a maximum of 50 files for performance
- Focuses on top-level definitions to avoid overwhelming detail
- Helps identify code organization patterns across the project
- Creates a mental map of your codebase's architecture
- Works in conjunction with other tools like `read_file` for deeper analysis
## Limitations
- Only identifies top-level definitions, not nested ones
- Only processes files at the top level of the specified directory, not subdirectories
- Limited to processing a maximum of 50 files per request
- Dependent on language-specific parsers, with varying detection quality
- May not recognize all definitions in languages with complex syntax
- Not a substitute for reading code to understand implementation details
- Cannot detect runtime patterns or dynamic code relationships
- Does not provide information about how definitions are used
- May have reduced accuracy with highly dynamic or metaprogrammed code
- Limited to specific languages supported by the implemented Tree-sitter parsers
## How It Works
When the `list_code_definition_names` tool is invoked, it follows this process:
1. **Parameter Validation**: Validates the required `path` parameter
2. **Path Resolution**: Resolves the relative path to an absolute path
3. **Directory Scanning**: Scans only the top level of the specified directory for source code files (not recursive)
4. **File Filtering**: Limits processing to a maximum of 50 files
5. **Language Detection**: Identifies file types based on extensions (.js, .jsx, .ts, .tsx, .py, .rs, .go, .cpp, .hpp, .c, .h, .cs, .rb, .java, .php, .swift, .kt, .kts)
6. **Code Parsing**: Uses Tree-sitter to parse code and extract definitions through these steps:
- Parsing file content into an Abstract Syntax Tree (AST)
- Creating a query using a language-specific query string
- Sorting the captures by their position in the file
7. **Result Formatting**: Outputs definitions with line numbers and actual source code
## Output Format
The output shows file paths followed by line numbers and the actual source code of each definition. For example:
```
src/utils.js:
0--0 | export class HttpClient {
5--5 | formatDate() {
10--10 | function parseConfig(data) {
src/models/User.js:
0--0 | interface UserProfile {
10--10 | export class User {
20--20 | function createUser(data) {
```
Each line displays:
- The start and end line numbers of the definition
- The pipe symbol (|) as a separator
- The actual source code of the definition
This output format helps you quickly see both where definitions are located in the file and their implementation details.
## Examples When Used
- When starting a new task, Kilo Code first lists key code definitions to understand the overall structure of your project.
- When planning refactoring work, Kilo Code uses this tool to identify classes and functions that might be affected.
- When exploring unfamiliar codebases, Kilo Code maps the important code constructs before diving into implementation details.
- When adding new features, Kilo Code identifies existing patterns and relevant code definitions to maintain consistency.
- When troubleshooting bugs, Kilo Code maps the codebase structure to locate potential sources of the issue.
- When planning architecture changes, Kilo Code identifies all affected components across files.
## Usage Examples
Listing code definitions in the current directory:
```
<list_code_definition_names>
<path>.</path>
</list_code_definition_names>
```
Examining a specific module's structure:
```
<list_code_definition_names>
<path>src/components</path>
</list_code_definition_names>
```
Exploring a utility library:
```
<list_code_definition_names>
<path>lib/utils</path>
</list_code_definition_names>
```
packages/kilo-docs/docs/features/tools/list-files.md
-132
View File
@@ -1,132 +0,0 @@
# list_files
The `list_files` tool displays the files and directories within a specified location. It helps Kilo Code understand your project structure and navigate your codebase effectively.
## Parameters
The tool accepts these parameters:
- `path` (required): The path of the directory to list contents for, relative to the current working directory
- `recursive` (optional): Whether to list files recursively. Use `true` for recursive listing, `false` or omit for top-level only.
## What It Does
This tool lists all files and directories in a specified location, providing a clear overview of your project structure. It can either show just the top-level contents or recursively explore subdirectories.
## When is it used?
- When Kilo Code needs to understand your project structure
- When Kilo Code explores what files are available before reading specific ones
- When Kilo Code maps a codebase to better understand its organization
- Before using more targeted tools like `read_file` or `search_files`
- When Kilo Code needs to check for specific file types (like configuration files) across a project
## Key Features
- Lists both files and directories with directories clearly marked
- Offers both recursive and non-recursive listing modes
- Intelligently ignores common large directories like `node_modules` and `.git` in recursive mode
- Respects `.gitignore` rules when in recursive mode
- Marks files ignored by `.kilocodeignore` with a lock symbol (🔒) when `showKiloCodeIgnoredFiles` is enabled
- Optimizes performance with level-by-level directory traversal
- Sorts results to show directories before their contents, maintaining a logical hierarchy
- Presents results in a clean, organized format
- Automatically creates a mental map of your project structure
## Limitations
- File listing is capped at about 200 files by default to prevent performance issues
- Has a 10-second timeout for directory traversal to prevent hanging on complex directory structures
- When the file limit is hit, it adds a note suggesting to use `list_files` on specific subdirectories
- Not designed for confirming the existence of files you've just created
- May have reduced performance in very large directory structures
- Cannot list files in root or home directories for security reasons
## How It Works
When the `list_files` tool is invoked, it follows this process:
1. **Parameter Validation**: Validates the required `path` parameter and optional `recursive` parameter
2. **Path Resolution**: Resolves the relative path to an absolute path
3. **Security Checks**: Prevents listing files in sensitive locations like root or home directories
4. **Directory Scanning**:
- For non-recursive mode: Lists only the top-level contents
- For recursive mode: Traverses the directory structure level by level with a 10-second timeout
- If timeout occurs, returns partial results collected up to that point
5. **Result Filtering**:
- In recursive mode, skips common large directories like `node_modules`, `.git`, etc.
- Respects `.gitignore` rules when in recursive mode
- Handles `.kilocodeignore` patterns, either hiding files or marking them with a lock symbol
6. **Formatting**:
- Marks directories with a trailing slash (`/`)
- Sorts results to show directories before their contents for logical hierarchy
- Marks ignored files with a lock symbol (🔒) when `showKiloCodeIgnored` is enabled
- Caps results at 200 files by default with a note about using subdirectories
- Organizes results for readability
## File Listing Format
The file listing results include:
- Each file path is displayed on its own line
- Directories are marked with a trailing slash (`/`)
- Files ignored by `.kilocodeignore` are marked with a lock symbol (🔒) when `showKiloCodeIgnored` is enabled
- Results are sorted logically with directories appearing before their contents
- When the file limit is reached, a message appears suggesting to use `list_files` on specific subdirectories
Example output format:
```
src/
src/components/
src/components/Button.tsx
src/components/Header.tsx
src/utils/
src/utils/helpers.ts
src/index.ts
...
File listing truncated (showing 200 of 543 files). Use list_files on specific subdirectories for more details.
```
When `.kilocodeignore` files are used and `showKiloCodeIgnored` is enabled:
```
src/
src/components/
src/components/Button.tsx
src/components/Header.tsx
🔒 src/secrets.json
src/utils/
src/utils/helpers.ts
src/index.ts
```
## Examples When Used
- When starting a new task, Kilo Code may list the project files to understand its structure before diving into specific code.
- When asked to find specific types of files (like all JavaScript files), Kilo Code first lists directories to know where to look.
- When providing recommendations for code organization, Kilo Code examines the current project structure first.
- When setting up a new feature, Kilo Code lists related directories to understand the project conventions.
## Usage Examples
Listing top-level files in the current directory:
```
<list_files>
<path>.</path>
</list_files>
```
Recursively listing all files in a source directory:
```
<list_files>
<path>src</path>
<recursive>true</recursive>
</list_files>
```
Examining a specific project subdirectory:
```
<list_files>
<path>src/components</path>
<recursive>false</recursive>
</list_files>
```
packages/kilo-docs/docs/features/tools/new-task.md
-103
View File
@@ -1,103 +0,0 @@
# new_task
The `new_task` tool creates subtasks with specialized modes while maintaining a parent-child relationship. It breaks down complex projects into manageable pieces, each operating in the mode best suited for specific work.
## Parameters
The tool accepts these parameters:
- `mode` (required): The slug of the mode to start the new task in (e.g., "code", "ask", "architect")
- `message` (required): The initial user message or instructions for this new task
## What It Does
This tool creates a new task instance with a specified starting mode and initial message. It allows complex workflows to be divided into subtasks with their own conversation history. Parent tasks are paused during subtask execution and resumed when the subtask completes, with results transferred back to the parent.
## When is it used?
- When breaking down complex projects into separate, focused subtasks
- When different aspects of a task require different specialized modes
- When different phases of work benefit from context separation
- When organizing multi-phase development workflows
## Key Features
- Creates subtasks with their own conversation history and specialized mode
- Pauses parent tasks for later resumption
- Maintains hierarchical task relationships for navigation
- Transfers results back to parent tasks upon completion
- Supports workflow segregation for complex projects
- Allows different parts of a project to use modes optimized for specific work
- Requires explicit user approval for task creation
- Provides clear task transition in the UI
## Limitations
- Cannot create tasks with modes that don't exist
- Requires user approval before creating each new task
- Task interface may become complex with deeply nested subtasks
- Subtasks inherit certain workspace and extension configurations from parents
- May require re-establishing context when switching between deeply nested tasks
- Task completion needs explicit signaling to properly return to parent tasks
## How It Works
When the `new_task` tool is invoked, it follows this process:
1. **Parameter Validation**:
- Validates the required `mode` and `message` parameters
- Verifies that the requested mode exists in the system
2. **Task Stack Management**:
- Maintains a task stack that tracks all active and paused tasks
- Preserves the current mode for later resumption
- Sets the parent task to paused state
3. **Task Context Management**:
- Creates a new task context with the provided message
- Assigns unique taskId and instanceId identifiers for state management
- Captures telemetry data on tool usage and task lifecycles
4. **Mode Switching and Integration**:
- Switches to the specified mode with appropriate role and capabilities
- Initializes the new task with the provided message
- Integrates with VS Code's command palette and code actions
5. **Task Completion and Result Transfer**:
- When subtask completes, result is passed back to parent task via `finishSubTask()`
- Parent task resumes in its original mode
- Task history and token usage metrics are updated
- The `taskCompleted` event is emitted with performance data
## Examples When Used
- When a front-end developer needs to architect a new feature, implement the code, and document it, they can create separate tasks for each phase with results flowing from one phase to the next.
- When debugging an issue before implementing a fix, the debugging task can document findings that are passed to the implementation task.
- When developing a full-stack application, database schema designs from an architect-mode task inform implementation details in a subsequent code-mode task.
- When documenting a system after implementation, the documentation task can reference the completed implementation while using documentation-specific features.
## Usage Examples
Creating a new task in code mode:
```
<new_task>
<mode>code</mode>
<message>Implement a user authentication service with login, registration, and password reset functionality.</message>
</new_task>
```
Creating a documentation task after completing implementation:
```
<new_task>
<mode>docs</mode>
<message>Create comprehensive API documentation for the authentication service we just built.</message>
</new_task>
```
Breaking down a complex feature into architectural planning and implementation:
```
<new_task>
<mode>architect</mode>
<message>Design the database schema and system architecture for our new e-commerce platform.</message>
</new_task>
```
packages/kilo-docs/docs/features/tools/read-file.md
-181
View File
@@ -1,181 +0,0 @@
# read_file
The `read_file` tool examines the contents of files in a project. It allows Kilo Code to understand code, configuration files, and documentation to provide better assistance.
## Parameters
The tool accepts these parameters:
- `path` (required): The path of the file to read relative to the current working directory
- `start_line` (optional): The starting line number to read from (1-based indexing)
- `end_line` (optional): The ending line number to read to (1-based, inclusive)
- `auto_truncate` (optional): Whether to automatically truncate large files when line range isn't specified (true/false)
## What It Does
This tool reads the content of a specified file and returns it with line numbers for easy reference. It can read entire files or specific sections, and even extract text from PDFs and Word documents.
## When is it used?
- When Kilo Code needs to understand existing code structure
- When Kilo Code needs to analyze configuration files
- When Kilo Code needs to extract information from text files
- When Kilo Code needs to see code before suggesting changes
- When specific line numbers need to be referenced in discussions
## Key Features
- Displays file content with line numbers for easy reference
- Can read specific portions of files by specifying line ranges
- Extracts readable text from PDF and DOCX files
- Intelligently truncates large files to focus on the most relevant sections
- Provides method summaries with line ranges for large code files
- Efficiently streams only requested line ranges for better performance
- Makes it easy to discuss specific parts of code with line numbering
## Limitations
- May not handle extremely large files efficiently without using line range parameters
- For binary files (except PDF and DOCX), may return content that isn't human-readable
## How It Works
When the `read_file` tool is invoked, it follows this process:
1. **Parameter Validation**: Validates the required `path` parameter and optional parameters
2. **Path Resolution**: Resolves the relative path to an absolute path
3. **Reading Strategy Selection**:
- The tool uses a strict priority hierarchy (explained in detail below)
- It chooses between range reading, auto-truncation, or full file reading
4. **Content Processing**:
- Adds line numbers to the content (e.g., "1 | const x = 13") where `1 |` is the line number.
- For truncated files, adds truncation notice and method definitions
- For special formats (PDF, DOCX, IPYNB), extracts readable text
## Reading Strategy Priority
The tool uses a clear decision hierarchy to determine how to read a file:
1. **First Priority: Explicit Line Range**
- If either `start_line` or `end_line` is provided, the tool always performs a range read
- The implementation efficiently streams only the requested lines, making it suitable for processing large files
- This takes precedence over all other options
2. **Second Priority: Auto-Truncation for Large Files**
- This only applies when ALL of these conditions are met:
- Neither `start_line` nor `end_line` is specified
- The `auto_truncate` parameter is set to `true`
- The file is not a binary file
- The file exceeds the configured line threshold (typically 500-1000 lines)
- When auto-truncation activates, the tool:
- Reads only the first portion of the file (determined by the maxReadFileLine setting)
- Adds a truncation notice showing the number of lines displayed vs. total
- Provides a summary of method definitions with their line ranges
3. **Default Behavior: Read Entire File**
- If neither of the above conditions are met, it reads the entire file content
- For special formats like PDF, DOCX, and IPYNB, it uses specialized extractors
## Examples When Used
- When asked to explain or improve code, Kilo Code first reads the relevant files to understand the current implementation.
- When troubleshooting configuration issues, Kilo Code reads config files to identify potential problems.
- When working with documentation, Kilo Code reads existing docs to understand the current content before suggesting improvements.
## Usage Examples
Here are several scenarios demonstrating how the `read_file` tool is used and the typical output you might receive.
### Reading an Entire File
To read the complete content of a file:
**Input:**
```xml
<read_file>
<path>src/app.js</path>
</read_file>
```
**Simulated Output (for a small file like `example_small.txt`):**
```
1 | This is the first line.
2 | This is the second line.
3 | This is the third line.
```
*(Output will vary based on the actual file content)*
### Reading Specific Lines
To read only a specific range of lines (e.g., 46-68):
**Input:**
```xml
<read_file>
<path>src/app.js</path>
<start_line>46</start_line>
<end_line>68</end_line>
</read_file>
```
**Simulated Output (for lines 2-3 of `example_five_lines.txt`):**
```
2 | Content of line two.
3 | Content of line three.
```
*(Output shows only the requested lines with their original line numbers)*
### Reading a Large File (Auto-Truncation)
When reading a large file without specifying lines and `auto_truncate` is enabled (or defaults to true based on settings):
**Input:**
```xml
<read_file>
<path>src/large-module.js</path>
<auto_truncate>true</auto_truncate> <!-- Optional if default is true -->
</read_file>
```
**Simulated Output (for `large_file.log` with 1500 lines, limit 1000):**
```
1 | Log entry 1...
2 | Log entry 2...
...
1000 | Log entry 1000...
[... truncated 500 lines ...]
```
*(Output is limited to the configured maximum lines, with a truncation notice)*
### Attempting to Read a Non-Existent File
If the specified file does not exist:
**Input:**
```xml
<read_file>
<path>non_existent_file.txt</path>
</read_file>
```
**Simulated Output (Error):**
```
Error: File not found at path 'non_existent_file.txt'.
```
### Attempting to Read a Blocked File
If the file is excluded by rules in a `.kilocodeignore` file:
**Input:**
```xml
<read_file>
<path>.env</path>
</read_file>
```
**Simulated Output (Error):**
```
Error: Access denied to file '.env' due to .kilocodeignore rules.
```
packages/kilo-docs/docs/features/tools/search-files.md
-128
View File
@@ -1,128 +0,0 @@
# search_files
The `search_files` tool performs regex searches across multiple files in your project. It helps Kilo Code locate specific code patterns, text, or other content throughout your codebase with contextual results.
## Parameters
The tool accepts these parameters:
- `path` (required): The path of the directory to search in, relative to the current working directory
- `regex` (required): The regular expression pattern to search for (uses Rust regex syntax)
- `file_pattern` (optional): Glob pattern to filter files (e.g., '*.ts' for TypeScript files)
## What It Does
This tool searches across files in a specified directory using regular expressions, showing each match with surrounding context. It's like having a powerful "Find in Files" feature that works across the entire project structure.
## When is it used?
- When Kilo Code needs to find where specific functions or variables are used
- When Kilo Code helps with refactoring and needs to understand usage patterns
- When Kilo Code needs to locate all instances of a particular code pattern
- When Kilo Code searches for text across multiple files with filtering capabilities
## Key Features
- Searches across multiple files in a single operation using high-performance Ripgrep
- Shows context around each match (1 line before and after)
- Filters files by type using glob patterns (e.g., only TypeScript files)
- Provides line numbers for easy reference
- Uses powerful regex patterns for precise searches
- Automatically limits output to 300 results with notification
- Truncates lines longer than 500 characters with "[truncated...]" marker
- Intelligently combines nearby matches into single blocks for readability
## Limitations
- Works best with text-based files (not effective for binary files like images)
- Performance may slow with extremely large codebases
- Uses Rust regex syntax, which may differ slightly from other regex implementations
- Cannot search within compressed files or archives
- Default context size is fixed (1 line before and after)
- May display varying context sizes when matches are close together due to result grouping
## How It Works
When the `search_files` tool is invoked, it follows this process:
1. **Parameter Validation**: Validates the required `path` and `regex` parameters
2. **Path Resolution**: Resolves the relative path to an absolute path
3. **Search Execution**:
- Uses Ripgrep (rg) for high-performance text searching
- Applies file pattern filtering if specified
- Collects matches with surrounding context
4. **Result Formatting**:
- Formats results with file paths, line numbers, and context
- Displays 1 line of context before and after each match
- Structures output for easy readability
- Limits results to a maximum of 300 matches with notification
- Truncates lines longer than 500 characters
- Merges nearby matches into contiguous blocks
## Search Results Format
The search results include:
- Relative file paths for each matching file (prefixed with #)
- Context lines before and after each match (1 line by default)
- Line numbers padded to 3 spaces followed by ` | ` and the line content
- A separator line (----) after each match group
Example output format:
```
# rel/path/to/app.ts
11 | // Some processing logic here
12 | // TODO: Implement error handling
13 | return processedData;
----
# Showing first 300 of 300+ results. Use a more specific search if necessary.
```
When matches occur close to each other, they're merged into a single block rather than shown as separate results:
```
# rel/path/to/auth.ts
13 | // Some code here
14 | // TODO: Add proper validation
15 | function validateUser(credentials) {
16 | // TODO: Implement rate limiting
17 | return checkDatabase(credentials);
----
```
## Examples When Used
- When asked to refactor a function, Kilo Code first searches for all places the function is used to ensure comprehensive changes.
- When investigating bugs, Kilo Code searches for similar patterns to identify related issues across the codebase.
- When addressing technical debt, Kilo Code locates all TODO comments across the project.
- When analyzing dependencies, Kilo Code finds all imports of a particular module.
## Usage Examples
Searching for TODO comments in all JavaScript files:
```
<search_files>
<path>src</path>
<regex>TODO|FIXME</regex>
<file_pattern>*.js</file_pattern>
</search_files>
```
Finding all usages of a specific function:
```
<search_files>
<path>.</path>
<regex>function\s+calculateTotal</regex>
<file_pattern>*.{js,ts}</file_pattern>
</search_files>
```
Searching for a specific import pattern across the entire project:
```
<search_files>
<path>.</path>
<regex>import\s+.*\s+from\s+['"]@components/</regex>
</search_files>
```
packages/kilo-docs/docs/features/tools/switch-mode.md
-151
View File
@@ -1,151 +0,0 @@
# switch_mode
The `switch_mode` tool enables Kilo Code to change between different operational modes, each with specialized capabilities for specific types of tasks. This allows seamless transitions between modes like Code, Architect, Ask, or Debug when the current task requires different expertise.
## Parameters
The tool accepts these parameters:
- `mode_slug` (required): The slug of the mode to switch to (e.g., "code", "ask", "architect")
- `reason` (optional): The reason for switching modes, providing context for the user
## What It Does
This tool requests a mode change when the current task would be better handled by another mode's capabilities. It maintains context while shifting Kilo Code's focus and available toolsets to match the requirements of the new task phase.
## When is it used?
- When transitioning from information gathering to code implementation
- When shifting from coding to architecture or design
- When the current task requires capabilities only available in a different mode
- When specialized expertise is needed for a particular phase of a complex project
## Key Features
- Maintains context continuity across mode transitions
- Provides clear reasoning for mode switch recommendations
- Requires user approval for all mode changes
- Enforces tool group restrictions specific to each mode
- Seamlessly adapts tool availability based on the selected mode
- Works with both standard and custom modes
- Displays the mode switch and reasoning in the UI
- Uses XML-style formatting for parameter specification
- Handles file type restrictions specific to certain modes
## Limitations
- Cannot switch to modes that don't exist in the system
- Requires explicit user approval for each mode transition
- Cannot use tools specific to a mode until the switch is complete
- Applies a 500ms delay after mode switching to allow the change to take effect
- Some modes have file type restrictions (e.g., Architect mode can only edit markdown files)
- Mode preservation for resumption applies only to the `new_task` functionality, not general mode switching
## How It Works
When the `switch_mode` tool is invoked, it follows this process:
1. **Request Validation**:
- Validates that the requested mode exists in the system
- Checks that the `mode_slug` parameter is provided and valid
- Verifies the user isn't already in the requested mode
- Ensures the `reason` parameter (if provided) is properly formatted
2. **Mode Transition Preparation**:
- Packages the mode change request with the provided reason
- Presents the change request to the user for approval
3. **Mode Activation (Upon User Approval)**:
- Updates the UI to reflect the new mode
- Adjusts available tools based on the mode's tool group configuration
- Applies the mode-specific prompt and behavior
- Applies a 500ms delay to allow the change to take effect before executing next tool
- Enforces any file restrictions specific to the mode
4. **Continuation**:
- Proceeds with the task using the capabilities of the new mode
- Retains relevant context from the previous interaction
## Tool Group Association
The `switch_mode` tool belongs to the "modes" tool group but is also included in the "always available" tools list. This means:
- It can be used in any mode regardless of the mode's configured tool groups
- It's available alongside other core tools like `ask_followup_question` and `attempt_completion`
- It allows mode transitions at any point in a workflow when task requirements change
## Mode Structure
Each mode in the system has a specific structure:
- `slug`: Unique identifier for the mode (e.g., "code", "ask")
- `name`: Display name for the mode (e.g., "Code", "Ask")
- `roleDefinition`: The specialized role and capabilities of the mode
- `customInstructions`: Optional mode-specific instructions that guide behavior
- `groups`: Tool groups available to the mode with optional restrictions
## Mode Capabilities
The core modes provide these specialized capabilities:
- **Code Mode**: Focused on coding tasks with full access to code editing tools
- **Architect Mode**: Specialized for system design and architecture planning, limited to editing markdown files only
- **Ask Mode**: Optimized for answering questions and providing information
- **Debug Mode**: Equipped for systematic problem diagnosis and resolution
## Custom Modes
Beyond the core modes, the system supports custom project-specific modes:
- Custom modes can be defined with specific tool groups enabled
- They can specify custom role definitions and instructions
- The system checks custom modes first before falling back to core modes
- Custom mode definitions take precedence over core modes with the same slug
## File Restrictions
Different modes may have specific file type restrictions:
- **Architect Mode**: Can only edit files matching the `.md` extension
- Attempting to edit restricted file types results in a `FileRestrictionError`
- These restrictions help enforce proper separation of concerns between modes
## Examples When Used
- When discussing a new feature, Kilo Code switches from Ask mode to Architect mode to help design the system structure.
- After completing architecture planning in Architect mode, Kilo Code switches to Code mode to implement the designed features.
- When encountering bugs during development, Kilo Code switches from Code mode to Debug mode for systematic troubleshooting.
## Usage Examples
Switching to Code mode for implementation:
```
<switch_mode>
<mode_slug>code</mode_slug>
<reason>Need to implement the login functionality based on the architecture we've discussed</reason>
</switch_mode>
```
Switching to Architect mode for design:
```
<switch_mode>
<mode_slug>architect</mode_slug>
<reason>Need to design the system architecture before implementation</reason>
</switch_mode>
```
Switching to Debug mode for troubleshooting:
```
<switch_mode>
<mode_slug>debug</mode_slug>
<reason>Need to systematically diagnose the authentication error</reason>
</switch_mode>
```
Switching to Ask mode for information:
```
<switch_mode>
<mode_slug>ask</mode_slug>
<reason>Need to answer questions about the implemented feature</reason>
</switch_mode>
```
packages/kilo-docs/docs/features/tools/tool-use-overview.md
-246
View File
@@ -1,246 +0,0 @@
# Tool Use Overview
Kilo Code implements a sophisticated tool system that allows AI models to interact with your development environment in a controlled and secure manner. This document explains how tools work, when they're called, and how they're managed.
## Core Concepts
### Tool Groups
Tools are organized into logical groups based on their functionality:
| Category | Purpose | Tools | Common Use |
|----------|---------|-------|------------|
| **Read Group** | File system reading and searching | [read_file](/features/tools/read-file), [search_files](/features/tools/search-files), [list_files](/features/tools/list-files), [list_code_definition_names](/features/tools/list-code-definition-names) | Code exploration and analysis |
| **Edit Group** | File system modifications | [apply_diff](/features/tools/apply-diff), [write_to_file](/features/tools/write-to-file) | Code changes and file manipulation |
| **Browser Group** | Web automation | [browser_action](/features/tools/browser-action) | Web testing and interaction |
| **Command Group** | System command execution | [execute_command](/features/tools/execute-command) | Running scripts, building projects |
| **MCP Group** | External tool integration | [use_mcp_tool](/features/tools/use-mcp-tool), [access_mcp_resource](/features/tools/access-mcp-resource) | Specialized functionality through external servers |
| **Workflow Group** | Mode and task management | [switch_mode](/features/tools/switch-mode), [new_task](/features/tools/new-task), [ask_followup_question](/features/tools/ask-followup-question), [attempt_completion](/features/tools/attempt-completion), [update_todo_list](/features/tools/update-todo-list) | Context switching and task organization |
### Always Available Tools
Certain tools are accessible regardless of the current mode:
- [ask_followup_question](/features/tools/ask-followup-question): Gather additional information from users
- [attempt_completion](/features/tools/attempt-completion): Signal task completion
- [switch_mode](/features/tools/switch-mode): Change operational modes
- [new_task](/features/tools/new-task): Create subtasks
- [update_todo_list](/features/tools/update-todo-list): Manage step-by-step task tracking
## Available Tools
### Read Tools
These tools help Kilo Code understand your code and project:
- [read_file](/features/tools/read-file) - Examines the contents of files
- [search_files](/features/tools/search-files) - Finds patterns across multiple files
- [list_files](/features/tools/list-files) - Maps your project's file structure
- [list_code_definition_names](/features/tools/list-code-definition-names) - Creates a structural map of your code
### Edit Tools
These tools help Kilo Code make changes to your code:
- [apply_diff](/features/tools/apply-diff) - Makes precise, surgical changes to your code
- [write_to_file](/features/tools/write-to-file) - Creates new files or completely rewrites existing ones
### Browser Tools
These tools help Kilo Code interact with web applications:
- [browser_action](/features/tools/browser-action) - Automates browser interactions
### Command Tools
These tools help Kilo Code execute commands:
- [execute_command](/features/tools/execute-command) - Runs system commands and programs
### MCP Tools
These tools help Kilo Code connect with external services:
- [use_mcp_tool](/features/tools/use-mcp-tool) - Uses specialized external tools
- [access_mcp_resource](/features/tools/access-mcp-resource) - Accesses external data sources
### Workflow Tools
These tools help manage the conversation and task flow:
- [ask_followup_question](/features/tools/ask-followup-question) - Gets additional information from you
- [attempt_completion](/features/tools/attempt-completion) - Presents final results
- [switch_mode](/features/tools/switch-mode) - Changes to a different mode for specialized tasks
- [new_task](/features/tools/new-task) - Creates a new subtask
- [update_todo_list](/features/tools/update-todo-list) - Tracks task progress with step-by-step checklists
## Tool Calling Mechanism
### When Tools Are Called
Tools are invoked under specific conditions:
1. **Direct Task Requirements**
- When specific actions are needed to complete a task as decided by the LLM
- In response to user requests
- During automated workflows
2. **Mode-Based Availability**
- Different modes enable different tool sets
- Mode switches can trigger tool availability changes
- Some tools are restricted to specific modes
3. **Context-Dependent Calls**
- Based on the current state of the workspace
- In response to system events
- During error handling and recovery
### Decision Process
The system uses a multi-step process to determine tool availability:
1. **Mode Validation**
```typescript
isToolAllowedForMode(
tool: string,
modeSlug: string,
customModes: ModeConfig[],
toolRequirements?: Record<string, boolean>,
toolParams?: Record<string, any>
)
```
2. **Requirement Checking**
- System capability verification
- Resource availability
- Permission validation
3. **Parameter Validation**
- Required parameter presence
- Parameter type checking
- Value validation
## Technical Implementation
### Tool Call Processing
1. **Initialization**
- Tool name and parameters are validated
- Mode compatibility is checked
- Requirements are verified
2. **Execution**
```typescript
const toolCall = {
type: "tool_call",
name: chunk.name,
arguments: chunk.input,
callId: chunk.callId
}
```
3. **Result Handling**
- Success/failure determination
- Result formatting
- Error handling
### Security and Permissions
1. **Access Control**
- File system restrictions
- Command execution limitations
- Network access controls
2. **Validation Layers**
- Tool-specific validation
- Mode-based restrictions
- System-level checks
## Mode Integration
### Mode-Based Tool Access
Tools are made available based on the current mode:
- **Code Mode**: Full access to file system tools, code editing capabilities, command execution
- **Ask Mode**: Limited to reading tools, information gathering capabilities, no file system modifications
- **Architect Mode**: Design-focused tools, documentation capabilities, limited execution rights
- **Custom Modes**: Can be configured with specific tool access for specialized workflows
### Mode Switching
1. **Process**
- Current mode state preservation
- Tool availability updates
- Context switching
2. **Impact on Tools**
- Tool set changes
- Permission adjustments
- Context preservation
## Best Practices
### Tool Usage Guidelines
1. **Efficiency**
- Use the most specific tool for the task
- Avoid redundant tool calls
- Batch operations when possible
2. **Security**
- Validate inputs before tool calls
- Use minimum required permissions
- Follow security best practices
3. **Error Handling**
- Implement proper error checking
- Provide meaningful error messages
- Handle failures gracefully
### Common Patterns
1. **Information Gathering**
```
[ask_followup_question](/features/tools/ask-followup-question) → [read_file](/features/tools/read-file) → [search_files](/features/tools/search-files)
```
2. **Code Modification**
```
[read_file](/features/tools/read-file) → [apply_diff](/features/tools/apply-diff) → [attempt_completion](/features/tools/attempt-completion)
```
3. **Task Management**
```
[new_task](/features/tools/new-task) → [switch_mode](/features/tools/switch-mode) → [execute_command](/features/tools/execute-command)
```
4. **Progress Tracking**
```
[update_todo_list](/features/tools/update-todo-list) → [execute_command](/features/tools/execute-command) → [update_todo_list](/features/tools/update-todo-list)
```
## Error Handling and Recovery
### Error Types
1. **Tool-Specific Errors**
- Parameter validation failures
- Execution errors
- Resource access issues
2. **System Errors**
- Permission denied
- Resource unavailable
- Network failures
3. **Context Errors**
- Invalid mode for tool
- Missing requirements
- State inconsistencies
### Recovery Strategies
1. **Automatic Recovery**
- Retry mechanisms
- Fallback options
- State restoration
2. **User Intervention**
- Error notifications
- Recovery suggestions
- Manual intervention options
packages/kilo-docs/docs/features/tools/update-todo-list.md
-159
View File
@@ -1,159 +0,0 @@
# update_todo_list
The `update_todo_list` tool replaces the entire TODO list with an updated checklist reflecting the current state. It provides step-by-step task tracking, allowing confirmation of completion before updating and dynamic addition of new todos discovered during complex tasks.
## Parameters
The tool accepts these parameters:
- `todos` (required): A markdown checklist with task descriptions and status indicators
## What It Does
This tool manages a comprehensive TODO list that tracks task progress through different status states. It replaces the entire list with each update, ensuring the current state accurately reflects all pending, in-progress, and completed tasks. The system displays the TODO list as reminders in subsequent messages.
## When is it used?
- When tasks involve multiple steps requiring systematic tracking
- When new actionable items are discovered during task execution
- When updating the status of several todos simultaneously
- When complex projects benefit from clear, stepwise progress tracking
- When organizing multi-phase workflows with dependencies
## Key Features
- Maintains a single-level markdown checklist with three status states
- Updates multiple task statuses in a single operation
- Dynamically adds new todos as they're discovered during execution
- Provides visual progress tracking through status indicators
- Integrates with the reminder system for persistent task visibility
- Supports task reordering based on execution priority
- Preserves all unfinished tasks unless explicitly removed
- Enables efficient batch status updates
## Limitations
- Limited to single-level checklists (no nesting or subtasks)
- Cannot remove tasks unless they're completed or no longer relevant
- Requires complete list replacement rather than incremental updates
- Status changes must be explicitly managed through tool calls
- No built-in task dependency tracking
- Cannot schedule tasks for future execution
- Limited to three status states (pending, in-progress, completed)
## Status Indicators
The tool uses three distinct status indicators:
- `[ ]` **Pending**: Task not yet started
- `[-]` **In Progress**: Task currently being worked on
- `[x]` **Completed**: Task fully finished with no unresolved issues
## How It Works
When the `update_todo_list` tool is invoked, it follows this process:
1. **Status Validation**:
- Parses the markdown checklist format
- Validates status indicators are properly formatted
- Ensures task descriptions are clear and actionable
2. **List Replacement**:
- Completely replaces the existing TODO list
- Preserves task order as specified in the update
- Maintains task descriptions and status states
3. **Reminder Integration**:
- Integrates updated list with the reminder system
- Displays current tasks in subsequent message headers
- Provides persistent visibility of task progress
4. **Progress Tracking**:
- Tracks completion status across multiple updates
- Maintains task history for reference
- Supports workflow continuation across sessions
## Best Practices
### Task Management Guidelines
- Mark tasks as completed immediately after all work is finished
- Start the next task by marking it as in-progress
- Add new todos as soon as they are identified during execution
- Use clear, descriptive task names that indicate specific actions
- Order tasks by logical execution sequence or priority
### Status Update Patterns
- Update multiple statuses simultaneously when transitioning between tasks
- Confirm task completion before marking as finished
- Keep in-progress tasks focused on current work
- Add blocking tasks when dependencies are discovered
### When to Use
Use this tool when:
- The task involves multiple steps or requires ongoing tracking
- New actionable items are discovered during task execution
- Multiple todos need status updates simultaneously
- Complex tasks benefit from clear progress visualization
Avoid using when:
- There is only a single, trivial task
- The task can be completed in one or two simple steps
- The request is purely conversational or informational
## Examples When Used
- When implementing a multi-component feature requiring frontend, backend, and database changes
- When debugging issues that reveal multiple related problems requiring fixes
- When setting up development environments with multiple configuration steps
- When documenting systems that require research, writing, and review phases
- When refactoring code that affects multiple files and requires testing
## Usage Examples
Initial task breakdown:
```
<update_todo_list>
<todos>
[-] Analyze requirements and create technical specification
[ ] Design database schema and API endpoints
[ ] Implement backend authentication service
[ ] Create frontend login components
[ ] Write comprehensive tests
[ ] Update documentation
</todos>
</update_todo_list>
```
Updating progress and adding discovered tasks:
```
<update_todo_list>
<todos>
[x] Analyze requirements and create technical specification
[x] Design database schema and API endpoints
[-] Implement backend authentication service
[ ] Create frontend login components
[ ] Write comprehensive tests
[ ] Update documentation
[ ] Add password reset functionality
[ ] Implement rate limiting for login attempts
</todos>
</update_todo_list>
```
Completing multiple tasks and transitioning focus:
```
<update_todo_list>
<todos>
[x] Analyze requirements and create technical specification
[x] Design database schema and API endpoints
[x] Implement backend authentication service
[x] Create frontend login components
[-] Write comprehensive tests
[ ] Update documentation
[ ] Add password reset functionality
[ ] Implement rate limiting for login attempts
</todos>
</update_todo_list>
packages/kilo-docs/docs/features/tools/use-mcp-tool.md
-188
View File
@@ -1,188 +0,0 @@
# use_mcp_tool
The `use_mcp_tool` tool enables interaction with external tools provided by connected Model Context Protocol (MCP) servers. It extends Kilo Code's capabilities with domain-specific functionality through a standardized protocol.
## Parameters
The tool accepts these parameters:
- `server_name` (required): The name of the MCP server providing the tool
- `tool_name` (required): The name of the tool to execute
- `arguments` (required/optional): A JSON object containing the tool's input parameters, following the tool's input schema. May be optional for tools that require no input.
## What It Does
This tool allows Kilo Code to access specialized functionality provided by external MCP servers. Each MCP server can offer multiple tools with unique capabilities, extending Kilo Code beyond its built-in functionality. The system validates arguments against schemas, manages server connections, and processes responses of various content types (text, image, resource).
## When is it used?
- When specialized functionality not available in core tools is needed
- When domain-specific operations are required
- When integration with external systems or services is needed
- When working with data that requires specific processing or analysis
- When accessing proprietary tools through a standardized interface
## Key Features
- Uses the standardized MCP protocol via the `@modelcontextprotocol/sdk` library
- Supports multiple transport mechanisms (StdioClientTransport and SSEClientTransport)
- Validates arguments using Zod schema validation on both client and server sides
- Processes multiple response content types: text, image, and resource references
- Manages server lifecycle with automatic restarts when server code changes
- Provides an "always allow" mechanism to bypass approval for trusted tools
- Works with the companion `access_mcp_resource` tool for resource retrieval
- Maintains proper error tracking and handling for failed operations
- Supports configurable timeouts (1-3600 seconds, default: 60 seconds)
- Allows file watchers to automatically detect and reload server changes
## Limitations
- Depends on external MCP servers being available and connected
- Limited to the tools provided by connected servers
- Tool capabilities vary between different MCP servers
- Network issues can affect reliability and performance
- Requires user approval before execution (unless in the "always allow" list)
- Cannot execute multiple MCP tool operations simultaneously
## Server Configuration
MCP servers can be configured globally or at the project level:
- **Global Configuration**: Managed through the Kilo Code extension settings in VS Code. These apply across all projects unless overridden.
- **Project-level Configuration**: Defined in a `.kilocode/mcp.json` file within your project's root directory.
- This allows project-specific server setups.
- Project-level servers take precedence over global servers if they share the same name.
- Since `.kilocode/mcp.json` can be committed to version control, it simplifies sharing configurations with your team.
## How It Works
When the `use_mcp_tool` tool is invoked, it follows this process:
1. **Initialization and Validation**:
- The system verifies that the MCP hub is available
- Confirms the specified server exists and is connected
- Validates the requested tool exists on the server
- Arguments are validated against the tool's schema definition
- Timeout settings are extracted from server configuration (default: 60 seconds)
2. **Execution and Communication**:
- The system selects the appropriate transport mechanism:
- `StdioClientTransport`: For communicating with local processes via standard I/O
- `SSEClientTransport`: For communicating with HTTP servers via Server-Sent Events
- A request is sent with validated server name, tool name, and arguments
- Communication uses the `@modelcontextprotocol/sdk` library for standardized interactions
- Request execution is tracked with timeout handling to prevent hanging operations
3. **Response Processing**:
- Responses can include multiple content types:
- Text content: Plain text responses
- Image content: Binary image data with MIME type information
- Resource references: URIs to access server resources (works with `access_mcp_resource`)
- The system checks the `isError` flag to determine if error handling is needed
- Results are formatted for display in the Kilo Code interface
4. **Resource and Error Handling**:
- The system uses WeakRef patterns to prevent memory leaks
- A consecutive mistake counter tracks and manages errors
- File watchers monitor for server code changes and trigger automatic restarts
- The security model requires approval for tool execution unless in the "always allow" list
## Security and Permissions
The MCP architecture provides several security features:
- Users must approve tool usage before execution (by default)
- Specific tools can be marked for automatic approval in the "always allow" list
- Server configurations are validated with Zod schemas for integrity
- Configurable timeouts prevent hanging operations (1-3600 seconds)
- Server connections can be enabled or disabled through the UI
## Examples When Used
- Analyzing specialized data formats using server-side processing tools
- Generating images or other media through AI models hosted on external servers
- Executing complex domain-specific calculations without local implementation
- Accessing proprietary APIs or services through a controlled interface
- Retrieving data from specialized databases or data sources
## Usage Examples
Requesting weather forecast data with text response:
```
<use_mcp_tool>
<server_name>weather-server</server_name>
<tool_name>get_forecast</tool_name>
<arguments>
{
"city": "San Francisco",
"days": 5,
"format": "text"
}
</arguments>
</use_mcp_tool>
```
Analyzing source code with a specialized tool that returns JSON:
```
<use_mcp_tool>
<server_name>code-analysis</server_name>
<tool_name>complexity_metrics</tool_name>
<arguments>
{
"language": "typescript",
"file_path": "src/app.ts",
"include_functions": true,
"metrics": ["cyclomatic", "cognitive"]
}
</arguments>
</use_mcp_tool>
```
Generating an image with specific parameters:
```
<use_mcp_tool>
<server_name>image-generation</server_name>
<tool_name>create_image</tool_name>
<arguments>
{
"prompt": "A futuristic city with flying cars",
"style": "photorealistic",
"dimensions": {
"width": 1024,
"height": 768
},
"format": "webp"
}
</arguments>
</use_mcp_tool>
```
Accessing a resource through a tool that returns a resource reference:
```
<use_mcp_tool>
<server_name>database-connector</server_name>
<tool_name>query_and_store</tool_name>
<arguments>
{
"database": "users",
"type": "select",
"fields": ["name", "email", "last_login"],
"where": {
"status": "active"
},
"store_as": "active_users"
}
</arguments>
</use_mcp_tool>
```
Tool with no required arguments:
```
<use_mcp_tool>
<server_name>system-monitor</server_name>
<tool_name>get_current_status</tool_name>
<arguments>
{}
</arguments>
</use_mcp_tool>
```
packages/kilo-docs/docs/features/tools/write-to-file.md
-169
View File
@@ -1,169 +0,0 @@
# write_to_file
The `write_to_file` tool creates new files or completely replaces existing file content with an interactive approval process. It provides a diff view for reviewing changes before they're applied.
## Parameters
The tool accepts these parameters:
- `path` (required): The path of the file to write to, relative to the current working directory
- `content` (required): The complete content to write to the file
- `line_count` (required): The number of lines in the file, including empty lines
## What It Does
This tool writes content to a specified file, either creating a new file if it doesn't exist or completely overwriting an existing file. All changes require explicit user approval through a diff view interface, where users can review and even edit the proposed changes before they're applied.
## When is it used?
- When Kilo Code needs to create a new file from scratch
- When Kilo Code needs to completely rewrite an existing file
- When creating multiple files for a new project
- When generating configuration files, documentation, or source code
- When you need to review changes before they're applied
## Key Features
- Interactive Approval: Shows changes in a diff view requiring explicit approval before applying
- User Edit Support: Allows editing the proposed content before final approval
- Safety Measures: Detects code omission, validates paths, and prevents truncated content
- Editor Integration: Opens a diff view that scrolls to the first difference automatically
- Content Preprocessing: Handles artifacts from different AI models to ensure clean content
- Access Control: Validates against `.kilocodeignore` restrictions before making changes
- Parent Directories: May handle directory creation through system dependencies
- Complete Replacement: Provides a fully transformed file in a single operation
## Limitations
- Not suitable for existing files: Much slower and less efficient than `apply_diff` for modifying existing files
- Performance with large files: Operation becomes significantly slower with larger files
- Complete overwrite: Replaces entire file content, cannot preserve original content
- Line count required: Needs accurate line count to detect potential content truncation
- Review overhead: The approval process adds extra steps compared to direct edits
- Interactive only: Cannot be used in automated workflows that require non-interactive execution
## How It Works
When the `write_to_file` tool is invoked, it follows this process:
1. **Parameter Validation**: Validates the required parameters and permissions
- Checks that `path`, `content`, and `line_count` are provided
- Validates the file is allowed (not restricted by `.kilocodeignore`)
- Ensures the path is within the workspace boundaries
- Tracks consecutive mistake counts for missing parameters
- Shows specific error messages for each validation failure
2. **Content Preprocessing**:
- Removes code block markers that might be added by AI models
- Handles escaped HTML entities (specifically for non-Claude models)
- Strips line numbers if accidentally included in content
- Performs model-specific processing for different AI providers
3. **Diff View Generation**:
- Opens a diff view in the editor showing the proposed changes
- Adds a 300ms delay to ensure UI responsiveness
- Scrolls automatically to the first difference
- Highlights changes for easy review
4. **User Approval Process**:
- Waits for explicit user approval to proceed
- Allows users to edit the content in the diff view
- Captures any user edits for the final content
- Provides option to reject changes entirely
- Detects and incorporates user modifications into the final result
5. **Safety Validation**:
- Detects potential content truncation by comparing with provided line count
- Shows warnings if content appears incomplete
- Validates file path and access permissions
- Specifically checks if files are outside the workspace with `isOutsideWorkspace` flag
6. **File Writing**:
- Writes the approved content (with any user edits) to the file
- Provides confirmation of successful write
- Resets the consecutive mistakes counter on success
## Examples When Used
- When creating a new project, Kilo Code generates multiple files but lets you review each before committing changes.
- When setting up configuration files, Kilo Code shows the proposed configuration in a diff view for approval.
- When generating documentation, Kilo Code creates markdown files but lets you make final adjustments in the diff view.
- When developing a prototype, Kilo Code shows complete source files in a diff view where you can fine-tune before saving.
## Usage Examples
Creating a new JSON configuration file:
```
<write_to_file>
<path>config/settings.json</path>
<content>
{
"apiEndpoint": "https://api.example.com",
"theme": {
"primaryColor": "#007bff",
"secondaryColor": "#6c757d",
"fontFamily": "Arial, sans-serif"
},
"features": {
"darkMode": true,
"notifications": true,
"analytics": false
},
"version": "1.0.0"
}
</content>
<line_count>14</line_count>
</write_to_file>
```
Creating a simple HTML file:
```
<write_to_file>
<path>src/index.html</path>
<content>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Application</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
</content>
<line_count>13</line_count>
</write_to_file>
```
Creating a JavaScript module:
```
<write_to_file>
<path>src/utils/helpers.js</path>
<content>
/**
* Utility functions for the application
*/
export function formatDate(date) {
return new Date(date).toLocaleDateString();
}
export function calculateTotal(items) {
return items.reduce((sum, item) => sum + item.price, 0);
}
export function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
};
}
</content>
<line_count>18</line_count>
</write_to_file>
```
packages/kilo-docs/docs/getting-started/concepts.md
-12
View File
@@ -1,12 +0,0 @@
# Core Concepts
Learn the key concepts used in Kilo Code
| Concept | Description | Video Preview |
| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Provider** | Kilo Code provides its own built-in API provider that gives you access to the latest frontier coding models without the need to manage API keys that offers access to frontier models such as: OpenAI (GPT-5), Anthropic (Claude), Google (Gemini), Meta (Llama) etc. | <video width="300" controls><source src="/docs/videos/Provider.mp4" type="video/mp4"/>Checkpoint reasoning demo showing concurrent file edits</video> |
| **Foundational Models** | Large-scale AI models trained on vast datasets that serve as the base for AI applications. Models like GPT, Claude, LLaMA provide core language understanding and generation capabilities. | <video width="300" controls><source src="/docs/videos/Models.mp4" type="video/mp4"/>Foundation model</video> |
| **Prompt Engineering** | Art and science of crafting effective inputs for AI models to achieve desired outputs. Use enhance button to improve your prompt | <video width="300" controls><source src="/docs/videos/Prompt.mp4" type="video/mp4"/></video> |
| **Modes** | Within Kilo Code you can choose **Architect** mode to plan and design you software, **Code** mode to write and refactor code, **Ask** to understand your codebase, **Debug** to fix software issues and **Orchestrator** to coordinate tasks accross modes | <video width="300" controls><source src="/docs/videos/Modes.mp4" type="video/mp4"/></video> |
| **Codebase Indexing** | Codebase Indexing enables semantic code search across your entire project using AI embeddings. | <video width="300" controls><source src="/docs/videos/Indexing.mp4"/>Codebase structure mapping and navigation</video> |
| **MCP (Model Context Protocol)** | Standardized protocol for managing context and communication between AI models and external systems. Enables seamless integration with tools, databases, and services. | <video width="300" controls><source src="/docs/videos/MCP.mp4" type="video/mp4"/>MCP demo</video> |
packages/kilo-docs/docs/getting-started/connecting-api-provider.md
-89
View File
@@ -1,89 +0,0 @@
---
sidebar_label: Connecting To A Provider
---
# Connecting an AI Provider
Kilo Code requires an API key from an AI model provider to function.
We recommend these options for accessing the powerful **Claude 4 Sonnet** model:
- **Kilo Gateway (Recommended):** Provides access to all of the models available through OpenRouter with competitive pricing and free credits to get started. [View pricing](https://kilocode.ai/pricing)
- **OpenRouter:** Provides access to multiple AI models through a single API key. [View pricing](https://openrouter.ai/models?order=pricing-low-to-high).
- **Anthropic:** Direct access to Claude models. Requires API access approval and may have [rate limits depending on your tier](https://docs.anthropic.com/en/api/rate-limits#requirements-to-advance-tier). See [Anthropic's pricing page](https://www.anthropic.com/pricing#anthropic-api) for details.
## Using the Kilo Code Provider
By default when you install Kilo Code the extension, you'll be prompted to sign in or create an account in the [Kilo Code Provider](/providers/kilocode).
That will walk you through the account setup and _automatically_ configure Kilo Code properly to get you started. If you'd rather use another provider, you'll need to manually get your API key as described below.
## Using another API Provider
_Coming soon to Kilo Code Teams and Enterprise!_
### Getting Your API Key
#### Option 1: LLM Routers
LLM routers let you access multiple AI models with one API key, simplifying cost management and switching between models. They often offer [competitive pricing](https://openrouter.ai/models?order=pricing-low-to-high) compared to direct providers.
##### OpenRouter
1. Go to [openrouter.ai](https://openrouter.ai/)
2. Sign in with your Google or GitHub account
3. Navigate to the [API keys page](https://openrouter.ai/keys) and create a new key
4. Copy your API key - you'll need this for Kilo Code setup
<img src="/docs/img/connecting-api-provider/connecting-api-provider-4.png" alt="OpenRouter API keys page" width="600" />
_OpenRouter dashboard with "Create key" button. Name your key and copy it after creation._
##### Requesty
1. Go to [requesty.ai](https://requesty.ai/)
2. Sign in with your Google account or email
3. Navigate to the [API management page](https://app.requesty.ai/manage-api) and create a new key
4. **Important:** Copy your API key immediately as it won't be displayed again
<img src="/docs/img/connecting-api-provider/connecting-api-provider-7.png" alt="Requesty API management page" width="600" />
_Requesty API management page with "Create API Key" button. Copy your key immediately - it's shown only once._
#### Option 2: Direct Providers
For direct access to specific models from their original providers, with full access to their features and capabilities:
##### Anthropic
1. Go to [console.anthropic.com](https://console.anthropic.com/)
2. Sign up for an account or log in
3. Navigate to the [API keys section](https://console.anthropic.com/settings/keys) and create a new key
4. **Important:** Copy your API key immediately as it won't be displayed again
<img src="/docs/img/connecting-api-provider/connecting-api-provider-5.png" alt="Anthropic console API Keys section" width="600" />
_Anthropic console API Keys section with "Create key" button. Name your key, set expiration, and copy it immediately._
##### OpenAI
1. Go to [platform.openai.com](https://platform.openai.com/)
2. Sign up for an account or log in
3. Navigate to the [API keys section](https://platform.openai.com/api-keys) and create a new key
4. **Important:** Copy your API key immediately as it won't be displayed again
<img src="/docs/img/connecting-api-provider/connecting-api-provider-6.png" alt="OpenAI API keys page" width="600" />
_OpenAI platform with "Create new secret key" button. Name your key and copy it immediately after creation._
### Configuring the Provider in Kilo Code
Once you have your API key:
1. Open the Kilo Code sidebar by clicking the Kilo Code icon (<img src="/docs/img/kilo-v1.svg" width="12" />) in the VS Code Side Bar
2. In the welcome screen, select your API provider from the dropdown
3. Paste your API key into the appropriate field
4. Select your model:
- For **OpenRouter**: select `anthropic/claude-3.7-sonnet` ([model details](https://openrouter.ai/anthropic/claude-3.7-sonnet))
- For **Anthropic**: select `claude-3-7-sonnet-20250219` ([model details](https://www.anthropic.com/pricing#anthropic-api))
5. Click "Let's go!" to save your settings and start using Kilo Code
packages/kilo-docs/docs/getting-started/installing.md
-108
View File
@@ -1,108 +0,0 @@
---
sidebar_label: Installing Kilo Code
---
# Installing Kilo Code
Kilo Code is a VS Code extension that brings AI-powered coding assistance directly to your editor. Install using one of these methods:
- [**VS Code Marketplace (Recommended)**](#vs-code-marketplace) - fastest method for standard VS Code users
- [**Cursor Marketplace**](#cursor-marketplace) - recommended way for Cursor users
- [**Open VSX Registry**](#open-vsx-registry) - for VS Code-compatible editors like VSCodium or Windsurf
- [**Manually install the .vsix file**](#manual-installation-from-vsix) - direct installation from the GitHub Release
## VS Code Marketplace
:::tip
If you already have VS Code installed: [Click here to install Kilo Code](vscode:extension/kilocode.Kilo-Code)
:::
alternatively, you can:
1. Open VS Code
2. Access Extensions: Click the Extensions icon in the Side Bar or press `Ctrl+Shift+X` (Windows/Linux) or `Cmd+Shift+X` (macOS)
3. Search for "Kilo Code"
4. Select "Kilo Code" by Kilo Code and click **Install**
5. Reload VS Code if prompted
After installation, find the Kilo Code icon (<img src="/docs/img/kilo-v1.svg" width="12" />) in the Side Bar to open the Kilo Code panel.
<img src="/docs/img/installing/installing.png" alt="VS Code marketplace with Kilo Code extension ready to install" width="400" />
*VS Code marketplace with Kilo Code extension ready to install*
## Cursor Marketplace
:::tip
If you already have Cursor installed: [Click here to install Kilo Code](cursor:extension/kilocode.Kilo-Code)
:::
alternatively, you can:
1. Open Cursor
2. Access Extensions: Click the Extensions icon in the Side Bar or press `Ctrl+Shift+X` (Windows/Linux) or `Cmd+Shift+X` (macOS)
3. Search for "Kilo Code"
4. Select "Kilo Code" by Kilo Code and click **Install**
5. Reload Cursor if prompted
After installation, find the Kilo Code icon (<img src="/docs/img/kilo-v1.svg" width="12" />) in the Side Bar to open the Kilo Code panel.
## Open VSX Registry
[Open VSX Registry](https://open-vsx.org/) is an open-source alternative to the VS Code Marketplace for VS Code-compatible editors that cannot access the official marketplace due to licensing restrictions.
For VS Code-compatible editors like VSCodium, Gitpod, Eclipse Theia, and Windsurf, you can browse and install directly from the [Kilo Code page on Open VSX Registry](https://open-vsx.org/extension/kilocode/Kilo-Code).
1. Open your editor
2. Access the Extensions view (Side Bar icon or `Ctrl+Shift+X` / `Cmd+Shift+X`)
3. Your editor should be pre-configured to use Open VSX Registry
4. Search for "Kilo Code"
5. Select "Kilo Code" and click **Install**
6. Reload the editor if prompted
:::note
If your editor isn't automatically configured for Open VSX Registry, you may need to set it as your extension marketplace in settings. Consult your specific editor's documentation for instructions.
:::
## Manual Installation from VSIX
If you prefer to download and install the VSIX file directly:
1. **Download the VSIX file:**
* Find official releases on the [Kilo Code GitHub Releases page](https://github.com/Kilo-Org/kilocode/releases)
* Download the `.vsix` file from the [latest release](https://github.com/Kilo-Org/kilocode/releases/latest)
2. **Install in VS Code:**
* Open VS Code
* Access Extensions view
* Click the "..." menu in the Extensions view
* Select "Install from VSIX..."
* Browse to and select your downloaded `.vsix` file
<img src="/docs/img/installing/installing-2.png" alt="VS Code's Install from VSIX dialog" width="400" />
*Installing Kilo Code using VS Code's "Install from VSIX" dialog*
## Troubleshooting
**Extension Not Visible**
* Restart VS Code
* Verify Kilo Code is listed and enabled in Extensions
* Try disabling and re-enabling the extension in Extensions
* Check Output panel for errors (View → Output, select "Kilo Code")
**Installation Problems**
* Ensure stable internet connection
* Verify VS Code version 1.84.0 or later
* If VS Code Marketplace is inaccessible, try the Open VSX Registry method
## Getting Support
If you encounter issues not covered here:
* Join our [Discord community](https://kilocode.ai/discord) for real-time support
* Submit issues on [GitHub](https://github.com/Kilo-Org/kilocode/issues)
* Visit our [Reddit community](https://www.reddit.com/r/KiloCode)
packages/kilo-docs/docs/getting-started/setting-up.mdx
-40
View File
@@ -1,40 +0,0 @@
---
sidebar_label: Getting Set up
---
import { DISCORD_URL } from "@site/src/constants.ts"
import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
# Setting up Kilo Code
When you sign up for Kilo Code, you can start immediately with free models, or [purchase Kilo credits](../basic-usage/adding-credits) and receive bonus credits.
To claim your bonus credits:
1. **Sign up:** Complete the registration process
2. **First top-up:** [Add credits to your account](https://app.kilo.ai/profile) and get $20 bonus credits, or sign up for [Kilo Pass](https://kilo.ai/features/kilo-pass).
3. **Start Coding:** Enjoy your $20 in free credits
## Registration process
Kilo Code provides a simple registration process that gives you access to the latest frontier coding models with your Kilo Code login.
1. Click on "Try Kilo Code for Free" in the extension
1. Sign in with your Google account to kilo.ai
1. kilo.ai will prompt you to open Visual Studio Code
- When using an IDE in a web browser, you will be asked to copy the API key manually instead
1. Once you allow it to Open VS Code, you must also allow VS Code to open the authorization URL
<img src="/docs/img/setting-up/signupflow.gif" alt="Sign up and registration flow with Kilo Code" />
That's it - you're all set! Now you can start with [your first task](/getting-started/your-first-task)
## Already have a subscription to another AI provider?
If you subscribe to ChatGPT, use the [OpenAI ChatGPT provider](../providers/openai-chatgpt-plus-pro) to utilize your subscription with Kilo Code.
You can also [bring your own key](../basic-usage/byok) to use your account or subscription for other providers, including: Anthropic, OpenAI, Mistral, Z.AI, and Minimax.
:::tip Need Help?
If you have any questions about pricing or tokens, please reach out to our [support team](mailto:hi@kilo.ai) or ask in our <a href={DISCORD_URL} target='_blank'>Discord community</a>.
:::
packages/kilo-docs/docs/getting-started/your-first-task.md
-90
View File
@@ -1,90 +0,0 @@
---
sidebar_label: Your First Task
---
# Starting Your First Task with Kilo Code
<YouTubeEmbed
url="https://www.youtube.com/watch?v=pO7zRLQS-p0"
/>
This quick tour shows how Kilo Code handles a simple request from start to finish.
After you [set up Kilo Code](/getting-started/setting-up), follow these steps:
## Step 1: Open the Kilo Code Panel
Click the Kilo Code icon (<img src="/docs/img/kilo-v1.svg" width="12" />) in the VS Code Primary Side Bar (vertical bar on the side of the window) to open the chat interface. If you don't see the icon, verify the extension is [installed](/getting-started/installing) and enabled.
<img src="/docs/img/your-first-task/your-first-task.png" alt="Kilo Code icon in VS Code Primary Side Bar" width="800" />
_The Kilo Code icon in the Primary Side Bar opens the chat interface._
## Step 2: Type Your Task
Type a clear, concise description of what you want Kilo Code to do in the chat box at the bottom of the panel. Examples of effective tasks:
- "Create a file named `hello.txt` containing 'Hello, world!'."
- "Write a Python function that adds two numbers."
- "Create an HTML file for a simple website with the title 'Kilo test'"
No special commands or syntax needed—just use plain English.
<details>
<summary>💡 Optional: Try Autocomplete</summary>
While chat is great for complex tasks, Kilo Code also offers **inline autocomplete** for quick code suggestions. Open any code file, start typing, and watch for ghost text suggestions. Press `Tab` to accept. [Learn more about Autocomplete →](/basic-usage/autocomplete)
</details>
<img src="/docs/img/your-first-task/your-first-task-6.png" alt="Typing a task in the Kilo Code chat interface" width="500" />
*Enter your task in natural language - no special syntax required.*
## Step 3: Send Your Task
Press Enter or click the Send icon (<Codicon name="send" />) to the right of the input box.
## Step 4: Review and Approve Actions
Kilo Code analyzes your request and proposes specific actions. These may include:
- **Reading files:** Shows file contents it needs to access
- **Writing to files:** Displays a diff with proposed changes (added lines in green, removed in red)
- **Executing commands:** Shows the exact command to run in your terminal
- **Using the Browser:** Outlines browser actions (click, type, etc.)
- **Asking questions:** Requests clarification when needed to proceed
<img src="/docs/img/your-first-task/your-first-task-7.png" alt="Reviewing a proposed file creation action" width="400" />
*Kilo Code shows exactly what action it wants to perform and waits for your approval.*
- In **Code** mode, writing capabilities are on by default.
- In **Architect** and **Ask** modes, Kilo Code won't write code.
:::tip
The level of autonomy is configurable, allowing you to make the agent more or less autonomous.
You can learn more about [using modes](/basic-usage/using-modes) and [auto-approving actions](/features/auto-approving-actions).
:::
## Step 5: Iterate
Kilo Code works iteratively. After each action, it waits for your feedback before proposing the next step. Continue this review-approve cycle until your task is complete.
<img src="/docs/img/your-first-task/your-first-task-8.png" alt="Final result of a completed task showing the iteration process" width="500" />
*After completing the task, Kilo Code shows the final result and awaits your next instruction.*
## Conclusion
You've completed your first task. Along the way you learned:
- How to interact with Kilo Code using natural language
- Why approval keeps you in control
- How iteration lets the AI refine its work
Ready for more? Here are some next steps:
- **[Autocomplete](/basic-usage/autocomplete)** — Get inline code suggestions as you type
- **[Modes](/basic-usage/using-modes)** — Explore different modes for different tasks
- **[Auto-approval](/features/auto-approving-actions)** — Speed up repetitive tasks
packages/kilo-docs/docs/index.mdx
-108
View File
@@ -1,108 +0,0 @@
---
sidebar_label: Welcome
---
import {
DISCORD_URL,
REDDIT_URL,
GITHUB_ISSUES_MAIN_URL,
GITHUB_FEATURES_URL,
YOUTUBE_URL,
} from "@site/src/constants.ts"
import Image from "@site/src/components/Image"
# Kilo Code Documentation
Kilo Code **accelerates** development with AI-driven code generation and task automation. This open source extension plugs directly into VS Code.
## What Can Kilo Code Do?
- 🚀 **Generate Code** from natural language descriptions
- 🔧 **Refactor & Debug** existing code
- 📝 **Write & Update** documentation
- 🤔 **Answer Questions** about your codebase
- 🔄 **Automate** repetitive tasks
- 🏗️ **Create** new files and projects
- ⚡ **Autocomplete** code as you type with AI-powered suggestions
## Quick Start
1. [Install Kilo Code](/getting-started/installing)
2. [Set up Kilo Code](/getting-started/setting-up)
3. [Try Your First Task](/getting-started/your-first-task)
4. [Enable Autocomplete](/basic-usage/autocomplete) for inline code suggestions
## Features
<Image
src="/docs/img/kilogif.gif"
alt="GIF showing some of the capabilities of Kilo Code"
width="600"
/>
### Basics
Use [the chat interface](/basic-usage/the-chat-interface) to tell Kilo Code what you need, or let [Autocomplete](/basic-usage/autocomplete) suggest code as you type. It relies on coding‑optimized AI models to complete each request.
- Switch [modes](/basic-usage/using-modes) to fit the task
- Control allowed [actions](/features/auto-approving-actions)
- Run direct [code actions](/features/code-actions)
### Using Kilo Code
#### Multiple Modes
Kilo Code adapts to your needs with specialized [modes](/basic-usage/using-modes):
- [**Code Mode:**](/basic-usage/using-modes#code-mode-default) For general-purpose coding tasks
- [**Architect Mode:**](/basic-usage/using-modes#architect-mode) For planning and technical leadership
- [**Ask Mode:**](/basic-usage/using-modes#ask-mode) For answering questions and providing information
- [**Debug Mode:**](/basic-usage/using-modes#debug-mode) For systematic problem diagnosis
- **[Custom Modes](/agent-behavior/custom-modes):** Create unlimited specialized personas for security auditing, performance optimization, documentation, or any other task
#### Core Tools
Kilo Code comes with powerful [tools](/features/tools/tool-use-overview) that can:
- [Read](/features/tools/read-file), [write](/features/tools/write-to-file), and [delete](/features/tools/delete-file) files in your project
- [Execute commands](/features/tools/execute-command) in your VS Code terminal
- [Control a web browser](/features/tools/browser-action)
- [Ask follow-up questions](/features/tools/ask-followup-question)
- [Search your codebase](/features/tools/search-files)
See the complete [Tools Reference](/features/tools/tool-use-overview) for all available tools.
### Extending Kilo Code
- **[MCP (Model Context Protocol)](/features/mcp/overview):** Add unlimited custom tools, integrate with external APIs, connect to databases, or create specialized development tools
- **[Local Models](/advanced-usage/local-models):** Run Kilo Code with local AI models for offline use or enhanced privacy
### Customizing Kilo Code
Make Kilo Code work your way with:
- [Settings Management](/basic-usage/settings-management) for configuring your experience
- [Custom Modes](/agent-behavior/custom-modes) for specialized tasks
- [Custom Rules](/agent-behavior/custom-rules) for project-specific rules
- [Custom Instructions](/agent-behavior/custom-instructions) for global plugin-wide instructions
- [API Configuration Profiles](/features/api-configuration-profiles) for different model providers
- [Auto-Approval Settings](/features/auto-approving-actions) for faster workflows
## Resources
### Documentation
- [Using Kilo Code](/basic-usage/the-chat-interface) - Learn the basics
- [Autocomplete](/basic-usage/autocomplete) - Get AI-powered code suggestions as you type
- [Core Concepts](/features/auto-approving-actions) - Master key features
- [Advanced Usage](/agent-behavior/prompt-engineering) - Take your skills further
- [Frequently Asked Questions](/faq) - Get answers to common questions
### Community
- **Discord:** <a href={DISCORD_URL} target="_blank">Join our Discord server</a> for real-time help and discussions
- **Reddit:** <a href={REDDIT_URL} target="_blank">Visit our subreddit</a> to share experiences and tips
- **YouTube:** <a href={YOUTUBE_URL} target="_blank">Check out our YouTube</a> to learn hands on skills when using Kilo Code
- **GitHub:** Report <a href={GITHUB_ISSUES_MAIN_URL} target="_blank">issues</a> or request <a href={GITHUB_FEATURES_URL} target="_blank">features</a>
Ready to get started? Click the **Next** button below to begin your journey with Kilo Code!
packages/kilo-docs/docs/jetbrains-troubleshooting.md
-114
View File
@@ -1,114 +0,0 @@
# JetBrains Plugin Troubleshooting
This guide covers common issues when using Kilo Code in JetBrains IDEs (IntelliJ IDEA, Android Studio, WebStorm, PyCharm, etc.).
## Known Missing Features
The following features, available in the VS Code version of Kilo Code, are not currently implemented in the JetBrains version:
- **Autocomplete/QuickTasks**
- **Git Commit Message Generation** This feature is missing but will be added soon!
We're actively working on bringing feature parity between the VS Code and JetBrains versions. Check our [GitHub repository](https://github.com/Kilo-Org/kilocode) for updates on development progress.
## Node.js Requirements
### Why Node.js is Required
The JetBrains Kilo Extension requires Node.js to be installed on your system. Node.js is used to run the extension's backend services and handle communication between the IDE and Kilo Code's AI features.
### Installing Node.js
Visit the official Node.js website for installation instructions for your platform: [https://nodejs.org/en/download](https://nodejs.org/en/download)
We recommend downloading the **LTS (Long Term Support)** version for stability.
### Verifying Node.js Installation
After installation, verify that Node.js is properly installed by opening a terminal and running:
```bash
node --version
npm --version
```
Both commands should return version numbers.
## JCEF (Java Chromium Embedded Framework) Issues
### What is JCEF?
JCEF (Java Chromium Embedded Framework) is required for Kilo Code's web-based interface to display properly in JetBrains IDEs. Most JetBrains IDEs include JCEF support by default, but some configurations may need manual activation.
## Fixing JCEF Issues by IDE
### Android Studio
JCEF is available in Android Studio but may need to be enabled manually:
1. **Open Settings/Preferences:**
- **Windows/Linux:** File → Settings
- **macOS:** Help → Find Action...
2. **Navigate to Boot Java Runtime:**
- Choose Boot Java Runtime for the IDE...
3. **Pick a new runtime**
- Pick one that has "with JCEF" in the name
4. **Restart Android Studio:**
- Close and reopen Android Studio for the changes to take effect
5. **Verify:**
- Open Kilo Code panel
- The JCEF warning should be gone, and the interface should load properly
**Visual Guide:**
<img src="/docs/img/jetbrains/android-studio-jcef-enable.gif" alt="Step-by-step guide showing how to enable JCEF in Android Studio" width="600" />
_This animation shows the complete process of enabling JCEF in Android Studio._
### IntelliJ IDEA
JCEF should be enabled by default in IntelliJ IDEA. If you see JCEF warnings:
1. **Update IntelliJ IDEA:**
- Ensure you're running the latest version
- Go to Help → Check for Updates
2. **Verify JetBrains Runtime:**
- IntelliJ IDEA should use JetBrains Runtime (JBR) by default
- JBR includes JCEF support
3. **Check Advanced Settings:**
- Go to File → Settings (Windows/Linux) or IntelliJ IDEA → Preferences (macOS)
- Navigate to Advanced Settings
- Look for any JCEF-related options and ensure they're enabled
### Other JetBrains IDEs
For WebStorm, PyCharm, PhpStorm, RubyMine, CLion, GoLand, DataGrip, and Rider:
1. **Update to Latest Version:**
- Most JCEF issues are resolved in recent versions
- Use the built-in updater: Help → Check for Updates
2. **Verify JetBrains Runtime:**
- These IDEs should use JetBrains Runtime by default
- JBR includes comprehensive JCEF support
3. **Check Settings:**
- Go to File → Settings (Windows/Linux) or [IDE Name] → Preferences (macOS)
- Navigate to Advanced Settings
- Enable any JCEF-related options
_For general Kilo Code support and documentation, visit [kilocode.ai/docs](https://kilocode.ai/docs)_
packages/kilo-docs/docs/move-to-secondary.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 92 KiB

packages/kilo-docs/docs/providers/anthropic.md
-44
View File
@@ -1,44 +0,0 @@
---
sidebar_label: Anthropic
---
# Using Anthropic With Kilo Code
Anthropic is an AI safety and research company that builds reliable, interpretable, and steerable AI systems. Their Claude models are known for their strong reasoning abilities, helpfulness, and honesty.
**Website:** [https://www.anthropic.com/](https://www.anthropic.com/)
## Getting an API Key
1. **Sign Up/Sign In:** Go to the [Anthropic Console](https://console.anthropic.com/). Create an account or sign in.
2. **Navigate to API Keys:** Go to the [API keys](https://console.anthropic.com/settings/keys) section.
3. **Create a Key:** Click "Create Key". Give your key a descriptive name (e.g., "Kilo Code").
4. **Copy the Key:** **Important:** Copy the API key *immediately*. You will not be able to see it again. Store it securely.
## Supported Models
Kilo Code supports the following Anthropic Claude models:
* `claude-3-7-sonnet-20250219` (Recommended)
* `claude-3-7-sonnet-20250219:thinking` (Extended Thinking variant)
* `claude-3-5-sonnet-20241022`
* `claude-3-5-haiku-20241022`
* `claude-3-opus-20240229`
* `claude-3-haiku-20240307`
See [Anthropic's Model Documentation](https://docs.anthropic.com/en/docs/about-claude/models) for more details on each model's capabilities.
## Configuration in Kilo Code
1. **Open Kilo Code Settings:** Click the gear icon (<Codicon name="gear" />) in the Kilo Code panel.
2. **Select Provider:** Choose "Anthropic" from the "API Provider" dropdown.
3. **Enter API Key:** Paste your Anthropic API key into the "Anthropic API Key" field.
4. **Select Model:** Choose your desired Claude model from the "Model" dropdown.
5. **(Optional) Custom Base URL:** If you need to use a custom base URL for the Anthropic API, check "Use custom base URL" and enter the URL. Most people won't need to adjust this.
## Tips and Notes
* **Prompt Caching:** Claude 3 models support [prompt caching](https://docs.anthropic.com/en/docs/build-with-claude/prompt-caching), which can significantly reduce costs and latency for repeated prompts.
* **Context Window:** Claude models have large context windows (200,000 tokens), allowing you to include a significant amount of code and context in your prompts.
* **Pricing:** Refer to the [Anthropic Pricing](https://www.anthropic.com/pricing) page for the latest pricing information.
* **Rate Limits:** Anthropic has strict rate limits based on [usage tiers](https://docs.anthropic.com/en/api/rate-limits#requirements-to-advance-tier). If you're repeatedly hitting rate limits, consider contacting Anthropic sales or accessing Claude through a different provider like [OpenRouter](/providers/openrouter) or [Requesty](/providers/requesty).

Some files were not shown because too many files have changed in this diff Show More