> ## Documentation Index > Fetch the complete documentation index at: https://codinitdev-mintlify-update-changelog-codinit-dev-90028.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # AI Chat & Commands > Master CodinIT AI chat interface and commands to accelerate development with natural language prompts and powerful shortcuts. ### Opening the Chat Interface Press `Cmd + K` to open the AI chat interface Press `Ctrl + K` to open the AI chat interface 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 Create React, Vue, Angular, or framework-specific components ``` /component button with loading state and variants ``` Generate REST or GraphQL API endpoints with validation ``` /api endpoint for user registration with email validation ``` Create schemas, migrations, and queries ``` /db schema for e-commerce products with categories ``` Generate custom React hooks with TypeScript ``` /hook for fetching and caching API data ``` ## Effective Prompting Writing Great Prompts Instead of: "Make a form" Try: "Create a React form with email, password fields, validation using Zod, and submit handler" Mention your tech stack, frameworks, and preferences ``` Create a Next.js 14 server action for creating a blog post using Prisma and TypeScript ``` 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 ``` Select code in your editor and ask AI to work with it ``` Refactor this component to use React Server Components ``` ### Examples of Good Prompts ```plaintext Component Creation theme={null} 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 ``` ```plaintext API Development theme={null} 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 ``` ```plaintext Database Schema theme={null} 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 ``` ```plaintext Testing theme={null} 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: **Best for:** * Complex code generation * Detailed explanations * Refactoring large codebases * Architectural decisions **Recommended model:** Claude 4.5 Sonnet **Best for:** * General-purpose coding * Quick iterations * Documentation generation * Code completion **Recommended model:** GPT-5 **Best for:** * Cost-effective development * Code understanding * Bug fixes * Testing generation **Recommended model:** DeepSeek Coder **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 Highlight the code you want to modify Opens inline AI editor Type what you want to change ``` Add TypeScript types and JSDoc comments ``` 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: ```json theme={null} { "ai": { "customInstructions": [ "Always use TypeScript strict mode", "Follow our company's naming conventions", "Include comprehensive error handling", "Write tests alongside implementation" ] } } ``` ## Tips & Best Practices Build features incrementally. Start simple, then ask AI to enhance. Always review generated code. AI is powerful but not perfect. Tell AI when output isn't quite right. "Make it more concise" or "Add error handling" 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 | Action | Shortcut | | ------------------- | --------- | | Open AI Chat | `Cmd + K` | | Inline Edit | `Cmd + I` | | Accept Suggestion | `Tab` | | Reject Suggestion | `Esc` | | Next Suggestion | `Alt + ]` | | Previous Suggestion | `Alt + [` | | 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 Learn advanced prompting techniques Compare and choose AI providers Start projects with AI-generated templates Understand context windows and limits