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
226
apps/web/src/app/docs/getting-started/page.tsx
Normal file
226
apps/web/src/app/docs/getting-started/page.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Getting Started",
|
||||
description:
|
||||
"Install AgentLens, initialize the SDK, and send your first trace in under five minutes.",
|
||||
};
|
||||
|
||||
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 GettingStartedPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight mb-4">
|
||||
Getting Started
|
||||
</h1>
|
||||
<p className="text-lg text-neutral-400 mb-10 leading-relaxed">
|
||||
Go from zero to full agent observability in under five minutes. This
|
||||
guide walks you through installing the SDK, initializing it, and sending
|
||||
your first trace.
|
||||
</p>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Prerequisites</h2>
|
||||
<ul className="list-disc list-inside text-neutral-400 space-y-2 ml-1">
|
||||
<li>Python 3.9+ or Node.js 18+</li>
|
||||
<li>
|
||||
An AgentLens instance (use{" "}
|
||||
<a
|
||||
href="https://agentlens.vectry.tech"
|
||||
className="text-emerald-400 hover:underline"
|
||||
>
|
||||
agentlens.vectry.tech
|
||||
</a>{" "}
|
||||
or{" "}
|
||||
<a
|
||||
href="/docs/self-hosting"
|
||||
className="text-emerald-400 hover:underline"
|
||||
>
|
||||
self-host
|
||||
</a>
|
||||
)
|
||||
</li>
|
||||
<li>An API key for authentication</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
Step 1: Install the SDK
|
||||
</h2>
|
||||
|
||||
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
|
||||
<CodeBlock title="terminal">pip install vectry-agentlens</CodeBlock>
|
||||
|
||||
<h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
|
||||
TypeScript / Node.js
|
||||
</h3>
|
||||
<CodeBlock title="terminal">npm install agentlens-sdk</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
Step 2: Initialize AgentLens
|
||||
</h2>
|
||||
|
||||
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
|
||||
<CodeBlock title="main.py">{`import agentlens
|
||||
|
||||
agentlens.init(
|
||||
api_key="your-api-key",
|
||||
endpoint="https://agentlens.vectry.tech"
|
||||
)`}</CodeBlock>
|
||||
|
||||
<h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
|
||||
TypeScript
|
||||
</h3>
|
||||
<CodeBlock title="index.ts">{`import { init } from "agentlens-sdk";
|
||||
|
||||
init({
|
||||
apiKey: "your-api-key",
|
||||
endpoint: "https://agentlens.vectry.tech",
|
||||
});`}</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
Step 3: Trace your first agent
|
||||
</h2>
|
||||
|
||||
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
|
||||
<CodeBlock title="agent.py">{`import agentlens
|
||||
from agentlens import trace
|
||||
|
||||
agentlens.init(
|
||||
api_key="your-api-key",
|
||||
endpoint="https://agentlens.vectry.tech"
|
||||
)
|
||||
|
||||
@trace(name="my-first-agent")
|
||||
def my_agent(prompt: str) -> str:
|
||||
# Your agent logic here
|
||||
response = call_llm(prompt)
|
||||
return response
|
||||
|
||||
# Run it — the trace is sent automatically
|
||||
result = my_agent("What is the capital of France?")`}</CodeBlock>
|
||||
|
||||
<h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
|
||||
TypeScript
|
||||
</h3>
|
||||
<CodeBlock title="agent.ts">{`import { init, TraceBuilder } from "agentlens-sdk";
|
||||
|
||||
init({
|
||||
apiKey: "your-api-key",
|
||||
endpoint: "https://agentlens.vectry.tech",
|
||||
});
|
||||
|
||||
const trace = new TraceBuilder("my-first-agent");
|
||||
|
||||
trace.addSpan({
|
||||
name: "llm-call",
|
||||
type: "LLM_CALL",
|
||||
input: { prompt: "What is the capital of France?" },
|
||||
output: { response: "Paris" },
|
||||
status: "COMPLETED",
|
||||
});
|
||||
|
||||
await trace.end();`}</CodeBlock>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
Step 4: View in the dashboard
|
||||
</h2>
|
||||
<p className="text-neutral-400 leading-relaxed mb-4">
|
||||
Open your AgentLens dashboard to see the trace you just sent. You will
|
||||
see the trace name, its status, timing information, and any spans or
|
||||
decision points you recorded.
|
||||
</p>
|
||||
<a
|
||||
href="/dashboard"
|
||||
className="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-neutral-950 font-semibold rounded-lg transition-colors text-sm"
|
||||
>
|
||||
Open Dashboard
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Next steps</h2>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<a
|
||||
href="/docs/concepts"
|
||||
className="group block p-4 rounded-xl border border-neutral-800/50 hover:border-emerald-500/30 transition-colors"
|
||||
>
|
||||
<h3 className="text-sm font-semibold text-neutral-200 group-hover:text-emerald-400 transition-colors">
|
||||
Core Concepts
|
||||
</h3>
|
||||
<p className="text-xs text-neutral-500 mt-1">
|
||||
Learn about Traces, Spans, Decision Points, and Events.
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/python-sdk"
|
||||
className="group block p-4 rounded-xl border border-neutral-800/50 hover:border-emerald-500/30 transition-colors"
|
||||
>
|
||||
<h3 className="text-sm font-semibold text-neutral-200 group-hover:text-emerald-400 transition-colors">
|
||||
Python SDK Reference
|
||||
</h3>
|
||||
<p className="text-xs text-neutral-500 mt-1">
|
||||
Explore the full Python SDK API surface.
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/integrations/openai"
|
||||
className="group block p-4 rounded-xl border border-neutral-800/50 hover:border-emerald-500/30 transition-colors"
|
||||
>
|
||||
<h3 className="text-sm font-semibold text-neutral-200 group-hover:text-emerald-400 transition-colors">
|
||||
OpenAI Integration
|
||||
</h3>
|
||||
<p className="text-xs text-neutral-500 mt-1">
|
||||
Auto-trace OpenAI calls with a single wrapper.
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
href="/docs/self-hosting"
|
||||
className="group block p-4 rounded-xl border border-neutral-800/50 hover:border-emerald-500/30 transition-colors"
|
||||
>
|
||||
<h3 className="text-sm font-semibold text-neutral-200 group-hover:text-emerald-400 transition-colors">
|
||||
Self-Hosting
|
||||
</h3>
|
||||
<p className="text-xs text-neutral-500 mt-1">
|
||||
Deploy your own AgentLens instance with Docker.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user