I'll create a new version of the code editor that uses the Gemini API to generate HTML, CSS, and JavaScript code based on user prompts. Then, we'll display and run the generated code in the editor.

To use this code, you'll need to set up your Gemini API key as an environment variable:

I'll modify the code to fetch longer, more complete code from the Gemini API and automatically save it in separate HTML, CSS, and JavaScript files. We'll need to update both the frontend and backend components to achieve this.

Let's start by updating our existing files and adding a new one:

These changes will allow the application to:

1. Generate complete HTML, CSS, and JavaScript code based on a single prompt.
2. Display the generated code for each language in the editor.
3. Run the combined code in an iframe within the output area.
4. Save the generated code into separate files in the public/generated directory.

To use this updated version:

1. Enter a prompt describing the web application you want to create.
2. Click "Generate" to get the code for all three languages.
3. Use the language selector to switch between HTML, CSS, and JavaScript in the editor.
4. Click "Run Code" to see the result in the output area.
5. Click "Save Files" to save the generated code into separate files.

Please note that for the file saving functionality to work, you'll need to create a generated folder in the public directory of your Next.js project. Also, make sure that the application has write permissions for this directory.

This implementation provides a more complete solution for generating and saving code for all three languages based on a single prompt.