repi/agentlens
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: syntax highlighting with shiki and copy-to-clipboard for all docs code blocks

Browse Source
This commit is contained in:
Vectry
2026-02-10 04:01:59 +00:00
parent 42b5379ce1
commit 5b388484f8
14 changed files with 642 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/package.json
View File

@@ -18,7 +18,8 @@
"lucide-react": "^0.469.0",
"next": "^15.1.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"shiki": "^3.22.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.0.0",

22
apps/web/src/app/docs/api-reference/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "REST API Reference",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Complete API contract for AgentLens trace ingestion and retrieval endpoints.",
};
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>
);
}
function EndpointHeader({
method,
path,
@@ -86,7 +72,7 @@ export default function ApiReferencePage() {
<h3 className="text-lg font-medium text-neutral-200 mb-3">
Request body
</h3>
<CodeBlock title="request_body.json">{`{
<CodeBlock title="request_body.json" language="json">{`{
"traces": [
{
"id": "trace-uuid-v4",
@@ -497,7 +483,7 @@ export default function ApiReferencePage() {
<h3 className="text-lg font-medium text-neutral-200 mb-3 mt-8">
cURL example
</h3>
<CodeBlock title="terminal">{`curl -X POST https://agentlens.vectry.tech/api/traces \\
<CodeBlock title="terminal" language="bash">{`curl -X POST https://agentlens.vectry.tech/api/traces \\
-H "Content-Type: application/json" \\
-H "Authorization: Bearer your-api-key" \\
-d '{
@@ -599,7 +585,7 @@ export default function ApiReferencePage() {
<h3 className="text-lg font-medium text-neutral-200 mb-3 mt-8">
Response shape
</h3>
<CodeBlock title="response.json">{`{
<CodeBlock title="response.json" language="json">{`{
"traces": [
{
"id": "...",

20
apps/web/src/app/docs/concepts/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "Core Concepts",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Understand the four core data types in AgentLens: Traces, Spans, Decision Points, and Events.",
};
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>
);
}
function ConceptCard({
title,
description,
@@ -203,7 +189,7 @@ export default function ConceptsPage() {
<h3 className="text-base font-medium text-neutral-200 mb-3">
Structure
</h3>
<CodeBlock title="decision_point.json">{`{
<CodeBlock title="decision_point.json" language="json">{`{
"type": "TOOL_SELECTION",
"reasoning": "User asked about weather, need real-time data",
"chosen": { "tool": "weather_api", "confidence": 0.95 },
@@ -246,7 +232,7 @@ export default function ConceptsPage() {
<h3 className="text-base font-medium text-neutral-200 mb-3">
Example
</h3>
<CodeBlock title="event.json">{`{
<CodeBlock title="event.json" language="json">{`{
"type": "CONTEXT_OVERFLOW",
"name": "token-limit-exceeded",
"metadata": {

28
apps/web/src/app/docs/getting-started/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "Getting Started",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"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>
@@ -64,12 +50,12 @@ export default function GettingStartedPage() {
</h2>
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
<CodeBlock title="terminal">pip install vectry-agentlens</CodeBlock>
<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">npm install agentlens-sdk</CodeBlock>
<CodeBlock title="terminal" language="bash">npm install agentlens-sdk</CodeBlock>
</section>
<section className="mb-12">
@@ -78,7 +64,7 @@ export default function GettingStartedPage() {
</h2>
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
<CodeBlock title="main.py">{`import agentlens
<CodeBlock title="main.py" language="python">{`import agentlens
agentlens.init(
api_key="your-api-key",
@@ -88,7 +74,7 @@ agentlens.init(
<h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
TypeScript
</h3>
<CodeBlock title="index.ts">{`import { init } from "agentlens-sdk";
<CodeBlock title="index.ts" language="typescript">{`import { init } from "agentlens-sdk";
init({
apiKey: "your-api-key",
@@ -102,7 +88,7 @@ init({
</h2>
<h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
<CodeBlock title="agent.py">{`import agentlens
<CodeBlock title="agent.py" language="python">{`import agentlens
from agentlens import trace
agentlens.init(
@@ -122,7 +108,7 @@ 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";
<CodeBlock title="agent.ts" language="typescript">{`import { init, TraceBuilder } from "agentlens-sdk";
init({
apiKey: "your-api-key",

26
apps/web/src/app/docs/integrations/anthropic/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "Anthropic Integration",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Wrap the Anthropic client to automatically trace Claude API calls with full metadata capture.",
};
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 AnthropicIntegrationPage() {
return (
<div>
@@ -35,12 +21,12 @@ export default function AnthropicIntegrationPage() {
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Installation</h2>
<CodeBlock title="terminal">{`pip install vectry-agentlens anthropic`}</CodeBlock>
<CodeBlock title="terminal" language="bash">{`pip install vectry-agentlens anthropic`}</CodeBlock>
</section>
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Quick setup</h2>
<CodeBlock title="main.py">{`import agentlens
<CodeBlock title="main.py" language="python">{`import agentlens
from agentlens.integrations.anthropic import wrap_anthropic
import anthropic
@@ -110,7 +96,7 @@ response = client.messages.create(
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Async client</h2>
<CodeBlock title="async_example.py">{`from agentlens.integrations.anthropic import wrap_anthropic
<CodeBlock title="async_example.py" language="python">{`from agentlens.integrations.anthropic import wrap_anthropic
import anthropic
async_client = wrap_anthropic(anthropic.AsyncAnthropic())
@@ -126,7 +112,7 @@ response = await async_client.messages.create(
<h2 className="text-2xl font-semibold mb-4">
Combining with @trace
</h2>
<CodeBlock title="combined.py">{`import agentlens
<CodeBlock title="combined.py" language="python">{`import agentlens
from agentlens import trace
from agentlens.integrations.anthropic import wrap_anthropic
import anthropic
@@ -151,7 +137,7 @@ async def analyze(document: str) -> str:
When Claude invokes tools, AgentLens captures each tool use as a
TOOL_SELECTION decision point automatically:
</p>
<CodeBlock title="tools.py">{`@trace(name="claude-tool-agent")
<CodeBlock title="tools.py" language="python">{`@trace(name="claude-tool-agent")
async def tool_agent(prompt: str):
response = client.messages.create(
model="claude-sonnet-4-20250514",

28
apps/web/src/app/docs/integrations/langchain/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "LangChain Integration",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Use the AgentLensCallbackHandler to trace LangChain chains, agents, and tool invocations.",
};
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 LangChainIntegrationPage() {
return (
<div>
@@ -35,12 +21,12 @@ export default function LangChainIntegrationPage() {
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Installation</h2>
<CodeBlock title="terminal">{`pip install vectry-agentlens langchain langchain-openai`}</CodeBlock>
<CodeBlock title="terminal" language="bash">{`pip install vectry-agentlens langchain langchain-openai`}</CodeBlock>
</section>
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Quick setup</h2>
<CodeBlock title="main.py">{`import agentlens
<CodeBlock title="main.py" language="python">{`import agentlens
from agentlens.integrations.langchain import AgentLensCallbackHandler
agentlens.init(
@@ -56,7 +42,7 @@ handler = AgentLensCallbackHandler()`}</CodeBlock>
<p className="text-neutral-400 leading-relaxed mb-4">
Pass the handler in the <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">callbacks</code> config:
</p>
<CodeBlock title="chain_example.py">{`from langchain_openai import ChatOpenAI
<CodeBlock title="chain_example.py" language="python">{`from langchain_openai import ChatOpenAI
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import StrOutputParser
@@ -76,7 +62,7 @@ result = chain.invoke(
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Using with agents</h2>
<CodeBlock title="agent_example.py">{`from langchain_openai import ChatOpenAI
<CodeBlock title="agent_example.py" language="python">{`from langchain_openai import ChatOpenAI
from langchain.agents import AgentExecutor, create_tool_calling_agent
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.tools import tool
@@ -158,7 +144,7 @@ result = executor.invoke(
To trace all LangChain operations without passing callbacks
individually, set the handler globally:
</p>
<CodeBlock title="global.py">{`from langchain_core.globals import set_llm_cache
<CodeBlock title="global.py" language="python">{`from langchain_core.globals import set_llm_cache
from langchain.callbacks.manager import set_handler
set_handler(handler)
@@ -202,7 +188,7 @@ result = chain.invoke({"input": "Hello"})
</tbody>
</table>
</div>
<CodeBlock title="options.py">{`handler = AgentLensCallbackHandler(
<CodeBlock title="options.py" language="python">{`handler = AgentLensCallbackHandler(
trace_name="my-langchain-app",
tags=["production", "langchain"],
capture_io=True,

26
apps/web/src/app/docs/integrations/openai/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "OpenAI Integration",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Auto-trace all OpenAI API calls with a single wrapper. Captures model, tokens, cost, and latency.",
};
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 OpenAIIntegrationPage() {
return (
<div>
@@ -35,12 +21,12 @@ export default function OpenAIIntegrationPage() {
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Installation</h2>
<CodeBlock title="terminal">{`pip install vectry-agentlens openai`}</CodeBlock>
<CodeBlock title="terminal" language="bash">{`pip install vectry-agentlens openai`}</CodeBlock>
</section>
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Quick setup</h2>
<CodeBlock title="main.py">{`import agentlens
<CodeBlock title="main.py" language="python">{`import agentlens
from agentlens.integrations.openai import wrap_openai
import openai
@@ -113,7 +99,7 @@ response = client.chat.completions.create(
<p className="text-neutral-400 leading-relaxed mb-4">
The wrapper works with both sync and async OpenAI clients:
</p>
<CodeBlock title="async_example.py">{`from agentlens.integrations.openai import wrap_openai
<CodeBlock title="async_example.py" language="python">{`from agentlens.integrations.openai import wrap_openai
import openai
async_client = wrap_openai(openai.AsyncOpenAI())
@@ -132,7 +118,7 @@ response = await async_client.chat.completions.create(
When used inside a <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">@trace</code>-decorated
function, OpenAI calls appear as child spans of the trace:
</p>
<CodeBlock title="combined.py">{`import agentlens
<CodeBlock title="combined.py" language="python">{`import agentlens
from agentlens import trace
from agentlens.integrations.openai import wrap_openai
import openai
@@ -160,7 +146,7 @@ async def research(topic: str) -> str:
automatically captures each tool call as a TOOL_SELECTION decision
point and the tool execution as a TOOL_CALL span:
</p>
<CodeBlock title="tools.py">{`@trace(name="tool-agent")
<CodeBlock title="tools.py" language="python">{`@trace(name="tool-agent")
async def agent_with_tools(prompt: str):
response = client.chat.completions.create(
model="gpt-4o",

24
apps/web/src/app/docs/opencode-plugin/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "OpenCode Plugin",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Capture OpenCode sessions including tool calls, LLM calls, file edits, and git diffs with the AgentLens OpenCode plugin.",
};
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 OpenCodePluginPage() {
return (
<div>
@@ -35,7 +21,7 @@ export default function OpenCodePluginPage() {
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Installation</h2>
<CodeBlock title="terminal">{`npm install opencode-agentlens`}</CodeBlock>
<CodeBlock title="terminal" language="bash">{`npm install opencode-agentlens`}</CodeBlock>
</section>
<section className="mb-12">
@@ -43,13 +29,13 @@ export default function OpenCodePluginPage() {
<p className="text-neutral-400 leading-relaxed mb-4">
Add the plugin to your <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">opencode.json</code> configuration file:
</p>
<CodeBlock title="opencode.json">{`{
<CodeBlock title="opencode.json" language="json">{`{
"plugin": ["opencode-agentlens"]
}`}</CodeBlock>
<p className="text-neutral-400 leading-relaxed mt-4 mb-4">
Set the required environment variables:
</p>
<CodeBlock title="terminal">{`export AGENTLENS_API_KEY="your-api-key"
<CodeBlock title="terminal" language="bash">{`export AGENTLENS_API_KEY="your-api-key"
export AGENTLENS_ENDPOINT="https://agentlens.vectry.tech"`}</CodeBlock>
<p className="text-neutral-400 leading-relaxed mt-4">
@@ -219,7 +205,7 @@ export AGENTLENS_ENDPOINT="https://agentlens.vectry.tech"`}</CodeBlock>
By default, the plugin captures full file contents and command outputs.
To filter sensitive data, set the <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">AGENTLENS_REDACT_PATTERNS</code> environment variable with a comma-separated list of regex patterns:
</p>
<CodeBlock title="terminal">{`export AGENTLENS_REDACT_PATTERNS="password=.*,API_KEY=.*,Bearer .*"`}</CodeBlock>
<CodeBlock title="terminal" language="bash">{`export AGENTLENS_REDACT_PATTERNS="password=.*,API_KEY=.*,Bearer .*"`}</CodeBlock>
<p className="text-neutral-400 leading-relaxed mt-4">
Matched content is replaced with <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">[REDACTED]</code> before
being sent to the server.

26
apps/web/src/app/docs/python-sdk/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "Python SDK",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Full reference for the AgentLens Python SDK: init(), @trace decorator, log_decision(), TraceContext, and configuration.",
};
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>
);
}
function ApiSection({
name,
signature,
@@ -113,7 +99,7 @@ export default function PythonSdkPage() {
</tbody>
</table>
</div>
<CodeBlock title="example.py">{`import agentlens
<CodeBlock title="example.py" language="python">{`import agentlens
agentlens.init(
api_key="al_key_abc123",
@@ -159,7 +145,7 @@ agentlens.init(
</tbody>
</table>
</div>
<CodeBlock title="decorator.py">{`from agentlens import trace
<CodeBlock title="decorator.py" language="python">{`from agentlens import trace
@trace(name="research-agent", tags=["research", "v2"])
async def research(topic: str) -> str:
@@ -219,7 +205,7 @@ def simple_agent(prompt: str) -> str:
</tbody>
</table>
</div>
<CodeBlock title="decisions.py">{`import agentlens
<CodeBlock title="decisions.py" language="python">{`import agentlens
from agentlens import trace
@trace(name="routing-agent")
@@ -245,7 +231,7 @@ async def route_request(user_input: str):
signature="agentlens.TraceContext"
description="Context manager for manual trace lifecycle control. Use this when the @trace decorator does not fit your workflow."
>
<CodeBlock title="context.py">{`import agentlens
<CodeBlock title="context.py" language="python">{`import agentlens
async def process_batch(items: list[str]):
for item in items:
@@ -275,7 +261,7 @@ async def process_batch(items: list[str]):
signature="agentlens.shutdown(timeout=10.0)"
description="Flush all pending traces and shut down the background sender. Call this before your application exits to avoid losing data."
>
<CodeBlock title="shutdown.py">{`import agentlens
<CodeBlock title="shutdown.py" language="python">{`import agentlens
import atexit
agentlens.init(api_key="...", endpoint="...")

32
apps/web/src/app/docs/self-hosting/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "Self-Hosting",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"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>
@@ -32,7 +18,7 @@ export default function SelfHostingPage() {
<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
<CodeBlock title="terminal" language="bash">{`git clone https://gitea.repi.fun/repi/agentlens
cd agentlens
docker build -t agentlens .
docker run -p 3000:3000 \\
@@ -57,7 +43,7 @@ docker run -p 3000:3000 \\
<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"
<CodeBlock title="docker-compose.yml" language="yaml">{`version: "3.8"
services:
db:
@@ -84,7 +70,7 @@ services:
volumes:
pgdata:`}</CodeBlock>
<CodeBlock title="terminal">{`docker compose up -d`}</CodeBlock>
<CodeBlock title="terminal" language="bash">{`docker compose up -d`}</CodeBlock>
</section>
<section className="mb-12">
@@ -92,7 +78,7 @@ volumes:
<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
<CodeBlock title="terminal" language="bash">{`git clone https://gitea.repi.fun/repi/agentlens
cd agentlens
# Install dependencies (uses npm workspaces)
@@ -172,7 +158,7 @@ npm run dev --workspace=@agentlens/web`}</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)
<CodeBlock title="terminal" language="bash">{`# Push schema to database (development)
npm run db:push --workspace=@agentlens/web
# Run migrations (production)
@@ -184,10 +170,10 @@ npm run db:migrate --workspace=@agentlens/web`}</CodeBlock>
<p className="text-neutral-400 leading-relaxed mb-4">
For production deployments behind nginx or Caddy:
</p>
<CodeBlock title="Caddyfile">{`agentlens.yourdomain.com {
<CodeBlock title="Caddyfile" language="bash">{`agentlens.yourdomain.com {
reverse_proxy localhost:3000
}`}</CodeBlock>
<CodeBlock title="nginx.conf">{`server {
<CodeBlock title="nginx.conf" language="bash">{`server {
listen 443 ssl;
server_name agentlens.yourdomain.com;
@@ -203,7 +189,7 @@ npm run db:migrate --workspace=@agentlens/web`}</CodeBlock>
<section className="mb-12">
<h2 className="text-2xl font-semibold mb-4">Updating</h2>
<CodeBlock title="terminal">{`# Pull latest changes
<CodeBlock title="terminal" language="bash">{`# Pull latest changes
cd agentlens
git pull origin main

24
apps/web/src/app/docs/typescript-sdk/page.tsx
View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";
export const metadata: Metadata = {
title: "TypeScript SDK",
@@ -6,21 +7,6 @@ export const metadata: Metadata = {
"Full reference for the AgentLens TypeScript SDK: init(), TraceBuilder, createDecision(), and shutdown().",
};
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>
);
}
function ApiSection({
name,
signature,
@@ -115,7 +101,7 @@ export default function TypeScriptSdkPage() {
</tbody>
</table>
</div>
<CodeBlock title="init.ts">{`import { init } from "agentlens-sdk";
<CodeBlock title="init.ts" language="typescript">{`import { init } from "agentlens-sdk";
init({
apiKey: process.env.AGENTLENS_API_KEY!,
@@ -200,7 +186,7 @@ init({
</div>
</div>
<CodeBlock title="trace-builder.ts">{`import { TraceBuilder } from "agentlens-sdk";
<CodeBlock title="trace-builder.ts" language="typescript">{`import { TraceBuilder } from "agentlens-sdk";
const trace = new TraceBuilder("customer-support", {
tags: ["support", "v2"],
@@ -243,7 +229,7 @@ await trace.end();`}</CodeBlock>
signature='createDecision(type, chosen, alternatives, options?)'
description="Standalone helper to create a decision point outside of a TraceBuilder. Useful when building traces from raw data."
>
<CodeBlock title="standalone.ts">{`import { createDecision } from "agentlens-sdk";
<CodeBlock title="standalone.ts" language="typescript">{`import { createDecision } from "agentlens-sdk";
const decision = createDecision(
"TOOL_SELECTION",
@@ -261,7 +247,7 @@ const decision = createDecision(
signature="shutdown(timeout?: number): Promise<void>"
description="Flush all pending traces and tear down the background sender. Default timeout is 10 seconds."
>
<CodeBlock title="shutdown.ts">{`import { shutdown } from "agentlens-sdk";
<CodeBlock title="shutdown.ts" language="typescript">{`import { shutdown } from "agentlens-sdk";
process.on("SIGTERM", async () => {
await shutdown(30000);

34
apps/web/src/components/code-block.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { codeToHtml } from "shiki";
import { CopyButton } from "./copy-button";
export async function CodeBlock({
children,
title,
language = "text",
}: {
children: string;
title?: string;
language?: string;
}) {
const html = await codeToHtml(children, {
lang: language,
theme: "github-dark",
});
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>
)}
<div className="relative">
<CopyButton text={children} />
<div
className="p-4 overflow-x-auto text-sm leading-relaxed [&_pre]:!bg-transparent [&_code]:!bg-transparent"
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
</div>
);
}

24
apps/web/src/components/copy-button.tsx Normal file
View File

@@ -0,0 +1,24 @@
"use client";
import { useState } from "react";
import { Copy, Check } from "lucide-react";
export function CopyButton({ text }: { text: string }) {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
await navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<button
onClick={handleCopy}
className="absolute top-3 right-3 p-1.5 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50 transition-colors"
aria-label="Copy to clipboard"
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
</button>
);
}