API Key Management

📸 Screenshots

Note: Screenshots for this section are not yet available.

To add screenshots:

1. Navigate to the Settings section in your app
2. Take screenshots of the relevant interfaces
3. Save them in docs/public/images/screenshots/settings/
4. Run the screenshot integration script to automatically integrate them

Recommended screenshots:

• api-keys-view.png - API key management

Tip: Use PNG format with 1920x1080 resolution for best results.

Overview

The API Key Management section allows teams to store and manage API credentials for various external services and AI providers. API keys are team-scoped and used throughout the application for AI model integration, support system connections, and other third-party services.

Supported API Key Types

The system supports integration with multiple external services organized by category:

AI/ML Services

• OpenAI: OpenAI API integration for GPT models
• Anthropic: Claude API access for Anthropic models
• Google: Google AI services integration
• DeepSeek: DeepSeek API integration
• Fast Inference: High-speed API access for inference
• XAI: XAI service integration
• Perplexity: Perplexity API integration
• Data Platform: Data platform integration

Support and Translation Services

• Support System: Support ticket system integration
• Google Translate: Translation services API

Search and Discovery

• Exa: Search API integration for web discovery

API Key Management Features

Creating API Keys

Add New API Key Process:

1. Click "Create API Key" from the API Keys settings page
2. Select Type: Choose from the dropdown of supported API providers
3. Add Description: Provide a descriptive name for the API key
4. Enter Key: Input the actual API credential
5. Save: API key is stored securely and associated with your team

API Key Table Interface

Table Columns:

• Description: User-defined description of the API key purpose
• Type: API provider type (OpenAI, Anthropic, etc.)
• Key: The API credential (displayed in the table)
• Created: Creation date in readable format

Table Features:

• Search: Search API keys by description
• Pagination: Paginated table using table wrapper component
• Row Actions: Click any row to edit the API key (if permissions allow)
• Sorting: Sortable columns for organization

Editing API Keys

Edit API Key Form:

• Type Selection: Change API provider type from supported options
• Description Update: Modify the descriptive name
• Key Update: Change the API credential value
• Delete Option: Remove API key with confirmation dialog

Edit Process:

1. Access Edit: Click on any API key row in the table
2. Modify Fields: Update type, description, or key value as needed
3. Save Changes: Click "Update" to save modifications
4. Delete Key: Use "Delete" button with confirmation dialog
5. Cancel: Return to list without saving changes

Team-Based Security

Access Control

Team Isolation:

• Team Scoped: All API keys are filtered by current team (team_id)
• Permission Based: Access controlled by create and update permissions
• Secure Storage: API keys stored securely in the database
• No Cross-Team Access: Users can only see API keys for their assigned team

Permission Requirements

Required Permissions:

• Create API Keys: Requires create permission for API keys
• View API Keys: Requires read permission for API keys
• Edit API Keys: Requires update permission for users (uses users permission for row actions)
• Tab Visibility: API Keys tab only visible with read permission for API keys

Database Integration

Data Storage

API Key Schema:

• ID: Unique identifier for each API key
• Key: The actual API credential
• Type: Provider type (AI services, support systems, etc.)
• Team ID: Associates key with specific team
• Created At: Timestamp of key creation
• Description: User-defined description

Query Integration

Data Management:

• React Query: Uses useQuery for efficient data fetching and caching
• Real-Time Updates: Automatic cache invalidation when keys are modified
• Error Handling: Comprehensive error handling for API failures
• Loading States: Loading indicators during async operations

Error Handling and User Feedback

Form Validation

Input Validation:

• Required Fields: Description and key are required
• Type Selection: Must select a valid API provider type
• Real-Time Feedback: Immediate validation feedback

User Notifications

Success Feedback:

• Creation Success: "API key created successfully" toast notification
• Update Success: "API key updated successfully" toast notification
• Deletion Success: "API key deleted successfully" toast notification

Error Handling:

• API Errors: User-friendly error messages for API failures
• Validation Errors: Clear feedback for missing or invalid data
• Network Errors: Graceful handling of connection issues