Add API Key Management and Tool Configuration to documentation

- Updated `README.md` to include a new section on API Key Management with an integrated settings panel for secure storage and tool configuration.
- Enhanced `features.md` with detailed descriptions of the API key management system and its user-friendly interface for managing tools directly from the web UI.
- Expanded `web-ui-guide.md` to provide step-by-step instructions for configuring tools and managing API keys, including benefits and usage examples.
- Improved overall documentation clarity regarding tool configuration and API key management features.

Author: TMHSDigital

README.md

@@ -108,6 +108,14 @@ Below are screenshots showing the evolution of the DeepSeek Wrapper web UI and f
         <li><b>Custom tool creation system</b></li>
       </ul>
     </div>
+    <div style="flex: 1; min-width: 250px; border-left: 4px solid #2EC4B6; padding: 10px; background: #F0FFFC; margin: 5px 0;">
+      <h3 style="color: #2EC4B6; margin-top: 0;">API Key Management</h3>
+      <ul>
+        <li><b>Integrated settings panel</b></li>
+        <li><b>Secure API key storage in .env</b></li>
+        <li><b>Tool configuration UI</b></li>
+      </ul>
+    </div>
 </div>
 
 ## Web UI (FastAPI)
@@ -128,6 +136,7 @@ Then open [http://localhost:8000](http://localhost:8000) in your browser.
 - **Markdown rendering in assistant responses**
 - Loading indicator while waiting for LLM
 - Error banner for API issues
+- **Tool configuration in settings panel with API key management**
 
 For a comprehensive guide to using the web interface, see the [Web UI Guide](docs/web-ui-guide.md).
 

docs/features.md

@@ -222,4 +222,27 @@ The system is designed to be easily extensible, allowing developers to create cu
 - Access real-time information for current events
 - Convert between units and currencies
 - Answer knowledge-based questions with factual data
+</div>
+
+### API Key Management and Tool Configuration
+
+<div style="padding: 20px; background: #f0fffc; border-radius: 8px; border-left: 4px solid #2EC4B6; margin-top: 20px;">
+The DeepSeek Wrapper provides an intuitive, user-friendly interface for managing API keys and configuring tools directly from the web UI. This feature allows users to enable, disable, and configure various AI tools without needing to edit configuration files manually.
+
+Key features of the tool configuration system:
+- **Integrated settings panel**: Configure tools directly from the chat interface
+- **Toggle controls**: Easily enable or disable individual tools
+- **Secure API key storage**: API keys are saved in the server's `.env` file, not in browser storage
+- **Immediate activation**: Tools become available as soon as API keys are saved
+- **Environment variable integration**: Configuration automatically updates environment variables
+
+The tool configuration panel is accessible from the settings menu and provides a complete overview of all available tools, their current status, and required API credentials. This makes it easy for users to manage which capabilities are available to the AI assistant.
+
+**Configuration options include:**
+- Web Search API keys for accessing real-time information
+- Weather API credentials for forecasts and current conditions
+- Email SMTP server settings for sending messages
+- Toggle controls for built-in tools that don't require API keys
+
+This user-friendly approach to tool configuration significantly improves the accessibility of advanced features, allowing non-technical users to fully utilize the AI's capabilities without developer assistance.
 </div> 

docs/web-ui-guide.md

@@ -138,6 +138,57 @@ Focus on writing efficient, readable code following best practices.
 Include error handling in your examples when appropriate.
 ```
 
+### Tool Configuration and API Keys
+
+The DeepSeek Wrapper includes several AI tools that can be configured through the settings panel:
+
+1. Click the settings icon in the top right corner
+2. Switch to the "Tools" tab
+3. Configure the available tools:
+   - Enable or disable specific tools using the toggle switches
+   - Enter API keys for tools that require external services
+   - Configure additional settings for each tool (e.g., SMTP server for email)
+
+![Tools Configuration](images/tools-config.png)
+
+#### Available Tools
+
+| Tool | Description | API Key Required |
+|------|-------------|------------------|
+| Web Search | Search the web for real-time information | Yes (WEBSEARCH_API_KEY) |
+| Weather | Get current weather and forecasts | Yes (WEATHER_API_KEY) |
+| Email | Compose and send emails | Yes (SMTP credentials) |
+| Calculator | Perform calculations | No |
+| Date & Time | Get current date and time information | No |
+
+#### API Key Management
+
+When you enter API keys in the tools configuration panel:
+
+1. The keys are saved securely in your local `.env` file
+2. Tools are automatically registered with the appropriate API keys
+3. The AI can immediately use the configured tools in your conversations
+
+This approach provides several benefits:
+- API keys are stored securely on your server, not in the browser
+- Configuration is persistent across server restarts
+- No need to manually edit configuration files
+- Tools can be easily enabled or disabled as needed
+
+> **Note**: The API keys are stored in plaintext in your `.env` file. Ensure this file has appropriate permissions and is included in your `.gitignore` to prevent accidental exposure.
+
+#### Using Tools in Conversations
+
+Once tools are configured, you can use them in your conversations by asking questions that require their functionality:
+
+- "What's the weather in Tokyo today?" (Weather tool)
+- "Search the web for the latest AI research papers" (Web Search tool)
+- "Help me draft an email to schedule a meeting" (Email tool)
+- "What is the square root of 144?" (Calculator tool)
+- "What's today's date?" (Date & Time tool)
+
+The AI will automatically use the appropriate tool when needed to answer your questions.
+
 ### Conversation Management
 
 - **Starting a new conversation**: Click the "New Chat" button