Ctrl + K

Code Generation

Blurs AI can generate a wide variety of code patterns, components, and utilities based on natural language descriptions.

Component Generation

React Components

Generate React components with TypeScript:

Create a React TypeScript component for a search bar with:
- Input field with placeholder
- Search button
- Loading state
- Error handling
- Debounced search functionality

Vue Components

Generate Vue 3 components:

Create a Vue 3 component for a shopping cart that displays items, 
quantities, and total price with add/remove functionality.

Angular Components

Generate Angular components:

Create an Angular component for a data table with sorting, 
filtering, and pagination.

Utility Functions

Helper Functions

Create a utility function to format dates in multiple formats:
- ISO format
- Short date (MM/DD/YYYY)
- Long date (Month Day, Year)
- Relative time (2 hours ago)

Data Transformations

Create a function to transform an array of user objects into 
a Map keyed by user ID with proper TypeScript types.

API Endpoints

REST APIs

Create Express.js REST API endpoints for a blog with:
- GET /posts - List all posts
- GET /posts/:id - Get single post
- POST /posts - Create new post
- PUT /posts/:id - Update post
- DELETE /posts/:id - Delete post

GraphQL

Create a GraphQL schema and resolvers for a user management system 
with User and Post types, including authentication mutations.

Test Generation

Unit Tests

Generate unit tests for this function: [paste function code]
Use Jest and include edge cases.

Integration Tests

Create integration tests for the user authentication API endpoints 
using Supertest.

Best Practices for Code Generation

Provide Clear Specifications

Include:

  • Programming language and framework
  • Required features and functionality
  • Expected behavior
  • Edge cases to handle

Review Generated Code

Always:

  • Read through the generated code
  • Understand what it does
  • Test it thoroughly
  • Check for security issues

Customize as Needed

Generated code is a starting point:

  • Add your own business logic
  • Customize styling and UI
  • Add error handling specific to your app
  • Integrate with your existing codebase

Examples

Example 1: Form Component

Create a React TypeScript form component for user registration with:
- Name, email, password fields
- Validation for each field
- Submit handler
- Loading and error states
- Accessible labels

Example 2: Data Fetching Hook

Create a React hook for fetching user data with:
- Loading state
- Error handling
- Automatic refetch on mount
- Manual refetch function
- TypeScript types

Example 3: API Service

Create an API service class for managing todos with methods:
- getAll() - Fetch all todos
- getById(id) - Fetch single todo
- create(todo) - Create new todo
- update(id, changes) - Update todo
- delete(id) - Delete todo
Include TypeScript interfaces and error handling.

Limitations

  • Generated code may not handle all edge cases
  • Complex business logic may need manual implementation
  • Generated code follows general best practices but may need customization
  • Always review and test generated code before production use

Advanced Features

Generating from Examples

Provide examples and ask for similar code:

Generate a component similar to this one but for products instead of users: [paste code]

Refactoring Existing Code

Refactor this code to be more maintainable and follow best practices: [paste code]

Adding Features

Add error boundaries and loading states to this component: [paste code]