Jev transforma design system em motor de decisão para agentes de IA

npm install @typesafe-ai/sdk@0.6.0

A chave fica só no servidor, nunca em variável NEXT_PUBLIC_. A camada de decisão converte o manifesto em uma pergunta choice:

// lib/jev-router.ts
import { TypeSafeClient, choice } from "@typesafe-ai/sdk";
import { componentManifest, type ComponentId } from "./component-manifest";

const client = new TypeSafeClient({ apiKey: process.env.TYPESAFE_API_KEY });
const knownIds = new Set<string>([...componentManifest.map((c) => c.id), "clarify"]);

export async function routeToComponent(request: string): Promise<ComponentId> {
 const options = Object.fromEntries(
 componentManifest.map((c) => [
 c.id,
 `${c.description} Usar quando: ${c.useWhen} Evitar quando: ${c.avoidWhen}`,
 ]),
 );

 const result = await client.systemOne({
 model: "jev-1.13.0",
 state: { latestMessage: request },
 questions: {
 component: choice(
 "Qual componente do design system responde melhor ao pedido? Se ambíguo, escolha clarify.",
 { ...options, clarify: "O pedido é ambíguo; peça mais detalhes antes de decidir." },
 ),
 },
 });

 const answer = result.answers.component;
 if (answer?.type !== "choice" || !knownIds.has(answer.choice)) return "clarify";
 return answer.choice as ComponentId;
}

A rota que expõe isso ao front segue o mesmo princípio de nunca deixar a interface quebrar quando algo sai do esperado:

// app/api/route-request/route.ts
import { routeToComponent } from "@/lib/jev-router";

export async function POST(req: Request) {
 const { message } = await req.json();
 if (typeof message !== "string" || !message.trim()) {
 return Response.json({ error: "empty" }, { status: 400 });
 }
 try {
 const component = await routeToComponent(message);
 return Response.json({ component });
 } catch {
 return Response.json({ component: "clarify" });
 }
}

No cliente, o ponto que eu não deixaria passar é acessibilidade: quando o resultado é clarify, o pedido de esclarecimento precisa entrar numa região aria-live="polite", porque é uma mudança de conteúdo que acontece sem o usuário clicar em nada. E como a resposta do Jev chega numa única chamada, o custo de performance percebida é o de uma requisição de rede simples, não o de um stream de tokens — vale medir o tempo até o componente aparecer no seu ambiente antes de assumir que está rápido o suficiente.

Confiança, calibragem e o que fazer quando o modelo erra

O Jev devolve, junto com a escolha, uma probabilidade de confiança (via AI SDK da Vercel, ela aparece em result.providerMetadata.typesafe.confidence). A tentação é fixar um corte arbitrário, tipo "acima de 80% eu confio", mas a própria Vercel recomenda calibrar esse número com exemplos rotulados do seu próprio fluxo, não com uma intuição.

Na prática, o caminho que eu seguiria é separar um lote de pedidos reais dos usuários (uns 30 a 40 já dão sinal), anotar manualmente qual componente seria o certo para cada um, e comparar com o que o Jev escolheu. Quase sempre o erro não está no modelo: está na descrição do componente, que ficou vaga demais ou se sobrepõe a outra opção do manifesto. Esse processo de calibragem é o novo trabalho de manutenção de design system — não é revisar Figma, é revisar frase por frase o "use quando" e o "evite quando".

Framework é detalhe, mas os limites são reais

Esse padrão não é exclusivo de React. A chamada ao Jev é uma requisição HTTP comum: o mesmo routeToComponent funciona atrás de uma rota do Nuxt ou de um endpoint do SvelteKit, mudando só o registry que mapeia identificador para componente na hora de renderizar. O acoplamento real está no manifesto, não no framework — o que é uma boa notícia para quem mantém design system em stack heterogênea.

Quem já usa o ecossistema Vercel tem um caminho alternativo: o AI SDK 7, a partir da versão 7.0.105, expõe o Jev pela API experimental evaluate, como typesafe-ai/jev. A lógica é a mesma, muda a forma da chamada.

Vale também registrar dois limites. Primeiro, os números de ganho de desempenho divulgados pela TypeSafe vêm de workflows montados pelo próprio time da empresa — ela mesma reconhece isso, então meça no seu caso antes de citar o número em qualquer proposta interna. Segundo, é um modelo hospedado por terceiros: dados saem da sua infraestrutura. Pelo AI Gateway, o Jev suporta Zero Data Retention e No Training ativados por requisição, o que é relevante se o "pedido do usuário" que você envia como estado carrega dado sensível.

O que fica em aberto para quem constrói

O Jev não resolve ambiguidade genuína — ele só evita que ela vire chute, empurrando para clarify. E ele não substitui o trabalho de desenhar componente nenhum: continua sendo humano decidindo o que existe no design system. O que muda é que a qualidade dessa decisão automatizada nunca vai passar da qualidade das descrições que alguém escreveu. Um componente sem "evite quando" claro é um componente que o agente vai usar errado mais cedo ou mais tarde, e isso não aparece em nenhum teste de unidade — só aparece quando você audita as escolhas reais contra o que um humano teria escolhido.

Fonte: Material enviado por quem indicou