DevStudio - AI-Powered Development Tools

A comprehensive Electron-based development studio powered by Claude AI (Anthropic Sonnet 4), featuring unique capabilities beyond traditional IDEs like VS Code.

🚀 Unique Features

1. Conversational Debugging Assistant 🧠

A cross-tool AI debugging system that correlates issues across multiple sources:

• Context Awareness: Automatically tracks logs, git commits, code changes, and Docker stats
• Timeline Analysis: Builds a chronological timeline of events leading to issues
• Root Cause Detection: AI analyzes patterns across all data sources to identify root causes
• Proactive Monitoring: Continuously scans for potential issues before they become critical
• Quick Fixes: Generates step-by-step fixes with risk assessment

How it works:

1. Use Log Analyzer, Git Manager, and Code Reviewer normally
2. All activity is tracked in the Debug Context Store
3. AI Debug Assistant correlates data across tools
4. Chat interface for Q&A about debugging
5. Visual timeline shows event sequences

2. Semantic Code Search 🔍

Vector embeddings-based code search using Claude AI:

• Natural Language Queries: Search code using plain English descriptions
• Intelligent Indexing: Automatically embeds all workspace files
• Incremental Updates: Only re-embeds changed files
• Similarity Ranking: Results ranked by semantic similarity (0-100%)
• Local Storage: Embeddings cached in localStorage for instant search

Example queries:

• "functions that handle user authentication"
• "error handling code"
• "database query functions"
• "React components for forms"

3. Visual SQL Query Builder 🗄️

Canvas-based SQL query builder with automatic schema detection:

• Auto-Detection: Finds databases in your repo (Prisma, Knex, TypeORM, SQL files, Sequelize)
• Visual Schema: Interactive graph showing tables, columns, and relationships
• Drag & Drop: Connect tables visually to build JOINs
• Query Generation: Generates SELECT, INSERT, and JOIN queries
• Relationship Mapping: Automatically detects and visualizes foreign keys

Supported ORMs/DBs:

• ✅ Prisma (schema.prisma)
• ✅ Knex (migrations)
• ✅ TypeORM (entities)
• ✅ Sequelize (models)
• ✅ Raw SQL files

4. AI-Powered Code Review 📝

Comprehensive code analysis with Monaco editor integration:

• Security Scanning: Detects vulnerabilities and security issues
• Performance Analysis: Identifies bottlenecks and optimization opportunities
• Best Practices: Checks for code smells and maintainability issues
• Quality Score: 0-100 score with detailed breakdown
• Instant Fixes: Generate improvements for any detected issue

5. Smart Log Analyzer 📊

Real-time log analysis with AI insights:

• Live Tailing: Watch logs in real-time with auto-scrolling
• Pattern Detection: AI identifies error patterns and anomalies
• Smart Filtering: Filter by ERROR, WARN, INFO levels
• Actionable Insights: Get recommendations to fix issues
• Context Integration: Logs feed into Debug Assistant

6. Intelligent Command Builder 💻

Natural language to shell command conversion:

• Plain English Input: Describe what you want to do
• Command Generation: AI converts to proper shell command
• Command Explanation: Learn what each part does
• History Tracking: Save frequently used commands

7. Git Manager with AI 🌳

Git operations enhanced with AI:

• Smart Commit Messages: Auto-generates conventional commit messages
• Change Analysis: AI analyzes diff to suggest message
• Visual Status: See staged/unstaged changes at a glance
• Integration: Git history feeds into Debug Assistant

8. Docker Manager 🐳

Container management with AI analysis:

• Container Status: View running/stopped containers
• Log Analysis: AI analyzes Docker logs for issues
• Resource Monitoring: Track container resource usage
• Quick Actions: Start/stop/restart with one click

🎯 Why DevStudio vs VS Code?

Feature	DevStudio	VS Code
Cross-Tool Debugging	✅ Correlates logs + code + git + docker	❌ Separate extensions
Semantic Code Search	✅ Vector embeddings with Claude	❌ Text-based search only
Visual SQL Builder	✅ Auto-detects schemas, visual canvas	❌ Manual SQL writing
Proactive Issue Detection	✅ AI monitors for problems	❌ Reactive only
Context-Aware AI	✅ Full workspace context	⚠️ Limited to current file
Timeline Analysis	✅ Chronological event tracking	❌ None

🛠️ Tech Stack

• Electron 39.1.1 - Desktop framework
• React 19.2.0 - UI framework (new JSX transform)
• TypeScript 5.9.3 - Type safety
• Vite 7.2.2 - Fast dev server & bundler
• Claude Sonnet 4 - AI model (claude-sonnet-4-20250514)
• Monaco Editor - VS Code editor component
• React Flow - Visual canvas for SQL builder
• Zustand - State management
• Tailwind CSS v4 - Styling

📦 Installation

# Clone the repository
git clone <your-repo>
cd electron_codebuilder

# Install dependencies
npm install

# Run development mode
npm run electron:dev

🔑 Setup

1. Launch DevStudio
2. Go to Settings (⚙️ icon in sidebar)
3. Enter your Claude API Key (get one from https://console.anthropic.com/)
4. Click Save

The API key is stored locally using Zustand persist (localStorage).

🚦 Usage

Debug Assistant Workflow

1. Open Log Analyzer → Load your application logs
2. Open Git Manager → Select your repository
3. Open Code Reviewer → Review problematic files
4. Open AI Debug Assistant → Click "Full Analysis"
5. Review Timeline → See chronological event sequence
6. Chat with AI → Ask questions about the issue
7. Apply Fixes → Get step-by-step solutions

Semantic Search Workflow

1. Go to Semantic Search (🔍 icon)
2. Click "Index Workspace" → Embeds all code files
3. Type natural query → e.g., "authentication functions"
4. View results → Ranked by similarity
5. Preview code → Monaco editor with syntax highlighting

SQL Query Builder Workflow

1. Go to SQL Query Builder (💾 icon)
2. Click "Detect Schema" → Auto-finds databases
3. View visual schema → Tables and relationships
4. Select tables → Click to select
5. Choose query type → SELECT, JOIN, or INSERT
6. Generate SQL → Get formatted SQL query
7. Download → Save to .sql file

🎨 Vector Embeddings System

DevStudio uses a custom vector embedding system:

How it works:

1. Claude analyzes code and extracts 384-dimensional feature vectors
2. Features represent: complexity, patterns, data structures, security, etc.
3. Embeddings stored in localStorage (JSON format)
4. Cosine similarity used for search ranking
5. Incremental updates (only re-embeds changed files)

Performance:

• First index: ~10-30 seconds for 50 files
• Subsequent indexes: Only changed files
• Search: Instant (client-side cosine similarity)

🗄️ Database Detection

Automatically detects these schema sources:

ORM/Tool	Detection Method	Files Scanned
Prisma	Parse schema.prisma	prisma/schema.prisma
Knex	Parse migrations	migrations/*.js
TypeORM	Parse entities	**/*.entity.ts
Sequelize	Parse models	models/*.js
Raw SQL	Parse CREATE TABLE	**/*.sql

🏗️ Architecture

DevStudio/
├── electron/
│   ├── main.ts          # Main process (IPC, file ops)
│   └── preload.ts       # IPC bridge
├── src/
│   ├── components/
│   │   ├── GitManager.tsx
│   │   ├── CommandBuilder.tsx
│   │   ├── DockerManager.tsx
│   │   ├── LogAnalyzer.tsx
│   │   ├── CodeReviewer.tsx
│   │   ├── DebugAssistant.tsx    # 🆕 Cross-tool debugger
│   │   ├── SemanticSearch.tsx    # 🆕 Vector search
│   │   └── SQLQueryBuilder.tsx   # 🆕 Visual query builder
│   ├── services/
│   │   ├── claude.ts              # Claude API integration
│   │   ├── embeddings.ts          # 🆕 Vector embeddings
│   │   └── databaseDetection.ts   # 🆕 Schema detection
│   ├── stores/
│   │   ├── settingsStore.ts       # App settings
│   │   └── debugContextStore.ts   # 🆕 Debug context tracking
│   └── types/
│       └── index.ts               # TypeScript types

🔌 Debug Context Store

The Debug Context Store tracks:

interface DebugContext {
  recentLogs: string[]; // Last 100 log entries
  recentCommits: GitCommit[]; // Last 20 commits
  openFiles: string[]; // Last 10 opened files
  dockerContainers: Container[]; // Current container states
  timeline: TimelineEvent[]; // Chronological events
  analysisCache: Map<string, any>; // Cached AI analyses
}

Auto-population:

• Log Analyzer → adds logs on file load
• Git Manager → adds commits on commit action
• Code Reviewer → adds file opens & issues
• Docker Manager → updates container states

🎯 Roadmap

• Real-time collaboration: Share debugging sessions
• Custom embeddings: Train on your codebase
• Query execution: Run SQL queries directly
• Database migrations: Generate migration files
• Performance profiling: Integrate with profiling tools
• Multi-language support: Extend beyond JavaScript/TypeScript

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'feat: add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open Pull Request

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

• Anthropic - Claude AI API
• Microsoft - Monaco Editor
• Electron - Desktop framework
• React - UI library
• Vite - Build tool

---

Built with ❤️ using Claude Sonnet 4 and Electron

For questions or support, open an issue on GitHub.