IDE Tools & Editor
Relevant source files
The following files were used as context for generating this wiki page:
The IDE Tools & Editor suite in the bl1nk platform provides a specialized environment for building, managing, and testing AI skills and web applications. It serves as a bridge between high-level AI directives and low-level code execution, allowing users to modify codebases in real-time while viewing live previews in an integrated iframe.
The system is built on a monorepo architecture, utilizing a Next.js 15 and React 19 frontend wrapped in Electron, with a tRPC and Express backend. The editor integration utilizes the Monaco Editor to provide professional-grade code editing capabilities, including syntax highlighting and type safety via TypeScript.
Sources: Comprehensive.md:21-25, apps/client/src/prompts/system_prompt.ts:60-64
Editor Architecture and UI Components
The IDE's frontend is designed for component-driven development, leveraging the shadcn/ui library and Tailwind CSS for a responsive, accessible interface. The editor itself is a core part of the "Build" mode, where the AI assistant (bl1nk) acts as an editor that modifies files directly based on user chat interactions.
Core UI Framework
- Monaco Editor: Integrated for code manipulation and display.
- Preview Panel: An iframe-based live preview that renders code changes immediately.
- Component Library: Extensive use of Radix UI and shadcn/ui for consistent design.
Sources: Comprehensive.md:21-25, apps/client/src/prompts/system_prompt.ts:60-64, apps/client/src/prompts/system_prompt.ts:316-325
The diagram shows the flow from user input to file system modification and subsequent UI updates in the editor and preview.
Sources: apps/client/src/prompts/system_prompt.ts:74-88
AI-Driven Code Operations
The IDE operates through specialized XML-like tags processed by the system prompt. The AI does not just suggest code; it executes specific operations on the project structure.
Supported Operations
| Command | Action | Description |
|---|---|---|
<bl1nk-write> | Create/Update | Writes the entire content of a file. Mandatory for code output. |
<bl1nk-rename> | Rename | Changes the file path from from to to. |
<bl1nk-delete> | Remove | Deletes a file at the specified path. |
<bl1nk-add-dependency> | Install | Adds npm packages to the project. |
<bl1nk-command> | UI Action | Triggers rebuild, restart, or refresh commands. |
Sources: apps/client/src/prompts/system_prompt.ts:77-101, apps/client/src/prompts/system_prompt.ts:251-260
Coding Guidelines
The editor environment enforces strict coding standards to ensure the generated web applications remain maintainable:
- Modularization: Every new component or hook MUST be created in its own file.
- File Size: Components are ideally kept under 100 lines of code.
- Responsive Design: All generated CSS/Tailwind must be mobile-friendly.
- Directory Structure: Source code must reside in
src/, with pages insrc/pages/and components insrc/components/.
Sources: apps/client/src/prompts/system_prompt.ts:219-224, apps/client/src/prompts/system_prompt.ts:318-321
Development Workflow and CI/CD
The IDE is supported by a robust infrastructure that automates testing and deployment. This ensures that changes made within the editor environment are validated before production release.
CI/CD Pipeline Integration
The system includes GitHub Actions workflows for:
- CI Pipeline: Running linting, type-checking, and Vitest/Playwright tests on every push.
- Build Verification: Validating multi-package builds in the monorepo.
- Electron Release: Automated packaging for Windows (DigiCert signing) and macOS (Apple ID notarization).
This sequence illustrates the path from an editor-driven file update to the final automated release.
Sources: specs/main/plan.md:162-178, Comprehensive.md:154-165
Specialized Agent Roles
The IDE utilizes different "modes" or agents to handle various development tasks. This ensures the correct context and toolset are applied to the user's request.
UI Engineer Agent
The ui-engineer is a specialized persona focused on frontend excellence. It is programmed to:
- Use TypeScript for type safety.
- Follow SOLID principles.
- Design API-agnostic components.
- Implement WCAG accessibility compliance.
Sources: apps/agents/ui-engineer.md:13-33
Kiro: Spec-Driven Development
Kiro is a submodule within the IDE tools that handles complex feature planning. It moves through a 3-phase workflow:
- Requirements: Defines "what" to build using the EARS (Easy Approach to Requirements Syntax) format.
- Design: Outlines "how" to build, creating architecture diagrams and data models.
- Tasks: Generates a numbered checklist of coding tasks for the implementation phase.
Sources: plugins/kiro-skill/commands/kiro/spec.md:58-75, plugins/kiro-skill/commands/kiro/spec.md:118-135
Technical Specifications
Tech Stack Summary
- Frontend: Next.js 15, React 19, Tailwind CSS, Lucide-React.
- Backend: tRPC (over REST), Express.
- Database: SQLite with Prisma ORM.
- Editor: Monaco Editor.
- Desktop: Electron (using Electron Forge 7.8+).
Sources: Comprehensive.md:21-25, specs/main/plan.md:16-20
Environment and Configuration
The IDE reads project-specific rules from an AI_RULES.md file located at the project root. If this file is missing, it falls back to default settings which prioritize TypeScript, React Router, and shadcn/ui.
Sources: apps/client/src/prompts/system_prompt.ts:316-335, apps/client/src/prompts/system_prompt.ts:446-455
The IDE Tools & Editor provide a comprehensive, AI-assisted development environment that enforces best practices while offering real-time feedback. By integrating specialized agents like the UI Engineer and Kiro, the platform supports the entire software development lifecycle from initial requirement gathering to automated multi-platform distribution.