CODIE

Open Folder

Create New File

File Name

File Type

1 What to Send

2 What You Need

3 Review & Send

Review and send:

Prompt Preview

Scope:

Task:

Estimated: ~0 tokens

Ready to send!
Click "Copy & Send" to copy to your clipboard, then paste into your AI chat.

What is Codie?

Codie is a web-based code editor designed for seamless AI collaboration. Built with Monaco Editor, it provides a professional coding environment optimized for working with AI assistants like Claude.

Important: Codie doesn't have AI built-in. Instead, it's designed to help you work with AI assistants by making it easy to export your code with context-aware prompts.

⚠️ Best For: Codie is optimized for lightweight work, smaller projects, and proof-of-concepts. While it can handle various project sizes, it's ideal for quick iterations, experiments, and AI-assisted development rather than large-scale enterprise applications.

🙈 Heavily inspired by Cursor - Consider this a loving, unapologetic homage to their incredible design.

Key Benefits:

✨ Instant setup - no installation required
🤖 AI-optimized prompts and workflows for external AI tools
💾 Automatic persistence of your work
🎨 Beautiful, customizable themes
🚀 Live HTML preview

Core Features

📁 File Management

Open Folder: Open an entire project folder at once
New File: Create files directly in the editor
Save & Export: Download individual files or entire projects
Workspace Persistence: Your work is automatically saved locally

🎨 Editor Features

Monaco Editor: VS Code's editor with syntax highlighting
Supported Languages: HTML, CSS, JavaScript, TypeScript, React (JSX/TSX), Python, Markdown, JSON, and more
Multiple Themes: 7 beautiful themes to choose from
Tab Management: Work with multiple files simultaneously
Live Preview: See HTML changes in real-time (web technologies only)
Console Debugging: View console.log, errors, and warnings from preview
Find & Replace: Search and replace with regex support
Format Document: Auto-format code with Ctrl+K Ctrl+F

🤖 AI Integration

Export for AI: Three modes - Quick Overview, Full Codebase, or Selected Files
Prompts Library: Pre-built prompts for common tasks
Send Selection to AI: Right-click highlighted code for quick AI guidance
Smart Analysis: Automatic detection of frameworks, dependencies, and architecture
Smart Filtering: Automatically excludes minified files and build artifacts

⌨️ Keyboard Shortcuts

Ctrl + O Open Folder

Ctrl + S Download File

Ctrl + F Find

Ctrl + H Find & Replace

Ctrl + K Ctrl + F Format Document

Ctrl + K AI Guidance Menu

Ctrl + Shift + P Toggle Preview

Ctrl + B Toggle Sidebar

Ctrl + W Close Tab

📤 Export for AI - When to Use Each Mode

📊 Quick Overview

Best for: Initial exploration, project planning, architectural decisions

Provides a high-level snapshot of your project structure, detected frameworks, dependencies, and line counts without the full code.

📦 Full Codebase

Best for: Complex debugging, implementing features across multiple files, refactoring

Exports all files with complete code. Automatically chunks large codebases into logical sections (docs, HTML, CSS, JS) for AI consumption.

📄 Selected Files

Best for: Quick fixes, single-feature work, targeted changes

Exports the current file plus automatically detected related files (e.g., CSS linked in HTML).

💡 Tips & Tricks

Console Debugging: Click the 🐛 icon in preview to toggle console - see console.log output in real-time
Right-click code: Select text and right-click for "Send Selection to AI" - perfect for quick questions
Prompts Library: Access professional prompts for design tasks, brand development, and creative workflows
Workspace Save: Save your entire workspace (files, tabs, tree) to a zip file and restore it later
Live Preview: Edit HTML files and see changes instantly in the preview panel
Theme Persistence: Your theme choice is remembered across sessions
Smart Chunking: Large exports are intelligently split by file type for optimal AI processing
Open File: Add individual files to workspace without clearing existing files

ℹ️ About

Codie - A web-based code editor for AI collaboration

Version: 1.0

Built with Monaco Editor, optimized for Claude and other AI assistants.

How it works: Codie doesn't include AI functionality. Instead, it provides smart export features that help you share your code with AI assistants (like Claude, ChatGPT, etc.) along with context-aware prompts. You copy the prepared code and prompts, then paste them into your preferred AI tool.

Created by: Ben Merrill

Files

Preview