Product Name
Brief description...
Features
Pricing
Plan Name ($X/month): Feature list
llm-only
v1.0.3TypeScript
LLMOnly component for React, show content only to AI bots like ChatGPT.
36/weekUpdated 3 months agoMITUnpacked: 14.1 KB
Published by LLMrefs
llm-only
#### llm-only is maintained by LLMrefs - AI SEO rank tracker.
---
Show content only to AI bots like ChatGPT, Perplexity & Claude 🤖
- Improve AI search visibility without cluttering your UI.
- Perfect for dynamic content like pricing sliders.
- Works with 30+ AI bot user agents.
Why Use This?
AI search engines need structured information to understand and cite your content accurately. But adding extensive AI-optimized content can clutter your site for human visitors.
Common problems this solves:
- Dynamic pricing sliders that AI can't read
- JavaScript-loaded content invisible to AI crawlers
- Interactive elements that lose functionality in AI parsing
- Missing structured data that causes AI to cite competitors instead
The
Usage
1. Install llm-only.
``bash`npm
npm install llm-onlyyarn
yarn add llm-only
2. Import the LLMOnly component.
`typescript`
import { LLMOnly } from 'llm-only';
3. Wrap AI-only content with the component.
The component requires the userAgent string from your request headers.
#### With Next.js App Router
`tsx
import { headers } from 'next/headers';
import { LLMOnly } from 'llm-only';
export default async function Page() {
const headersList = await headers();
const userAgent = headersList.get('user-agent');
return (
{/ Regular content for humans /}
Welcome to Our Site
This content is visible to everyone.
{/ AI-only content /}
AI-Readable Information
This content is only visible to AI bots like ChatGPT, Claude, and
Perplexity.
);
}
`
#### With Next.js Pages Router
tsx
import { LLMOnly } from 'llm-only';
import { GetServerSideProps } from 'next';export const getServerSideProps: GetServerSideProps = async ({ req }) => {
return {
props: {
userAgent: req.headers['user-agent'] || null,
},
};
};
export default function Page({ userAgent }: { userAgent: string | null }) {
return (
Welcome
AI-only content here
);
}
`Real-World Use Cases
$3
Many SaaS companies use dynamic pricing sliders that AI can't read. This causes AI to cite competitor information instead of your official pricing.
The problem:
tsx
// This pricing slider is invisible to AI
`The solution:
tsx
export default async function PricingPage() {
const headersList = await headers();
const userAgent = headersList.get('user-agent'); return (
{/ Human-visible interactive pricing /}
{/ AI-visible static pricing /}
Pricing Plans
Starter Plan - $29/month
- Up to 5 users
- 10GB storage
- Basic support
Professional Plan - $99/month
- Up to 25 users
- 100GB storage
- Priority support
- Advanced analytics
Enterprise Plan - $299/month
- Unlimited users
- 1TB storage
- 24/7 dedicated support
- Custom integrations
);
}
`$3
Provide detailed product information that AI can parse and cite accurately.
tsx
Product Name - Category
Clear description with key benefits and unique value proposition.
Key Features
- Feature 1 with specific, measurable details
- Feature 2 with concrete benefits
- Feature 3 with use cases
Use Cases
- Use case 1: Description
- Use case 2: Description
Technical Specifications
- Spec 1: Details
- Spec 2: Details
`$3
tsx
Installation Steps
Detailed step-by-step installation guide...
Common Issues and Solutions
- Issue 1: Solution with code example
- Issue 2: Solution with troubleshooting steps
API Endpoints
Complete API documentation with examples...
`Helper Function
You can also use the
helper function for custom logic:`typescript
import { isLLM } from 'llm-only';const userAgent = request.headers.get('user-agent');
if (isLLM(userAgent)) {
// Custom logic for AI bots
console.log('AI bot detected!');
}
`Best Practices
$3
Proper HTML structure helps AI understand your content hierarchy:
tsx
Main Product/Service Name
Major Section
Subsection
Detailed information with context...
- Structured list items
`$3
AI models look for:
- Product descriptions with clear value propositions
- Pricing information with specific numbers and tiers
- Feature lists with measurable benefits
- Use cases with real-world examples
- Technical specifications with exact details
$3
Use proper nesting and organization:
tsx
`Testing
$3
Test with different user agents:
bash
Test with ChatGPT bot
curl -H "User-Agent: GPTBot/1.0" https://yoursite.comTest with regular browser (should not show LLMOnly content)
curl -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://yoursite.com
`$3
1. Open DevTools → Network tab
2. Right-click → "Override User Agent"
3. Enter an AI bot user agent like
4. Refresh the page to see AI-only contentRelated Tools
Want to see how AI actually views your site?
- AI crawlability checker - Test if AI crawlers can read your page
- Inspiration behind
- LLM SEO rank tracker - AI search analytics to monitor brand visiblity
License
Distributed under the MIT License. See LICENSE for more information.
---
Built by LLMrefs with ❤️ for the AI-first web.