Build AI-native interfaces without generated UI code.

The first Leara integration should be one narrow product path: one config file, one server-safe hosted API proxy, one SDK prompt box, and one output region that renders the generated Interface.

Current published alpha

The SDK is currently testable from npm as @hug_kin/*@alpha. Latest verified baseline: 0.0.1-alpha.12. Official imports and package names are @liara/*.

pnpm add @hug_kin/core@alpha @hug_kin/server@alpha @hug_kin/lang@alpha @hug_kin/next@alpha @hug_kin/openai@alpha @hug_kin/react@alpha @hug_kin/primitives@alpha @hug_kin/zod@alpha

npm install @hug_kin/core@alpha @hug_kin/server@alpha @hug_kin/lang@alpha @hug_kin/next@alpha @hug_kin/openai@alpha @hug_kin/react@alpha @hug_kin/primitives@alpha @hug_kin/zod@alpha

yarn add @hug_kin/core@alpha @hug_kin/server@alpha @hug_kin/lang@alpha @hug_kin/next@alpha @hug_kin/openai@alpha @hug_kin/react@alpha @hug_kin/primitives@alpha @hug_kin/zod@alpha

bun add @hug_kin/core@alpha @hug_kin/server@alpha @hug_kin/lang@alpha @hug_kin/next@alpha @hug_kin/openai@alpha @hug_kin/react@alpha @hug_kin/primitives@alpha @hug_kin/zod@alpha

Intended official scope

pnpm add @liara/next @liara/react @liara/primitives

npm install @liara/next @liara/react @liara/primitives

yarn add @liara/next @liara/react @liara/primitives

bun add @liara/next @liara/react @liara/primitives

LIARA_API_KEY=liara_sk_live_...
LIARA_PROJECT_ID=proj_acme
LIARA_API_BASE_URL=https://api.liara.dev

Files you will add

A copy-pasteable hosted Leara setup: one project API key, one config file, one compose route, one prompt box, and one output region.

LIARA_API_KEY=liara_sk_live_...
LIARA_PROJECT_ID=proj_demo
LIARA_API_BASE_URL=https://api.liara.dev

import { defineLiaraConfig } from "@liara/next";

const liaraConfig = defineLiaraConfig({
  endpoint: "/api/liara/compose",
  runtime: {
    mode: "open",
    interfaceComposer: "liara-lang",
    readonly: true,
  },
  surface: {
    initialPrompt: "Give me a dashboard that shows how the company is going.",
    placeholder: "Ask Leara for a dashboard, workflow, report, or analysis...",
    promptLabel: "Ask Leara",
    submitLabel: "Compose",
    loadingLabel: "Composing...",
    suggestions: [
      "Give me a dashboard that shows how the company is going.",
      "Which customers are at risk before renewal?",
      "What happened with the billing incident this morning?",
    ],
  },
  theme: {
    colorMode: "system",
    font: "Inter",
    radius: 12,
  },
});

export default liaraConfig;

import { createHostedLiaraRouteHandler } from "@liara/next";
import liaraConfig from "@/liara.config";

export const POST = createHostedLiaraRouteHandler({
  config: liaraConfig,
  context: ({ clientContext }) => {
    const context =
      typeof clientContext === "object" && clientContext !== null
        ? (clientContext as { workspaceId?: unknown })
        : {};

    return {
      workspaceId:
        typeof context.workspaceId === "string"
          ? context.workspaceId
          : "workspace_demo",
    };
  },
});

"use client";

import { liaraPrimitiveBindings } from "@liara/primitives";
import {
  LiaraComposerProvider,
  LiaraOutput,
  LiaraPromptBox,
} from "@liara/react/client";
import liaraConfig from "@/liara.config";

export function LiaraWorkspacePanel({
  workspaceId,
}: {
  workspaceId: string;
}) {
  return (
    <LiaraComposerProvider
      config={liaraConfig}
      context={{ workspaceId }}
      primitives={liaraPrimitiveBindings}
    >
      <LiaraPromptBox />

      <section aria-label="Generated Leara interface">
        <LiaraOutput empty={<div>Your generated UI appears here.</div>} />
      </section>
    </LiaraComposerProvider>
  );
}

import { LiaraWorkspacePanel } from "@/components/liara-workspace-panel";

export default function DashboardPage() {
  return (
    <main>
      <LiaraWorkspacePanel workspaceId="workspace_demo" />
    </main>
  );
}

The config file is the durable host-app contract. It keeps the endpoint, prompt copy, suggestions, theme, and surface defaults in one place.

import { defineLiaraConfig } from "@liara/next";

const liaraConfig = defineLiaraConfig({
  endpoint: "/api/liara/compose",
  runtime: {
    mode: "open",
    interfaceComposer: "liara-lang",
    readonly: true,
  },
  surface: {
    initialPrompt: "Give me a dashboard that shows how the company is going.",
    placeholder: "Ask Leara for a dashboard, workflow, report, or analysis...",
    promptLabel: "Ask Leara",
    submitLabel: "Compose",
    loadingLabel: "Composing...",
    suggestions: [
      "Give me a dashboard that shows how the company is going.",
      "Which customers are at risk before renewal?",
      "What happened with the billing incident this morning?",
    ],
  },
  theme: {
    colorMode: "system",
    font: "Inter",
    radius: 12,
  },
});

export default liaraConfig;

The route keeps the Leara project API key on the server and forwards prompt, context, and config to the hosted compose API. Caller-provided context should still be sanitized before it is forwarded.

import { createHostedLiaraRouteHandler } from "@liara/next";
import liaraConfig from "@/liara.config";

export const POST = createHostedLiaraRouteHandler({
  config: liaraConfig,
});

Client code never receives secrets. It imports the SDK prompt box, imports the output renderer, and places generated UI in the exact part of the app where it should appear.

"use client";

import { liaraPrimitiveBindings } from "@liara/primitives";
import {
  LiaraComposerProvider,
  LiaraOutput,
  LiaraPromptBox,
} from "@liara/react/client";
import liaraConfig from "@/liara.config";

export function AccountLiaraPanel({ workspaceId }: { workspaceId: string }) {
  return (
    <LiaraComposerProvider
      config={liaraConfig}
      context={{ workspaceId }}
      primitives={liaraPrimitiveBindings}
    >
      <LiaraPromptBox />

      <main id="liara-output">
        <LiaraOutput empty={<div>Your generated UI appears here.</div>} />
      </main>
    </LiaraComposerProvider>
  );
}

Leara can return credit metadata for the host application, but it should be displayed in admin, billing, or settings UI. The end-user prompt surface should stay focused on the product task.

"use client";

import type { LiaraCreditSnapshot } from "@liara/next";

export function LiaraAdminUsage({
  credits,
}: {
  credits?: LiaraCreditSnapshot;
}) {
  if (!credits) {
    return null;
  }

  return (
    <section aria-label="Leara usage">
      <p>Leara UI output credits</p>
      <strong>{credits.remaining}</strong>
      <span>of {credits.included} remaining</span>
    </section>
  );
}

Once the files are in place, test the route before polishing the host UI. A healthy route returns ok: true, an interface.version, and a serializable interface.root.

pnpm dev

curl -X POST http://localhost:3000/api/liara/compose \
  -H "content-type: application/json" \
  -d '{"prompt":"Show account health and renewal risks.","context":{"accountId":"acct_northstar"}}'

Leara errors stay controlled at the client boundary. The server can return code, status, and hint so the host app can help developers without exposing secrets.

Leara can emit structured compose events from the server route. These events are intentionally redacted and should be forwarded to your telemetry system as-is.

import type { LiaraSafeLogEvent } from "@liara/next";
import { createLiaraRouteHandler } from "@liara/next";
import { liara, type LiaraRequestContext } from "@/app/liara/runtime";
import { auth } from "@/auth";

function logLiaraEvent(event: LiaraSafeLogEvent) {
  console.info("liara", event);
}

export const POST = createLiaraRouteHandler({
  liara,
  observability: {
    apiKey: process.env.LIARA_API_KEY,
    enforceEntitlements: true,
    endpoint: process.env.LIARA_OBSERVABILITY_ENDPOINT,
    projectId: process.env.LIARA_PROJECT_ID ?? "proj_acme",
    provider: "openai",
    model: process.env.OPENAI_MODEL ?? "gpt-4.1-mini",
  },
  logging: {
    logger: logLiaraEvent,
    provider: "openai",
    model: process.env.OPENAI_MODEL ?? "gpt-4.1-mini",
    metadata: {
      route: "/api/liara/compose",
    },
  },
  context: async ({ clientContext }): Promise<LiaraRequestContext> => {
    const session = await auth();

    if (!session?.user?.email) {
      throw new Error("Authentication required.");
    }

    return {
      tenantId: "tenant_acme",
      userId: session.user.email,
      accountId:
        typeof clientContext === "object" &&
        clientContext !== null &&
        "accountId" in clientContext &&
        typeof clientContext.accountId === "string"
          ? clientContext.accountId
          : "acct_northstar",
    };
  },
});

Primitives describe information patterns, not one-off visual components. Models choose these primitives, but the app renders the actual React views.

Leara is not trying to replace model provider SDKs. The first SDK shape expects SaaS teams to bring their own provider keys and implement a small `ModelAdapter`.

import type { ModelAdapter } from "@liara/core";

export const model: ModelAdapter = {
  async generate(request) {
    const response = await provider.responses.create({
      model: "gpt-5-mini",
      input: request.input,
      instructions: request.instructions
    });

    return {
      output: response.output,
      usage: {
        inputTokens: response.usage?.input_tokens,
        outputTokens: response.usage?.output_tokens,
        totalTokens: response.usage?.total_tokens
      }
    };
  }
};

The central rule is simple: server code composes, client code renders. The only product data that should cross the boundary is the validated Interface and non-sensitive metadata.