# AI Website Builder

The AI Website Builder is an intuitive agent designed to help you create visually appealing and interactive one-page websites. By simply providing your specifications, the agent generates a complete HTML file that includes embedded JavaScript and CSS. The generated website will feature dynamic elements such as drop-down menus, clickable buttons, and responsive design, ensuring a user-friendly experience. Whether you are a beginner or an experienced developer, this tool allows for easy customization and effective presentation of your content.

# Getting Started

To get started, make sure you have cloned the AI Website Builder. Follow Create from Template to clone and configure your AI agent.

# Configuration Instructions

# Knowledge

You can upload .pdf or .txt files to provide the agent with tailored context that meets your specific requirements.

# User Inputs

Field Title	Description	Instruction
Requirements of the Website	The requirement of your website	Provide a detailed description or purpose of your website. Aim for 3-5 sentences for clarity with different aspects covered.

# AI Models

The default model is Llama 3.1 8B Instruct, but you can explore other supported AI models as well. If needed, refine your prompts for more tailored outputs.

TIP

For more detailed instructions on configuring an AI agent, please refer to Configure AI Agent

# Sample Inputs and Output

# Sample Inputs

Requirements of the Website:
- websiteTitle: My Portfolio
- mainContent: Welcome to my personal portfolio website where I showcase my projects and skills.
- colorScheme: #2E7D32
- menuItems: Home, Projects, Contact
- interactiveElements: A contact form and clickable project images

# Sample Output

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Portfolio</title>
    <style>
      body {
        background-color: #2e7d32;
      }
      /* Additional CSS for styling */
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#projects">Projects</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="home">
        <h1>Welcome to my personal portfolio website</h1>
        <p>Here I showcase my projects and skills.</p>
      </section>
      <section id="projects">
        <h2>My Projects</h2>
        <p>Clickable project images will be displayed here.</p>
      </section>
      <section id="contact">
        <h2>Contact Me</h2>
        <form>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required />
          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required />
          <button type="submit">Send</button>
        </form>
      </section>
    </main>
    <script>
      // JavaScript for interactive elements
    </script>
  </body>
</html>

# Tips for Effective Configuration

Be Clear with Your Inputs: Use specific descriptions for each input to help the agent understand exactly what you want.
Keep It Simple: Don't overload your website with too many features at once; start with the essentials and expand later.
Test and Iterate: After generating a website, test its functionality and make any necessary adjustments based on feedback or performance.
Utilize Color Psychology: Choose colors that evoke the right emotions for your audience, ensuring they align with your website's purpose.
Stay Organized: Keep your code well-commented and organized for future reference or modifications. This will help when revisiting your project.

Continue exploring our collection of Agent Templates to discover more AI agent ideas in action!