codelf icon indicating copy to clipboard operation
codelf copied to clipboard

Add DeepSeek AI as a new search engine option with API key management

Open Copilot opened this issue 9 months ago โ€ข 0 comments

๐Ÿš€ New Feature: DeepSeek AI Integration

This PR adds DeepSeek AI as a new search engine option to Codelf, providing AI-powered code suggestions and variable naming alongside the existing SearchCode.com functionality.

โœจ Features Added

๐Ÿ” Dual Search Engine Support

  • SearchCode: Real-world code from GitHub, GitLab, BitBucket (existing, default)
  • DeepSeek AI: AI-powered variable naming and code suggestions (new)

๐Ÿ”‘ Flexible API Key Management

  • Optional API key configuration via settings modal
  • Secure browser-only storage (localStorage) - never sent to Codelf servers
  • Fallback to demo mode with mock results when no API key provided
  • Clear privacy notices and user control

๐ŸŽจ Seamless UI Integration

  • New search engine selector dropdown in main interface
  • Settings button for DeepSeek configuration when selected
  • Maintains consistent design with existing components
  • Responsive design support

๐Ÿ›  Implementation Details

New Components

  • DeepSeekSearchData: Service class for API integration with caching and error handling
  • SearchEngineSelector: React component for engine selection with settings modal

Enhanced Components

  • SearchCodeModel: Updated to route requests between different search engines
  • SearchBar: Integrated search engine selector
  • MainContainer: Added search engine change handling

๐Ÿ“Š Usage Example

// Users can now select DeepSeek AI from the dropdown
// and optionally configure their API key for enhanced results

// Example search flow:
1. Select "DeepSeek AI" from search engine dropdown
2. Optionally click settings โš™๏ธ to configure API key
3. Search for "user authentication" 
4. Get AI-generated variable names and patterns

๐Ÿ”ง API Integration

  • Endpoint: https://api.deepseek.com/chat/completions
  • Authentication: Bearer token (user's API key)
  • Fallback: Demo mode with mock results when no API key
  • Caching: Session-based result caching for performance
  • Error Handling: Graceful fallback on API failures

๐Ÿ”’ Privacy & Security

  • API keys stored only in user's browser (localStorage)
  • Never transmitted to Codelf servers
  • User can clear API key anytime
  • Transparent about data usage
  • No cross-engine data sharing

๐Ÿ“ฑ User Interface

Search Engine: [DeepSeek AI โ–ผ] [โš™๏ธ Settings]
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ Search Input Field              โ”‚
โ”‚ [๐Ÿ”] [Language Filter โ–ผ]       โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Settings Modal:

๐Ÿง  DeepSeek AI Settings
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ API Key (Optional)              โ”‚
โ”‚ [โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข] [๐Ÿ‘๏ธ]    โ”‚
โ”‚                                 โ”‚
โ”‚ โ„น๏ธ Privacy Notice: API key is   โ”‚
โ”‚   stored locally in browser     โ”‚
โ”‚                                 โ”‚
โ”‚ [Clear Key] [Cancel] [Save]     โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

๐Ÿงช Testing

  • โœ… API key storage/retrieval functionality
  • โœ… Search result parsing and display
  • โœ… Error handling and fallback scenarios
  • โœ… UI component rendering and interactions
  • โœ… Backward compatibility with existing SearchCode functionality

๐Ÿ“ˆ Impact

  • No Breaking Changes: Full backward compatibility maintained
  • Zero New Dependencies: Uses existing React/Semantic UI components
  • Minimal Code Changes: 611 lines added, 11 removed across 7 files
  • Enhanced User Experience: More search options and AI-powered suggestions

๐ŸŒŸ Benefits

  1. More Options: Users can choose between real-world code examples and AI suggestions
  2. Flexibility: Works with or without API key
  3. Privacy-First: User controls all data and API key storage
  4. Performance: Built-in caching and error handling
  5. Extensible: Easy to add more AI providers in the future

This enhancement maintains Codelf's core mission of helping developers find better variable names while adding the power of modern AI assistance.


๐Ÿ’ก You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot avatar Jun 06 '25 02:06 Copilot