React Components

@clinikapi/react provides 14 pre-built clinical UI widgets that communicate through your backend proxy — never directly to ClinikAPI.

npm install @clinikapi/react

The Proxy Pattern

React widgets run in the browser and cannot use the SDK directly (that would expose your API key). Instead, they talk to your backend through a proxyUrl:

Browser Widget → Your Backend Proxy → ClinikAPI SDK → ClinikAPI

Setting Up a Proxy

// Your backend (e.g. Next.js API route)
import { Clinik } from '@clinikapi/sdk';

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!);

export async function POST(req: Request) {
  const { action, data } = await req.json();

  // Authenticate the user with YOUR auth system first
  // Then proxy to ClinikAPI based on the action
  switch (action) {
    case 'patients.read':
      return Response.json(await clinik.patients.read(data.id, { include: data.include }));
    case 'patients.create':
      return Response.json(await clinik.patients.create(data));
    case 'appointments.create':
      return Response.json(await clinik.appointments.create(data));
    case 'prescriptions.create':
      return Response.json(await clinik.prescriptions.create(data));
    case 'notes.create':
      return Response.json(await clinik.notes.create(data));
    case 'intakes.submit':
      return Response.json(await clinik.intakes.submit(data));
    case 'consents.sign':
      return Response.json(await clinik.consents.sign(data));
    case 'observations.create':
      return Response.json(await clinik.observations.create(data));
    case 'labs.create':
      return Response.json(await clinik.labs.create(data));
    default:
      return Response.json({ error: 'Unknown action' }, { status: 400 });
  }
}

import { PatientDashboard } from '@clinikapi/react';

export default function PatientPage({ patientId }: { patientId: string }) {
  return (
    <PatientDashboard
      proxyUrl="/api/clinik"
      patientId={patientId}
    />
  );
}

Available Widgets

Widget	Description	Key Fields
PatientDashboard	Full patient overview with encounters, vitals, meds, labs, notes	demographics, appointments, prescriptions, labs, notes
AppointmentScheduler	Book and manage appointments	date, time, type, serviceType, specialty, priority, description
PrescriptionForm	Create prescriptions with full dosage	medication, dosage, priority, category, courseOfTherapy, substitution
NoteEditor	Clinical note editor with type and category	title, content, type, docStatus, category, practiceSetting
IntakeForm	Patient intake questionnaire	items with nested answers (text, boolean, integer, coded, quantity)
ConsentManager	Consent signing and management	scope, category, verification, provision
VitalsWidget	Vital signs recording	heart rate, blood pressure, temperature
LabResultsWidget	Lab report ordering	code, category, effectiveDateTime/Period
PrescriptionWidget	Quick medication entry	medication name, status
ConditionTracker	Record conditions and diagnoses	code, clinicalStatus, severity, onset
AllergyRecorder	Record allergies and intolerances	allergen, type, category, criticality, reaction
ImmunizationLogger	Log immunizations	vaccine, site, route, lot number, manufacturer
CarePlanBuilder	Create care plans	title, description, status, intent, category
GoalSetter	Set patient goals	description, lifecycle, achievement, priority, target date

Common Props

All widgets accept:

Prop	Type	Required	Description
`proxyUrl`	`string`	Yes	Your backend proxy endpoint (or `'demo'` for demo mode)
`patientId`	`string`	Yes	Patient ID
`theme`	`'light' \| 'dark'`	No	Color theme (default: light)

Demo Mode

Set proxyUrl="demo" to run any widget in demo mode — no backend needed, no API calls made. Useful for prototyping and showcasing.

<PatientDashboard proxyUrl="demo" />
<AppointmentScheduler proxyUrl="demo" patientId="demo-patient" />

Security

Widgets never receive your API key
All data flows through your backend proxy
You control authentication and authorization on your proxy
proxyUrl is validated to prevent open redirect attacks — must be a relative path or same-origin URL

​React Components

​The Proxy Pattern

​Setting Up a Proxy

​Using a Widget

​Available Widgets

​Common Props

​Demo Mode

​Security