Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>llms.txt Generator - Make Your Website AI-Friendly</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6B46C1 0%, #3182CE 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .code-block { | |
| font-family: 'Courier New', Courier, monospace; | |
| background-color: #2D3748; | |
| color: #E2E8F0; | |
| border-radius: 0.5rem; | |
| overflow-x: auto; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-3xl"></i> | |
| <h1 class="text-2xl font-bold">llms.txt</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#features" class="hover:text-gray-200">Features</a> | |
| <a href="#how-it-works" class="hover:text-gray-200">How It Works</a> | |
| <a href="#example" class="hover:text-gray-200">Example</a> | |
| <a href="#faq" class="hover:text-gray-200">FAQ</a> | |
| </nav> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="mt-16 md:mt-24 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Generate llms.txt files for AI-friendly websites</h1> | |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Help AI systems understand your website with the new standard for LLM-friendly content.</p> | |
| <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-xl p-6"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input type="text" placeholder="Enter your website URL (e.g., example.com)" class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-gray-800"> | |
| <button class="gradient-bg text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition">Generate</button> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-gray-600">Select file type:</span> | |
| <select class="border border-gray-300 rounded px-3 py-1 bg-white text-gray-800"> | |
| <option>llms.txt</option> | |
| <option>llms-full.txt</option> | |
| </select> | |
| </div> | |
| <span class="text-sm text-gray-500">Generates a basic navigation structure</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- What is llms.txt --> | |
| <section id="features" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">What is llms.txt?</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition duration-300"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> | |
| <i class="fas fa-brain text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Optimize for AI</h3> | |
| <p class="text-gray-600">While robots.txt is for search crawlers, llms.txt is optimized for AI reasoning engines that need to understand your content.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition duration-300"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> | |
| <i class="fas fa-sitemap text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Structured navigation</h3> | |
| <p class="text-gray-600">Provide a streamlined view of your site's structure in a markdown format that AI systems can easily understand.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition duration-300"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> | |
| <i class="fas fa-window-maximize text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Context optimized</h3> | |
| <p class="text-gray-600">Overcome AI context window limitations by providing essential information in a clean, focused format.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md card-hover transition duration-300"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> | |
| <i class="fas fa-book text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Learn more</h3> | |
| <p class="text-gray-600">Discover how llms.txt can transform how AI interacts with your website content.</p> | |
| <a href="#" class="text-purple-600 font-medium mt-2 inline-block hover:underline">Learn more about llms.txt</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How it works --> | |
| <section id="how-it-works" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4">How it works</h2> | |
| <p class="text-xl text-center text-gray-600 mb-12 max-w-2xl mx-auto">Generate and implement an llms.txt file for your website in three simple steps.</p> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl font-bold mb-4">1</div> | |
| <h3 class="text-xl font-semibold mb-2">Enter your website URL</h3> | |
| <p class="text-gray-600">Just provide your domain name, and our tool will analyze your website structure.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl font-bold mb-4">2</div> | |
| <h3 class="text-xl font-semibold mb-2">Review and customize</h3> | |
| <p class="text-gray-600">We'll suggest an llms.txt structure based on your site. Edit it to highlight the most important content.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md card-hover transition duration-300"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl font-bold mb-4">3</div> | |
| <h3 class="text-xl font-semibold mb-2">Deploy to your website</h3> | |
| <p class="text-gray-600">Download the file and place it at your domain root (e.g., example.com/llms.txt).</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Example --> | |
| <section id="example" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Example llms.txt</h2> | |
| <p class="text-xl text-center text-gray-600 mb-8 max-w-2xl mx-auto">Here's what an llms.txt file looks like for a typical documentation site.</p> | |
| <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl overflow-hidden shadow-xl"> | |
| <div class="flex items-center bg-gray-900 px-4 py-2"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-gray-300 text-sm">llms.txt</div> | |
| </div> | |
| <div class="p-6 code-block"> | |
| <pre class="whitespace-pre-wrap"><code class="text-gray-200"># Project Name | |
| > Project description with key information necessary | |
| > for understanding the documentation. | |
| Additional details about the project can go here. | |
| ## Documentation | |
| - [Quick Start](https://example.com/docs/quickstart): Get started in minutes | |
| - [API Reference](https://example.com/docs/api): Detailed API documentation | |
| ## Examples | |
| - [Todo App](https://example.com/examples/todo): A simple todo application example | |
| - [Authentication](https://example.com/examples/auth): Example implementing user authentication | |
| ## Optional | |
| - [Blog](https://example.com/blog): Latest updates and tutorials | |
| - [Community](https://example.com/community): Get help from the community</code></pre> | |
| </div> | |
| </div> | |
| <div class="mt-12 max-w-3xl mx-auto"> | |
| <h3 class="text-2xl font-semibold mb-4">Structured for AI understanding</h3> | |
| <p class="text-gray-600 mb-6">The llms.txt format uses simple markdown that both humans and AI can read:</p> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-gray-700">H1 title defines the project or site name</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-gray-700">Blockquote provides a concise summary</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-gray-700">H2 headers organize documentation sections</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-gray-700">Optional section marks secondary resources</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mt-1 mr-3"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <span class="text-gray-700">Clear links to important content</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Adoption --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Rapidly growing adoption</h2> | |
| <p class="text-xl text-center text-gray-600 mb-12 max-w-2xl mx-auto">More websites and tools are adding llms.txt support every day.</p> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white mx-auto mb-3"> | |
| <i class="fas fa-cloud text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold">Cloudflare</h3> | |
| <p class="text-sm text-gray-500">/llms.txt /llms-full.txt</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white mx-auto mb-3"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold">X</h3> | |
| <p class="text-sm text-gray-500">/llms.txt /llms-full.txt</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white mx-auto mb-3"> | |
| <i class="fas fa-credit-card text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold">Mangopay</h3> | |
| <p class="text-sm text-gray-500">/llms.txt /llms-full.txt</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white mx-auto mb-3"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold">HubSpot</h3> | |
| <p class="text-sm text-gray-500">/llms.txt /llms-full.txt</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#" class="text-purple-600 font-medium hover:underline">Find more companies</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section id="faq" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Frequently asked questions</h2> | |
| <div class="max-w-3xl mx-auto space-y-6"> | |
| <div class="border border-gray-200 rounded-xl p-6"> | |
| <button class="flex justify-between items-center w-full text-left"> | |
| <h3 class="text-xl font-semibold">What's the difference between llms.txt and robots.txt?</h3> | |
| <i class="fas fa-chevron-down text-purple-600"></i> | |
| </button> | |
| <div class="mt-4 text-gray-600"> | |
| While robots.txt tells search crawlers which pages they can access, llms.txt helps AI systems understand your content's structure and meaning. | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-xl p-6"> | |
| <button class="flex justify-between items-center w-full text-left"> | |
| <h3 class="text-xl font-semibold">Do I need to create both llms.txt and llms-full.txt?</h3> | |
| <i class="fas fa-chevron-down text-purple-600"></i> | |
| </button> | |
| <div class="mt-4 text-gray-600"> | |
| llms.txt provides navigation structure, while the optional llms-full.txt contains complete documentation content. Our tool helps generate both. | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-xl p-6"> | |
| <button class="flex justify-between items-center w-full text-left"> | |
| <h3 class="text-xl font-semibold">How do LLMs use this file?</h3> | |
| <i class="fas fa-chevron-down text-purple-600"></i> | |
| </button> | |
| <div class="mt-4 text-gray-600"> | |
| Current AI systems don't automatically discover these files. Users can provide the file's content to AI tools, helping them better understand your site. | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-xl p-6"> | |
| <button class="flex justify-between items-center w-full text-left"> | |
| <h3 class="text-xl font-semibold">Who created the llms.txt standard?</h3> | |
| <i class="fas fa-chevron-down text-purple-600"></i> | |
| </button> | |
| <div class="mt-4 text-gray-600"> | |
| The standard was proposed by Jeremy Howard, co-founder of Answer.AI, to solve AI context window limitations when processing documentation. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#" class="text-purple-600 font-medium hover:underline">Read full FAQ</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Make your site AI-friendly</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Generate your llms.txt file and help AI systems better understand your content.</p> | |
| <button class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Generate now</button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-300 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-robot text-2xl text-purple-400"></i> | |
| <span class="text-xl font-bold text-white">llms-txt.io</span> | |
| </div> | |
| <p class="max-w-xs">The easiest way to create llms.txt files for your website.</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">What Are llms.txt Files?</a></li> | |
| <li><a href="#" class="hover:text-white">How to Create Your First llms.txt File</a></li> | |
| <li><a href="#" class="hover:text-white">How to Create an llms-full.txt File</a></li> | |
| <li><a href="#" class="hover:text-white">Do You Need Both llms.txt and llms-full.txt?</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4"> </h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Is llms.txt Only for Technical Documentation?</a></li> | |
| <li><a href="#" class="hover:text-white">Robots.txt vs. llms.txt</a></li> | |
| <li><a href="#" class="hover:text-white">7 Top Companies Using llms.txt</a></li> | |
| <li><a href="#" class="hover:text-white">How Do LLMs Use the llms.txt File?</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Navigation</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Login</a></li> | |
| <li><a href="#" class="hover:text-white">Sign up</a></li> | |
| <li><a href="#" class="hover:text-white">Blog</a></li> | |
| <li><a href="#" class="hover:text-white">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Contact</a></li> | |
| <li><a href="#" class="hover:text-white">Privacy policy</a></li> | |
| <li><a href="#" class="hover:text-white">Terms of use</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-sm"> | |
| <p>© 2023 llms-txt.io. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple FAQ toggle functionality | |
| document.querySelectorAll('#faq button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| if (content.style.display === 'none' || !content.style.display) { | |
| content.style.display = 'block'; | |
| icon.classList.remove('fa-chevron-down'); | |
| icon.classList.add('fa-chevron-up'); | |
| } else { | |
| content.style.display = 'none'; | |
| icon.classList.remove('fa-chevron-up'); | |
| icon.classList.add('fa-chevron-down'); | |
| } | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=likhonsheikh/llm-txt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |