@vantinelai/nextjs 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/README.md +205 -0
- package/dist/chunk-W22WQTUM.mjs +19 -0
- package/dist/client.d.mts +6 -0
- package/dist/client.d.ts +6 -0
- package/dist/client.js +45 -0
- package/dist/client.mjs +9 -0
- package/dist/index.d.mts +83 -0
- package/dist/index.d.ts +83 -0
- package/dist/index.js +80 -0
- package/dist/index.mjs +39 -0
- package/dist/server.d.mts +6 -0
- package/dist/server.d.ts +6 -0
- package/dist/server.js +38 -0
- package/dist/server.mjs +12 -0
- package/package.json +67 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# @vantinel/nextjs Changelog
|
|
2
|
+
|
|
3
|
+
## [0.2.0] - 2026-02-26
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
- `README.md` — setup guide covering VantinelProvider, useVantinel(), createServerMonitor(), createClientVantinel(), trace correlation, and environment variable reference
|
|
7
|
+
|
|
8
|
+
### Changed
|
|
9
|
+
- Peer dependency on `@vantinel/node-sdk` and `@vantinel/js-sdk` bumped to `^0.3.0`
|
|
10
|
+
|
|
11
|
+
## [0.1.0] - 2026-02-26
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
- `VantinelProvider` — React context provider for Next.js App Router; wraps your root layout to enable `useVantinel()` everywhere
|
|
15
|
+
- `useVantinel()` — hook giving client components access to `track()`, `captureError()`, `ping()`, `startTrace()`, `setGlobalMetadata()`, `flush()`
|
|
16
|
+
- `createServerMonitor()` — `globalThis` singleton factory for API routes and Server Components (survives Next.js hot-reload; no duplicate instances)
|
|
17
|
+
- `createClientVantinel()` — module-level singleton for Client Components (without the Provider pattern)
|
|
18
|
+
- Full TypeScript support with typed exports
|
|
19
|
+
- Environment variable guidance:
|
|
20
|
+
- Server: `VANTINEL_API_KEY`, `VANTINEL_CLIENT_ID`, `VANTINEL_COLLECTOR_URL`, `VANTINEL_DRY_RUN`, `VANTINEL_SHADOW_MODE`
|
|
21
|
+
- Browser: `NEXT_PUBLIC_VANTINEL_API_KEY`, `NEXT_PUBLIC_VANTINEL_COLLECTOR_URL`
|
|
22
|
+
- Trace correlation pattern: `startTrace()` on browser → pass via `X-Vantinel-Trace` header → backend `monitor(fn, { traceId })`
|
package/README.md
ADDED
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
# @vantinel/nextjs
|
|
2
|
+
|
|
3
|
+
Next.js App Router integration for [Vantinel](https://vantinel.ai) — real-time AI agent observability & guardrails.
|
|
4
|
+
|
|
5
|
+
This package provides first-class Next.js support on top of the `@vantinel/node-sdk` (server) and `@vantinel/js-sdk` (browser), with React context, hooks, and a singleton factory that survives hot-reload.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @vantinel/nextjs
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
### 1. Add environment variables
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# .env.local
|
|
19
|
+
VANTINEL_API_KEY=vantinel_abc123
|
|
20
|
+
VANTINEL_CLIENT_ID=my-company
|
|
21
|
+
|
|
22
|
+
# Exposed to the browser
|
|
23
|
+
NEXT_PUBLIC_VANTINEL_API_KEY=vantinel_abc123
|
|
24
|
+
NEXT_PUBLIC_VANTINEL_COLLECTOR_URL=https://collector.yourcompany.com
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### 2. Wrap your root layout
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// app/layout.tsx
|
|
31
|
+
import { VantinelProvider } from '@vantinel/nextjs';
|
|
32
|
+
|
|
33
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
34
|
+
return (
|
|
35
|
+
<html>
|
|
36
|
+
<body>
|
|
37
|
+
<VantinelProvider
|
|
38
|
+
apiKey={process.env.NEXT_PUBLIC_VANTINEL_API_KEY!}
|
|
39
|
+
collectorUrl={process.env.NEXT_PUBLIC_VANTINEL_COLLECTOR_URL}
|
|
40
|
+
>
|
|
41
|
+
{children}
|
|
42
|
+
</VantinelProvider>
|
|
43
|
+
</body>
|
|
44
|
+
</html>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### 3. Monitor tools in Client Components
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
'use client';
|
|
53
|
+
import { useVantinel } from '@vantinel/nextjs/client';
|
|
54
|
+
|
|
55
|
+
export default function AgentPage() {
|
|
56
|
+
const { track, captureError } = useVantinel();
|
|
57
|
+
|
|
58
|
+
async function runSearch(query: string) {
|
|
59
|
+
const decision = await track('search_database', { query });
|
|
60
|
+
if (decision.decision === 'block') return;
|
|
61
|
+
|
|
62
|
+
try {
|
|
63
|
+
return await fetch('/api/search', { body: JSON.stringify({ query }) });
|
|
64
|
+
} catch (err) {
|
|
65
|
+
await captureError('search_database', err as Error);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### 4. Monitor tools in Server Components & API Routes
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
// app/api/agent/route.ts
|
|
75
|
+
import { createServerMonitor } from '@vantinel/nextjs/server';
|
|
76
|
+
|
|
77
|
+
const monitor = createServerMonitor({
|
|
78
|
+
apiKey: process.env.VANTINEL_API_KEY!,
|
|
79
|
+
clientId: process.env.VANTINEL_CLIENT_ID!,
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
export async function POST(req: Request) {
|
|
83
|
+
const wrappedSearch = monitor.monitor('search_database', searchDatabase);
|
|
84
|
+
const results = await wrappedSearch({ query: 'hello' });
|
|
85
|
+
return Response.json(results);
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## API
|
|
90
|
+
|
|
91
|
+
### `<VantinelProvider>`
|
|
92
|
+
|
|
93
|
+
React context provider. Place in your root `app/layout.tsx`.
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
import { VantinelProvider } from '@vantinel/nextjs';
|
|
97
|
+
|
|
98
|
+
<VantinelProvider
|
|
99
|
+
apiKey="your-key"
|
|
100
|
+
collectorUrl="https://collector.yourcompany.com" // optional
|
|
101
|
+
agentId="my-next-app" // optional
|
|
102
|
+
dryRun={process.env.NODE_ENV !== 'production'} // optional
|
|
103
|
+
shadowMode={false} // optional
|
|
104
|
+
>
|
|
105
|
+
{children}
|
|
106
|
+
</VantinelProvider>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### `useVantinel()` — Client Components
|
|
110
|
+
|
|
111
|
+
Access the Vantinel client from any Client Component:
|
|
112
|
+
|
|
113
|
+
```ts
|
|
114
|
+
import { useVantinel } from '@vantinel/nextjs/client';
|
|
115
|
+
|
|
116
|
+
const {
|
|
117
|
+
track, // (toolName, args) => Promise<VantinelDecision>
|
|
118
|
+
captureError, // (toolName, error, metadata?) => Promise<void>
|
|
119
|
+
ping, // () => Promise<{ ok: boolean; latencyMs: number }>
|
|
120
|
+
startTrace, // () => string (UUID)
|
|
121
|
+
setGlobalMetadata, // (metadata) => void
|
|
122
|
+
flush, // () => Promise<void>
|
|
123
|
+
} = useVantinel();
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### `createServerMonitor(config)` — Server Components & API Routes
|
|
127
|
+
|
|
128
|
+
Returns a `VantinelMonitor` singleton that persists across hot-reloads:
|
|
129
|
+
|
|
130
|
+
```ts
|
|
131
|
+
import { createServerMonitor } from '@vantinel/nextjs/server';
|
|
132
|
+
|
|
133
|
+
const monitor = createServerMonitor({
|
|
134
|
+
apiKey: process.env.VANTINEL_API_KEY!,
|
|
135
|
+
clientId: process.env.VANTINEL_CLIENT_ID!,
|
|
136
|
+
agentId: 'api-route-agent',
|
|
137
|
+
dryRun: process.env.VANTINEL_DRY_RUN === 'true',
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
// All VantinelMonitor methods available:
|
|
141
|
+
// monitor.monitor(), monitor.wrapOpenAI(), monitor.wrapLangChain()
|
|
142
|
+
// monitor.captureError(), monitor.ping(), monitor.flush(), etc.
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### `createClientVantinel(config)` — without Provider
|
|
146
|
+
|
|
147
|
+
Module-level singleton for Client Components that don't use the Provider pattern:
|
|
148
|
+
|
|
149
|
+
```ts
|
|
150
|
+
import { createClientVantinel } from '@vantinel/nextjs/client';
|
|
151
|
+
|
|
152
|
+
const vantinel = createClientVantinel({
|
|
153
|
+
apiKey: process.env.NEXT_PUBLIC_VANTINEL_API_KEY!,
|
|
154
|
+
});
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
## Trace Correlation
|
|
158
|
+
|
|
159
|
+
Link browser events to server-side AI calls with a shared trace ID:
|
|
160
|
+
|
|
161
|
+
```tsx
|
|
162
|
+
// Client Component
|
|
163
|
+
const { track, startTrace } = useVantinel();
|
|
164
|
+
const traceId = startTrace();
|
|
165
|
+
|
|
166
|
+
// Pass trace ID to your API route
|
|
167
|
+
await fetch('/api/agent', {
|
|
168
|
+
headers: { 'X-Vantinel-Trace': traceId },
|
|
169
|
+
body: JSON.stringify({ query }),
|
|
170
|
+
});
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
```ts
|
|
174
|
+
// API Route
|
|
175
|
+
const monitor = createServerMonitor({ ... });
|
|
176
|
+
|
|
177
|
+
export async function POST(req: Request) {
|
|
178
|
+
const traceId = req.headers.get('X-Vantinel-Trace') ?? undefined;
|
|
179
|
+
const wrappedFn = monitor.monitor('openai_call', callOpenAI, { traceId });
|
|
180
|
+
return Response.json(await wrappedFn());
|
|
181
|
+
}
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
## Environment Variables
|
|
185
|
+
|
|
186
|
+
### Server-side (API routes, Server Components)
|
|
187
|
+
|
|
188
|
+
| Variable | Required | Description |
|
|
189
|
+
|---|---|---|
|
|
190
|
+
| `VANTINEL_API_KEY` | Yes | API key |
|
|
191
|
+
| `VANTINEL_CLIENT_ID` | Yes | Organization ID |
|
|
192
|
+
| `VANTINEL_COLLECTOR_URL` | No | Defaults to `http://localhost:8000` |
|
|
193
|
+
| `VANTINEL_DRY_RUN` | No | Set `true` to disable HTTP in CI |
|
|
194
|
+
| `VANTINEL_SHADOW_MODE` | No | Set `true` for shadow mode |
|
|
195
|
+
|
|
196
|
+
### Browser-side (Client Components)
|
|
197
|
+
|
|
198
|
+
| Variable | Required | Description |
|
|
199
|
+
|---|---|---|
|
|
200
|
+
| `NEXT_PUBLIC_VANTINEL_API_KEY` | Yes | API key (exposed to browser) |
|
|
201
|
+
| `NEXT_PUBLIC_VANTINEL_COLLECTOR_URL` | No | Collector URL (must be HTTPS for non-localhost) |
|
|
202
|
+
|
|
203
|
+
## License
|
|
204
|
+
|
|
205
|
+
MIT © Vantinel AI
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// src/client.ts
|
|
2
|
+
import { VantinelClient } from "@vantinelai/js-sdk";
|
|
3
|
+
var _clientInstance;
|
|
4
|
+
function createClientVantinel(config) {
|
|
5
|
+
if (!_clientInstance) {
|
|
6
|
+
_clientInstance = new VantinelClient({
|
|
7
|
+
collectorUrl: process.env.NEXT_PUBLIC_VANTINEL_COLLECTOR_URL ?? "http://localhost:8000",
|
|
8
|
+
agentId: "browser-agent",
|
|
9
|
+
...config,
|
|
10
|
+
apiKey: config?.apiKey ?? process.env.NEXT_PUBLIC_VANTINEL_API_KEY
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
return _clientInstance;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export {
|
|
17
|
+
VantinelClient,
|
|
18
|
+
createClientVantinel
|
|
19
|
+
};
|
package/dist/client.d.ts
ADDED
package/dist/client.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/client.ts
|
|
22
|
+
var client_exports = {};
|
|
23
|
+
__export(client_exports, {
|
|
24
|
+
VantinelClient: () => import_js_sdk.VantinelClient,
|
|
25
|
+
createClientVantinel: () => createClientVantinel
|
|
26
|
+
});
|
|
27
|
+
module.exports = __toCommonJS(client_exports);
|
|
28
|
+
var import_js_sdk = require("@vantinelai/js-sdk");
|
|
29
|
+
var _clientInstance;
|
|
30
|
+
function createClientVantinel(config) {
|
|
31
|
+
if (!_clientInstance) {
|
|
32
|
+
_clientInstance = new import_js_sdk.VantinelClient({
|
|
33
|
+
collectorUrl: process.env.NEXT_PUBLIC_VANTINEL_COLLECTOR_URL ?? "http://localhost:8000",
|
|
34
|
+
agentId: "browser-agent",
|
|
35
|
+
...config,
|
|
36
|
+
apiKey: config?.apiKey ?? process.env.NEXT_PUBLIC_VANTINEL_API_KEY
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
return _clientInstance;
|
|
40
|
+
}
|
|
41
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
42
|
+
0 && (module.exports = {
|
|
43
|
+
VantinelClient,
|
|
44
|
+
createClientVantinel
|
|
45
|
+
});
|
package/dist/client.mjs
ADDED
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { VantinelClient, VantinelDecision, VantinelConfig } from '@vantinelai/js-sdk';
|
|
4
|
+
export { VantinelClient, VantinelConfig, VantinelDecision } from '@vantinelai/js-sdk';
|
|
5
|
+
export { createClientVantinel } from './client.mjs';
|
|
6
|
+
|
|
7
|
+
interface VantinelContextValue {
|
|
8
|
+
client: VantinelClient;
|
|
9
|
+
track: (toolName: string, args: Record<string, unknown>, options?: {
|
|
10
|
+
traceId?: string;
|
|
11
|
+
skip?: boolean;
|
|
12
|
+
}) => Promise<VantinelDecision>;
|
|
13
|
+
captureError: (toolName: string, error: Error, metadata?: Record<string, unknown>) => Promise<void>;
|
|
14
|
+
ping: () => Promise<{
|
|
15
|
+
ok: boolean;
|
|
16
|
+
latencyMs: number;
|
|
17
|
+
}>;
|
|
18
|
+
startTrace: () => string;
|
|
19
|
+
setGlobalMetadata: (metadata: Record<string, unknown>) => void;
|
|
20
|
+
flush: () => Promise<void>;
|
|
21
|
+
}
|
|
22
|
+
interface VantinelProviderProps {
|
|
23
|
+
config: VantinelConfig;
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* VantinelProvider — Add to your root layout to enable `useVantinel()` in any client component.
|
|
28
|
+
*
|
|
29
|
+
* ## Setup (app/layout.tsx)
|
|
30
|
+
*
|
|
31
|
+
* ```tsx
|
|
32
|
+
* import { VantinelProvider } from '@vantinelai/nextjs';
|
|
33
|
+
*
|
|
34
|
+
* export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
35
|
+
* return (
|
|
36
|
+
* <html>
|
|
37
|
+
* <body>
|
|
38
|
+
* <VantinelProvider config={{
|
|
39
|
+
* apiKey: process.env.NEXT_PUBLIC_VANTINEL_API_KEY,
|
|
40
|
+
* agentId: 'my-app',
|
|
41
|
+
* shadowMode: process.env.NODE_ENV !== 'production',
|
|
42
|
+
* slackWebhookUrl: process.env.NEXT_PUBLIC_VANTINEL_SLACK_WEBHOOK,
|
|
43
|
+
* }}>
|
|
44
|
+
* {children}
|
|
45
|
+
* </VantinelProvider>
|
|
46
|
+
* </body>
|
|
47
|
+
* </html>
|
|
48
|
+
* );
|
|
49
|
+
* }
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
declare function VantinelProvider({ config, children }: VantinelProviderProps): react_jsx_runtime.JSX.Element;
|
|
53
|
+
/**
|
|
54
|
+
* useVantinel — access Vantinel tracking in any client component.
|
|
55
|
+
*
|
|
56
|
+
* Must be used inside `<VantinelProvider>`.
|
|
57
|
+
*
|
|
58
|
+
* ```tsx
|
|
59
|
+
* 'use client';
|
|
60
|
+
* import { useVantinel } from '@vantinelai/nextjs';
|
|
61
|
+
*
|
|
62
|
+
* export function GenerateButton({ topics }: { topics: string[] }) {
|
|
63
|
+
* const { track, captureError, startTrace } = useVantinel();
|
|
64
|
+
*
|
|
65
|
+
* async function handleClick() {
|
|
66
|
+
* const traceId = startTrace();
|
|
67
|
+
* try {
|
|
68
|
+
* await track('generate_test_click', { topics }, { traceId });
|
|
69
|
+
* await fetch('/api/generate', {
|
|
70
|
+
* headers: { 'X-Vantinel-Trace': traceId },
|
|
71
|
+
* });
|
|
72
|
+
* } catch (err) {
|
|
73
|
+
* await captureError('generate_test_click', err as Error);
|
|
74
|
+
* }
|
|
75
|
+
* }
|
|
76
|
+
*
|
|
77
|
+
* return <button onClick={handleClick}>Generate Test</button>;
|
|
78
|
+
* }
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
declare function useVantinel(): VantinelContextValue;
|
|
82
|
+
|
|
83
|
+
export { type VantinelContextValue, VantinelProvider, type VantinelProviderProps, useVantinel };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { VantinelClient, VantinelDecision, VantinelConfig } from '@vantinelai/js-sdk';
|
|
4
|
+
export { VantinelClient, VantinelConfig, VantinelDecision } from '@vantinelai/js-sdk';
|
|
5
|
+
export { createClientVantinel } from './client.js';
|
|
6
|
+
|
|
7
|
+
interface VantinelContextValue {
|
|
8
|
+
client: VantinelClient;
|
|
9
|
+
track: (toolName: string, args: Record<string, unknown>, options?: {
|
|
10
|
+
traceId?: string;
|
|
11
|
+
skip?: boolean;
|
|
12
|
+
}) => Promise<VantinelDecision>;
|
|
13
|
+
captureError: (toolName: string, error: Error, metadata?: Record<string, unknown>) => Promise<void>;
|
|
14
|
+
ping: () => Promise<{
|
|
15
|
+
ok: boolean;
|
|
16
|
+
latencyMs: number;
|
|
17
|
+
}>;
|
|
18
|
+
startTrace: () => string;
|
|
19
|
+
setGlobalMetadata: (metadata: Record<string, unknown>) => void;
|
|
20
|
+
flush: () => Promise<void>;
|
|
21
|
+
}
|
|
22
|
+
interface VantinelProviderProps {
|
|
23
|
+
config: VantinelConfig;
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* VantinelProvider — Add to your root layout to enable `useVantinel()` in any client component.
|
|
28
|
+
*
|
|
29
|
+
* ## Setup (app/layout.tsx)
|
|
30
|
+
*
|
|
31
|
+
* ```tsx
|
|
32
|
+
* import { VantinelProvider } from '@vantinelai/nextjs';
|
|
33
|
+
*
|
|
34
|
+
* export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
35
|
+
* return (
|
|
36
|
+
* <html>
|
|
37
|
+
* <body>
|
|
38
|
+
* <VantinelProvider config={{
|
|
39
|
+
* apiKey: process.env.NEXT_PUBLIC_VANTINEL_API_KEY,
|
|
40
|
+
* agentId: 'my-app',
|
|
41
|
+
* shadowMode: process.env.NODE_ENV !== 'production',
|
|
42
|
+
* slackWebhookUrl: process.env.NEXT_PUBLIC_VANTINEL_SLACK_WEBHOOK,
|
|
43
|
+
* }}>
|
|
44
|
+
* {children}
|
|
45
|
+
* </VantinelProvider>
|
|
46
|
+
* </body>
|
|
47
|
+
* </html>
|
|
48
|
+
* );
|
|
49
|
+
* }
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
declare function VantinelProvider({ config, children }: VantinelProviderProps): react_jsx_runtime.JSX.Element;
|
|
53
|
+
/**
|
|
54
|
+
* useVantinel — access Vantinel tracking in any client component.
|
|
55
|
+
*
|
|
56
|
+
* Must be used inside `<VantinelProvider>`.
|
|
57
|
+
*
|
|
58
|
+
* ```tsx
|
|
59
|
+
* 'use client';
|
|
60
|
+
* import { useVantinel } from '@vantinelai/nextjs';
|
|
61
|
+
*
|
|
62
|
+
* export function GenerateButton({ topics }: { topics: string[] }) {
|
|
63
|
+
* const { track, captureError, startTrace } = useVantinel();
|
|
64
|
+
*
|
|
65
|
+
* async function handleClick() {
|
|
66
|
+
* const traceId = startTrace();
|
|
67
|
+
* try {
|
|
68
|
+
* await track('generate_test_click', { topics }, { traceId });
|
|
69
|
+
* await fetch('/api/generate', {
|
|
70
|
+
* headers: { 'X-Vantinel-Trace': traceId },
|
|
71
|
+
* });
|
|
72
|
+
* } catch (err) {
|
|
73
|
+
* await captureError('generate_test_click', err as Error);
|
|
74
|
+
* }
|
|
75
|
+
* }
|
|
76
|
+
*
|
|
77
|
+
* return <button onClick={handleClick}>Generate Test</button>;
|
|
78
|
+
* }
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
declare function useVantinel(): VantinelContextValue;
|
|
82
|
+
|
|
83
|
+
export { type VantinelContextValue, VantinelProvider, type VantinelProviderProps, useVantinel };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/index.tsx
|
|
22
|
+
var index_exports = {};
|
|
23
|
+
__export(index_exports, {
|
|
24
|
+
VantinelClient: () => import_js_sdk2.VantinelClient,
|
|
25
|
+
VantinelProvider: () => VantinelProvider,
|
|
26
|
+
createClientVantinel: () => createClientVantinel,
|
|
27
|
+
useVantinel: () => useVantinel
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(index_exports);
|
|
30
|
+
var import_react = require("react");
|
|
31
|
+
var import_js_sdk2 = require("@vantinelai/js-sdk");
|
|
32
|
+
|
|
33
|
+
// src/client.ts
|
|
34
|
+
var import_js_sdk = require("@vantinelai/js-sdk");
|
|
35
|
+
var _clientInstance;
|
|
36
|
+
function createClientVantinel(config) {
|
|
37
|
+
if (!_clientInstance) {
|
|
38
|
+
_clientInstance = new import_js_sdk.VantinelClient({
|
|
39
|
+
collectorUrl: process.env.NEXT_PUBLIC_VANTINEL_COLLECTOR_URL ?? "http://localhost:8000",
|
|
40
|
+
agentId: "browser-agent",
|
|
41
|
+
...config,
|
|
42
|
+
apiKey: config?.apiKey ?? process.env.NEXT_PUBLIC_VANTINEL_API_KEY
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
return _clientInstance;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// src/index.tsx
|
|
49
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
50
|
+
var VantinelContext = (0, import_react.createContext)(null);
|
|
51
|
+
function VantinelProvider({ config, children }) {
|
|
52
|
+
const client = (0, import_react.useMemo)(() => new import_js_sdk2.VantinelClient(config), []);
|
|
53
|
+
const value = (0, import_react.useMemo)(
|
|
54
|
+
() => ({
|
|
55
|
+
client,
|
|
56
|
+
track: client.track.bind(client),
|
|
57
|
+
captureError: client.captureError.bind(client),
|
|
58
|
+
ping: client.ping.bind(client),
|
|
59
|
+
startTrace: client.startTrace.bind(client),
|
|
60
|
+
setGlobalMetadata: client.setGlobalMetadata.bind(client),
|
|
61
|
+
flush: client.flush.bind(client)
|
|
62
|
+
}),
|
|
63
|
+
[client]
|
|
64
|
+
);
|
|
65
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VantinelContext.Provider, { value, children });
|
|
66
|
+
}
|
|
67
|
+
function useVantinel() {
|
|
68
|
+
const ctx = (0, import_react.useContext)(VantinelContext);
|
|
69
|
+
if (!ctx) {
|
|
70
|
+
throw new Error("[Vantinel] useVantinel() must be used inside <VantinelProvider>");
|
|
71
|
+
}
|
|
72
|
+
return ctx;
|
|
73
|
+
}
|
|
74
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
75
|
+
0 && (module.exports = {
|
|
76
|
+
VantinelClient,
|
|
77
|
+
VantinelProvider,
|
|
78
|
+
createClientVantinel,
|
|
79
|
+
useVantinel
|
|
80
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
createClientVantinel
|
|
4
|
+
} from "./chunk-W22WQTUM.mjs";
|
|
5
|
+
|
|
6
|
+
// src/index.tsx
|
|
7
|
+
import { createContext, useContext, useMemo } from "react";
|
|
8
|
+
import { VantinelClient } from "@vantinelai/js-sdk";
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
var VantinelContext = createContext(null);
|
|
11
|
+
function VantinelProvider({ config, children }) {
|
|
12
|
+
const client = useMemo(() => new VantinelClient(config), []);
|
|
13
|
+
const value = useMemo(
|
|
14
|
+
() => ({
|
|
15
|
+
client,
|
|
16
|
+
track: client.track.bind(client),
|
|
17
|
+
captureError: client.captureError.bind(client),
|
|
18
|
+
ping: client.ping.bind(client),
|
|
19
|
+
startTrace: client.startTrace.bind(client),
|
|
20
|
+
setGlobalMetadata: client.setGlobalMetadata.bind(client),
|
|
21
|
+
flush: client.flush.bind(client)
|
|
22
|
+
}),
|
|
23
|
+
[client]
|
|
24
|
+
);
|
|
25
|
+
return /* @__PURE__ */ jsx(VantinelContext.Provider, { value, children });
|
|
26
|
+
}
|
|
27
|
+
function useVantinel() {
|
|
28
|
+
const ctx = useContext(VantinelContext);
|
|
29
|
+
if (!ctx) {
|
|
30
|
+
throw new Error("[Vantinel] useVantinel() must be used inside <VantinelProvider>");
|
|
31
|
+
}
|
|
32
|
+
return ctx;
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
VantinelClient,
|
|
36
|
+
VantinelProvider,
|
|
37
|
+
createClientVantinel,
|
|
38
|
+
useVantinel
|
|
39
|
+
};
|
package/dist/server.d.ts
ADDED
package/dist/server.js
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/server.ts
|
|
21
|
+
var server_exports = {};
|
|
22
|
+
__export(server_exports, {
|
|
23
|
+
VantinelMonitor: () => import_node_sdk.VantinelMonitor,
|
|
24
|
+
createServerMonitor: () => createServerMonitor
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(server_exports);
|
|
27
|
+
var import_node_sdk = require("@vantinelai/node-sdk");
|
|
28
|
+
function createServerMonitor(config) {
|
|
29
|
+
if (!globalThis.__vantinelMonitor) {
|
|
30
|
+
globalThis.__vantinelMonitor = new import_node_sdk.VantinelMonitor(config ?? {});
|
|
31
|
+
}
|
|
32
|
+
return globalThis.__vantinelMonitor;
|
|
33
|
+
}
|
|
34
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
35
|
+
0 && (module.exports = {
|
|
36
|
+
VantinelMonitor,
|
|
37
|
+
createServerMonitor
|
|
38
|
+
});
|
package/dist/server.mjs
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// src/server.ts
|
|
2
|
+
import { VantinelMonitor } from "@vantinelai/node-sdk";
|
|
3
|
+
function createServerMonitor(config) {
|
|
4
|
+
if (!globalThis.__vantinelMonitor) {
|
|
5
|
+
globalThis.__vantinelMonitor = new VantinelMonitor(config ?? {});
|
|
6
|
+
}
|
|
7
|
+
return globalThis.__vantinelMonitor;
|
|
8
|
+
}
|
|
9
|
+
export {
|
|
10
|
+
VantinelMonitor,
|
|
11
|
+
createServerMonitor
|
|
12
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@vantinelai/nextjs",
|
|
3
|
+
"version": "0.2.3",
|
|
4
|
+
"description": "Vantinel AI Observability SDK — Next.js App Router integration",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.mjs",
|
|
11
|
+
"require": "./dist/index.js",
|
|
12
|
+
"types": "./dist/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./server": {
|
|
15
|
+
"import": "./dist/server.mjs",
|
|
16
|
+
"require": "./dist/server.js",
|
|
17
|
+
"types": "./dist/server.d.ts"
|
|
18
|
+
},
|
|
19
|
+
"./client": {
|
|
20
|
+
"import": "./dist/client.mjs",
|
|
21
|
+
"require": "./dist/client.js",
|
|
22
|
+
"types": "./dist/client.d.ts"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "tsup src/index.tsx src/server.ts src/client.ts --format cjs,esm --dts",
|
|
27
|
+
"prepublishOnly": "npm run build"
|
|
28
|
+
},
|
|
29
|
+
"files": [
|
|
30
|
+
"dist/",
|
|
31
|
+
"README.md",
|
|
32
|
+
"LICENSE",
|
|
33
|
+
"CHANGELOG.md"
|
|
34
|
+
],
|
|
35
|
+
"keywords": [
|
|
36
|
+
"vantinel",
|
|
37
|
+
"nextjs",
|
|
38
|
+
"ai-observability",
|
|
39
|
+
"guardrails",
|
|
40
|
+
"react"
|
|
41
|
+
],
|
|
42
|
+
"author": "Vantinel AI <support@vantinel.com>",
|
|
43
|
+
"license": "MIT",
|
|
44
|
+
"repository": {
|
|
45
|
+
"type": "git",
|
|
46
|
+
"url": "https://github.com/vantinel/vantinel-node.git",
|
|
47
|
+
"directory": "packages/nextjs"
|
|
48
|
+
},
|
|
49
|
+
"homepage": "https://github.com/vantinel/vantinel-node/tree/main/packages/nextjs#readme",
|
|
50
|
+
"bugs": {
|
|
51
|
+
"url": "https://github.com/vantinel/vantinel-node/issues"
|
|
52
|
+
},
|
|
53
|
+
"peerDependencies": {
|
|
54
|
+
"react": ">=18.0.0",
|
|
55
|
+
"next": ">=14.0.0"
|
|
56
|
+
},
|
|
57
|
+
"dependencies": {
|
|
58
|
+
"@vantinelai/node-sdk": "^0.4.3",
|
|
59
|
+
"@vantinelai/js-sdk": "^0.4.4"
|
|
60
|
+
},
|
|
61
|
+
"devDependencies": {
|
|
62
|
+
"tsup": "^8.0.0",
|
|
63
|
+
"typescript": "^5.0.0",
|
|
64
|
+
"@types/react": "^18.0.0",
|
|
65
|
+
"@types/node": "^20.0.0"
|
|
66
|
+
}
|
|
67
|
+
}
|