Getting Started
Install and integrate Mediquo web components into your application.
Mediquo ships a suite of framework-agnostic Lit web components that embed the full Mediquo patient/professional experience into any web application.
Installation
npm install @mediquo/web-componentsWrap with a theme provider
Before rendering any component, wrap your app (or the section that contains Mediquo components) in <mq-theme-provider>. This sets the CSS custom-property tokens that all components read.
// React / Next.js (client component)
import "@mediquo/web-components/mq-theme-provider";
export function MyLayout({ children }: { children: React.ReactNode }) {
return (
// @ts-expect-error — custom element
<mq-theme-provider theme="mediquo">
{children}
{/* @ts-expect-error — custom element */}
</mq-theme-provider>
);
}Available preset themes: mediquo, adeslas, default. Custom token themes can be created with createTheme() from @mediquo/web-components/theme.
Set the environment
Call setEnv before mounting any component:
import { setEnv } from "@mediquo/web-components/env";
setEnv("production"); // or "staging"Load and render mq-router
Components are registered as custom elements via side-effect imports. Use a client-only boundary in Next.js / React:
"use client";
import { useEffect } from "react";
export function RouterSection() {
useEffect(() => {
import("@mediquo/web-components/mq-router");
}, []);
return (
// @ts-expect-error — custom element
<mq-router
base-url="/app"
token={token}
api-key={apiKey}
locale="es_ES"
padded
theme="mediquo"
/>
);
}Next steps
- mq-router — the full mediquo app shell
- mq-chat-room — standalone chat room