Skip to main content

​
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 });
  }
}

​
Using a Widget

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

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

​
Available Widgets

WidgetDescriptionKey Fields
PatientDashboardFull patient overview with encounters, vitals, meds, labs, notesdemographics, appointments, prescriptions, labs, notes
AppointmentSchedulerBook and manage appointmentsdate, time, type, serviceType, specialty, priority, description
PrescriptionFormCreate prescriptions with full dosagemedication, dosage, priority, category, courseOfTherapy, substitution
NoteEditorClinical note editor with type and categorytitle, content, type, docStatus, category, practiceSetting
IntakeFormPatient intake questionnaireitems with nested answers (text, boolean, integer, coded, quantity)
ConsentManagerConsent signing and managementscope, category, verification, provision
VitalsWidgetVital signs recordingheart rate, blood pressure, temperature
LabResultsWidgetLab report orderingcode, category, effectiveDateTime/Period
PrescriptionWidgetQuick medication entrymedication name, status
ConditionTrackerRecord conditions and diagnosescode, clinicalStatus, severity, onset
AllergyRecorderRecord allergies and intolerancesallergen, type, category, criticality, reaction
ImmunizationLoggerLog immunizationsvaccine, site, route, lot number, manufacturer
CarePlanBuilderCreate care planstitle, description, status, intent, category
GoalSetterSet patient goalsdescription, lifecycle, achievement, priority, target date

​
Common Props

All widgets accept:
PropTypeRequiredDescription
proxyUrlstringYesYour backend proxy endpoint (or 'demo' for demo mode)
patientIdstringYesPatient ID
theme'light' | 'dark'NoColor 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