Three ways to add Dornick.

1. Script tag (10 seconds)

The fastest path. Drop one tag, mark up a form with data-dornick, and you're done.

<script src="https://unpkg.com/@dornick/script/dist/dornick.js"></script>

<form
  data-dornick
  data-dornick-config="/configs/signup.json"
  data-dornick-provider="anthropic"
  data-dornick-model="claude-sonnet-4-6"
  data-dornick-key="sk-ant-..."
>
  <input name="email" />
  <input name="company" />
  <input name="team_size" />
</form>

• UMD bundle: ~45 KB gzipped.
• Loads from unpkg / jsDelivr — pin a version in production.
• Reads data-dornick-* attributes for config.
• BYOK with data-dornick-key, or use a proxy URL via data-dornick-proxy.

2. npm + bundler

For Vite, Webpack, esbuild, Rollup. ESM only.

npm install @dornick/core

import { Dornick } from "@dornick/core";

const dornick = new Dornick({
  transport: {
    mode: "browser",
    provider: "anthropic",
    apiKey: import.meta.env.PUBLIC_ANTHROPIC_KEY,
    model: "claude-sonnet-4-6",
  },
  config: {
    persona: "Helpful onboarding assistant",
    target: { type: "form", selector: "#signup" },
    dataPoints: [
      { name: "email", question: "What's your work email?" },
      { name: "company", question: "Which company are you with?" },
      { name: "team_size", question: "How big is your team?" },
    ],
  },
});

dornick.attach();

3. React

@dornick/react wraps the core in a provider + form component.

npm install @dornick/react

import { DornickProvider, DornickForm } from "@dornick/react";
import { BUILTIN_SKILLS } from "@dornick/skills";

export default function Signup() {
  return (
    <DornickProvider
      transport={{
        mode: "proxy",
        url: "/api/dornick",
        provider: "anthropic",
        model: "claude-sonnet-4-6",
      }}
    >
      <DornickForm
        config={signupConfig}
        skills={BUILTIN_SKILLS}
        onComplete={(data) => fetch("/api/save", {
          method: "POST",
          body: JSON.stringify(data),
        })}
      >
        <input name="email" />
        <input name="company" />
        <input name="team_size" />
      </DornickForm>
    </DornickProvider>
  );
}

Optional: the proxy server

If you don't want your API key in the browser, drop in @dornick/server — a Node middleware that streams responses over SSE.

import express from "express";
import { makeDornickProxy } from "@dornick/server";

const app = express();
app.post("/api/dornick", makeDornickProxy({
  provider: "anthropic",
  apiKey: process.env.ANTHROPIC_API_KEY!,
  model: "claude-sonnet-4-6",
  rateLimit: { rpm: 30 },
}));

Pick a provider

Dornick supports five out of the box:

• Anthropic Claude (Sonnet 4.6, Opus 4.7)
• OpenAI (GPT-4o, GPT-5)
• Groq (Llama, Qwen — fast)
• OpenRouter (anything)
• Ollama (local)

Capability gates (browser support)

Dornick detects browser capabilities at startup — FileReader, WebGPU, Bluetooth, NFC, Geolocation, etc. — and only exposes skills/parsers/mounts that the runtime actually supports. So you can ship a build with the OCR skill and Bluetooth mount; on Firefox without WebUSB they'll silently no-op.

Minimum supported: Chrome 80+, Firefox 80+, Safari 14+, Edge 80+.

<script src="https://unpkg.com/@dornick/script/dist/dornick.js"></script>

<form
  data-dornick
  data-dornick-config="/configs/signup.json"
  data-dornick-provider="anthropic"
  data-dornick-model="claude-sonnet-4-6"
  data-dornick-key="sk-ant-..."
>
  <input name="email" />
  <input name="company" />
  <input name="team_size" />
</form>