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

# Installation & setup

> Render the prebuilt MedAssist chat widget inside your React app

The React SDK ships the full, prebuilt MedAssist chat UI. You mount it into a DOM element with `renderMedAssist` and get back a React root you can unmount. Use this when you're already in a React app and want the polished widget — themed to your brand — without writing chat UI yourself.

## Install

```bash theme={null}
npm install @eka-care/medassist-widget
```

## Render in a React app

`renderMedAssist` mounts the widget into a container element. Call it from an effect against a `ref`, and unmount via the returned root on cleanup.

```tsx theme={null}
import { renderMedAssist, type MedAssistConfig } from "@eka-care/medassist-widget";
import { useEffect, useRef } from "react";

export function AssistantWidget() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const config: MedAssistConfig = {
      title: "My Medical Assistant",
      environment: "production",
      theme: { primary: "#6B5CE0", textColor: "black" },
    };

    const root = renderMedAssist(containerRef.current, "YOUR_AGENT_ID", config);

    return () => root.unmount();
  }, []);

  return <div ref={containerRef} />;
}
```

### API

**`renderMedAssist(container, agentId, config?)`**

**container** `HTMLElement` *required*

The DOM element to mount the widget into.

**agentId** `string` *required*

Your MedAssist agent identifier from [console.eka.care](https://console.eka.care).

**config** `MedAssistConfig`

Optional configuration. See the [Configuration reference](https://developer.eka.care/docs/agents/synapse/react/configuration.md).

Returns a React `Root` — call `.unmount()` to tear the widget down.

## Use from a script tag (CDN)

The same function is attached to `window` as `window.renderMedAssist`, so you can use the prebuilt bundle without a build step. Remember to include the stylesheet.

```html theme={null}
<link
  rel="stylesheet"
  href="https://unpkg.com/@eka-care/medassist-widget@latest/dist/medassist-widget.css"
/>

<div id="medassist-widget"></div>

<script src="https://unpkg.com/@eka-care/medassist-widget@latest/dist/medassist-widget.js"></script>
<script>
  window.renderMedAssist(
    document.getElementById("medassist-widget"),
    "YOUR_AGENT_ID",
    { title: "MedAssist Chat" }
  );
</script>
```

> [!NOTE]
>
> `window.renderMedAssist` is attached automatically when the bundle loads — whether imported as a module or included via a script tag.

> [!TIP]
>
> Want zero build wiring and a framework-agnostic Web Component instead? Use the [embed widget](https://developer.eka.care/docs/agents/synapse/embed/quickstart.md). Need a fully custom UI? Drop to the [Core SDK](https://developer.eka.care/docs/agents/synapse/core/quickstart.md).

## Next steps

> **[Configuration reference](https://developer.eka.care/docs/agents/synapse/react/configuration.md)**
>
> Every field of `MedAssistConfig`.

> **[Theming & design system](https://developer.eka.care/docs/agents/synapse/react/theming.md)**
>
> Brand the widget with the Eka design system.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.