AI Tool Coder & Prompt Writter Tool

Advanced AI Prompt Architect

User Guide

Welcome to the Advanced AI Prompt Architect! This tool helps you craft detailed prompts for Google's Gemini API to generate frontend code.

Gemini API Key & Troubleshooting

• You **MUST** have a valid Gemini API key. Obtain one from Google AI Studio.
• Enter your API key in the "Your Gemini API Key" field.
  • Save Key: Stores the key in your browser's local storage for convenience.
  • Clear Key: Removes it from local storage.
• **Security Note:** Saving API keys in browser storage is convenient but less secure for shared computers. This tool is client-side only.
• If you see "API Key not valid" or similar errors:
  1. Verify the Key: Ensure you've copied the ENTIRE key correctly.
  2. Enable the API: In your Google Cloud Console, for the project linked to your API key, make sure the "Generative Language API" (or specifically "Vertex AI API" if using Vertex models, though this tool targets the base Gemini API) is ENABLED. Search for it in the API Library.
  3. Check Billing: Many Google Cloud services, including more capable Gemini models, REQUIRE a valid billing account linked to your project, and billing must be enabled for that project. Even if there's a free tier, setup is often mandatory. Go to Google Cloud Console -> Billing.
  4. Key Restrictions: If you've set restrictions on your API key (e.g., limiting it to specific websites or APIs), ensure they allow requests from this tool's context (for local use, this might mean no HTTP referrer restrictions or allowing `localhost`). For testing, try removing all restrictions temporarily.
  5. Project Association: Ensure the API key is associated with the correct Google Cloud Project where the API is enabled and billing is active.
  6. Wait a Few Minutes: If the key or project settings were just changed, it might take 5-10 minutes for changes to propagate through Google's systems.

Configuring Your Prompt

Fill in the fields to specify requirements for the code Gemini should generate:

• Tool Name/Component: The name of the tool (e.g., "Image Carousel").
• Programming Languages & Colors: Standard selections.
• Advanced Options: Includes styling, structure, libraries (e.g., React, Tailwind CSS), complexity, error handling, and accessibility focus.
• CMS & Tool Functionalities: Context for content management or specific features like copy/print.

Advertisement Integration

• Click **"Add Ad Slot"** to define areas for advertisements in the generated tool.
• For each slot:
  • Slot ID: A unique HTML ID for the ad container (e.g., top-banner-ad). This ID will be applied to a `
    `.
  • Placement Hint: A description for the AI on where to position this ad slot (e.g., "Above main content", "In sidebar").
  • Ad Code Snippet (Optional): Paste your actual ad code (e.g., AdSense `...`). The AI will attempt to place this code inside the generated `div`.
    **Caution:** Very long or complex ad scripts might not work well. It might be safer to leave this blank and manually insert your ad code into the generated placeholder `div`s later.
• The AI will be instructed to create these `div` placeholders with the specified IDs and content.

Generating and Using the Output

• Click **"Generate Prompt with AI"**.
• **Prompt Sent to API:** Shows the exact prompt sent to Gemini. Useful for debugging.
• **AI Generated Output:** The code/content from Gemini.
• **Calculation Guide:** A summary of your inputs.

This tool uses the `gemini-1.5-flash-latest` model. Ensure your API key supports this.

Prompt Configuration

Your Gemini API Key:

---

Tool Name / Component:

CSS Class Prefix (for generated tool):

Languages & Colors

Programming Languages:

HTML

CSS

JavaScript

Python (for context)

Primary Brand Color:

Secondary Brand Color:

Background for Generated Tool:

Transparent

Custom Color:

---

Advanced Options

Code Styling & Structure:

Use Font Awesome Icons

Use SVGs

Don't use body/root in CSS

3D Animations & Shadows

Schema Markup

Padding & Custom HRs

Emphasize A11y

Specific Libraries/Frameworks: Tool Complexity Level: Simple Intermediate Advanced Error Handling in Code: Basic Robust

Content Management System (CMS): None Blogger WordPress Other

Tool Functionalities to Include:

Download

Copy

Print

---

Advertisement Integration

Prompt Sent to API

The prompt constructed from your inputs will appear here.

AI Generated Output

Your AI-generated output will appear here...

Prompt Calculation Guide

Your AI prompt was constructed based on the following inputs:

Feature	Details
Price	Free
Rendering	Client-Side Rendering
Language	JavaScript
Paywall	No

Open This Tool

Checkout More AI Tools!

Advertise here

About This Tool

How It Works?