Advanced Developer Features
Take full control with code-level features. Add custom npm packages, fonts, advanced customizations, and API access.
For: Developers who need advanced customization beyond AI chat.
Code Mode
When to Use
Complex custom logic
Advanced integrations
Performance optimization
Debugging
Reviewing generated code
Access
Click 'Code Mode' to see and edit the full codebase.
Custom npm Packages
Adding Packages
Tell the AI: 'Add npm package [package-name]'
Common Packages
date-fns - Date formatting
lodash - Utility functions
axios - HTTP requests
react-query - Data fetching
zod - Validation
framer-motion - Animations
Example
'Install date-fns and use it to format dates on the dashboard'
Custom Fonts
Google Fonts
Tell AI: 'Use Google Font [font-name]'
Example: 'Use Google Font Inter for all text'
Custom Font Files
Upload .ttf, .otf, .woff, .woff2 files
Tell AI: 'Use the uploaded font CustomFont for headings'
AI will configure font-face and CSS
Font Optimization
Subset fonts to reduce size
Preload critical fonts
Use font-display: swap
Limit font weights
Advanced Code Customization
Custom Hooks
Create reusable React hooks:
'Create a custom hook useAuth for authentication logic'
Custom Components
'Create a reusable Button component with variants'
State Management
Zustand - Simple state
Redux - Complex state
React Context - Lightweight
Jotai - Atomic state
API Routes
Create custom API endpoints:
'Add API route /api/users that returns all users'
Database Advanced
Direct Database Access
Query database from Code Mode:
MongoDB queries
Aggregations
Indexes
Relationships
Migrations
'Create a migration to add email field to users table'
API Documentation
REST API
Your HeyBoss project exposes APIs:
GET /api/users
POST /api/auth/login
PUT /api/users/:id
DELETE /api/users/:id
Authentication
Bearer token auth
Session cookies
API keys
Environment Variables
Setting Env Vars
Tell AI: 'Add environment variable API_KEY'
Usage
Access in code: process.env.API_KEY
Security
Never commit secrets
Use .env.local for local dev
Different envs for dev/staging/prod
Build & Deploy
Build Process
Automatic builds on save
Minification
Code splitting
Tree shaking
Source maps
CI/CD
Git integration
Automatic deployments
Preview deployments
Rollback capability
Testing
Unit Tests
'Add unit tests for the auth functions'
Integration Tests
'Add integration tests for the API endpoints'
E2E Tests
'Add E2E tests for the checkout flow'
Performance
Code Splitting
Automatic code splitting by route
Lazy Loading
'Lazy load the AdminDashboard component'
Optimization
React.memo for expensive components
useMemo for expensive calculations
useCallback for stable callbacks
Virtual scrolling for long lists
Advanced Integrations
Webhooks
'Create webhook endpoint for Stripe payments'
Third-Party APIs
'Integrate with Twilio API for SMS'
OAuth Providers
'Add GitHub OAuth login'
Version Control
Git Integration
Connect GitHub repo
Auto-commit changes
Branch management
Pull requests
Monitoring & Debugging
Logging
'Add logging for API errors'
Error Tracking
Sentry integration
Error boundaries
Error notifications
Performance Monitoring
Web Vitals
Lighthouse metrics
Custom metrics
Common Questions
Can I export my code?
Yes! Download your entire codebase as a ZIP file from Code Mode.
Can I use TypeScript?
Yes! HeyBoss supports TypeScript. Just ask the AI to use TypeScript.
What's the tech stack?
React, Next.js, TailwindCSS, MongoDB, Node.js. Modern, production-ready stack.
Can I self-host?
Enterprise plans support self-hosting. Contact sales for details.
See also: Best Practices | Troubleshooting
Need help? Contact Support