> ## Documentation Index
> Fetch the complete documentation index at: https://docs.world.org/llms.txt
> Use this file to discover all available pages before exploring further.

# World ID

export const Quickstart = ({title = "Developer quickstart", description = "Make your first API request in minutes. Learn the basics of the platform.", buttonHref = "/docs/get-started", buttonLabel = "Get started", agentPrompt, children}) => {
  const promptCfg = agentPrompt ? {
    skillUrl: agentPrompt.skillUrl || "world.id/SKILL.md",
    productName: agentPrompt.productName || "World ID"
  } : null;
  const promptText = promptCfg ? `Read ${promptCfg.skillUrl} and add ${promptCfg.productName} to my app` : null;
  const copyIcon = <svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
      <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>
    </svg>;
  const onCopy = text => e => {
    try {
      navigator.clipboard.writeText(text);
      const btn = e.currentTarget;
      const icon = btn.querySelector("[data-copy-icon]");
      const tick = btn.querySelector("[data-copy-tick]");
      if (icon && tick) {
        icon.style.display = "none";
        tick.style.display = "inline-flex";
        setTimeout(() => {
          icon.style.display = "inline-flex";
          tick.style.display = "none";
        }, 1200);
      }
    } catch (_) {}
  };
  return <div className="not-prose rounded-3xl bg-zinc-100 p-6 md:p-8 dark:bg-zinc-900">
      <div className="grid grid-cols-1 gap-8 md:grid-cols-[minmax(280px,1fr)_minmax(360px,1.45fr)] md:items-start">
        <div>
          <h3 className="m-0 text-2xl leading-tight font-semibold text-zinc-900 dark:text-zinc-100">
            {title}
          </h3>
          <p className="mt-3 max-w-[560px] text-[16px] leading-7 text-zinc-600 dark:text-zinc-300">
            {description}
          </p>
        </div>

        <div className="quickstart-code min-w-0">{children}</div>
      </div>

      {promptText ? <div className="mt-6">
          <div className="my-4 flex items-center gap-3">
            <div className="h-px flex-1 bg-zinc-200 dark:bg-white/10"></div>
            <span className="font-mono text-xs text-zinc-500 dark:text-zinc-400">OR</span>
            <div className="h-px flex-1 bg-zinc-200 dark:bg-white/10"></div>
          </div>
          <p className="m-0 mb-2 text-sm text-zinc-500 dark:text-zinc-400">
            Tell your coding agent to:
          </p>
          <div className="group relative overflow-hidden rounded-xl border border-zinc-200 dark:border-white/10" style={{
    backgroundColor: "#FAFAFA"
  }}>
            <div className="dark-bg pointer-events-none absolute inset-0 hidden dark:block" style={{
    backgroundColor: "#0B0C0E"
  }} />
            <pre className="relative m-0 overflow-x-auto bg-transparent px-4 py-3 font-mono text-sm leading-6" style={{
    color: "#1F2328"
  }}>
              <code className="bg-transparent p-0 text-inherit dark:!text-[#D4D4D4]">
                <span>Read </span>
                <a href={`https://${promptCfg.skillUrl}`} target="_blank" rel="noopener noreferrer" className="text-inherit underline decoration-zinc-400 underline-offset-2 hover:decoration-zinc-700 dark:decoration-zinc-500 dark:hover:decoration-zinc-200">
                  {promptCfg.skillUrl}
                </a>
                <span>{` and add ${promptCfg.productName} to my app`}</span>
              </code>
            </pre>
            <button type="button" aria-label="Copy" onClick={onCopy(promptText)} className="absolute right-2 top-2 inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-gray-600/5 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-gray-200/5 dark:hover:text-zinc-200">
              <span data-copy-icon className="inline-flex">{copyIcon}</span>
              <span data-copy-tick style={{
    display: "none"
  }} className="text-emerald-600 dark:text-emerald-400">✓</span>
            </button>
          </div>
        </div> : null}

      <div className="mt-6 md:mt-4">
        <a href={buttonHref} className="inline-flex items-center justify-center rounded-full border border-transparent bg-zinc-950 px-6 py-3 text-[16px] font-medium !text-white no-underline transition-colors hover:bg-black dark:border-zinc-700 dark:bg-zinc-800 dark:!text-zinc-100 dark:hover:bg-zinc-700">
          {buttonLabel}
        </a>
      </div>
    </div>;
};

World ID is a privacy-preserving protocol that lets people prove they are real and unique online without sharing personal information.

It gives developers a high-assurance trust layer to stop bots, duplicate accounts, and abuse — while keeping onboarding fast and user data off your servers.

Through credentials like Proof of Human, Document, and Selfie Check, World ID extends that trust layer with additional proofs without exposing underlying user data.

<Quickstart title="Developer Quickstart" description="Add proof of human to your app with one React widget." buttonHref="/world-id/idkit/integrate" buttonLabel="Open integration guide" agentPrompt={{ skillUrl: "world.id/SKILL.md", productName: "World ID" }}>
  ```tsx lines theme={null}
  import { IDKitRequestWidget } from "@worldcoin/idkit";
  const rpContext = await getRpContext("verify-account");
  <IDKitRequestWidget
    app_id="app_xxxxx"
    action="verify-account"
    rp_context={rpContext}
    // verify proof + nullifier on your backend
    handleVerify={verifyOnBackend}
    onSuccess={unlockFeature}
  />
  ```
</Quickstart>

## Credentials

<div className="not-prose mt-5">
  <div className="grid gap-4 md:grid-cols-3">
    <div className="overflow-hidden rounded-[12px] border border-zinc-200 bg-white shadow-[0_1px_0_rgba(0,0,0,0.03)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_10px_26px_rgba(15,23,42,0.08)] dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-none dark:hover:border-zinc-600 dark:hover:shadow-[0_10px_24px_rgba(2,6,23,0.32)]">
      <div className="flex items-center justify-center bg-white dark:bg-zinc-900" style={{ height: 120 }}>
        <img src="https://mintcdn.com/tfh/v0PtNd2L1YxZc3lg/images/docs/verification-badge.svg?fit=max&auto=format&n=v0PtNd2L1YxZc3lg&q=85&s=a23795c61265580074bd2ffdc076d868" alt="Proof of Human" style={{ height: 72, width: 72, objectFit: 'contain' }} width="24" height="24" data-path="images/docs/verification-badge.svg" />
      </div>

      <div className="p-4"><h3 className="m-0 text-base font-semibold text-zinc-900 dark:text-zinc-100">Proof of Human</h3><p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">Highest-assurance uniqueness signal from Orb verification. Best for one-person-one-action flows and strong Sybil resistance.</p></div>
    </div>

    <div className="overflow-hidden rounded-[12px] border border-zinc-200 bg-white shadow-[0_1px_0_rgba(0,0,0,0.03)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_10px_26px_rgba(15,23,42,0.08)] dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-none dark:hover:border-zinc-600 dark:hover:shadow-[0_10px_24px_rgba(2,6,23,0.32)]">
      <div className="flex items-center justify-center bg-white dark:bg-zinc-900" style={{ height: 120 }}>
        <img src="https://mintcdn.com/tfh/sQ1b4VFjpyh3e7vB/images/docs/passport.png?fit=max&auto=format&n=sQ1b4VFjpyh3e7vB&q=85&s=e4734cdd7678e38595e487f82cb4fdb8" alt="Document" style={{ width: 72, objectFit: 'contain' }} width="374" height="493" data-path="images/docs/passport.png" />
      </div>

      <div className="p-4"><h3 className="m-0 text-base font-semibold text-zinc-900 dark:text-zinc-100">Document</h3><p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">Proves possession of a unique government document through NFC checks. Useful for proof of age and document-backed access flows.</p></div>
    </div>

    <div className="overflow-hidden rounded-[12px] border border-zinc-200 bg-white shadow-[0_1px_0_rgba(0,0,0,0.03)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_10px_26px_rgba(15,23,42,0.08)] dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-none dark:hover:border-zinc-600 dark:hover:shadow-[0_10px_24px_rgba(2,6,23,0.32)]">
      <div className="flex items-center justify-center bg-white dark:bg-zinc-900" style={{ height: 120 }}>
        <img src="https://mintcdn.com/tfh/sQ1b4VFjpyh3e7vB/images/docs/selfie-check.png?fit=max&auto=format&n=sQ1b4VFjpyh3e7vB&q=85&s=9a29df36798e203e0f34b10830eb6394" alt="Selfie Check" style={{ height: 72, width: 72, objectFit: 'contain' }} width="352" height="352" data-path="images/docs/selfie-check.png" />
      </div>

      <div className="p-4"><h3 className="m-0 flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100">Selfie Check <div className="method-pill rounded-lg bg-blue-400/20 px-1.5 py-0.5 text-sm leading-5 font-semibold text-blue-700 dark:bg-blue-400/20 dark:text-blue-300">Beta</div></h3><p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">Low-friction liveness and uniqueness signal from a selfie flow. Best for sign-up and bot defense where speed matters most.</p></div>
    </div>
  </div>
</div>

## Start building

<CardGroup cols={1}>
  <Card title="Stop bots and duplicate accounts">
    Use proof of human to enforce one human per account and reduce Sybil abuse in rewards, referrals, governance, and account creation.
  </Card>

  <Card title="Protect conversion and user privacy">
    Replace CAPTCHA-heavy or document-heavy gating with reusable proof flows. Relying parties receive proofs, not personal data.
  </Card>
</CardGroup>

## Privacy by architecture

<CardGroup cols={3}>
  <Card title="Zero-knowledge proofs">
    Users prove what is true without revealing personal information. Proofs are unlinkable across apps.
  </Card>

  <Card title="Multi-party computation">
    Matching and uniqueness checks are split across independent nodes so no single party holds complete sensitive data.
  </Card>

  <Card title="Self-custodial">
    Proof generation happens on the user’s device. Your app receives a proof, not raw personal data.
  </Card>
</CardGroup>