Scriptly - AI Code Assistant
Free, unified IDE with AI-powered coding assistance
🚀 Features
💬 AI-Powered Chat
- Interactive chat panel with codebase context awareness
- Multi-LLM support (OpenAI, Claude, Ollama, Custom endpoints)
- Real-time streaming responses
- Context-aware code analysis
- Clickable file paths, URLs, and code blocks
🔧 Code Review & Refactoring
- Automated bug detection
- AI-powered refactoring suggestions
- Code quality analysis
- Test generation recommendations
🔍 Smart Research
- Semantic codebase search
- Natural language queries
- Cross-file relationship tracking
- Workspace code indexing
- Clickable file paths (opens in VS Code with line numbers)
- Formatted URLs, emails, and git hashes
- Syntax-highlighted code blocks
- Error message detection and formatting
🎨 Professional UI
- Clean, modern vanilla JavaScript interface (no React)
- VS Code theme integration (light/dark mode)
- Smooth animations and transitions
- Multi-page navigation
📦 Installation
From VS Code Marketplace
- Open VS Code
- Press
Ctrl+Shift+X (or Cmd+Shift+X on Mac) to open Extensions
- Search for "Scriptly"
- Click Install
From Command Line
code --install-extension jeeva-dev.scriptly
⚙️ Quick Start
After installation:
- Click the Scriptly icon in the Activity Bar (left sidebar)
- Or press
Ctrl+Shift+P → "Scriptly: Configure API Keys"
- Select your LLM provider (OpenAI, Claude, Ollama, Custom)
- Enter your API key
- Save and start using!
2. Use Features
- Chat: Click Scriptly icon → Chat tab
- Code Review: Dashboard → Code Review
- Research: Dashboard → Research
- Settings: Dashboard → Settings
🎯 Supported LLM Providers
OpenAI
Anthropic Claude
Ollama (Local)
- Models: Any Ollama model (Llama, Mistral, etc.)
- Configuration: Enter your Ollama endpoint (default: http://localhost:11434)
- Install Ollama: https://ollama.ai/
Custom Endpoints
- Support for any OpenAI-compatible API
- Configure custom endpoint URL and API key
📖 Usage Examples
Chat Mode
Ask questions about your codebase:
How does authentication work in this project?
What are the main components in this file?
Explain this function
Code Review Mode
- Select a file → Click "Analyze Code" to detect potential issues
- Click "Suggest Refactoring" for improvement suggestions
- Click "Generate Tests" for automated test recommendations
- Click "Find Bugs" for bug detection
Research Mode
Search your codebase semantically:
Where is the login function implemented?
Find all API endpoints
Show me error handling patterns
🛠️ Development
Prerequisites
- Node.js >= 18.0.0
- VS Code >= 1.80.0
Setup
cd packages/extension
npm install
npm run build
Development Mode
# Watch mode (auto-rebuild on changes)
npm run dev
# In VS Code:
# Press F5 to launch Extension Development Host
Build
npm run build
Package
npm run package
🏗️ Architecture
Tech Stack
- Language: TypeScript
- UI: Vanilla HTML/CSS/JavaScript (no React)
- LLM Integration: LangChain
- IDE Compatibility: VS Code, Cursor, Windsurf, Antigravity
File Structure
src/
├── extension.ts # Entry point
├── types/ # TypeScript definitions
├── services/ # Business logic
│ ├── ConfigService.ts # API key management
│ ├── LLMService.ts # LLM integration
│ ├── CodeIndexer.ts # Workspace indexing
│ ├── SearchService.ts # Semantic search
│ ├── RefactorService.ts # Code refactoring
│ └── TestService.ts # Test generation
├── commands/ # VS Code commands
├── ui/ # Webview UI
│ ├── ViewProvider.ts # Webview provider
│ ├── pages/ # HTML pages
│ ├── scripts/ # JavaScript files
│ └── styles/ # CSS files
├── utils/ # Utilities
└── providers/ # Language providers
🔧 Commands
Available via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
- Scriptly: Open Scriptly Chat - Open the chat panel (
Ctrl+Shift+L)
- Scriptly: Configure API Keys - Set up your LLM API keys
- Scriptly: Clone Repository - Clone a Git repository
- Scriptly: Show Log File - View extension logs for debugging
- Scriptly: Clear Storage & Reset - Clear all extension data
⚙️ Configuration
VS Code Settings
Open Settings (Ctrl+, or Cmd+,) and search for "Scriptly":
- LLM Provider: Choose default provider (OpenAI, Claude, Ollama, Custom)
- Model Name: Select model (e.g., "gpt-4", "claude-3-opus")
- Temperature: Control response randomness (0.0 - 1.0, default: 0.3)
Workspace Settings
You can configure Scriptly per workspace in .vscode/settings.json:
{
"scriptly.llmProvider": "openai",
"scriptly.modelName": "gpt-4",
"scriptly.temperature": 0.3
}
🐛 Troubleshooting
API Key Not Working
- Verify your API key is correct
- Check the provider is selected in settings
- View logs: Command Palette → "Scriptly: Show Log File"
- Ensure you have sufficient API credits/quota
Extension Not Loading
- Reload VS Code window (
Ctrl+Shift+P → "Developer: Reload Window")
- Check VS Code version (requires 1.80.0 or higher)
- View output: View → Output → Select "Scriptly"
Chat Not Responding
- Verify API key is configured
- Check internet connection
- View extension logs for error messages
- Try switching to a different LLM provider
📝 Privacy & Security
- API Keys: Stored securely using VS Code's secret storage (encrypted)
- Data: Code context is sent to your chosen LLM provider for processing
- No Telemetry: Scriptly doesn't collect or send usage data
- Local Processing: Use Ollama for completely local AI processing
🤝 Contributing
We welcome contributions! Please see our GitHub repository for:
- Issue reporting
- Feature requests
- Pull requests
- Community discussions
📄 License
MIT License - See LICENSE file for details
🙏 Acknowledgments
📞 Support
Made with ❤️ by Jeevanantham M
⭐ Star us on GitHub if you find Scriptly helpful!
