Dio - AI Coding Assistant

⚠️ NOTE: THIS EXTENSION IS DESIGNED ONLY FOR THE ROOPIK IDE

Roopik is a Canvas-First Agentic IDE for Multi-Framework UI Design & Component-Driven Projects. Please download the IDE to use this extension and its full capabilities at roopik.com

The Power Behind Roopik Designer Mode

Dio is the core intelligence powering Roopik, enabling a revolutionary Canvas-First development experience. Build, design, and manage Multi-Framework UI designs, reusable components, and entire projects using state-of-the-art Agentic AI workflows.

What Can Dio Do For You?

Generate Code from natural language descriptions and specifications
Adapt with Modes: Code, Architect, Ask, Debug, Designer, and Custom Modes
Refactor & Debug existing code intelligently
Write & Update documentation automatically
Answer Questions about your codebase
Automate repetitive development tasks
Integrate with Roopik Canvas for visual development

Modes

Dio adapts to how you work:

Code Mode: Everyday coding, edits, and file operations
Architect Mode: Plan systems, specifications, and migrations
Ask Mode: Fast answers, explanations, and documentation
Debug Mode: Trace issues, add logs, isolate root causes
Designer Mode: Visual development mode for creating components, canvases, and projects
Custom Modes: Build specialized modes for your team or workflow

Roopik Canvas Integration

Dio seamlessly integrates with Roopik Canvas, providing:

Visual Component Management: Add, edit, and remove UI components
Real-time Preview: See your changes instantly in the canvas
AI-Powered Design: Generate complete interfaces from descriptions
Component Library: Access pre-built components and templates

Getting Started

Dio comes pre-installed with Roopik IDE. Simply:

Open Roopik IDE
Click the Dio icon in the sidebar
Start chatting with your AI coding assistant!

Features

Intelligent Code Generation

Describe what you want to build, and Dio will generate production-ready code.

Context-Aware Assistance

Dio understands your entire codebase and provides relevant suggestions.

Multi-Language Support

Works with JavaScript, TypeScript, Python, Java, C++, and many more languages.

Configuration

Access Dio settings through:

Roopik IDE Settings → Extensions → Dio
Or use the command palette: Roopik Dio: Open Roopik Dio Chat

API Keys

Dio supports multiple AI providers:

OpenAI (GPT-4, GPT-3.5)
Anthropic (Claude)
Google (Gemini)
OpenRouter
Custom API endpoints

Configure your preferred provider in the settings.

Privacy & Security

Local Processing: Your code never leaves your machine (local mode) unless you explicitly use 3rd party features
Secure API Keys: All API keys are stored securely in your system keychain

Support

Need help? Reach out to us:

GitHub Issues: Report bugs
Documentation: Roopik Docs
Website: roopik.com

License

Enjoy Dio! Build faster, smarter, and better with your AI coding companion in Roopik IDE.