AI-Supported Code Editor
A lightweight code editor with AI assistance, built using Streamlit.
Features
- File Navigation: Browse and edit code files in a project directory with an enhanced tree view (nested)
- AI Assistant: Chat with an AI assistant (OpenAI or Anthropic) for code suggestions, debugging, and explanations
- Code Execution: Run Python code directly in the editor and capture outputs
- Syntax Highlighting: View code with syntax highlighting for better readability
- Web Search: Search the internet for documentation and examples
- AI Commands: Use special commands like
/improve
and/explain
to get targeted AI assistance - Modern UI: Clean, VS Code-inspired interface with customizable layout
Project Structure
codeeditor/
├── src/
│ ├── codeeditor/ # Core package code
│ ├── streamlit_app.py # Streamlit application entry point
│ └── main.py # Main application module
├── tests/ # Test suite
├── docs/ # Documentation
├── requirements.txt # Project dependencies
└── pyproject.toml # Project metadata and build configuration
Installation
# Clone the repository from Gitea
git clone https://https://gitea.fhgr.ch/pengniklas/codeeditor.git
cd codeeditor
# Create and activate virtual environment (Windows)
python -m venv venv
.\venv\Scripts\activate
# On macOS/Linux
# python -m venv venv
# source venv/bin/activate
# Install the package in development mode
pip install -e .
# Install additional dependencies
pip install -r requirements.txt
Configuration
- Copy the example environment file:
cp src/codeeditor/env_example .env
- Edit the
.env
file with your API keys:
# AI Provider Configuration
# Set to "anthropic"
AI_PROVIDER=anthropic
# Anthropic API Configuration (if using Anthropic)
ANTHROPIC_API_KEY=your_anthropic_api_key_here
ANTHROPIC_MODEL=claude-3-opus-20240229
# Search API Configuration (Google Custom Search)
SEARCH_API_KEY=your_google_api_key_here
SEARCH_ENGINE_ID=your_search_engine_id_here
Usage
# Run the application using Streamlit
streamlit run src/streamlit_app.py
# Or directly using the module
python -m src.main
How to Use
- Navigate Files: Use the file explorer in the left sidebar to browse your project files
- Edit Code: Select a file to open it in the editor, make changes, and save
- Execute Code: For Python files, click "Run Code" to execute and see the output
- AI Assistance: Use the chat interface in the right sidebar to ask the AI for help with your code
- Web Search: Search for documentation or examples directly from the editor
- AI Commands: Use special commands in the chat:
/improve
- Get suggestions to improve the current file's code/explain
- Get a detailed explanation of how the current file's code works/help
- Show available commands/clear
- Clear the chat history
Layout
The application has a three-column layout:
- Left Sidebar: File explorer with file operations (new, save, delete)
- Main Area: Code editor with syntax highlighting
- Right Sidebar: AI Assistant with chat interface and quick action buttons
Choosing an AI Provider
The application supports one AI providers:
- Anthropic: Uses Claude models for AI assistance
- Set
AI_PROVIDER=anthropic
in your .env file - Provide your Anthropic API key in the
ANTHROPIC_API_KEY
field
- Set
Development
# Install development dependencies
pip install -e ".[dev]"
# Set up pre-commit hooks
pre-commit install
# Run tests
pytest
# Run linting
flake8
License
This project is licensed under the MIT License - see the LICENSE file for details.
Languages
Python
100%