Introduction
The rise of AI-powered tools has transformed the way we build websites. With the power of OpenAI’s ChatGPT API, I was able to develop DecorIdeas.io, a fully functional home decor AI assistant in just a few hours. This website not only provides decor and gardening suggestions but also fetches blog posts, displays Amazon product recommendations, and maintains a chat history—all using automation and minimal coding.
In this case study, I’ll walk you through how I built DecorIdeas.io step by step, the challenges I faced, and how you can build a similar AI-driven niche website for yourself.
🚀 The Idea: AI-Powered Home Decor Assistant
My goal was to create an AI chatbot that could:
✅ Answer home decor & gardening-related questions
✅ Recommend Amazon products related to user queries
✅ Display the latest blog posts from a WordPress subdomain
✅ Provide an intuitive chat history for a seamless experience
I wanted this to be fast, responsive, and SEO-friendly, with a simple UI, allowing users to easily interact with the AI.
🛠️ Tech Stack & Tools Used
- Frontend: HTML, CSS, JavaScript
- Backend: PHP
- Database: None (API-based)
- AI: OpenAI’s ChatGPT API
- Amazon Affiliate API: For fetching home decor product recommendations
- WordPress RSS Feed: For pulling blog content from the blog subdomain
- Hosting: cPanel (Shared Hosting)
- Domain: DecorIdeas.io
Step 1: Setting Up the AI Chatbot
The core of the website is the AI chatbot, which answers decor-related queries. I used OpenAI’s GPT API to fetch AI-generated responses.
How the Chat Works?
1️⃣ The user types a home decor or gardening question
2️⃣ The search query is sent to the ChatGPT API
3️⃣ The AI processes and returns a response
4️⃣ The response is formatted with headings and bullet points for readability
5️⃣ The chat history is stored, allowing users to revisit their past queries
Key Features Added to the AI Chatbot
✔️ Formatted AI Output with headings, bold text, and bullet points
✔️ Restricted AI Queries to only decor & gardening topics
✔️ Chat History Storage to recall previous user queries
Code for AI Chatbot (chat.php)
phpCopyEdit<?php
require_once "config.php";
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$query = trim($_POST["message"]);
// Restrict AI to only decor and gardening topics
if (!preg_match("/(decor|design|gardening|plants|interior|furniture|style|home)/i", $query)) {
echo json_encode(["message" => "❌ I'm only able to provide Decor or Gardening Related answers."]);
exit;
}
// Send request to OpenAI API
$ch = curl_init("https://api.openai.com/v1/chat/completions");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
"Authorization: Bearer YOUR_OPENAI_API_KEY",
"Content-Type: application/json"
]);
$data = json_encode([
"model" => "gpt-4",
"messages" => [["role" => "user", "content" => "Provide home decor advice: $query"]],
"max_tokens" => 300
]);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
$response = json_decode(curl_exec($ch), true);
curl_close($ch);
echo json_encode(["message" => $response["choices"][0]["message"]["content"] ?? "Error fetching response"]);
}
?>
Step 2: Fetching the Latest Blogs from WordPress
To keep the website dynamic, I integrated an RSS feed from the WordPress subdomain to display latest blog posts. Instead of using the WordPress REST API, I opted for simplexml_load_file() to fetch the RSS feed, ensuring lightweight and faster loading times.
Code for Fetching Blogs (blogs.php)
phpCopyEdit<?php
$wordpress_subdomain = "https://decorideas.io/blog";
$feed_url = $wordpress_subdomain . "/feed/";
$rss = simplexml_load_file($feed_url);
if ($rss) {
echo "<ul class='blog-list'>";
foreach ($rss->channel->item as $index => $item) {
if ($index >= 5) break;
echo "<li>
<a href='{$item->link}' target='_blank'>{$item->title}</a>
<p>" . date("F j, Y", strtotime($item->pubDate)) . "</p>
</li>";
}
echo "</ul>";
} else {
echo "<p>Unable to fetch blog posts.</p>";
}
?>
Key Features of Blog Fetching System
✔️ Uses RSS instead of REST API (faster & lightweight)
✔️ Displays Featured Images (via <media:thumbnail>)
✔️ Shows latest 5 blogs dynamically
Step 3: Amazon Affiliate Product Integration
To monetize the website, I embedded an Amazon Affiliate Widget that dynamically fetches decor-related products based on user queries.
Amazon Product Fetching Code
jsCopyEditfunction showAmazonProducts(query) {
let amazonContainer = document.getElementById("amazon-products");
let amazonSearchURL = `https://www.amazon.com/s?k=${encodeURIComponent(query)}&tag=YOUR_AFFILIATE_TAG`;
amazonContainer.innerHTML = `
<div class="amazon-widget">
<a href="${amazonSearchURL}" target="_blank">
<img src="assets/images/amazoncom-logo.png" class="amazon-logo">
</a>
<p>🔎 Find the best decor products on Amazon with one click!</p>
</div>
`;
}
Key Features of Amazon Integration
✔️ Displays top decor products dynamically
✔️ Uses affiliate tracking for revenue
✔️ Refreshes on every page load to show different products
Step 4: SEO Optimization & Page Speed Improvements
Since page speed and SEO are crucial, I implemented:
✅ Lazy Loading for images
✅ Minified CSS & JS
✅ .htaccess caching rules
✅ Meta tags for Open Graph & Twitter
Performance Boosting .htaccess Settings
apacheCopyEdit# Enable Compression
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript
</IfModule>
# Leverage Browser Caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access 2 hours"
ExpiresByType text/css "access 1 month"
ExpiresByType application/javascript "access 1 month"
</IfModule>
🚀 Final Thoughts: Can You Build a Website Like This?
Yes! With AI APIs + PHP + WordPress, anyone can build an automated niche website like this. DecorIdeas.io is an SEO-friendly, AI-powered, monetized site—all built in a few hours.
If you want to build your own AI niche website, start with:
1️⃣ A unique niche (Home Decor, Gardening, Pets, etc.)
2️⃣ An AI-powered chatbot for automation
3️⃣ Affiliate marketing for passive income