https://github.com/ohcnetwork/care_ai_widgets_fe
AI-powered clinical widgets for Care frontend — configurable, prompt-driven insights embedded in patient encounter views.
https://github.com/ohcnetwork/care_ai_widgets_fe
Last synced: about 10 hours ago
JSON representation
AI-powered clinical widgets for Care frontend — configurable, prompt-driven insights embedded in patient encounter views.
- Host: GitHub
- URL: https://github.com/ohcnetwork/care_ai_widgets_fe
- Owner: ohcnetwork
- Created: 2026-04-29T07:40:18.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-04T10:16:03.000Z (about 1 month ago)
- Last Synced: 2026-05-23T06:42:38.967Z (19 days ago)
- Language: TypeScript
- Homepage: https://care-ai-widgets-fe.pages.dev/
- Size: 136 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Care AI Widgets — Frontend Plugin
A [Care](https://github.com/ohcnetwork/care_fe) frontend plugin that adds **AI-powered clinical widgets** to the encounter overview. Clinicians can configure prompt-driven widgets that call an AI backend and render structured outputs — summaries, scores, ranked lists, and rich markdown — directly inside the patient chart.
---
## ✨ Features
| Widget Type | Description |
|---|---|
| **Cited Summary** | 3–5 sentence encounter brief with source citations |
| **Ranked List** | Prioritised clinical risks with severity scores and reasoning |
| **Score** | Clinical scoring (e.g. NEWS2) with component breakdown |
| **Markdown** | Structured prose sections with callout support (warning / info) |
- **Template gallery** — pre-built prompts for common clinical tasks (encounter brief, active risks, discharge education, open questions, NEWS2).
- **Custom widgets** — create your own with a name, prompt, model selector, and output type.
- **Per-user storage** — widget configurations are saved to `localStorage`, scoped by user.
- **Copy to clipboard** — one-click plain-text export of any widget output.
## 🏗️ Architecture
```
src/
├── components/AIWidgets/
│ ├── api.ts # API endpoint definition
│ ├── types.ts # Shared TypeScript types
│ ├── schemas.ts # JSON response schemas per widget type
│ ├── templates.ts # Built-in widget templates
│ ├── store.ts # Jotai atoms (per-user localStorage)
│ ├── summarize.ts # Output → plain-text converters
│ ├── WidgetRunner.tsx # Executes a single widget & renders result
│ ├── WidgetSlot.tsx # Renders all enabled widgets for an encounter
│ ├── SettingsPage.tsx # Widget management UI
│ ├── EditorDialog.tsx # Create / edit widget dialog
│ └── renderers/
│ ├── CitedSummaryWidget.tsx
│ ├── MarkdownWidget.tsx
│ ├── RankedListWidget.tsx
│ └── ScoreWidget.tsx
├── pages/
│ ├── WidgetList.tsx # /users/:user/ai-widgets
│ └── WidgetEditor.tsx # /users/:user/ai-widgets/:id
└── manifest.tsx # Plugin manifest (routes, nav items)
```
## 🚀 Getting Started
### Prerequisites
- A running [Care frontend](https://github.com/ohcnetwork/care_fe) dev environment
> [!IMPORTANT]
> This plugin requires the [**Care AI backend**](https://github.com/ohcnetwork/care_ai_be) plugin to be installed and running on your Care server. It provides the `/api/care_ai/encounter/{encounterId}/ask/` endpoint that powers all AI widget functionality. Without it, widgets will not be able to generate any output.
### Install & Run
```bash
# Clone the repo
git clone https://github.com/ohcnetwork/care_ai_widgets_fe.git
cd care_ai_widgets_fe
# Install dependencies
npm install
# Start dev server (build in watch mode + preview)
npm start
```
### Available Scripts
| Script | Description |
|---|---|
| `npm start` | Build in watch mode and serve preview |
| `npm run build` | Production build via Vite |
| `npm run lint` | Run ESLint |
| `npm run lint-fix` | Auto-fix lint issues |
| `npm run format` | Format with Prettier |
| `npm run sort-locales` | Sort locale JSON keys |
## 🔌 Plugin Integration
This plugin is registered via `manifest.tsx`:
- **Routes** — `/facility/:facilityId/users/:user/ai-widgets` (list & editor)
- **Components** — `EncounterOverviewTop` injects the `WidgetSlot` into the encounter overview
- **User Nav** — adds an "AI Widgets" link (✨) to the user dropdown menu