Jev DevTools brings your TypeSafe requests into view: the context you sent, the questions you asked, the answers you received, and the application flows that connect them.
I was charged twice for my order.
Illustrative sample · Fixed answers, no inference calls. Connections show data structure, not model reasoning.
Easy to integrate#
Keep using the TypeSafe SDK. Create your client through the Node adapter, then mount one React component. The drawer connects to your server and handles request history, reconnection, and inspection.
npm install jev-devtools @typesafe-ai/sdkimport { JevDevtools } from "jev-devtools";
export function Root() {
return (
<>
<main>Your application</main>
<JevDevtools enabled={import.meta.env.DEV} defaultOpen={false} />
</>
);
}Mount the inspector once near your application root. It connects after mounting when enabled; it renders nothing during SSR.
<JevDevtools enabled defaultOpen={false} />- enabled
- Load and connect the browser inspector. Defaults to false; enable the server adapter separately.
- defaultOpen
- Whether the drawer starts expanded. Defaults to true; false starts at the launcher.
- endpoint
- Same-origin inspector path. Defaults to /api/jev-devtools; must match the server adapter.
- redactAdditionalSensitiveData
- Mask supported personal fields in the display. Does not remove captured data. Unreleased; defaults to true.
Load and connect the browser inspector. Defaults to false; enable the server adapter separately.
enabledWhether the drawer starts expanded. Defaults to true; false starts at the launcher.
defaultOpenAPI reference: JevDevtools
The component includes its own styles. No provider or CSS import is required. Follow the quick start to wire up the server before opening it.
Next steps#
- New to the package? Quick start takes you from installation to a captured request.
- Using Next.js? The App Router guide covers the server and client boundaries.
- Connecting several calls? Build a flow explains definitions, execution, and outcomes.
- Looking up an option? Start with React props, the server adapter, or the flow builder.
What you can inspect#
| View | What it helps you understand |
|---|---|
| Flow | Request structure and application-defined connected steps |
| Questions | Choice, Score, Noul, and Box answers with their question definitions |
| Context | The captured state and assets passed to the request |
| Transport | Attempts, retries, errors, and request timing |
| Raw | Captured request and response data |
The inspector records calls through your instrumented client. It does not discover unrelated SDK instances, reveal hidden model reasoning, or decide your application's routing policy.
Before you begin#
Use React 18 or 19, Node 22.12+, and TypeSafe SDK 0.7.x. The server adapter and flow runner need Node; they do not run in a browser or edge runtime. History is bounded and in memory.
These pages follow the repository working tree. The published package is currently 0.4.1; unreleased behavior is labeled where it appears. Check the changelog against your installed version. The package is experimental before 1.0.
Find a method or learn flows#
Use the API glossary to look up inputs, return values, and usage. Flows from scratch teaches each flow method with a small example.