### Project Structure Example

Source: https://github.com/evilmartians/agent-prism/blob/main/CONTRIBUTING.md

Illustrates the typical directory structure for components within the 'ui' package, including a nested structure for larger components with sub-components.

```text
packages
└── ui
    └── src
        └── components
            ├── Input.tsx
            ├── Button.tsx
            ├── ...
            └── YourNewComponent.tsx
```

```text
packages
└── ui
    └── src
        └── components
            ├── Input.tsx
            ├── Button.tsx
            ├── ...
            └── YourComponent
                ├── YourComponent.tsx
                ├── YourComponentHeader.tsx
                ├── YourComponentContent.tsx
                └── YourComponentFooter.tsx
```

--------------------------------

### Install @evilmartians/agent-prism-data Package

Source: https://github.com/evilmartians/agent-prism/blob/main/packages/data/readme.md

Installs the @evilmartians/agent-prism-data package along with its peer dependency @evilmartians/agent-prism-types using npm.

```bash
npm install @evilmartians/agent-prism-data @evilmartians/agent-prism-types
```

--------------------------------

### Install AgentPrism Types Package

Source: https://github.com/evilmartians/agent-prism/blob/main/packages/types/readme.md

Installs the @evilmartians/agent-prism-types package using npm. This package contains TypeScript definitions and semantic convention constants for AgentPrism.

```bash
npm install @evilmartians/agent-prism-types
```

--------------------------------

### Sample OTLP Input JSON

Source: https://github.com/evilmartians/agent-prism/blob/main/readme.md

An example of the JSON structure for an OpenTelemetry trace document, showcasing resource spans, scope spans, and individual spans with attributes like model and input tokens.

```json
{
  "resourceSpans": [
    {
      "scopeSpans": [
        {
          "spans": [
            {
              "traceId": "abc123...",
              "spanId": "def456...",
              "name": "openai.chat",
              "attributes": [
                {
                  "key": "gen_ai.request.model",
                  "value": { "stringValue": "gpt-4" }
                },
                {
                  "key": "gen_ai.usage.input_tokens",
                  "value": { "intValue": "150" }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}
```

--------------------------------

### Quick Start: TraceViewer Component in React

Source: https://github.com/evilmartians/agent-prism/blob/main/readme.md

Demonstrates the basic usage of the TraceViewer component for an out-of-the-box trace visualization interface. It requires trace data and a span adapter to process it.

```tsx
import { TraceViewer } from "./components/agent-prism/TraceViewer";
import { openTelemetrySpanAdapter } from "@evilmartians/agent-prism-data";

function App() {
  return (
    <TraceViewer
      data={[
        {
          traceRecord: yourTraceRecord,
          spans:
            openTelemetrySpanAdapter.convertRawDocumentsToSpans(yourTraceData),
        },
      ]}
    />
  );
}
```

--------------------------------

### Run Development Server in Next.js Project

Source: https://github.com/evilmartians/agent-prism/blob/main/packages/saas/README.md

Commands to start the development server for a Next.js project. These commands are typically run from the project's root directory. The development server allows for live reloading and local testing.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

```bash
bun dev
```

--------------------------------

### Convert OpenTelemetry and Langfuse Traces to UI Spans

Source: https://github.com/evilmartians/agent-prism/blob/main/packages/data/readme.md

Demonstrates how to import and use adapters from @evilmartians/agent-prism-data to convert raw OpenTelemetry and Langfuse trace documents into UI-ready span formats. It also shows how to build hierarchical span trees, convert individual spans, and extract various span attributes.

```typescript
import {
  openTelemetrySpanAdapter,
  langfuseSpanAdapter,
} from "@evilmartians/agent-prism-data";

// Convert OTLP document to UI-ready spans
const otlpSpans = openTelemetrySpanAdapter.convertRawDocumentsToSpans(otlpDocument);

// Convert Langfuse observations to UI-ready spans
const langfuseSpans = langfuseSpanAdapter.convertRawDocumentsToSpans(langfuseDocument);

// Build hierarchical tree structure from spans
const tree = openTelemetrySpanAdapter.convertRawSpansToSpanTree(otlpSpans);

// Convert individual span
const spanCard = openTelemetrySpanAdapter.convertRawSpanToTraceSpan(otlpSpan);

// Extract information from spans
const category = openTelemetrySpanAdapter.getSpanCategory(otlpSpan);
const cost = openTelemetrySpanAdapter.getSpanCost(otlpSpan);
const duration = openTelemetrySpanAdapter.getSpanDuration(otlpSpan);
const inputOutput = openTelemetrySpanAdapter.getSpanInputOutput(otlpSpan);
const status = openTelemetrySpanAdapter.getSpanStatus(otlpSpan);
const tokens = openTelemetrySpanAdapter.getSpanTokensCount(otlpSpan);
```

--------------------------------

### Adapt OTLP Traces to Spans with AgentPrism

Source: https://github.com/evilmartians/agent-prism/blob/main/readme.md

Converts raw OpenTelemetry (OTLP) trace documents into a standardized span format using the `openTelemetrySpanAdapter` from `@evilmartians/agent-prism-data`. This is useful for integrating OTLP traces into the AgentPrism TraceViewer.

```typescript
import { openTelemetrySpanAdapter } from "@evilmartians/agent-prism-data";

const spans = openTelemetrySpanAdapter.convertRawDocumentsToSpans(otlpDocument);
```

--------------------------------

### Custom Layout with Individual Components in React

Source: https://github.com/evilmartians/agent-prism/blob/main/readme.md

Illustrates how to build a custom trace visualization layout using individual components like TraceList, TreeView, and DetailsView. This approach offers more control over the UI structure and state management.

```tsx
import { useState } from "react";
import type { TraceRecord, TraceSpan } from "@evilmartians/agent-prism-types";
import { openTelemetrySpanAdapter } from "@evilmartians/agent-prism-data";

import { TraceList } from "./components/agent-prism/TraceList/TraceList";
import { TreeView } from "./components/agent-prism/TreeView";
import { DetailsView } from "./components/agent-prism/DetailsView/DetailsView";

// Mock OpenTelemetryDocument (replace with real data)
const traceData = {
  resourceSpans: [],
};

// Mock traces with all required TraceRecord fields
const traces: TraceRecord[] = [
  {
    id: "1",
    name: "Trace 1",
    spansCount: 0,
    durationMs: 0,
    agentDescription: "Mock trace 1",
  },
  {
    id: "2",
    name: "Trace 2",
    spansCount: 0,
    durationMs: 0,
    agentDescription: "Mock trace 2",
  },
];

export function App() {
  const [selectedTrace, setSelectedTrace] = useState<TraceRecord | undefined>(
    undefined,
  );
  const [selectedSpan, setSelectedSpan] = useState<TraceSpan | undefined>(
    undefined,
  );
  const [expandedSpansIds, setExpandedSpansIds] = useState<string[]>([]);

  const spans = openTelemetrySpanAdapter.convertRawDocumentsToSpans(traceData);

  return (
    <div className="grid grid-cols-3 gap-4">
      {/* Traces sidebar */}
      <TraceList
        traces={traces}
        expanded={true}
        onExpandStateChange={() => {}}
        onTraceSelect={setSelectedTrace}
        selectedTrace={selectedTrace}
      />

      {/* Tree view */}
      <TreeView
        spans={spans}
        onSpanSelect={setSelectedSpan}
        selectedSpan={selectedSpan}
        expandedSpansIds={expandedSpansIds}
        onExpandSpansIdsChange={setExpandedSpansIds}
        spanCardViewOptions={{
          expandButton: "inside",
        }}
      />

      {/* Details panel */}
      {selectedSpan && <DetailsView data={selectedSpan} />}
    </div>
  );
}
```

--------------------------------

### Import AgentPrism Types and Constants

Source: https://github.com/evilmartians/agent-prism/blob/main/packages/types/readme.md

Demonstrates how to import core TypeScript types such as TraceSpan, TraceSpanAttribute, and TraceSpanCategory, as well as OpenTelemetry and Langfuse related types. It also shows importing constants for OpenInference semantic conventions.

```typescript
// Import types
import type {
  TraceSpan,
  TraceSpanAttribute,
  TraceSpanCategory,
  OpenTelemetrySpan,
  OpenTelemetryDocument,
} from "@evilmartians/agent-prism-types";

// Import constants for OpenInference semantic conventions
import { 
  OPENINFERENCE_ATTRIBUTES,
  OPENINFERENCE_MAPPINGS,
  OPENTELEMETRY_GENAI_MAPPINGS,
} from "@evilmartians/agent-prism-types";
```

--------------------------------

### Conditional Class Styling with Classnames

Source: https://github.com/evilmartians/agent-prism/blob/main/CONTRIBUTING.md

Demonstrates how to use the 'classnames' library for conditionally applying CSS classes based on component state or props. This is recommended for managing complex styling logic.

```jsx
import cn from "classnames";

...

<div className={classnames(
  "flex items-center gap-2",
  "bg-gray-300 dark:bg-gray-700",
  selected && "border border-2 border-orange-400",
  hasChildren ? "p-4" : "p-2"
)}>
...
</div>
```

--------------------------------

### Adapt Langfuse Traces to Spans with AgentPrism

Source: https://github.com/evilmartians/agent-prism/blob/main/readme.md

Converts raw Langfuse trace documents into a standardized span format using the `langfuseSpanAdapter` from `@evilmartians/agent-prism-data`. This facilitates the use of Langfuse traces within the AgentPrism TraceViewer.

```typescript
import { langfuseSpanAdapter } from "@evilmartians/agent-prism-data";

const spans = langfuseSpanAdapter.convertRawDocumentsToSpans(langfuseDocument);
```

--------------------------------

### TraceViewer Data Structure Interface

Source: https://github.com/evilmartians/agent-prism/blob/main/readme.md

Defines the expected data structure for AgentPrism's TraceViewer component. It includes trace metadata, a hierarchical span tree, and optional badges, ensuring compatibility with UI components.

```typescript
interface TraceViewerData {
  traceRecord: TraceRecord; // Trace metadata (id, timestamp, status)
  spans: TraceSpan[]; // Hierarchical span tree
  badges?: BadgeProps[]; // Optional trace badges
}
```

--------------------------------

### Data Integration Adapters in JavaScript/TypeScript

Source: https://github.com/evilmartians/agent-prism/blob/main/readme.md

Shows how to use data adapters provided by AgentPrism to normalize trace data from different sources like OpenTelemetry and Langfuse into a format suitable for UI rendering. These adapters offer methods for converting raw data and extracting specific span information.

```tsx
import {
  openTelemetrySpanAdapter,
  langfuseSpanAdapter,
} from "@evilmartians/agent-prism-data";

// convert whole documents to TraceSpans (normalized view)
openTelemetrySpanAdapter.convertRawDocumentsToSpans(otlpData);

// convert single span (a.k.a. record, a.k.a. Langfuse observation)
openTelemetrySpanAdapter.convertRawSpanToTraceSpan(otlpData);

// in case you want to use TreeView component
openTelemetrySpanAdapter.convertRawSpansToSpanTree(otlpData);

// get some data for a particular observation/span (e.g. when you loaded one record)
langfuseSpanAdapter.getSpanCategory(observationData);
langfuseSpanAdapter.getSpanCost(observationData);
langfuseSpanAdapter.getSpanDuration(observationData);
langfuseSpanAdapter.getSpanInputOutput(observationData);
langfuseSpanAdapter.getSpanStatus(observationData);
langfuseSpanAdapter.getSpanTokensCount(observationData);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.