---
import { Bot, FileText, Code as CodeIcon } from 'lucide-react';
import { Code } from 'astro-expressive-code/components';
const useCases = [
{
icon: Bot,
title: 'AI Agent Developers',
subtitle: 'Supercharge your agents with documentation',
points: [
'Give agents instant access to any documentation',
'MCP server discovers and queries libraries automatically',
'Reduce hallucinations with grounded retrieval',
],
code: `// MCP tool response
{
"content": [
{
"source": "react-docs",
"text": "useEffect lets you synchronize..."
}
]
}`,
lang: 'json',
title: 'libragen_search response',
},
{
icon: FileText,
title: 'Documentation Teams',
subtitle: 'Make your docs AI-searchable',
points: [
'Package your docs as searchable libraries',
'Distribute via collections for easy updates',
'Track versions alongside your releases',
],
code: `libragen build ./docs \\
--name my-product \\
--content-version 2.1.0
# ✓ Built: my-product-2.1.0.libragen`,
lang: 'bash',
title: 'Terminal',
},
{
icon: CodeIcon,
title: 'Open Source Projects',
subtitle: 'Help users find answers faster',
points: [
'Let users search your API with natural language',
'Publish to collections for discovery',
'Zero maintenance after initial setup',
],
code: `# Add to your CI/CD pipeline
- name: Build libragen library
run: |
npx @libragen/cli build ./docs \\
--name my-project \\
--content-version \${{ github.ref_name }}
- name: Upload to release
uses: actions/upload-artifact@v4`,
lang: 'yaml',
title: '.github/workflows/release.yml',
},
];
---
<section class="bg-gray-50 py-24 dark:bg-gray-900">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section header -->
<div class="text-center">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Built for every use case
</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
Whether you're building AI agents, documenting software, or maintaining open source—libragen fits your workflow.
</p>
</div>
<!-- Use cases -->
<div class="mt-16 space-y-16">
{useCases.map((useCase, index) => (
<div class={`flex flex-col gap-8 lg:flex-row lg:items-center ${index % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}>
{/* Content */}
<div class="flex-1">
<div class="flex items-center gap-3">
<div class="inline-flex rounded-xl bg-indigo-100 p-2.5 text-indigo-600 dark:bg-indigo-950 dark:text-indigo-400">
<useCase.icon className="h-5 w-5" />
</div>
<h3 class="text-2xl font-bold text-gray-900 dark:text-white">
{useCase.title}
</h3>
</div>
<p class="mt-2 text-lg text-gray-600 dark:text-gray-400">
{useCase.subtitle}
</p>
<ul class="mt-6 space-y-3">
{useCase.points.map((point) => (
<li class="flex items-start gap-3">
<svg class="mt-1 h-5 w-5 flex-shrink-0 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span class="text-gray-600 dark:text-gray-400">{point}</span>
</li>
))}
</ul>
</div>
{/* Code example */}
<div class="flex-1">
<Code code={useCase.code} lang={useCase.lang} title={useCase.title} />
</div>
</div>
))}
</div>
</div>
</section>
