Learning Timeline
Key Insights
API Key Security
It is highly recommended to use a backend like Supabase to hide your API keys. Never leave API keys exposed in the frontend code to prevent unauthorized use of your AI credits.
Perform a Security Review Before Publishing
Always run the 'Review Security' function before clicking the Publish button. The AI will help identify data leaks or code vulnerabilities that you might have overlooked.
Admin Panel Flexibility
You can hide the 'Settings' panel from regular users to turn it into a dedicated Admin Panel for changing AI models or system instructions without needing to modify the source code.
Prompts
UI Enhancement Prompt
Target:
Claude / ChatGPT
Create a light mode version of this application and add a 'New Chat' button. The 'New Chat' button should clear the current session and start a fresh interaction.
Step by Step
Updating the Web App Interface and Functionality
- Type an instruction in the AI prompt area to build a 'Light Mode' version of your application.
- Ask the AI to add a 'New Chat' button to the user interface.
- Click the newly created 'New Chat' button to test if a new conversation session starts fresh.
- Click the 'Settings' icon to open the configuration panel.
- Change the AI model type via the provided dropdown menu if necessary.
- Update the 'System Prompt' in the text field to modify the AI's response behavior.
- Use this 'Settings' panel as an 'Admin Panel' by adding login or password functionality to restrict access.
Security Steps and Publishing to a Custom Domain
- Connect the application to a 'Supabase' backend to securely manage API keys on the server-side.
- Click the 'Review Security' option in the development dashboard.
- Wait for the system to finish scanning for security issues and providing recommended solutions.
- Click the 'Fix' button or follow the system instructions to automatically repair security errors.
- Click the 'Publish' button to generate an application link (URL) that can be shared directly with users.
- Click the 'Custom Domain' tab within the publishing settings.
- Enter your purchased domain name and click the 'Connect' button to link the application to your own domain.
