feat: documentation pages and updated model pricing
- Add 13 documentation pages under /docs (getting-started, concepts, SDK refs, integrations, API reference, self-hosting, OpenCode plugin) - Shared docs layout with collapsible sidebar navigation - Update model pricing across all SDKs: add GPT-5.x, GPT-4.1, o3/o4-mini, Claude 4.5 series, claude-opus-4-6 - Update trace-analytics context window lookup with current models
This commit is contained in:
Vectry
255
apps/web/src/app/docs/self-hosting/page.tsx
Normal file
255
apps/web/src/app/docs/self-hosting/page.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Self-Hosting",
|
||||
description:
|
||||
"Deploy AgentLens with Docker or from source. Configure database, API keys, and environment variables.",
|
||||
};
|
||||
|
||||
function CodeBlock({ children, title }: { children: string; title?: string }) {
|
||||
return (
|
||||
<div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
|
||||
{title && (
|
||||
<div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
<pre className="p-4 overflow-x-auto text-sm leading-relaxed">
|
||||
<code className="text-neutral-300">{children}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SelfHostingPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight mb-4">Self-Hosting</h1>
|
||||
<p className="text-lg text-neutral-400 mb-10 leading-relaxed">
|
||||
AgentLens is open source and designed to be self-hosted. You can deploy
|
||||
it with Docker in minutes, or run from source for development.
|
||||
</p>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Quick start with Docker</h2>
|
||||
<CodeBlock title="terminal">{`git clone https://gitea.repi.fun/repi/agentlens
|
||||
cd agentlens
|
||||
docker build -t agentlens .
|
||||
docker run -p 3000:3000 \\
|
||||
-e DATABASE_URL="postgresql://user:pass@host:5432/agentlens" \\
|
||||
-e AGENTLENS_API_KEY="your-secret-key" \\
|
||||
agentlens`}</CodeBlock>
|
||||
<p className="text-neutral-400 leading-relaxed mt-4">
|
||||
The dashboard will be available at{" "}
|
||||
<code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">
|
||||
http://localhost:3000
|
||||
</code>{" "}
|
||||
and the API at{" "}
|
||||
<code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">
|
||||
http://localhost:3000/api/traces
|
||||
</code>
|
||||
.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Docker Compose</h2>
|
||||
<p className="text-neutral-400 leading-relaxed mb-4">
|
||||
For a complete setup with PostgreSQL included:
|
||||
</p>
|
||||
<CodeBlock title="docker-compose.yml">{`version: "3.8"
|
||||
|
||||
services:
|
||||
db:
|
||||
image: postgres:16-alpine
|
||||
environment:
|
||||
POSTGRES_USER: agentlens
|
||||
POSTGRES_PASSWORD: agentlens
|
||||
POSTGRES_DB: agentlens
|
||||
volumes:
|
||||
- pgdata:/var/lib/postgresql/data
|
||||
ports:
|
||||
- "5432:5432"
|
||||
|
||||
app:
|
||||
build: .
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment:
|
||||
DATABASE_URL: "postgresql://agentlens:agentlens@db:5432/agentlens"
|
||||
AGENTLENS_API_KEY: "your-secret-key"
|
||||
PORT: "3000"
|
||||
depends_on:
|
||||
- db
|
||||
|
||||
volumes:
|
||||
pgdata:`}</CodeBlock>
|
||||
<CodeBlock title="terminal">{`docker compose up -d`}</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Running from source</h2>
|
||||
<p className="text-neutral-400 leading-relaxed mb-4">
|
||||
For development or when you need to customize AgentLens:
|
||||
</p>
|
||||
<CodeBlock title="terminal">{`git clone https://gitea.repi.fun/repi/agentlens
|
||||
cd agentlens
|
||||
|
||||
# Install dependencies (uses npm workspaces)
|
||||
npm install
|
||||
|
||||
# Set up the database
|
||||
cp apps/web/.env.example apps/web/.env
|
||||
# Edit .env with your DATABASE_URL
|
||||
|
||||
# Generate Prisma client and push schema
|
||||
npm run db:generate --workspace=@agentlens/web
|
||||
npm run db:push --workspace=@agentlens/web
|
||||
|
||||
# Start the development server
|
||||
npm run dev --workspace=@agentlens/web`}</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Environment variables</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-800">
|
||||
<th className="text-left py-2 pr-4 text-neutral-400 font-medium">Variable</th>
|
||||
<th className="text-left py-2 pr-4 text-neutral-400 font-medium">Required</th>
|
||||
<th className="text-left py-2 pr-4 text-neutral-400 font-medium">Default</th>
|
||||
<th className="text-left py-2 text-neutral-400 font-medium">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-neutral-300">
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 font-mono text-emerald-400 text-xs">DATABASE_URL</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">Yes</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">-</td>
|
||||
<td className="py-2">PostgreSQL connection string</td>
|
||||
</tr>
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 font-mono text-emerald-400 text-xs">AGENTLENS_API_KEY</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">Yes</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">-</td>
|
||||
<td className="py-2">API key that SDKs must present to ingest traces</td>
|
||||
</tr>
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 font-mono text-emerald-400 text-xs">PORT</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">No</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">3000</td>
|
||||
<td className="py-2">HTTP port the server listens on</td>
|
||||
</tr>
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 font-mono text-emerald-400 text-xs">NODE_ENV</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">No</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">production</td>
|
||||
<td className="py-2">Set to "development" for dev mode</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 pr-4 font-mono text-emerald-400 text-xs">NEXTAUTH_SECRET</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">No</td>
|
||||
<td className="py-2 pr-4 text-neutral-500">-</td>
|
||||
<td className="py-2">Secret for session signing (if auth is enabled)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Database setup</h2>
|
||||
<p className="text-neutral-400 leading-relaxed mb-4">
|
||||
AgentLens uses PostgreSQL with Prisma ORM. The database schema is
|
||||
managed via Prisma migrations.
|
||||
</p>
|
||||
<h3 className="text-lg font-medium text-neutral-200 mb-2">
|
||||
Connection string format
|
||||
</h3>
|
||||
<CodeBlock>{`postgresql://USER:PASSWORD@HOST:PORT/DATABASE`}</CodeBlock>
|
||||
|
||||
<h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
|
||||
Running migrations
|
||||
</h3>
|
||||
<CodeBlock title="terminal">{`# Push schema to database (development)
|
||||
npm run db:push --workspace=@agentlens/web
|
||||
|
||||
# Run migrations (production)
|
||||
npm run db:migrate --workspace=@agentlens/web`}</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Reverse proxy setup</h2>
|
||||
<p className="text-neutral-400 leading-relaxed mb-4">
|
||||
For production deployments behind nginx or Caddy:
|
||||
</p>
|
||||
<CodeBlock title="Caddyfile">{`agentlens.yourdomain.com {
|
||||
reverse_proxy localhost:3000
|
||||
}`}</CodeBlock>
|
||||
<CodeBlock title="nginx.conf">{`server {
|
||||
listen 443 ssl;
|
||||
server_name agentlens.yourdomain.com;
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
}`}</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Updating</h2>
|
||||
<CodeBlock title="terminal">{`# Pull latest changes
|
||||
cd agentlens
|
||||
git pull origin main
|
||||
|
||||
# Rebuild
|
||||
docker build -t agentlens .
|
||||
|
||||
# Restart with new image
|
||||
docker compose up -d`}</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold mb-4">Resource requirements</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-800">
|
||||
<th className="text-left py-2 pr-4 text-neutral-400 font-medium">Component</th>
|
||||
<th className="text-left py-2 pr-4 text-neutral-400 font-medium">Minimum</th>
|
||||
<th className="text-left py-2 text-neutral-400 font-medium">Recommended</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-neutral-300">
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 text-neutral-400">CPU</td>
|
||||
<td className="py-2 pr-4">1 core</td>
|
||||
<td className="py-2">2+ cores</td>
|
||||
</tr>
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 text-neutral-400">Memory</td>
|
||||
<td className="py-2 pr-4">512 MB</td>
|
||||
<td className="py-2">1 GB+</td>
|
||||
</tr>
|
||||
<tr className="border-b border-neutral-800/50">
|
||||
<td className="py-2 pr-4 text-neutral-400">Disk</td>
|
||||
<td className="py-2 pr-4">1 GB</td>
|
||||
<td className="py-2">10 GB+ (depends on trace volume)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 pr-4 text-neutral-400">PostgreSQL</td>
|
||||
<td className="py-2 pr-4">14+</td>
|
||||
<td className="py-2">16+</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user