AI Chat & Commands

Master CodinIT AI chat interface and commands to accelerate development with natural language prompts and powerful shortcuts.

Opening the Chat Interface

macOS

Press Cmd + K to open the AI chat interface

Windows

Press Ctrl + K to open the AI chat interface

Linux

Press Ctrl + K to open the AI chat interface

---

Your First AI Request

Simply type what you want in natural language:

Create a React component for a user profile card with avatar, name, and bio

The AI will generate the complete component with proper structure, types, and styling.

AI Commands

Quick Commands

Use / prefix to access quick commands in the chat:

Command	Description	Example
/explain	Explain selected code	/explain this function
/refactor	Refactor code for better quality	/refactor to use async/await
/fix	Fix bugs or errors	/fix this TypeScript error
/test	Generate unit tests	/test this component
/docs	Generate documentation	/docs for this API
/optimize	Optimize performance	/optimize this database query

You don’t need to use commands - natural language works great too! Commands are just shortcuts for common tasks.

Code Generation Commands

/component - Generate UI Components

Create React, Vue, Angular, or framework-specific components

/component button with loading state and variants

/api - Create API Endpoints

Generate REST or GraphQL API endpoints with validation

/api endpoint for user registration with email validation

/db - Database Operations

Create schemas, migrations, and queries

/db schema for e-commerce products with categories

/hook - Custom React Hooks

Generate custom React hooks with TypeScript

/hook for fetching and caching API data

Effective Prompting

Writing Great Prompts

1. Be Specific

   Instead of: “Make a form”

   Try: “Create a React form with email, password fields, validation using Zod, and submit handler”

2. Include Context

   Mention your tech stack, frameworks, and preferences

   Create a Next.js 14 server action for creating a blog post
   using Prisma and TypeScript
   
3. Specify Requirements

   List all requirements upfront

   Build an image upload component that:
   - Accepts PNG/JPG only
   - Max size 5MB
   - Shows preview
   - Displays upload progress
   - Has error handling
   
4. Reference Existing Code

   Select code in your editor and ask AI to work with it

   Refactor this component to use React Server Components
   

Examples of Good Prompts

Component Creation

Create a dark mode toggle component for Next.js using:
- React Server Components
- Tailwind CSS
- localStorage for persistence
- Smooth animation transitions
- TypeScript with strict types

Generate a RESTful API endpoint for user authentication:
- POST /api/auth/login
- Accepts email and password
- Validates with Zod
- Returns JWT token
- Handles errors properly
- Uses bcrypt for password comparison

Create a Prisma schema for a blog platform with:
- Users (id, email, name, avatar)
- Posts (id, title, content, published, authorId)
- Comments (id, content, authorId, postId)
- Tags (id, name) with many-to-many to Posts
- Include all relations and indexes

Write comprehensive tests for the UserService class:
- Unit tests for all methods
- Mock database calls
- Test error scenarios
- Use Jest and TypeScript
- Include setup and teardown

Context-Aware AI

How CodinIT Understands Your Project

CodinIT’s AI automatically analyzes:

• Current file you’re editing
• Selected code in your editor
• Project structure and file organization
• Dependencies in package.json
• TypeScript types and interfaces
• Git history for recent changes

You don’t need to re-explain your project setup. The AI already knows your tech stack!

Working with Selected Code

1. Select code in your editor
2. Open AI chat (Cmd/Ctrl + K)
3. Ask about the selection:
   • “Explain this code”
   • “Add error handling”
   • “Convert to TypeScript”
   • “Optimize for performance”

Multi-File Operations

Creating Multiple Files

Ask AI to generate entire features:

Create a complete authentication system:
- Login/signup pages (React components)
- Auth API routes (Next.js)
- Protected route middleware
- Auth context provider
- Types and validation schemas

The AI will create all necessary files in the correct directories.

Refactoring Across Files

Refactor the user management feature to use a repository pattern:
- Move database calls to UserRepository
- Update UserService to use the repository
- Modify API routes accordingly
- Update tests

AI Provider Selection

Choosing the Right Model

Different models excel at different tasks:

Claude

Best for:

• Complex code generation
• Detailed explanations
• Refactoring large codebases
• Architectural decisions

Recommended model: Claude 4.5 Sonnet

GPT-5

Best for:

• General-purpose coding
• Quick iterations
• Documentation generation
• Code completion

Recommended model: GPT-5

DeepSeek

Best for:

• Cost-effective development
• Code understanding
• Bug fixes
• Testing generation

Recommended model: DeepSeek Coder

Local Models

Best for:

• Privacy-sensitive projects
• Offline development
• Learning and experimentation

Recommended model: Codestral or Llama 3.1

Switching Models

Change the AI provider on-the-fly:

1. Click the model selector in chat interface
2. Choose from your configured providers
3. Continue the conversation with new model

Try different models for the same task to compare results! Each has unique strengths.

Advanced Features

Inline AI Editing

1. Select Code

   Highlight the code you want to modify

2. Press Cmd/Ctrl + I

   Opens inline AI editor

3. Describe Changes

   Type what you want to change

   Add TypeScript types and JSDoc comments
   
4. Review & Accept

   AI shows diff, you can accept, reject, or iterate

Conversation History

Access previous AI conversations:

• Recent chats in sidebar
• Search history by keywords
• Pin important conversations
• Export conversations for documentation

Custom Instructions

Set global AI instructions for your project:

{
  "ai": {
    "customInstructions": [
      "Always use TypeScript strict mode",
      "Follow our company's naming conventions",
      "Include comprehensive error handling",
      "Write tests alongside implementation"
    ]
  }
}

Tips & Best Practices

Iterate Gradually

Build features incrementally. Start simple, then ask AI to enhance.

Review AI Code

Always review generated code. AI is powerful but not perfect.

Provide Feedback

Tell AI when output isn’t quite right. “Make it more concise” or “Add error handling”

Save Good Prompts

Keep a collection of prompts that work well for your use cases.

Common Use Cases

Debugging

I'm getting this error: [paste error]

In this code: [select code]

How do I fix it?

Code Review

Review this pull request for:
- Security issues
- Performance problems
- Best practice violations
- Missing edge cases

Learning

Explain how this authentication flow works step by step,
including what happens on the client and server

Documentation

Generate API documentation for these endpoints in OpenAPI 3.0 format

Keyboard Shortcuts

macOS

Action	Shortcut
Open AI Chat	Cmd + K
Inline Edit	Cmd + I
Accept Suggestion	Tab
Reject Suggestion	Esc
Next Suggestion	Alt + ]
Previous Suggestion	Alt + [

Windows/Linux

Action	Shortcut
Open AI Chat	Ctrl + K
Inline Edit	Ctrl + I
Accept Suggestion	Tab
Reject Suggestion	Esc
Next Suggestion	Alt + ]
Previous Suggestion	Alt + [

Next Steps

Prompt Engineering Guide

Learn advanced prompting techniques

Select Your Model

Compare and choose AI providers

Project Templates

Start projects with AI-generated templates

Model Configuration

Understand context windows and limits