61268f870f
- NextAuth v5 credentials auth with registration/login pages - API key CRUD (create, list, revoke) with secure hashing - Stripe checkout, webhooks, and customer portal integration - Rate limiting per subscription tier - All dashboard API endpoints scoped to authenticated user - Prisma schema: User, Account, Session, ApiKey, plus Stripe fields - Auth middleware protecting dashboard and API routes Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-Claude) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
249 lines
8.1 KiB
TypeScript
249 lines
8.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { CodeBlock } from "@/components/code-block";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Getting Started",
|
|
description:
|
|
"Install AgentLens, initialize the SDK, and send your first trace in under five minutes.",
|
|
};
|
|
|
|
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 AgentLens account —{" "}
|
|
<a
|
|
href="/register"
|
|
className="text-emerald-400 hover:underline"
|
|
>
|
|
sign up here
|
|
</a>{" "}
|
|
if you haven{"'"}t already
|
|
</li>
|
|
<li>
|
|
An API key (create one in{" "}
|
|
<a
|
|
href="/dashboard/keys"
|
|
className="text-emerald-400 hover:underline"
|
|
>
|
|
Dashboard → API Keys
|
|
</a>
|
|
)
|
|
</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" language="bash">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" language="bash">npm install agentlens-sdk</CodeBlock>
|
|
</section>
|
|
|
|
<section className="mb-12">
|
|
<h2 className="text-2xl font-semibold mb-4">
|
|
Step 2: Initialize AgentLens
|
|
</h2>
|
|
<p className="text-neutral-400 leading-relaxed mb-4">
|
|
Sign up at{" "}
|
|
<a
|
|
href="https://agentlens.vectry.tech/register"
|
|
className="text-emerald-400 hover:underline"
|
|
>
|
|
agentlens.vectry.tech
|
|
</a>
|
|
, then go to{" "}
|
|
<a
|
|
href="/dashboard/keys"
|
|
className="text-emerald-400 hover:underline"
|
|
>
|
|
Dashboard → API Keys
|
|
</a>{" "}
|
|
to create your key. Pass it to the SDK during initialization:
|
|
</p>
|
|
|
|
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
|
|
<CodeBlock title="main.py" language="python">{`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" language="typescript">{`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" language="python">{`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" language="typescript">{`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>
|
|
);
|
|
}
|