Layr - AI-Powered Project Planning for VS Code

Demo Video

Source: https://youtu.be/9xtDDoh-Fg8

Download Layr

The Challenge of Project Planning

Every developer knows the struggle: you have a brilliant idea for a project, but where do you start? How do you break down complex requirements into manageable tasks? What's the best architecture for your specific use case? Traditional project planning often involves hours of research, documentation, and architectural decisions before writing the first line of code.

"The best projects start with a clear plan. Layr makes that planning process as simple as describing your idea."

Introducing Layr: AI Planning Layer

Layr is a VS Code extension that revolutionizes how developers approach project planning. By leveraging Google's Gemini AI, it transforms natural language descriptions into comprehensive, actionable project plans that include architecture decisions, technology recommendations, implementation steps, and file structures.

Key Features

• AI-Powered Planning - Leverages Google's Gemini AI for intelligent, context-aware project plans
• Zero Setup Required - Works immediately with built-in templates, no API key needed for basic functionality
• Seamless VS Code Integration - Native integration through Command Palette with instant access
• Editable Markdown Output - Generates customizable Markdown documents for reference throughout development
• Smart Fallback - Automatically switches to offline template mode if AI service is unavailable
• Secure Configuration - Multiple API key storage options with built-in security best practices

How Layr Works

Layr operates through a simple yet powerful workflow:

1. Natural Language Input

Simply describe your project in natural language. The more specific you are, the better the results:

"A React todo app with user authentication and real-time updates"
"A REST API for a blog platform with user management"
"A Python data analysis script for sales reporting"

2. AI Analysis and Planning

Layr's AI engine analyzes your description and considers:

• Technology Stack - Recommends appropriate frameworks and tools
• Architecture Patterns - Suggests optimal system design approaches
• Implementation Strategy - Breaks down development into manageable phases
• Best Practices - Incorporates modern development standards

3. Comprehensive Plan Generation

The extension generates a detailed project plan including:

• Project overview and objectives
• Functional and technical requirements
• System architecture and component structure
• Recommended technology stack
• Step-by-step implementation phases
• Suggested file structure
• Testing strategy
• Deployment considerations

Installation and Setup

From VS Code Marketplace

The easiest way to get started with Layr: 1

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Layr"
4. Click Install

From Source

For developers who want to contribute or customize: 2

git clone https://github.com/manasdutta04/layr.git
cd layr
npm install
# Press F5 in VS Code to launch in Extension Development Host

Configuration Options

AI-Powered Plans (Optional)

To unlock the full potential of AI-generated plans, configure your Gemini API key: 0

Method 1: VS Code Settings UI (Recommended)

1. Get your API key from Google AI Studio
2. Open VS Code Settings (Ctrl+,)
3. Search for "layr"
4. Enter your API key in the "Gemini Api Key" field

Method 2: Settings File

// .vscode/settings.json
{
  "layr.geminiApiKey": "your_api_key_here"
}

Method 3: Environment Variable

# .env file
GEMINI_API_KEY=your_api_key_here

Security Note: API keys are stored locally and never transmitted except to Google's Gemini API. The extension prevents accidental commits of sensitive information.

Usage Guide

Creating Your First Plan

1. Open Command Palette: Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Run Command: Type "Layr: Create Plan" and press Enter
3. Describe Your Project: Enter a detailed description of what you want to build
4. Review Generated Plan: Layr creates a new Markdown file with your project plan
5. Customize as Needed: Edit the generated plan to match your specific requirements

Best Practices for Prompts

Be Specific

✅ Good: "A Node.js REST API with JWT authentication, PostgreSQL database, and Docker deployment"
❌ Basic: "A web API"

Mention Context

✅ "A mobile-first React app for small businesses with offline capability"
✅ "A Python script for processing large CSV files with memory optimization"

Include Constraints

✅ "Using only free/open-source technologies"
✅ "Must be deployable on AWS Lambda"

AI vs Template Mode

AI Mode (Gemini)

Advantages:

• Highly customized plans based on your specific description
• Considers modern best practices and current technologies
• Adapts to complex or unique project requirements
• Provides detailed explanations and rationale

Requirements:

• Internet connection
• Valid Gemini API key
• Google AI Studio account

Best For: Complex projects, modern tech stacks, unique requirements

Template Mode (Offline)

Advantages:

• Works without internet connection
• No API key required
• Instant generation
• Consistent structure

Limitations:

• Limited to predefined project types
• Less customization
• May not reflect latest technologies

Best For: Common project patterns, quick prototyping, offline development

Example Generated Plan

Here's what a Layr-generated plan looks like for a "React todo app with authentication":

# React Todo App with Authentication
 
## Project Overview
A modern, responsive todo application built with React, featuring user authentication, real-time updates, and persistent data storage.
 
## Technology Stack
- **Frontend**: React 18, TypeScript, Tailwind CSS
- **State Management**: Redux Toolkit
- **Authentication**: Firebase Auth
- **Database**: Firebase Firestore
- **Deployment**: Vercel
 
## Implementation Steps
1. Set up React project with TypeScript
2. Configure Firebase authentication
3. Implement user registration and login
4. Create todo CRUD operations
5. Add real-time synchronization
6. Implement responsive design
7. Add testing suite
8. Deploy to production

Technical Architecture

Layr is built with modern web technologies and follows VS Code extension best practices:

Extension Structure

Core Components

// src/extension.ts - Main extension entry point
import * as vscode from 'vscode';
import { PlanGenerator } from './planner';
 
export function activate(context: vscode.ExtensionContext) {
  const disposable = vscode.commands.registerCommand(
    'layr.createPlan',
    async () => {
      const description = await vscode.window.showInputBox({
        prompt: 'Describe your project',
        placeHolder: 'e.g., A React todo app with user authentication'
      });
      
      if (description) {
        const generator = new PlanGenerator();
        await generator.generatePlan(description);
      }
    }
  );
  
  context.subscriptions.push(disposable);
}

AI Integration

// src/planner/ai.ts - Gemini AI integration
import { GoogleGenerativeAI } from '@google/generative-ai';
 
export class AIPlanner {
  private genAI: GoogleGenerativeAI;
  
  constructor(apiKey: string) {
    this.genAI = new GoogleGenerativeAI(apiKey);
  }
  
  async generatePlan(description: string): Promise<string> {
    const model = this.genAI.getGenerativeModel({ model: 'gemini-pro' });
    
    const prompt = `
      Create a comprehensive project plan for: ${description}
      
      Include:
      - Project overview
      - Technology stack recommendations
      - Architecture design
      - Implementation steps
      - File structure
      - Testing strategy
    `;
    
    const result = await model.generateContent(prompt);
    return result.response.text();
  }
}

Template System

// src/planner/templates.ts - Offline template system
export const templates = {
  'react-app': {
    name: 'React Application',
    structure: `
# React Application Project Plan
 
## Technology Stack
- React 18
- TypeScript
- Vite
- Tailwind CSS
 
## Project Structure
\`\`\`
src/
├── components/
├── hooks/
├── pages/
├── utils/
└── styles/
\`\`\`
    `
  },
  'node-api': {
    name: 'Node.js API',
    structure: `
# Node.js API Project Plan
 
## Technology Stack
- Node.js
- Express.js
- TypeScript
- MongoDB
 
## Project Structure
\`\`\`
src/
├── controllers/
├── models/
├── routes/
├── middleware/
└── utils/
\`\`\`
    `
  }
};

Contributing to Layr

Layr is an open-source project that welcomes contributions from the community. 2

Getting Started

1. Fork the repository on GitHub
2. Clone your fork locally:

   git clone https://github.com/YOUR_USERNAME/layr.git
   cd layr

   Copy

3. Install dependencies:

   pnpmyarnnpmbun

   pnpm add
   

   Copy

4. Set up development environment:

   pnpmyarnnpmbun

   pnpm compile
   code .  # Open in VS Code
   

   Copy

Development Workflow

1. Create a feature branch:

   git checkout -b feature/your-feature-name

   Copy

2. Make your changes following the coding standards
3. Test your changes in the Extension Development Host
4. Commit with clear messages:

   git commit -m "feat: add support for custom templates"

   Copy

5. Push and create a Pull Request

Code of Conduct

Before contributing, please read our Code of Conduct to ensure a welcoming environment for all contributors. 3

Contributing Guidelines

Detailed contribution guidelines are available to help you get started with development, testing, and submitting changes. 4

Troubleshooting

Common Issues

"Failed to generate plan"

• Check internet connection
• Verify API key is correctly configured
• Try using template mode as fallback

"API key not found"

• Ensure API key is set in VS Code settings
• Check that the key is valid and active
• Verify the key has appropriate permissions

"Extension not responding"

• Reload VS Code window (Ctrl+Shift+P → "Developer: Reload Window")
• Check VS Code developer console for errors

Future Roadmap

Layr is continuously evolving with exciting features planned:

• Multi-language Support - Support for non-English project descriptions
• Custom Templates - User-defined project templates
• Team Collaboration - Shared planning workspaces
• Integration Ecosystem - Plugins for popular development tools
• Advanced AI Models - Support for multiple AI providers

Real-World Impact

Layr has already helped developers across the globe:

• Faster Project Initialization - Reduce planning time from hours to minutes
• Better Architecture Decisions - AI-powered recommendations based on best practices
• Consistent Documentation - Standardized project documentation from day one
• Learning Tool - Helps developers understand modern development patterns

"Layr has transformed how I approach new projects. What used to take me hours of research and planning now happens in minutes, and the quality of the plans is consistently excellent." - Developer Feedback

Conclusion

Layr represents a new paradigm in development tooling—where AI assists developers in making better architectural decisions and planning more effective development strategies. By integrating seamlessly into VS Code and leveraging the power of modern AI, Layr makes professional-grade project planning accessible to developers of all experience levels.

Whether you're a seasoned developer looking to streamline your workflow or a beginner seeking guidance on project structure, Layr provides the intelligent planning assistance you need to build better software, faster.

The future of development is collaborative—between human creativity and AI intelligence. Layr is your bridge to that future, available today in the VS Code marketplace.

Ready to transform your development workflow? Install Layr and experience the power of AI-assisted project planning.