Skip to main content

​
Overview

CodinIT is a web-based AI-powered development platform with extensive customization options. Personalize your color palette, configure AI providers, manage connections, and adjust application behavior through the Control Panel.

​
control panel

The Control Panel is your central hub for all customization:
  1. Click your profile avatar in the top-right corner
  2. Select Settings from the dropdown menu
  3. Browse settings categories or use the search bar
The Control Panel has two modes: User (simplified) and Developer (advanced). Toggle between modes based on your needs.

​
keyboard shortcuts

  • Toggle Theme: Cmd/Ctrl + Alt + Shift + D
  • Toggle Terminal: Cmd/Ctrl + `

​
design palette (experimental)

The Design Palette guides AI in creating designs that match your brand and aesthetic preferences. Customize colors, typography, and visual features for AI-generated interfaces.

​
accessing design palette

Click the palette icon in the chat interface to open the Design System dialog.

​
color customization

Control 11 color roles with separate light and dark mode palettes:
  • Primary: Main brand color for primary buttons, active links, and key interactive elements
  • Secondary: Supporting brand color for secondary buttons, inactive states, and complementary elements
  • Accent: Highlight color for badges, notifications, focus states, and call-to-action elements
  • Background: Page backdrop for the main application/website background
  • Surface: Elevated content areas for cards, modals, dropdowns, and panels
  • Text: Primary text for headings, body text, and main readable content
  • Text Secondary: Muted text for captions, placeholders, timestamps, and less important information
  • Border: Separators for input borders, dividers, table lines, and element outlines
  • Success: Positive feedback for success messages, completed states, and positive indicators
  • Warning: Caution alerts for warning messages, pending states, and attention-needed indicators
  • Error: Error states for error messages, failed states, and destructive action indicators

​
typography options

Choose from 9 professionally selected fonts:
  • Inter - Default, modern sans-serif
  • Roboto - Google’s popular sans-serif
  • Open Sans - Friendly and readable
  • Montserrat - Geometric sans-serif
  • Poppins - Geometric with playful character
  • Lato - Humanist sans-serif
  • JetBrains Mono - Monospace for code
  • Raleway - Elegant display font
  • Lora - Serif for traditional look
Select multiple fonts for fallback support. The first font will be primary, with others serving as backups.

​
design features

Toggle visual design features to match your aesthetic:

rounded corners

Adds smooth, rounded corners to elements for a modern, friendly appearance

subtle border

Adds refined borders to elements for clear visual separation

gradient accent

Applies gradient effects to accent elements for visual depth

soft shadow

Adds subtle shadows for elevation and depth perception

frosted glass

Creates translucent, blurred backgrounds for modern aesthetics

​
styling controls

Fine-tune visual appearance: border radius
  • None (0px)
  • Small (0.25rem)
  • Medium (0.375rem) - Default
  • Large (0.5rem)
  • Extra Large (0.75rem)
  • Full (9999px) - Pill-shaped
shadow
  • None
  • Small
  • Medium
  • Large
  • Extra Large
spacing
  • Tight (0.75rem)
  • Normal (1rem) - Default
  • Relaxed (1.25rem)
  • Loose (1.5rem)

​
live preview

The Design Palette includes real-time preview with:
  • Hero sections with your color scheme
  • Button styles (primary and secondary variants)
  • Typography hierarchy
  • Pricing cards with features
  • FAQ sections
  • Stats displays
Changes reflect instantly for experimentation before saving.
The Design Palette is experimental. Preferences are stored locally and not synced across devices.

​
preset themes

11 preset design themes to jumpstart customization:
  • Minimal - Clean, distraction-free design
  • Modern - Contemporary with bold accents
  • Carbon - IBM Carbon-inspired system
  • Material - Google Material Design principles
  • Flat - Flat design with vibrant colors
  • Neobrutalism - Bold borders and stark contrasts
  • Glassmorphism - Frosted glass effects
  • Claymorphism - Soft, 3D clay-like elements
  • Retro - Nostalgic design patterns
  • Neumorphism - Soft UI with subtle shadows
  • Cyberpunk - Futuristic neon aesthetics

​
control panel settings

​
profile

Manage your account and personal information:
  • Username and display name
  • Bio and avatar
  • Theme preference (Light/Dark/System)
  • Language and timezone
  • Notification preferences

​
features

Toggle experimental features and new capabilities:
  • Auto-select template: Automatically select templates for new projects
  • Context optimization: Optimize AI context window usage
  • Developer mode: Enable advanced developer features and tools
  • Event logs: Enable detailed system event logging
Features marked as experimental may change or be removed in future versions.

​
cloud providers

Configure cloud-based AI providers:

anthropic

Claude models with extended thinking

openai

GPT-4 and o1 reasoning models

google

Gemini Pro and Flash models

mistral ai

Mistral and Codestral models

groq

Ultra-fast inference platform

deepseek

DeepSeek reasoning models
Configuration per provider:
  • Enable/disable provider
  • API key management
  • Base URL (for compatible providers)
  • Model selection

​
local providers

Configure local AI inference:
  • Ollama: Run models locally via Ollama
  • LM Studio: Desktop application for local models
  • OpenAI-compatible: Custom OpenAI-compatible endpoints
Local provider settings:
  • Custom base URL
  • Connection testing
  • Model discovery
  • Enable/disable toggle
Local providers require the respective software running on your machine. Connection status is shown in real-time.

​
API keys

Centralized API key management for all AI providers:
  • Add, edit, or remove API keys
  • Test key validity
  • Export keys for backup
  • Import keys from backup
API keys are stored in browser localStorage. Use browser profiles or incognito mode for additional security.

​
connections

Manage integrations with external services: github
  • Authenticate with GitHub
  • Browse repositories
  • Clone templates
  • Push local projects
vercel
  • Connect Vercel account
  • Deploy projects
  • View deployment status
netlify
  • Connect Netlify account
  • Deploy sites
  • Manage domains
cloudflare
  • Configure Cloudflare Pages
  • Deploy applications
diagnostics
  • Test connection status
  • View connection logs
  • Troubleshoot issues

​
data management

Control how CodinIT handles your data:
  • View storage usage
  • Export chat history
  • Clear conversation data
  • Download project files
  • Manage local storage
All data is stored locally in your browser. Clearing browser data will remove all CodinIT data.

​
notifications

Configure notification preferences:
  • System notifications
  • Deployment status updates
  • Error alerts
  • Feature announcements

​
service status

Monitor AI provider availability:
  • Real-time service status for 19+ providers
  • Uptime monitoring
  • Incident reports
  • Historical data

​
event logs

View detailed system events:
  • AI model interactions
  • WebContainer operations
  • File system changes
  • Network requests
  • Error tracking
Enable event logs in Features settings for detailed debugging information.

​
debug

Advanced debugging tools:
  • System diagnostics
  • Memory usage
  • Browser information
  • WebContainer status
  • Console logs
  • Performance metrics

​
updates

Check for CodinIT updates:
  • Current version information
  • Available updates
  • Release notes
  • Auto-update configuration

​
task manager

Monitor system resources:
  • CPU usage
  • Memory consumption
  • Active processes
  • WebContainer status
  • Terminal sessions

​
tab management

Customize Control Panel tabs:
  • Show/hide tabs
  • Reorder tabs
  • Reset to defaults
  • Separate User and Developer modes
Drag and drop tabs to reorder them. Changes save automatically.

​
light and dark modes

CodinIT supports three theme modes:
  • Light: Optimized for bright environments
  • Dark: Reduces eye strain in low light (Default)
  • System: Follows operating system preference
Change theme:
  1. Open Control Panel → Profile
  2. Select theme preference
  3. Or use keyboard shortcut: Cmd/Ctrl + Alt + Shift + D

​
theme persistence

Theme preference is stored in browser localStorage and persists across sessions.

​
keyboard shortcuts

CodinIT has minimal keyboard shortcuts by design:
ActionShortcut
Toggle themeCmd/Ctrl + Alt + Shift + D
Toggle terminalCmd/Ctrl + `
More keyboard shortcuts are planned for future releases based on user feedback.

​
browser storage

All CodinIT customization is stored in browser localStorage: Stored data:
  • Design palette preferences
  • Provider configurations
  • API keys
  • Theme preference
  • Feature toggles
  • Tab configuration
  • Connection tokens
Clearing browser data or using incognito mode will reset all settings. Export important data before clearing browser storage.

​
developer mode

Enable advanced features for power users: Enabled features:
  • Additional debug tabs
  • Extended event logging
  • System diagnostics
  • Memory monitoring
  • WebContainer controls
Enable developer mode:
  1. Open Control Panel → Features
  2. Toggle “Developer mode”
  3. Additional tabs appear in Developer window

​
troubleshooting

​
settings not saving

  • Check browser localStorage permissions
  • Disable browser extensions that block storage
  • Try a different browser
  • Clear cache and reload

​
theme not applying

  • Check browser theme preference
  • Try toggling theme manually
  • Clear browser cache
  • Refresh the page

​
API keys not working

  • Verify key validity in API Keys tab
  • Test connection in Cloud Providers tab
  • Check provider status in Service Status
  • Review event logs for errors

​
design palette changes not visible

  • Click “Save Changes” after customization
  • Refresh the page
  • Clear browser cache
  • Check that Design Palette is enabled

​
next steps

ai chat & commands

Master development

select your model

Choose the best AI provider

integrations

Connect external services

troubleshooting

Fix common issues