Skip to main content

​
Opening the Chat Interface

  • https://mintcdn.com/codinitdev/kEYVEKS5Hy4ttK5r/assets/frameworks/icons/apple.svg?fit=max&auto=format&n=kEYVEKS5Hy4ttK5r&q=85&s=1a0ab6485b64de42c4409b44a22a6be3 macOS
  • https://mintcdn.com/codinitdev/kEYVEKS5Hy4ttK5r/assets/frameworks/icons/windows.svg?fit=max&auto=format&n=kEYVEKS5Hy4ttK5r&q=85&s=7f722931b478d4b710c7ea19ed39259a Windows
  • https://mintcdn.com/codinitdev/kEYVEKS5Hy4ttK5r/assets/frameworks/icons/linux.svg?fit=max&auto=format&n=kEYVEKS5Hy4ttK5r&q=85&s=6113e0c2db80250cb040946c4a1187dd Linux
Press Cmd + 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:
CommandDescriptionExample
/explainExplain selected code/explain this function
/refactorRefactor code for better quality/refactor to use async/await
/fixFix bugs or errors/fix this TypeScript error
/testGenerate unit tests/test this component
/docsGenerate documentation/docs for this API
/optimizeOptimize 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
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

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

​
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:
  • https://mintcdn.com/codinitdev/NU0f94GmbRUSPIZu/assets/ai-icons/anthropic.svg?fit=max&auto=format&n=NU0f94GmbRUSPIZu&q=85&s=7637711b686e2c7f7d86ee532820018a Claude
  • https://mintcdn.com/codinitdev/NU0f94GmbRUSPIZu/assets/ai-icons/openai.svg?fit=max&auto=format&n=NU0f94GmbRUSPIZu&q=85&s=180bef9ded94e43a50bc9cd0cae43f27 GPT-5
  • https://mintcdn.com/codinitdev/NU0f94GmbRUSPIZu/assets/ai-icons/deepseek.svg?fit=max&auto=format&n=NU0f94GmbRUSPIZu&q=85&s=5940ee1928bd469af0dc50ee64a24d9d DeepSeek
  • https://mintcdn.com/codinitdev/NU0f94GmbRUSPIZu/assets/ai-icons/ollama.svg?fit=max&auto=format&n=NU0f94GmbRUSPIZu&q=85&s=fd30588a5b32b65b3b348224f39d90e7 Local Models
Best for:
  • Complex code generation
  • Detailed explanations
  • Refactoring large codebases
  • Architectural decisions
Recommended model: Claude 4.5 Sonnet

​
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

  • https://mintcdn.com/codinitdev/kEYVEKS5Hy4ttK5r/assets/frameworks/icons/apple.svg?fit=max&auto=format&n=kEYVEKS5Hy4ttK5r&q=85&s=1a0ab6485b64de42c4409b44a22a6be3 macOS
  • https://mintcdn.com/codinitdev/kEYVEKS5Hy4ttK5r/assets/frameworks/icons/windows.svg?fit=max&auto=format&n=kEYVEKS5Hy4ttK5r&q=85&s=7f722931b478d4b710c7ea19ed39259a Windows/Linux
ActionShortcut
Open AI ChatCmd + K
Inline EditCmd + I
Accept SuggestionTab
Reject SuggestionEsc
Next SuggestionAlt + ]
Previous SuggestionAlt + [

​
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