# aeo.js — Answer Engine Optimization for the Modern Web - Complete Documentation This file contains all documentation concatenated into a single file for easy consumption by LLMs. > Make your website discoverable by ChatGPT, Claude, Perplexity & AI search engines. Auto-generates llms.txt, robots.txt, sitemap, JSON-LD structured data & more. ## Table of Contents This document includes all content from this project. Each section is separated by a horizontal rule (---) for easy parsing. --- # Audit & Citability URL: https://aeojs.org/features/audit > Audit your AEO setup and measure your site ## Audit & Citability ## Site Audit [Section titled “Site Audit”](#site-audit) The auditSite function checks your site for AEO best practices and returns a detailed report: - import { auditSite, formatAuditReport, getGrade } from 'aeo.js'; const result = await auditSite('https://mysite.com'); console.log(formatAuditReport(result)); console.log('Grade:', getGrade(result)); The audit checks for: Presence of robots.txt, llms.txt, llms-full.txt - Sitemap accessibility - Structured data (JSON-LD) - Open Graph meta tags - AI crawler accessibility You can also run it from the CLI: Terminal window npx aeo.js check ## Citability Score [Section titled “Citability Score”](#citability-score) Measure how likely AI engines are to cite your content: import { scorePageCitability, scoreSiteCitability, formatPageCitability } from 'aeo.js'; // Score a single page const pageScore = await scorePageCitability(url, html); console.log(formatPageCitability(pageScore)); // Score the whole site const siteScore = await scoreSiteCitability('https://mysite.com', pages); The citability score evaluates: - Content structure and headings - Factual density and specificity - Source attribution - Unique data and statistics - Clear definitions and explanations ## Reports [Section titled “Reports”](#reports) Generate a comprehensive AEO report: import { generateReport, formatReportMarkdown, formatReportJson } from 'aeo.js'; const report = await generateReport(config); // Get as markdown console.log(formatReportMarkdown(report)); // Get as JSON console.log(formatReportJson(report)); ## Platform Hints [Section titled “Platform Hints”](#platform-hints) Get platform-specific optimization suggestions: import { generatePlatformHints } from 'aeo.js'; const hints = generatePlatformHints('next'); // Returns hints specific to Next.js optimization [Previous Schema & Open Graph](/features/schema-og/) [Next Configuration](/reference/configuration/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # CLI URL: https://aeojs.org/features/cli > Run aeo.js from the command line without any framework integration. ## CLI ## Usage [Section titled “Usage”](#usage) Terminal window npx aeo.js <command> [options] [options]"> ## Commands [Section titled “Commands”](#commands) ### generate [Section titled “generate”](#generate) Generate all AEO files (robots.txt, llms.txt, sitemap.xml, etc.): Terminal window npx aeo.js generate npx aeo.js generate --url https://mysite.com --title "My Site" --out public ### init [Section titled “init”](#init) Create an aeo.config.ts configuration file in your project: Terminal window npx aeo.js init This generates a starter config with all options documented. ### check [Section titled “check”](#check) Validate your AEO setup and show what would be generated: Terminal window npx aeo.js check ## Options [Section titled “Options”](#options) Flag Description --out <dir> Output directory (default: auto-detected) --url <url> Site URL --title <title> Site title --no-widget Disable widget generation --help, -h Show help --version, -v Show version ## Configuration file [Section titled “Configuration file”](#configuration-file) The CLI looks for aeo.config.ts (or aeo.config.js) in your project root. Create one with npx aeo.js init: import { defineConfig } from 'aeo.js'; export default defineConfig({ title: 'My Site', url: 'https://mysite.com', description: 'A site optimized for AI discovery', outDir: 'public', }); See the full [Configuration reference](/reference/configuration/) for all options. [Previous Widget](/features/widget/) [Next Schema & Open Graph](/features/schema-og/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Generated Files URL: https://aeojs.org/features/generated-files > All the files aeo.js generates and what they ## Generated Files After building, aeo.js generates these files in your output directory: ## robots.txt [Section titled “robots.txt”](#robotstxt) AI-crawler-aware robots directives. Includes rules for all known AI crawlers (GPTBot, ClaudeBot, PerplexityBot, etc.) with sensible defaults. User-agent: * Allow: / User-agent: GPTBot Allow: / User-agent: ClaudeBot Allow: / ## llms.txt [Section titled “llms.txt”](#llmstxt) A concise, LLM-readable summary of your site. This is the first file AI crawlers look for — it tells them what your site is about and where to find content. # My Site A site optimized for AI discovery ## Pages - [Home](https://mysite.com/) - [About](https://mysite.com/about) - [Blog](https://mysite.com/blog) ## llms-full.txt [Section titled “llms-full.txt”](#llms-fulltxt) Full concatenated content of all pages in a single file. Useful for LLMs that want to ingest your entire site at once. ## sitemap.xml [Section titled “sitemap.xml”](#sitemapxml) Standard XML sitemap for search engines and AI crawlers. ## docs.json [Section titled “docs.json”](#docsjson) A structured documentation manifest: { "name": "My Site", "description": "A site optimized for AI discovery", "baseUrl": "https://mysite.com", "totalDocs": 5, "docs": [{ "title": "Home", "path": "/", "markdownUrl": "https://mysite.com/index.md", "htmlUrl": "https://mysite.com/", "content": "..." }] } ## ai-index.json [Section titled “ai-index.json”](#ai-indexjson) An AI-optimized content index designed for RAG (Retrieval-Augmented Generation) pipelines: [{ "id": "index", "url": "https://mysite.com/", "title": "Home", "content": "Full page content in markdown...", "description": "Page description", "keywords": ["keyword1", "keyword2"] }] ## Raw Markdown [Section titled “Raw Markdown”](#raw-markdown) One .md file per page, extracted from your rendered HTML: public/ index.md # Markdown for / about.md # Markdown for /about blog.md # Markdown for /blog ## Toggling generators [Section titled “Toggling generators”](#toggling-generators) You can enable or disable individual generators: { generators: { robotsTxt: true, llmsTxt: true, llmsFullTxt: true, rawMarkdown: true, manifest: true, sitemap: true, aiIndex: true, schema: true, } } [Previous Webpack](/frameworks/webpack/) [Next Widget](/features/widget/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Schema & Open Graph URL: https://aeojs.org/features/schema-og > Auto-generated JSON-LD structured data and Open Graph meta tags. ## Schema & Open Graph aeo.js can generate JSON-LD structured data and Open Graph meta tags for your pages. ## JSON-LD Schema [Section titled “JSON-LD Schema”](#json-ld-schema) Enable schema generation in your config: - { schema: { enabled: true, organization: { name: 'My Company', url: 'https://mysite.com', logo: 'https://mysite.com/logo.png', sameAs: ['https://twitter.com/mycompany', 'https://github.com/mycompany',], }, defaultType: 'WebPage', // or 'Article' }, } ** This generates <script type="application/ld+json"> blocks with: Organization** schema for your site - **WebPage** or **Article** schema for each page - Proper @context, @type, name, description, and url fields ## Open Graph tags [Section titled “Open Graph tags”](#open-graph-tags) Enable OG tag generation: { og: { enabled: true, image: 'https://mysite.com/og.png', twitterHandle: '@mycompany', type: 'website', // or 'article' }, } This generates meta tags like: <meta property="og:title" content="Page Title" /> <meta property="og:description" content="Page description" /> <meta property="og:image" content="https://mysite.com/og.png" /> <meta property="og:url" content="https://mysite.com/page" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@mycompany" /> "> ## Programmatic API [Section titled “Programmatic API”](#programmatic-api) import { generateSchema, generateSchemaObjects, generateJsonLdScript } from 'aeo.js'; import { generateOGTags, generateOGTagsHtml } from 'aeo.js'; // Get schema objects const schemas = generateSchemaObjects(config); // Get a <script> tag string const script = generateJsonLdScript(config); // Get OG meta tag objects const tags = generateOGTags(config, page); // Get OG meta tags as HTML string const html = generateOGTagsHtml(config, page); tag stringconst script = generateJsonLdScript(config);// Get OG meta tag objectsconst tags = generateOGTags(config, page);// Get OG meta tags as HTML stringconst html = generateOGTagsHtml(config, page);"> Tip Schema and OG generators work independently — you can enable one without the other. [Previous CLI](/features/cli/) [Next Audit & Citability](/features/audit/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Human/AI Widget URL: https://aeojs.org/features/widget > The drop-in toggle that shows how AI sees your pages. ## Human/AI Widget The Human/AI widget is a floating toggle that lets visitors switch between the normal page and its AI-readable markdown version. ## How it works [Section titled “How it works”](#how-it-works) When a visitor clicks **AI**, the widget: - Fetches the .md file for the current page - Falls back to extracting markdown from the live DOM if no .md exists - Displays the markdown in a slide-out panel - Offers copy-to-clipboard and download actions ## Automatic injection [Section titled “Automatic injection”](#automatic-injection) Framework plugins (Astro, Vite, Nuxt, Angular) inject the widget automatically. No extra code needed. ## Manual setup (Next.js / React) [Section titled “Manual setup (Next.js / React)”](#manual-setup-nextjs--react) For Next.js or other manual setups, create a client component: 'use client'; import { useEffect } from 'react'; export function AeoWidgetLoader() { useEffect(() => { import('aeo.js/widget').then(({ AeoWidget }) => { new AeoWidget({ config: { title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right' }, }, }); }); }, []); return null; } { import('aeo.js/widget').then(({ AeoWidget }) => { new AeoWidget({ config: { title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right' }, }, }); }); }, []); return null;}"> ## Framework components [Section titled “Framework components”](#framework-components) aeo.js ships React, Vue, and Svelte wrapper components: ### React [Section titled “React”](#react) import { AeoReactWidget } from 'aeo.js/react'; <AeoReactWidget config={{ title: 'My Site', url: 'https://mysite.com' }} /> "> ### Vue [Section titled “Vue”](#vue) <script setup> import { AeoVueWidget } from 'aeo.js/vue'; </script> <template> <AeoVueWidget :config="{ title: 'My Site', url: 'https://mysite.com' }" /> </template>  "> ## Configuration [Section titled “Configuration”](#configuration) widget: { enabled: true, position: 'bottom-right', // 'bottom-left' | 'top-right' | 'top-left' size: 'default', // 'small' | 'icon-only' humanLabel: 'Human', aiLabel: 'AI', showBadge: true, theme: { background: 'rgba(18, 18, 24, 0.9)', text: '#C0C0C5', accent: '#E8E8EA', badge: '#4ADE80', }, } ## Size variants [Section titled “Size variants”](#size-variants) Default Small Icon size: 'default' size: 'small' size: 'icon-only' Full labels with icons Compact — ~30% smaller Just icons, no labels Tip Set widget.enabled: false to disable the widget entirely while still generating AEO files. [Previous Generated Files](/features/generated-files/) [Next CLI](/features/cli/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Angular URL: https://aeojs.org/frameworks/angular > Use aeo.js with Angular. ## Angular ## Setup [Section titled “Setup”](#setup) - Install the package: Terminal window npm install aeo.js - Add a post-build step to your package.json: { "scripts": { "postbuild": "node -e \"import('aeo.js/angular').then(m => m.postBuild({ title: 'My App', url: 'https://myapp.com' }))\"" } } m.postBuild({ title: 'My App', url: 'https://myapp.com' }))\"" }}"> - Build your app: Terminal window npm run build ## How it works [Section titled “How it works”](#how-it-works) The Angular plugin: - Reads angular.json to auto-detect the output directory (dist/<project>/browser/) - Scans route config files (*.routes.ts) and component directories for routes - Scans pre-rendered HTML from the build output for full page content - Injects the widget into index.html automatically ## Programmatic usage [Section titled “Programmatic usage”](#programmatic-usage) You can also generate AEO files from source routes without building: import { generate } from 'aeo.js/angular'; await generate({ title: 'My App', url: 'https://myapp.com' }); Note Angular SSR (with @angular/ssr) is supported. The plugin will scan pre-rendered HTML for content extraction. ## Configuration [Section titled “Configuration”](#configuration) Pass any [AeoConfig](/reference/configuration/) options to postBuild or generate: import { postBuild } from 'aeo.js/angular'; await postBuild({ title: 'My App', url: 'https://myapp.com', generators: { robotsTxt: true, llmsTxt: true, schema: true, }, }); [Previous Nuxt](/frameworks/nuxt/) [Next Webpack](/frameworks/webpack/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Astro URL: https://aeojs.org/frameworks/astro > Use aeo.js with Astro. ## Astro ## Setup [Section titled “Setup”](#setup) - Install the package: Terminal window npm install aeo.js - Add the integration to your Astro config: astro.config.mjs import { defineConfig } from 'astro/config'; import { aeoAstroIntegration } from 'aeo.js/astro'; export default defineConfig({ site: 'https://mysite.com', integrations: [aeoAstroIntegration({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }),], }); - Build your site: Terminal window npm run build ## How it works [Section titled “How it works”](#how-it-works) The Astro integration: - Hooks into the Astro build pipeline via astro:build:done - Scans all rendered HTML pages for content extraction - Generates all AEO files in your output directory - Automatically injects the Human/AI widget - Persists the widget across View Transitions ## Configuration [Section titled “Configuration”](#configuration) Pass any [AeoConfig](/reference/configuration/) options to the integration: aeoAstroIntegration({ title: 'My Site', url: 'https://mysite.com', generators: { robotsTxt: true, llmsTxt: true, sitemap: false, // Astro has its own sitemap }, widget: { position: 'bottom-left', theme: { accent: '#6366f1', }, }, }); [Previous Quick Start](/getting-started/quick-start/) [Next Next.js](/frameworks/nextjs/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Next.js URL: https://aeojs.org/frameworks/nextjs > Use aeo.js with Next.js. ## Next.js ## Setup [Section titled “Setup”](#setup) - Install the package: Terminal window npm install aeo.js - Wrap your Next.js config with withAeo: next.config.mjs import { withAeo } from 'aeo.js/next'; export default withAeo({ aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); - Add the post-build step to your package.json: { "scripts": { "postbuild": "node -e \"import('aeo.js/next').then(m => m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\"" } } m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\"" }}"> Tip The postbuild step is needed because Next.js pre-renders pages during build. The post-build step scans the rendered HTML to extract full page content. ## Widget [Section titled “Widget”](#widget) For Next.js, add the widget manually as a client component: // app/layout.tsx (or any client component) 'use client'; import { useEffect } from 'react'; export function AeoWidgetLoader() { useEffect(() => { import('aeo.js/widget').then(({ AeoWidget }) => { new AeoWidget({ config: { title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right' }, }, }); }); }, []); return null; } { import('aeo.js/widget').then(({ AeoWidget }) => { new AeoWidget({ config: { title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right' }, }, }); }); }, []); return null;}"> ## Configuration [Section titled “Configuration”](#configuration) Pass any [AeoConfig](/reference/configuration/) options in the aeo key: export default withAeo({ aeo: { title: 'My Site', url: 'https://mysite.com', generators: { robotsTxt: true, llmsTxt: true, schema: true, }, widget: { enabled: true, position: 'bottom-right', }, }, }); [Previous Astro](/frameworks/astro/) [Next Vite](/frameworks/vite/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Nuxt URL: https://aeojs.org/frameworks/nuxt > Use aeo.js with Nuxt 3. ## Nuxt ## Setup [Section titled “Setup”](#setup) - Install the package: Terminal window npm install aeo.js - Add the module to your Nuxt config: nuxt.config.ts export default defineNuxtConfig({ modules: ['aeo.js/nuxt'], aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); ## How it works [Section titled “How it works”](#how-it-works) The Nuxt module: - Scans your pages/ directory for routes - Generates AEO files during dev and production builds - Scans pre-rendered HTML from .output/public/ for full page content - Injects the widget as a client-side Nuxt plugin - Adds <link> and <meta> tags for AEO discoverability ## Configuration [Section titled “Configuration”](#configuration) Pass any [AeoConfig](/reference/configuration/) options in the aeo key: export default defineNuxtConfig({ modules: ['aeo.js/nuxt'], aeo: { title: 'My Site', url: 'https://mysite.com', generators: { robotsTxt: true, llmsTxt: true, rawMarkdown: true, }, widget: { enabled: true, position: 'bottom-left', }, }, }); [Previous Vite](/frameworks/vite/) [Next Angular](/frameworks/angular/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Vite URL: https://aeojs.org/frameworks/vite > Use aeo.js with Vite (React, Vue, Svelte, etc.). ## Vite ## Setup [Section titled “Setup”](#setup) - Install the package: Terminal window npm install aeo.js - Add the plugin to your Vite config: vite.config.ts import { defineConfig } from 'vite'; import { aeoVitePlugin } from 'aeo.js/vite'; export default defineConfig({ plugins: [aeoVitePlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }),], }); ## How it works [Section titled “How it works”](#how-it-works) The Vite plugin: - Generates AEO files on both vite dev and vite build - Injects the Human/AI widget automatically via HTML transform - Serves dynamic .md files during development (extracts content from your running app) - Detects SPA shells and falls back to client-side DOM extraction - Works with React, Vue, Svelte, or any Vite-based framework ## Configuration [Section titled “Configuration”](#configuration) Pass any [AeoConfig](/reference/configuration/) options to the plugin: aeoVitePlugin({ title: 'My Site', url: 'https://mysite.com', widget: { position: 'top-right', theme: { background: 'rgba(0, 0, 0, 0.85)', accent: '#f59e0b', }, }, }); [Previous Next.js](/frameworks/nextjs/) [Next Nuxt](/frameworks/nuxt/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Webpack URL: https://aeojs.org/frameworks/webpack > Use aeo.js with Webpack. ## Webpack ## Setup [Section titled “Setup”](#setup) - Install the package: Terminal window npm install aeo.js - Add the plugin to your Webpack config: webpack.config.js const { AeoWebpackPlugin } = require('aeo.js/webpack'); module.exports = { plugins: [new AeoWebpackPlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }),], }; ## How it works [Section titled “How it works”](#how-it-works) The Webpack plugin: - Runs during the emit phase of the Webpack compilation - Generates all AEO files in your output directory - Injects the widget into your HTML entry point ## Configuration [Section titled “Configuration”](#configuration) Pass any [AeoConfig](/reference/configuration/) options to the plugin: new AeoWebpackPlugin({ title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right', }, }); [Previous Angular](/frameworks/angular/) [Next Generated Files](/features/generated-files/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Installation URL: https://aeojs.org/getting-started/installation > Install aeo.js in your project. ## Installation ## Install the package [Section titled “Install the package”](#install-the-package) - [npm](#tab-panel-0) - [pnpm](#tab-panel-1) - [yarn](#tab-panel-2) - Terminal window npm install aeo.js ** Terminal window pnpm add aeo.js Terminal window yarn add aeo.js ## Or use the CLI directly [Section titled “Or use the CLI directly”](#or-use-the-cli-directly) No installation needed — run it with npx: Terminal window npx aeo.js generate ## Requirements [Section titled “Requirements”](#requirements) Node.js** 18 or later - A framework with a build step that outputs HTML (or use the CLI for any static site) ## Next steps [Section titled “Next steps”](#next-steps) Head to [Quick Start](/getting-started/quick-start/) to add aeo.js to your project, or jump to your framework’s guide: - [Astro](/frameworks/astro/) - [Next.js](/frameworks/nextjs/) - [Vite](/frameworks/vite/) - [Nuxt](/frameworks/nuxt/) - [Angular](/frameworks/angular/) - [Webpack](/frameworks/webpack/) [Previous Introduction](/getting-started/introduction/) [Next Quick Start](/getting-started/quick-start/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Introduction URL: https://aeojs.org/getting-started/introduction > What is aeo.js and why you need Answer Engine Optimization. ## Introduction ## What is Answer Engine Optimization? [Section titled “What is Answer Engine Optimization?”](#what-is-answer-engine-optimization) Answer Engine Optimization (AEO) is the practice of making your website discoverable and citable by AI-powered answer engines like **ChatGPT**, **Claude**, **Perplexity**, and **SearchGPT**. Unlike traditional SEO which focuses on search engine result pages (SERPs), AEO ensures your content is understood and referenced by Large Language Models (LLMs) when they generate answers. ## Why aeo.js? [Section titled “Why aeo.js?”](#why-aeojs) AI crawlers and LLMs look for specific files and formats that most websites don’t provide: - **llms.txt** — A concise summary of your site written for LLMs - **llms-full.txt** — Full content concatenated for deep ingestion - **ai-index.json** — Structured content optimized for RAG pipelines - **docs.json** — Documentation manifest for content discovery - **Raw Markdown** — Per-page .md files for clean content extraction **aeo.js** generates all of these automatically from your existing pages — no manual work required. ## How it works [Section titled “How it works”](#how-it-works) - **Install** the package and add the plugin for your framework - **Build** your site as usual - **aeo.js** scans your output, extracts content, and generates all AEO files - The optional **widget** lets visitors toggle between human and AI views of your pages ## Supported Frameworks [Section titled “Supported Frameworks”](#supported-frameworks) Framework Import Astro aeo.js/astro Next.js aeo.js/next Vite (React, Vue, Svelte) aeo.js/vite Nuxt aeo.js/nuxt Angular aeo.js/angular Webpack aeo.js/webpack Any (CLI) npx aeo.js generate [Next Installation](/getting-started/installation/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Quick Start URL: https://aeojs.org/getting-started/quick-start > Get aeo.js running in under 2 minutes. ## Quick Start The fastest way to add AEO to your site depends on your framework. ## Astro [Section titled “Astro”](#astro) - Install the package: Terminal window npm install aeo.js - Add the integration to your Astro config: astro.config.mjs import { defineConfig } from 'astro/config'; import { aeoAstroIntegration } from 'aeo.js/astro'; export default defineConfig({ site: 'https://mysite.com', integrations: [aeoAstroIntegration({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }),], }); - Build your site — all AEO files are generated automatically. ## Next.js [Section titled “Next.js”](#nextjs) - Install the package: Terminal window npm install aeo.js - Wrap your Next.js config: next.config.mjs import { withAeo } from 'aeo.js/next'; export default withAeo({ aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); - Add the post-build step to package.json: { "scripts": { "postbuild": "node -e \"import('aeo.js/next').then(m => m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\"" } } m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\"" }}"> ## Vite [Section titled “Vite”](#vite) - Install the package: Terminal window npm install aeo.js - Add the plugin to your Vite config: vite.config.ts import { defineConfig } from 'vite'; import { aeoVitePlugin } from 'aeo.js/vite'; export default defineConfig({ plugins: [aeoVitePlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }),], }); ## CLI (any site) [Section titled “CLI (any site)”](#cli-any-site) No framework integration needed: Terminal window npx aeo.js generate --url https://mysite.com --title "My Site" See [CLI docs](/features/cli/) for all commands and options. [Previous Installation](/getting-started/installation/) [Next Astro](/frameworks/astro/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # aeo.js URL: https://aeojs.org > Answer Engine Optimization for the modern web. Make your site discoverable by AI crawlers and LLMs. ## aeo.js [Get Started](/getting-started/introduction/) **Install Audit Generate Config $ ▌ added 1 package in 2s Ready — run npx aeo.js init to get started $ ▌ GEO Readiness Score: 92/100 (Excellent) ══════════════════════════════════════ AI Access: 20/20 Content Structure: 20/20 Schema Presence: 20/20 Meta Quality: 16/20 Citability: 16/20 $ ▌ [aeo.js] Generating AEO files... robots.txt — AI crawler directives llms.txt — LLM summary llms-full.txt — full content for LLMs sitemap.xml — sitemap schema.json — JSON-LD structured data ai-index.json — AI content index Generated 6 files in 42ms // aeo.config.ts import { defineConfig } from 'aeo.js' export default defineConfig({ title: 'My Site', url: 'https://mysite.com', schema: { organization: { name: 'My Co' } }, widget: { size: 'small' }, }); - [Quick Start](#quick-start) - [What is AEO?](#what-is-aeo) - [Why AEO](#why-aeo-matters) - [Widget](#widget) - [Configuration](#configuration) - [Generated Files](#generated-files) - [Checker](#checker) ## Quick Start [Section titled “Quick Start”](#quick-start) - Terminal window npm install aeo.js [Astro](#tab-panel-3) - [Next.js](#tab-panel-4) - [Vite](#tab-panel-5) - [Nuxt](#tab-panel-6) - [Angular](#tab-panel-7) - [Webpack](#tab-panel-8) - [CLI](#tab-panel-9) astro.config.mjs import { defineConfig } from 'astro/config'; import { aeoAstroIntegration } from 'aeo.js/astro'; export default defineConfig({ site: 'https://mysite.com', integrations: [aeoAstroIntegration({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }),], }); next.config.mjs import { withAeo } from 'aeo.js/next'; export default withAeo({ aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); Add the post-build step to package.json: { "scripts": { "postbuild": "node -e \"import('aeo.js/next').then(m => m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\"" } } m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\"" }}"> vite.config.ts import { defineConfig } from 'vite'; import { aeoVitePlugin } from 'aeo.js/vite'; export default defineConfig({ plugins: [aeoVitePlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }),], }); nuxt.config.ts export default defineNuxtConfig({ modules: ['aeo.js/nuxt'], aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); Add a post-build step to package.json: { "scripts": { "postbuild": "node -e \"import('aeo.js/angular').then(m => m.postBuild({ title: 'My App', url: 'https://myapp.com' }))\"" } } m.postBuild({ title: 'My App', url: 'https://myapp.com' }))\"" }}"> Or generate programmatically: import { generate } from 'aeo.js/angular'; await generate({ title: 'My App', url: 'https://myapp.com' }); webpack.config.js const { AeoWebpackPlugin } = require('aeo.js/webpack'); module.exports = { plugins: [new AeoWebpackPlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }),], }; No framework needed — run standalone: Terminal window # Generate all AEO files npx aeo.js generate --url https://mysite.com --title "My Site" # Scaffold a config file npx aeo.js init # Check your setup npx aeo.js check ## What is AEO? [Section titled “What is AEO?”](#what-is-aeo) Answer Engine Optimization (AEO) is the practice of making your website discoverable and citable by AI-powered answer engines like ChatGPT, Claude, Perplexity, and SearchGPT. aeo.js** auto-generates the files these engines look for and provides a drop-in widget that shows visitors how your site appears to AI. First-class support for Astro, Next.js, Vite, Nuxt, Angular, and Webpack — or run standalone via CLI. ## Why AEO matters [Section titled “Why AEO matters”](#why-aeo-matters) 58% of searches end without a click — AI gives the answer directly 40% of Gen Z prefer AI assistants over traditional search engines 97% of sites have no llms.txt or structured data for AI crawlers 1 min to set up aeo.js generates robots.txt, llms.txt, schema & more If your site isn’t optimized for AI engines, you’re invisible to a growing share of users who never open a search results page. AEO is the new SEO. ## Widget [Section titled “Widget”](#widget) The Human/AI widget lets visitors toggle between the normal page and its AI-readable markdown version. Framework plugins inject it automatically — for Next.js or manual setups: 'use client'; import { useEffect } from 'react'; export function AeoWidgetLoader() { useEffect(() => { import('aeo.js/widget').then(({ AeoWidget }) => { new AeoWidget({ config: { title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right' }, }, }); }); }, []); return null; } { import('aeo.js/widget').then(({ AeoWidget }) => { new AeoWidget({ config: { title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right' }, }, }); }); }, []); return null;}"> React and Vue wrapper components are also available: - [React](#tab-panel-10) - [Vue](#tab-panel-11) import { AeoReactWidget } from 'aeo.js/react'; <AeoReactWidget config={{ title: 'My Site', url: 'https://mysite.com' }} /> "> <script setup> import { AeoVueWidget } from 'aeo.js/vue'; </script> <template> <AeoVueWidget :config="{ title: 'My Site', url: 'https://mysite.com' }" /> </template>  "> ## Configuration [Section titled “Configuration”](#configuration) All frameworks use the same config shape — [see full reference](/reference/configuration/): import { defineConfig } from 'aeo.js'; export default defineConfig({ title: 'My Site', url: 'https://mysite.com', description: 'A site optimized for AI discovery', generators: { robotsTxt: true, llmsTxt: true, llmsFullTxt: true, rawMarkdown: true, sitemap: true, aiIndex: true, schema: true, }, schema: { enabled: true, organization: { name: 'My Company', url: 'https://mysite.com' }, defaultType: 'WebPage', }, og: { enabled: true, image: 'https://mysite.com/og.png', twitterHandle: '@mycompany', }, widget: { enabled: true, position: 'bottom-right', theme: { accent: '#4ADE80', badge: '#4ADE80' }, }, }); ## Generated Files [Section titled “Generated Files”](#generated-files) After building, your output directory contains: public/ ├── robots.txt # AI-crawler directives ├── llms.txt # Short LLM-readable summary ├── llms-full.txt # Full content for LLMs ├── sitemap.xml # Standard sitemap ├── docs.json # Documentation manifest ├── ai-index.json # AI content index ├── index.md # Markdown for / └── about.md # Markdown for /about ## Checker [Section titled “Checker”](#checker) Scan Free — no signup required. Powered by [AEO Checker](https://check.aeojs.org) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # API Reference URL: https://aeojs.org/reference/api > Programmatic API for aeo.js. ## API Reference ## Core [Section titled “Core”](#core) ### defineConfig(config) [Section titled “defineConfig(config)”](#defineconfigconfig) Type-safe configuration helper: import { defineConfig } from 'aeo.js'; export default defineConfig({ title: 'My Site', url: 'https://mysite.com', }); ** ### generateAll(config) [Section titled “generateAll(config)”](#generateallconfig) Generate all AEO files programmatically: import { generateAll } from 'aeo.js'; await generateAll({ title: 'My Site', url: 'https://mysite.com', outDir: 'dist', }); ### resolveConfig(config) [Section titled “resolveConfig(config)”](#resolveconfigconfig) Resolve a partial config into a fully resolved config with defaults: import { resolveConfig } from 'aeo.js'; const resolved = resolveConfig({ title: 'My Site' }); // All fields now have defaults ### validateConfig(config) [Section titled “validateConfig(config)”](#validateconfigconfig) Validate a config object and return any errors: import { validateConfig } from 'aeo.js'; const errors = validateConfig(config); ### detectFramework() [Section titled “detectFramework()”](#detectframework) Auto-detect the framework used in the current project: import { detectFramework } from 'aeo.js'; const info = detectFramework(); // { framework: 'next', contentDir: 'pages', outDir: '.next' } ## HTML Extraction [Section titled “HTML Extraction”](#html-extraction) ### htmlToMarkdown(html) [Section titled “htmlToMarkdown(html)”](#htmltomarkdownhtml) Convert HTML to clean markdown: import { htmlToMarkdown } from 'aeo.js'; const md = htmlToMarkdown('<h1>Hello</h1><p>World</p>'); // '# Hello\n\nWorld' ### extractTextFromHtml(html) [Section titled “extractTextFromHtml(html)”](#extracttextfromhtmlhtml) Extract plain text from HTML: import { extractTextFromHtml } from 'aeo.js'; const text = extractTextFromHtml('<p>Hello <strong>world</strong></p>'); world** ');"> ### extractTitle(html) / extractDescription(html) [Section titled “extractTitle(html) / extractDescription(html)”](#extracttitlehtml--extractdescriptionhtml) Extract the title or meta description from an HTML document. ### extractJsonLd(html) [Section titled “extractJsonLd(html)”](#extractjsonldhtml) Extract JSON-LD structured data from an HTML document. ## Schema [Section titled “Schema”](#schema) ### generateSchemaObjects(config) [Section titled “generateSchemaObjects(config)”](#generateschemaobjectsconfig) Generate JSON-LD schema objects: import { generateSchemaObjects } from 'aeo.js'; const schemas = generateSchemaObjects(resolvedConfig); ### generateJsonLdScript(config) [Section titled “generateJsonLdScript(config)”](#generatejsonldscriptconfig) Generate a <script type="application/ld+json"> tag: import { generateJsonLdScript } from 'aeo.js'; const script = generateJsonLdScript(resolvedConfig); ### generateSiteSchemas(config) / generatePageSchemas(config, page) [Section titled “generateSiteSchemas(config) / generatePageSchemas(config, page)”](#generatesiteschemasconfig--generatepageschemasconfig-page) Generate schemas for the site or individual pages. ## Open Graph [Section titled “Open Graph”](#open-graph) ### generateOGTags(config, page) [Section titled “generateOGTags(config, page)”](#generateogtagsconfig-page) Returns an array of MetaTag objects: import { generateOGTags } from 'aeo.js'; const tags = generateOGTags(config, { pathname: '/', title: 'Home' }); // [{ property: 'og:title', content: 'Home' }, ...] ### generateOGTagsHtml(config, page) [Section titled “generateOGTagsHtml(config, page)”](#generateogtagshtmlconfig-page) Returns OG tags as an HTML string. ## Audit [Section titled “Audit”](#audit) ### auditSite(url) [Section titled “auditSite(url)”](#auditsiteurl) Audit a site for AEO best practices: import { auditSite, formatAuditReport, getGrade } from 'aeo.js'; const result = await auditSite('https://mysite.com'); console.log(formatAuditReport(result)); console.log(getGrade(result)); // 'A', 'B', 'C', etc. ## Citability [Section titled “Citability”](#citability) ### scorePageCitability(url, html) [Section titled “scorePageCitability(url, html)”](#scorepagecitabilityurl-html) Score how likely a page is to be cited by AI: import { scorePageCitability, formatPageCitability } from 'aeo.js'; const score = await scorePageCitability(url, html); console.log(formatPageCitability(score)); ### scoreSiteCitability(url, pages) [Section titled “scoreSiteCitability(url, pages)”](#scoresitecitabilityurl-pages) Score citability across your entire site. ## Reports [Section titled “Reports”](#reports) ### generateReport(config) [Section titled “generateReport(config)”](#generatereportconfig) Generate a comprehensive AEO report: import { generateReport, formatReportMarkdown } from 'aeo.js'; const report = await generateReport(config); console.log(formatReportMarkdown(report)); ## Types [Section titled “Types”](#types) All types are exported from the main entry: import type { AeoConfig, ResolvedAeoConfig, PageEntry, DocEntry, AeoManifest, MarkdownFile, ManifestEntry, AIIndexEntry, FrameworkType, FrameworkInfo, AuditResult, AuditCategory, AuditIssue, MetaTag, PageCitabilityResult, SiteCitabilityResult, CitabilityDimension, ContentHint, AeoReport, PlatformHint, } from 'aeo.js'; [Previous Configuration](/reference/configuration/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Configuration URL: https://aeojs.org/reference/configuration > Full configuration reference for aeo.js. ## Configuration All framework plugins and the CLI accept the same AeoConfig object. ## Full example [Section titled “Full example”](#full-example) import { defineConfig } from 'aeo.js'; export default defineConfig({ // Required title: 'My Site', url: 'https://mysite.com', // Optional description: 'A description of your site', contentDir: 'docs', // Directory with handwritten .md files outDir: 'public', // Output directory for generated files // Toggle individual generators generators: { robotsTxt: true, llmsTxt: true, llmsFullTxt: true, rawMarkdown: true, manifest: true, sitemap: true, aiIndex: true, schema: true, }, // Customize robots.txt robots: { allow: ['/'], disallow: ['/admin'], crawlDelay: 0, sitemap: 'https://mysite.com/sitemap.xml', }, // JSON-LD structured data schema: { enabled: true, organization: { name: 'My Company', url: 'https://mysite.com', logo: 'https://mysite.com/logo.png', sameAs: ['https://twitter.com/mycompany'], }, defaultType: 'WebPage', }, // Open Graph meta tags og: { enabled: true, image: 'https://mysite.com/og.png', twitterHandle: '@mycompany', type: 'website', }, // Widget configuration widget: { enabled: true, position: 'bottom-right', humanLabel: 'Human', aiLabel: 'AI', showBadge: true, theme: { background: 'rgba(18, 18, 24, 0.9)', text: '#C0C0C5', accent: '#E8E8EA', badge: '#4ADE80', }, }, }); ## Options reference [Section titled “Options reference”](#options-reference) ### Top-level [Section titled “Top-level”](#top-level) Option Type Default Description title string '' Site title description string '' Site description url string '' Site URL (used for absolute URLs in generated files) contentDir string 'docs' Directory with handwritten markdown files outDir string auto-detected Output directory for generated files pages PageEntry[] [] Manually specify pages to include ### generators [Section titled “generators”](#generators) Option Type Default Description robotsTxt boolean true Generate robots.txt llmsTxt boolean true Generate llms.txt llmsFullTxt boolean true Generate llms-full.txt rawMarkdown boolean true Generate per-page .md files manifest boolean true Generate docs.json sitemap boolean true Generate sitemap.xml aiIndex boolean true Generate ai-index.json schema boolean false Generate JSON-LD structured data ### robots [Section titled “robots”](#robots) Option Type Default Description allow string[] ['/'] Allowed paths disallow string[] [] Disallowed paths crawlDelay number 0 Crawl delay in seconds sitemap string auto Sitemap URL ### schema [Section titled “schema”](#schema) Option Type Default Description enabled boolean false Enable schema generation organization.name string '' Organization name organization.url string '' Organization URL organization.logo string '' Organization logo URL organization.sameAs string[] [] Social profile URLs defaultType 'Article' | 'WebPage' 'WebPage' Default schema type for pages ### og [Section titled “og”](#og) Option Type Default Description enabled boolean false Enable OG tag generation image string '' Default OG image URL twitterHandle string '' Twitter handle (e.g. @company) type 'website' | 'article' 'website' Default OG type ### widget [Section titled “widget”](#widget) Option Type Default Description enabled boolean true Enable the widget position string 'bottom-right' Widget position humanLabel string 'Human' Label for human view aiLabel string 'AI' Label for AI view showBadge boolean true Show the AEO badge theme.background string 'rgba(18, 18, 24, 0.9)' Widget background theme.text string '#C0C0C5' Text color theme.accent string '#E8E8EA' Accent color theme.badge string '#4ADE80' Badge color [Previous Audit & Citability](/features/audit/) [Next API](/reference/api/) Built by [rubenmarcus](https://github.com/rubenmarcus) & [multivmlabs](https://github.com/multivmlabs) --- # Audit & Citability Source: docs/features/audit.mdx > Audit your AEO setup and measure your site's citability score. ### Site Audit The `auditSite` function checks your site for AEO best practices and returns a detailed report: ```ts import { auditSite, formatAuditReport, getGrade } from 'aeo.js'; const result = await auditSite('https://mysite.com'); console.log(formatAuditReport(result)); console.log('Grade:', getGrade(result)); ``` The audit checks for: - Presence of `robots.txt`, `llms.txt`, `llms-full.txt` - Sitemap accessibility - Structured data (JSON-LD) - Open Graph meta tags - AI crawler accessibility You can also run it from the CLI: ```bash npx aeo.js check ``` ### Citability Score Measure how likely AI engines are to cite your content: ```ts import { scorePageCitability, scoreSiteCitability, formatPageCitability } from 'aeo.js'; // Score a single page const pageScore = await scorePageCitability(url, html); console.log(formatPageCitability(pageScore)); // Score the whole site const siteScore = await scoreSiteCitability('https://mysite.com', pages); ``` The citability score evaluates: - Content structure and headings - Factual density and specificity - Source attribution - Unique data and statistics - Clear definitions and explanations ### Reports Generate a comprehensive AEO report: ```ts import { generateReport, formatReportMarkdown, formatReportJson } from 'aeo.js'; const report = await generateReport(config); // Get as markdown console.log(formatReportMarkdown(report)); // Get as JSON console.log(formatReportJson(report)); ``` ### Platform Hints Get platform-specific optimization suggestions: ```ts import { generatePlatformHints } from 'aeo.js'; const hints = generatePlatformHints('next'); // Returns hints specific to Next.js optimization ``` --- # CLI Source: docs/features/cli.mdx > Run aeo.js from the command line without any framework integration. ### Usage ```bash npx aeo.js [options] ``` ### Commands #### `generate` Generate all AEO files (robots.txt, llms.txt, sitemap.xml, etc.): ```bash npx aeo.js generate npx aeo.js generate --url https://mysite.com --title "My Site" --out public ``` #### `init` Create an `aeo.config.ts` configuration file in your project: ```bash npx aeo.js init ``` This generates a starter config with all options documented. #### `check` Validate your AEO setup and show what would be generated: ```bash npx aeo.js check ``` ### Options | Flag | Description | |------|-------------| | `--out ` | Output directory (default: auto-detected) | | `--url ` | Site URL | | `--title ` | Site title | | `--no-widget` | Disable widget generation | | `--help`, `-h` | Show help | | `--version`, `-v` | Show version | ### Configuration file The CLI looks for `aeo.config.ts` (or `aeo.config.js`) in your project root. Create one with `npx aeo.js init`: ```ts import { defineConfig } from 'aeo.js'; export default defineConfig({ title: 'My Site', url: 'https://mysite.com', description: 'A site optimized for AI discovery', outDir: 'public', }); ``` See the full [Configuration reference](/reference/configuration/) for all options. --- # Generated Files Source: docs/features/generated-files.mdx > All the files aeo.js generates and what they're for. After building, aeo.js generates these files in your output directory: ### robots.txt AI-crawler-aware robots directives. Includes rules for all known AI crawlers (GPTBot, ClaudeBot, PerplexityBot, etc.) with sensible defaults. ```txt User-agent: * Allow: / User-agent: GPTBot Allow: / User-agent: ClaudeBot Allow: / ``` ### llms.txt A concise, LLM-readable summary of your site. This is the first file AI crawlers look for — it tells them what your site is about and where to find content. ```txt ## My Site A site optimized for AI discovery ### Pages - [Home](https://mysite.com/) - [About](https://mysite.com/about) - [Blog](https://mysite.com/blog) ``` ### llms-full.txt Full concatenated content of all pages in a single file. Useful for LLMs that want to ingest your entire site at once. ### sitemap.xml Standard XML sitemap for search engines and AI crawlers. ### docs.json A structured documentation manifest: ```json { "name": "My Site", "description": "A site optimized for AI discovery", "baseUrl": "https://mysite.com", "totalDocs": 5, "docs": [ { "title": "Home", "path": "/", "markdownUrl": "https://mysite.com/index.md", "htmlUrl": "https://mysite.com/", "content": "..." } ] } ``` ### ai-index.json An AI-optimized content index designed for RAG (Retrieval-Augmented Generation) pipelines: ```json [ { "id": "index", "url": "https://mysite.com/", "title": "Home", "content": "Full page content in markdown...", "description": "Page description", "keywords": ["keyword1", "keyword2"] } ] ``` ### Raw Markdown One `.md` file per page, extracted from your rendered HTML: ``` public/ index.md # Markdown for / about.md # Markdown for /about blog.md # Markdown for /blog ``` ### Toggling generators You can enable or disable individual generators: ```js { generators: { robotsTxt: true, llmsTxt: true, llmsFullTxt: true, rawMarkdown: true, manifest: true, sitemap: true, aiIndex: true, schema: true, } } ``` --- # Schema & Open Graph Source: docs/features/schema-og.mdx > Auto-generated JSON-LD structured data and Open Graph meta tags. import { Aside } from '@astrojs/starlight/components'; aeo.js can generate JSON-LD structured data and Open Graph meta tags for your pages. ### JSON-LD Schema Enable schema generation in your config: ```js { schema: { enabled: true, organization: { name: 'My Company', url: 'https://mysite.com', logo: 'https://mysite.com/logo.png', sameAs: [ 'https://twitter.com/mycompany', 'https://github.com/mycompany', ], }, defaultType: 'WebPage', // or 'Article' }, } ``` This generates `<script type="application/ld+json">` blocks with: - **Organization** schema for your site - **WebPage** or **Article** schema for each page - Proper `@context`, `@type`, `name`, `description`, and `url` fields ### Open Graph tags Enable OG tag generation: ```js { og: { enabled: true, image: 'https://mysite.com/og.png', twitterHandle: '@mycompany', type: 'website', // or 'article' }, } ``` This generates meta tags like: ```html <meta property="og:title" content="Page Title" /> <meta property="og:description" content="Page description" /> <meta property="og:image" content="https://mysite.com/og.png" /> <meta property="og:url" content="https://mysite.com/page" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@mycompany" /> ``` ### Programmatic API ```ts import { generateSchema, generateSchemaObjects, generateJsonLdScript } from 'aeo.js'; import { generateOGTags, generateOGTagsHtml } from 'aeo.js'; // Get schema objects const schemas = generateSchemaObjects(config); // Get a <script> tag string const script = generateJsonLdScript(config); // Get OG meta tag objects const tags = generateOGTags(config, page); // Get OG meta tags as HTML string const html = generateOGTagsHtml(config, page); ``` <Aside type="tip"> Schema and OG generators work independently — you can enable one without the other. </Aside> --- # Human/AI Widget Source: docs/features/widget.mdx > The drop-in toggle that shows how AI sees your pages. import { Aside } from '@astrojs/starlight/components'; The Human/AI widget is a floating toggle that lets visitors switch between the normal page and its AI-readable markdown version. ### How it works When a visitor clicks **AI**, the widget: 1. Fetches the `.md` file for the current page 2. Falls back to extracting markdown from the live DOM if no `.md` exists 3. Displays the markdown in a slide-out panel 4. Offers copy-to-clipboard and download actions ### Automatic injection Framework plugins (Astro, Vite, Nuxt, Angular) inject the widget automatically. No extra code needed. ### Manual setup (Next.js / React) For Next.js or other manual setups, create a client component: ```tsx 'use client'; import { useEffect } from 'react'; export function AeoWidgetLoader() { useEffect(() => { import('aeo.js/widget').then(({ AeoWidget }) => { new AeoWidget({ config: { title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right' }, }, }); }); }, []); return null; } ``` ### Framework components aeo.js ships React, Vue, and Svelte wrapper components: #### React ```tsx import { AeoReactWidget } from 'aeo.js/react'; <AeoReactWidget config={{ title: 'My Site', url: 'https://mysite.com' }} /> ``` #### Vue ```vue <script setup> import { AeoVueWidget } from 'aeo.js/vue'; </script> <template> <AeoVueWidget :config="{ title: 'My Site', url: 'https://mysite.com' }" /> </template> ``` ### Configuration ```js widget: { enabled: true, position: 'bottom-right', // 'bottom-left' | 'top-right' | 'top-left' size: 'default', // 'small' | 'icon-only' humanLabel: 'Human', aiLabel: 'AI', showBadge: true, theme: { background: 'rgba(18, 18, 24, 0.9)', text: '#C0C0C5', accent: '#E8E8EA', badge: '#4ADE80', }, } ``` ### Size variants | Default | Small | Icon | |---------|-------|------| | ![Default widget](/widget-default.gif) | ![Small widget](/widget-small.gif) | ![Icon widget](/widget-icon.gif) | | `size: 'default'` | `size: 'small'` | `size: 'icon-only'` | | Full labels with icons | Compact — ~30% smaller | Just icons, no labels | <Aside type="tip"> Set `widget.enabled: false` to disable the widget entirely while still generating AEO files. </Aside> --- # Angular Source: docs/frameworks/angular.mdx > Use aeo.js with Angular. import { Steps, Aside } from '@astrojs/starlight/components'; ### Setup <Steps> 1. Install the package: ```bash npm install aeo.js ``` 2. Add a post-build step to your `package.json`: ```json { "scripts": { "postbuild": "node -e \"import('aeo.js/angular').then(m => m.postBuild({ title: 'My App', url: 'https://myapp.com' }))\"" } } ``` 3. Build your app: ```bash npm run build ``` </Steps> ### How it works The Angular plugin: - Reads `angular.json` to auto-detect the output directory (`dist/<project>/browser/`) - Scans route config files (`*.routes.ts`) and component directories for routes - Scans pre-rendered HTML from the build output for full page content - Injects the widget into `index.html` automatically ### Programmatic usage You can also generate AEO files from source routes without building: ```ts import { generate } from 'aeo.js/angular'; await generate({ title: 'My App', url: 'https://myapp.com' }); ``` <Aside type="note"> Angular SSR (with `@angular/ssr`) is supported. The plugin will scan pre-rendered HTML for content extraction. </Aside> ### Configuration Pass any [AeoConfig](/reference/configuration/) options to `postBuild` or `generate`: ```ts import { postBuild } from 'aeo.js/angular'; await postBuild({ title: 'My App', url: 'https://myapp.com', generators: { robotsTxt: true, llmsTxt: true, schema: true, }, }); ``` --- # Astro Source: docs/frameworks/astro.mdx > Use aeo.js with Astro. import { Steps } from '@astrojs/starlight/components'; ### Setup <Steps> 1. Install the package: ```bash npm install aeo.js ``` 2. Add the integration to your Astro config: ```js // astro.config.mjs import { defineConfig } from 'astro/config'; import { aeoAstroIntegration } from 'aeo.js/astro'; export default defineConfig({ site: 'https://mysite.com', integrations: [ aeoAstroIntegration({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }), ], }); ``` 3. Build your site: ```bash npm run build ``` </Steps> ### How it works The Astro integration: - Hooks into the Astro build pipeline via `astro:build:done` - Scans all rendered HTML pages for content extraction - Generates all AEO files in your output directory - Automatically injects the Human/AI widget - Persists the widget across View Transitions ### Configuration Pass any [AeoConfig](/reference/configuration/) options to the integration: ```js aeoAstroIntegration({ title: 'My Site', url: 'https://mysite.com', generators: { robotsTxt: true, llmsTxt: true, sitemap: false, // Astro has its own sitemap }, widget: { position: 'bottom-left', theme: { accent: '#6366f1', }, }, }); ``` --- # Next.js Source: docs/frameworks/nextjs.mdx > Use aeo.js with Next.js. import { Steps, Aside } from '@astrojs/starlight/components'; ### Setup <Steps> 1. Install the package: ```bash npm install aeo.js ``` 2. Wrap your Next.js config with `withAeo`: ```js // next.config.mjs import { withAeo } from 'aeo.js/next'; export default withAeo({ aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); ``` 3. Add the post-build step to your `package.json`: ```json { "scripts": { "postbuild": "node -e \"import('aeo.js/next').then(m => m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\"" } } ``` </Steps> <Aside type="tip"> The `postbuild` step is needed because Next.js pre-renders pages during build. The post-build step scans the rendered HTML to extract full page content. </Aside> ### Widget For Next.js, add the widget manually as a client component: ```tsx // app/layout.tsx (or any client component) 'use client'; import { useEffect } from 'react'; export function AeoWidgetLoader() { useEffect(() => { import('aeo.js/widget').then(({ AeoWidget }) => { new AeoWidget({ config: { title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right' }, }, }); }); }, []); return null; } ``` ### Configuration Pass any [AeoConfig](/reference/configuration/) options in the `aeo` key: ```js export default withAeo({ aeo: { title: 'My Site', url: 'https://mysite.com', generators: { robotsTxt: true, llmsTxt: true, schema: true, }, widget: { enabled: true, position: 'bottom-right', }, }, }); ``` --- # Nuxt Source: docs/frameworks/nuxt.mdx > Use aeo.js with Nuxt 3. import { Steps } from '@astrojs/starlight/components'; ### Setup <Steps> 1. Install the package: ```bash npm install aeo.js ``` 2. Add the module to your Nuxt config: ```ts // nuxt.config.ts export default defineNuxtConfig({ modules: ['aeo.js/nuxt'], aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); ``` </Steps> ### How it works The Nuxt module: - Scans your `pages/` directory for routes - Generates AEO files during dev and production builds - Scans pre-rendered HTML from `.output/public/` for full page content - Injects the widget as a client-side Nuxt plugin - Adds `<link>` and `<meta>` tags for AEO discoverability ### Configuration Pass any [AeoConfig](/reference/configuration/) options in the `aeo` key: ```ts export default defineNuxtConfig({ modules: ['aeo.js/nuxt'], aeo: { title: 'My Site', url: 'https://mysite.com', generators: { robotsTxt: true, llmsTxt: true, rawMarkdown: true, }, widget: { enabled: true, position: 'bottom-left', }, }, }); ``` --- # Vite Source: docs/frameworks/vite.mdx > Use aeo.js with Vite (React, Vue, Svelte, etc.). import { Steps } from '@astrojs/starlight/components'; ### Setup <Steps> 1. Install the package: ```bash npm install aeo.js ``` 2. Add the plugin to your Vite config: ```js // vite.config.ts import { defineConfig } from 'vite'; import { aeoVitePlugin } from 'aeo.js/vite'; export default defineConfig({ plugins: [ aeoVitePlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }), ], }); ``` </Steps> ### How it works The Vite plugin: - Generates AEO files on both `vite dev` and `vite build` - Injects the Human/AI widget automatically via HTML transform - Serves dynamic `.md` files during development (extracts content from your running app) - Detects SPA shells and falls back to client-side DOM extraction - Works with React, Vue, Svelte, or any Vite-based framework ### Configuration Pass any [AeoConfig](/reference/configuration/) options to the plugin: ```js aeoVitePlugin({ title: 'My Site', url: 'https://mysite.com', widget: { position: 'top-right', theme: { background: 'rgba(0, 0, 0, 0.85)', accent: '#f59e0b', }, }, }); ``` --- # Webpack Source: docs/frameworks/webpack.mdx > Use aeo.js with Webpack. import { Steps } from '@astrojs/starlight/components'; ### Setup <Steps> 1. Install the package: ```bash npm install aeo.js ``` 2. Add the plugin to your Webpack config: ```js // webpack.config.js const { AeoWebpackPlugin } = require('aeo.js/webpack'); module.exports = { plugins: [ new AeoWebpackPlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }), ], }; ``` </Steps> ### How it works The Webpack plugin: - Runs during the `emit` phase of the Webpack compilation - Generates all AEO files in your output directory - Injects the widget into your HTML entry point ### Configuration Pass any [AeoConfig](/reference/configuration/) options to the plugin: ```js new AeoWebpackPlugin({ title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right', }, }); ``` --- # Installation Source: docs/getting-started/installation.mdx > Install aeo.js in your project. import { Tabs, TabItem } from '@astrojs/starlight/components'; ### Install the package <Tabs> <TabItem label="npm"> ```bash npm install aeo.js ``` </TabItem> <TabItem label="pnpm"> ```bash pnpm add aeo.js ``` </TabItem> <TabItem label="yarn"> ```bash yarn add aeo.js ``` </TabItem> </Tabs> ### Or use the CLI directly No installation needed — run it with `npx`: ```bash npx aeo.js generate ``` ### Requirements - **Node.js** 18 or later - A framework with a build step that outputs HTML (or use the CLI for any static site) ### Next steps Head to [Quick Start](/getting-started/quick-start/) to add aeo.js to your project, or jump to your framework's guide: - [Astro](/frameworks/astro/) - [Next.js](/frameworks/nextjs/) - [Vite](/frameworks/vite/) - [Nuxt](/frameworks/nuxt/) - [Angular](/frameworks/angular/) - [Webpack](/frameworks/webpack/) --- # Introduction Source: docs/getting-started/introduction.mdx > What is aeo.js and why you need Answer Engine Optimization. ![aeo.js in action](/example.gif) ### What is Answer Engine Optimization? Answer Engine Optimization (AEO) is the practice of making your website discoverable and citable by AI-powered answer engines like **ChatGPT**, **Claude**, **Perplexity**, and **SearchGPT**. Unlike traditional SEO which focuses on search engine result pages (SERPs), AEO ensures your content is understood and referenced by Large Language Models (LLMs) when they generate answers. ### Why aeo.js? AI crawlers and LLMs look for specific files and formats that most websites don't provide: - **`llms.txt`** — A concise summary of your site written for LLMs - **`llms-full.txt`** — Full content concatenated for deep ingestion - **`ai-index.json`** — Structured content optimized for RAG pipelines - **`docs.json`** — Documentation manifest for content discovery - **Raw Markdown** — Per-page `.md` files for clean content extraction **aeo.js** generates all of these automatically from your existing pages — no manual work required. ### How it works 1. **Install** the package and add the plugin for your framework 2. **Build** your site as usual 3. **aeo.js** scans your output, extracts content, and generates all AEO files 4. The optional **widget** lets visitors toggle between human and AI views of your pages ### Supported Frameworks | Framework | Import | |-----------|--------| | Astro | `aeo.js/astro` | | Next.js | `aeo.js/next` | | Vite (React, Vue, Svelte) | `aeo.js/vite` | | Nuxt | `aeo.js/nuxt` | | Angular | `aeo.js/angular` | | Webpack | `aeo.js/webpack` | | Any (CLI) | `npx aeo.js generate` | --- # Quick Start Source: docs/getting-started/quick-start.mdx > Get aeo.js running in under 2 minutes. import { Tabs, TabItem, Steps } from '@astrojs/starlight/components'; The fastest way to add AEO to your site depends on your framework. ### Astro <Steps> 1. Install the package: ```bash npm install aeo.js ``` 2. Add the integration to your Astro config: ```js // astro.config.mjs import { defineConfig } from 'astro/config'; import { aeoAstroIntegration } from 'aeo.js/astro'; export default defineConfig({ site: 'https://mysite.com', integrations: [ aeoAstroIntegration({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }), ], }); ``` 3. Build your site — all AEO files are generated automatically. </Steps> ### Next.js <Steps> 1. Install the package: ```bash npm install aeo.js ``` 2. Wrap your Next.js config: ```js // next.config.mjs import { withAeo } from 'aeo.js/next'; export default withAeo({ aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); ``` 3. Add the post-build step to `package.json`: ```json { "scripts": { "postbuild": "node -e \"import('aeo.js/next').then(m => m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\"" } } ``` </Steps> ### Vite <Steps> 1. Install the package: ```bash npm install aeo.js ``` 2. Add the plugin to your Vite config: ```js // vite.config.ts import { defineConfig } from 'vite'; import { aeoVitePlugin } from 'aeo.js/vite'; export default defineConfig({ plugins: [ aeoVitePlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }), ], }); ``` </Steps> ### CLI (any site) No framework integration needed: ```bash npx aeo.js generate --url https://mysite.com --title "My Site" ``` See [CLI docs](/features/cli/) for all commands and options. --- # aeo.js Source: docs/index.mdx > Answer Engine Optimization for the modern web. Make your site discoverable by AI crawlers and LLMs. import { Tabs, TabItem } from '@astrojs/starlight/components'; import StickyNav from '../../components/StickyNav.astro'; <StickyNav /> ### Quick Start ```bash npm install aeo.js ``` <Tabs> <TabItem label="Astro"> ```js // astro.config.mjs import { defineConfig } from 'astro/config'; import { aeoAstroIntegration } from 'aeo.js/astro'; export default defineConfig({ site: 'https://mysite.com', integrations: [ aeoAstroIntegration({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }), ], }); ``` </TabItem> <TabItem label="Next.js"> ```js // next.config.mjs import { withAeo } from 'aeo.js/next'; export default withAeo({ aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); ``` Add the post-build step to `package.json`: ```json { "scripts": { "postbuild": "node -e \"import('aeo.js/next').then(m => m.postBuild({ title: 'My Site', url: 'https://mysite.com' }))\"" } } ``` </TabItem> <TabItem label="Vite"> ```js // vite.config.ts import { defineConfig } from 'vite'; import { aeoVitePlugin } from 'aeo.js/vite'; export default defineConfig({ plugins: [ aeoVitePlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }), ], }); ``` </TabItem> <TabItem label="Nuxt"> ```ts // nuxt.config.ts export default defineNuxtConfig({ modules: ['aeo.js/nuxt'], aeo: { title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }, }); ``` </TabItem> <TabItem label="Angular"> Add a post-build step to `package.json`: ```json { "scripts": { "postbuild": "node -e \"import('aeo.js/angular').then(m => m.postBuild({ title: 'My App', url: 'https://myapp.com' }))\"" } } ``` Or generate programmatically: ```ts import { generate } from 'aeo.js/angular'; await generate({ title: 'My App', url: 'https://myapp.com' }); ``` </TabItem> <TabItem label="Webpack"> ```js // webpack.config.js const { AeoWebpackPlugin } = require('aeo.js/webpack'); module.exports = { plugins: [ new AeoWebpackPlugin({ title: 'My Site', description: 'A site optimized for AI discovery', url: 'https://mysite.com', }), ], }; ``` </TabItem> <TabItem label="CLI"> No framework needed — run standalone: ```bash # Generate all AEO files npx aeo.js generate --url https://mysite.com --title "My Site" # Scaffold a config file npx aeo.js init # Check your setup npx aeo.js check ``` </TabItem> </Tabs> ### What is AEO? Answer Engine Optimization (AEO) is the practice of making your website discoverable and citable by AI-powered answer engines like ChatGPT, Claude, Perplexity, and SearchGPT. **aeo.js** auto-generates the files these engines look for and provides a drop-in widget that shows visitors how your site appears to AI. First-class support for Astro, Next.js, Vite, Nuxt, Angular, and Webpack — or run standalone via CLI. ### Why AEO matters <div class="why-aeo-grid"> <div class="why-card"> <div class="why-stat">58%</div> <div class="why-label">of searches</div> <div class="why-desc">end without a click — AI gives the answer directly</div> </div> <div class="why-card"> <div class="why-stat">40%</div> <div class="why-label">of Gen Z</div> <div class="why-desc">prefer AI assistants over traditional search engines</div> </div> <div class="why-card"> <div class="why-stat">97%</div> <div class="why-label">of sites</div> <div class="why-desc">have no llms.txt or structured data for AI crawlers</div> </div> <div class="why-card"> <div class="why-stat">1 min</div> <div class="why-label">to set up</div> <div class="why-desc">aeo.js generates robots.txt, llms.txt, schema & more</div> </div> </div> If your site isn't optimized for AI engines, you're invisible to a growing share of users who never open a search results page. AEO is the new SEO. ### Widget The Human/AI widget lets visitors toggle between the normal page and its AI-readable markdown version. Framework plugins inject it automatically — for Next.js or manual setups: ```tsx 'use client'; import { useEffect } from 'react'; export function AeoWidgetLoader() { useEffect(() => { import('aeo.js/widget').then(({ AeoWidget }) => { new AeoWidget({ config: { title: 'My Site', url: 'https://mysite.com', widget: { enabled: true, position: 'bottom-right' }, }, }); }); }, []); return null; } ``` React and Vue wrapper components are also available: <Tabs> <TabItem label="React"> ```tsx import { AeoReactWidget } from 'aeo.js/react'; <AeoReactWidget config={{ title: 'My Site', url: 'https://mysite.com' }} /> ``` </TabItem> <TabItem label="Vue"> ```vue <script setup> import { AeoVueWidget } from 'aeo.js/vue'; </script> <template> <AeoVueWidget :config="{ title: 'My Site', url: 'https://mysite.com' }" /> </template> ``` </TabItem> </Tabs> ### Configuration All frameworks use the same config shape — [see full reference](/reference/configuration/): ```ts import { defineConfig } from 'aeo.js'; export default defineConfig({ title: 'My Site', url: 'https://mysite.com', description: 'A site optimized for AI discovery', generators: { robotsTxt: true, llmsTxt: true, llmsFullTxt: true, rawMarkdown: true, sitemap: true, aiIndex: true, schema: true, }, schema: { enabled: true, organization: { name: 'My Company', url: 'https://mysite.com' }, defaultType: 'WebPage', }, og: { enabled: true, image: 'https://mysite.com/og.png', twitterHandle: '@mycompany', }, widget: { enabled: true, position: 'bottom-right', theme: { accent: '#4ADE80', badge: '#4ADE80' }, }, }); ``` ### Generated Files After building, your output directory contains: ``` public/ ├── robots.txt # AI-crawler directives ├── llms.txt # Short LLM-readable summary ├── llms-full.txt # Full content for LLMs ├── sitemap.xml # Standard sitemap ├── docs.json # Documentation manifest ├── ai-index.json # AI content index ├── index.md # Markdown for / └── about.md # Markdown for /about ``` ### Checker <div class="aeo-checker-widget" style={{marginTop: '1rem', marginBottom: '0.5rem'}}> <form id="aeo-check-form" class="aeo-checker-input-wrap" action="https://check.aeojs.org" method="GET"> <input type="text" name="q" class="aeo-checker-input" placeholder="Enter your website URL…" required /> <button type="submit" class="aeo-checker-btn"> Scan <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg> </button> </form> <p style={{textAlign: 'center', fontSize: '0.8rem', color: 'rgba(255,255,255,0.3)', marginTop: '0.75rem'}}>Free — no signup required. Powered by <a href="https://check.aeojs.org" style={{color: 'rgba(255,255,255,0.5)', textDecoration: 'underline', textUnderlineOffset: '2px'}}>AEO Checker</a></p> </div> --- # API Reference Source: docs/reference/api.mdx > Programmatic API for aeo.js. ### Core #### `defineConfig(config)` Type-safe configuration helper: ```ts import { defineConfig } from 'aeo.js'; export default defineConfig({ title: 'My Site', url: 'https://mysite.com', }); ``` #### `generateAll(config)` Generate all AEO files programmatically: ```ts import { generateAll } from 'aeo.js'; await generateAll({ title: 'My Site', url: 'https://mysite.com', outDir: 'dist', }); ``` #### `resolveConfig(config)` Resolve a partial config into a fully resolved config with defaults: ```ts import { resolveConfig } from 'aeo.js'; const resolved = resolveConfig({ title: 'My Site' }); // All fields now have defaults ``` #### `validateConfig(config)` Validate a config object and return any errors: ```ts import { validateConfig } from 'aeo.js'; const errors = validateConfig(config); ``` #### `detectFramework()` Auto-detect the framework used in the current project: ```ts import { detectFramework } from 'aeo.js'; const info = detectFramework(); // { framework: 'next', contentDir: 'pages', outDir: '.next' } ``` ### HTML Extraction #### `htmlToMarkdown(html)` Convert HTML to clean markdown: ```ts import { htmlToMarkdown } from 'aeo.js'; const md = htmlToMarkdown('<h1>Hello</h1><p>World</p>'); // '# Hello\n\nWorld' ``` #### `extractTextFromHtml(html)` Extract plain text from HTML: ```ts import { extractTextFromHtml } from 'aeo.js'; const text = extractTextFromHtml('<p>Hello <strong>world</strong></p>'); ``` #### `extractTitle(html)` / `extractDescription(html)` Extract the title or meta description from an HTML document. #### `extractJsonLd(html)` Extract JSON-LD structured data from an HTML document. ### Schema #### `generateSchemaObjects(config)` Generate JSON-LD schema objects: ```ts import { generateSchemaObjects } from 'aeo.js'; const schemas = generateSchemaObjects(resolvedConfig); ``` #### `generateJsonLdScript(config)` Generate a `<script type="application/ld+json">` tag: ```ts import { generateJsonLdScript } from 'aeo.js'; const script = generateJsonLdScript(resolvedConfig); ``` #### `generateSiteSchemas(config)` / `generatePageSchemas(config, page)` Generate schemas for the site or individual pages. ### Open Graph #### `generateOGTags(config, page)` Returns an array of `MetaTag` objects: ```ts import { generateOGTags } from 'aeo.js'; const tags = generateOGTags(config, { pathname: '/', title: 'Home' }); // [{ property: 'og:title', content: 'Home' }, ...] ``` #### `generateOGTagsHtml(config, page)` Returns OG tags as an HTML string. ### Audit #### `auditSite(url)` Audit a site for AEO best practices: ```ts import { auditSite, formatAuditReport, getGrade } from 'aeo.js'; const result = await auditSite('https://mysite.com'); console.log(formatAuditReport(result)); console.log(getGrade(result)); // 'A', 'B', 'C', etc. ``` ### Citability #### `scorePageCitability(url, html)` Score how likely a page is to be cited by AI: ```ts import { scorePageCitability, formatPageCitability } from 'aeo.js'; const score = await scorePageCitability(url, html); console.log(formatPageCitability(score)); ``` #### `scoreSiteCitability(url, pages)` Score citability across your entire site. ### Reports #### `generateReport(config)` Generate a comprehensive AEO report: ```ts import { generateReport, formatReportMarkdown } from 'aeo.js'; const report = await generateReport(config); console.log(formatReportMarkdown(report)); ``` ### Types All types are exported from the main entry: ```ts import type { AeoConfig, ResolvedAeoConfig, PageEntry, DocEntry, AeoManifest, MarkdownFile, ManifestEntry, AIIndexEntry, FrameworkType, FrameworkInfo, AuditResult, AuditCategory, AuditIssue, MetaTag, PageCitabilityResult, SiteCitabilityResult, CitabilityDimension, ContentHint, AeoReport, PlatformHint, } from 'aeo.js'; ``` --- # Configuration Source: docs/reference/configuration.mdx > Full configuration reference for aeo.js. All framework plugins and the CLI accept the same `AeoConfig` object. ### Full example ```ts import { defineConfig } from 'aeo.js'; export default defineConfig({ // Required title: 'My Site', url: 'https://mysite.com', // Optional description: 'A description of your site', contentDir: 'docs', // Directory with handwritten .md files outDir: 'public', // Output directory for generated files // Toggle individual generators generators: { robotsTxt: true, llmsTxt: true, llmsFullTxt: true, rawMarkdown: true, manifest: true, sitemap: true, aiIndex: true, schema: true, }, // Customize robots.txt robots: { allow: ['/'], disallow: ['/admin'], crawlDelay: 0, sitemap: 'https://mysite.com/sitemap.xml', }, // JSON-LD structured data schema: { enabled: true, organization: { name: 'My Company', url: 'https://mysite.com', logo: 'https://mysite.com/logo.png', sameAs: ['https://twitter.com/mycompany'], }, defaultType: 'WebPage', }, // Open Graph meta tags og: { enabled: true, image: 'https://mysite.com/og.png', twitterHandle: '@mycompany', type: 'website', }, // Widget configuration widget: { enabled: true, position: 'bottom-right', humanLabel: 'Human', aiLabel: 'AI', showBadge: true, theme: { background: 'rgba(18, 18, 24, 0.9)', text: '#C0C0C5', accent: '#E8E8EA', badge: '#4ADE80', }, }, }); ``` ### Options reference #### Top-level | Option | Type | Default | Description | |--------|------|---------|-------------| | `title` | `string` | `''` | Site title | | `description` | `string` | `''` | Site description | | `url` | `string` | `''` | Site URL (used for absolute URLs in generated files) | | `contentDir` | `string` | `'docs'` | Directory with handwritten markdown files | | `outDir` | `string` | auto-detected | Output directory for generated files | | `pages` | `PageEntry[]` | `[]` | Manually specify pages to include | #### `generators` | Option | Type | Default | Description | |--------|------|---------|-------------| | `robotsTxt` | `boolean` | `true` | Generate `robots.txt` | | `llmsTxt` | `boolean` | `true` | Generate `llms.txt` | | `llmsFullTxt` | `boolean` | `true` | Generate `llms-full.txt` | | `rawMarkdown` | `boolean` | `true` | Generate per-page `.md` files | | `manifest` | `boolean` | `true` | Generate `docs.json` | | `sitemap` | `boolean` | `true` | Generate `sitemap.xml` | | `aiIndex` | `boolean` | `true` | Generate `ai-index.json` | | `schema` | `boolean` | `false` | Generate JSON-LD structured data | #### `robots` | Option | Type | Default | Description | |--------|------|---------|-------------| | `allow` | `string[]` | `['/']` | Allowed paths | | `disallow` | `string[]` | `[]` | Disallowed paths | | `crawlDelay` | `number` | `0` | Crawl delay in seconds | | `sitemap` | `string` | auto | Sitemap URL | #### `schema` | Option | Type | Default | Description | |--------|------|---------|-------------| | `enabled` | `boolean` | `false` | Enable schema generation | | `organization.name` | `string` | `''` | Organization name | | `organization.url` | `string` | `''` | Organization URL | | `organization.logo` | `string` | `''` | Organization logo URL | | `organization.sameAs` | `string[]` | `[]` | Social profile URLs | | `defaultType` | `'Article' \| 'WebPage'` | `'WebPage'` | Default schema type for pages | #### `og` | Option | Type | Default | Description | |--------|------|---------|-------------| | `enabled` | `boolean` | `false` | Enable OG tag generation | | `image` | `string` | `''` | Default OG image URL | | `twitterHandle` | `string` | `''` | Twitter handle (e.g. `@company`) | | `type` | `'website' \| 'article'` | `'website'` | Default OG type | #### `widget` | Option | Type | Default | Description | |--------|------|---------|-------------| | `enabled` | `boolean` | `true` | Enable the widget | | `position` | `string` | `'bottom-right'` | Widget position | | `humanLabel` | `string` | `'Human'` | Label for human view | | `aiLabel` | `string` | `'AI'` | Label for AI view | | `showBadge` | `boolean` | `true` | Show the AEO badge | | `theme.background` | `string` | `'rgba(18, 18, 24, 0.9)'` | Widget background | | `theme.text` | `string` | `'#C0C0C5'` | Text color | | `theme.accent` | `string` | `'#E8E8EA'` | Accent color | | `theme.badge` | `string` | `'#4ADE80'` | Badge color | --- ## About This Document This concatenated documentation file is generated automatically by aeo.js to make it easier for AI systems to understand the complete context of this project. For a structured index, see: https://aeojs.org/llms.txt For individual files, see: https://aeojs.org/docs.json Generated by aeo.js - https://aeojs.org