Open registration

fjsj · fjsj · commit 4eda10fefe28 · 2025-12-23T15:39:42.000-03:00
diff --git a/.env.example b/.env.example
@@ -1,5 +1,6 @@
 VITE_MEDPLUM_BASE_URL=https://api.medplum.com
 VITE_MEDPLUM_PROJECT_ID=<your-medplum-project-id-here>
+VITE_MEDPLUM_RECAPTCHA_SITE_KEY=<your-recaptcha-site-key-here>
 VITE_COPILOT_RUNTIME_URL=http://localhost:4000/copilotkit
 OPENAI_API_KEY=your-openai-api-key-here
 OPENAI_MODEL=<choose-an-openai-llm-model-here>
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,73 @@
+name: Deploy to GitHub Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create .env file
+        run: |
+          cat > .env << EOF
+          VITE_MEDPLUM_BASE_URL=${{ secrets.MEDPLUM_BASE_URL }}
+          VITE_MEDPLUM_PROJECT_ID=${{ secrets.MEDPLUM_PROJECT_ID }}
+          VITE_MEDPLUM_RECAPTCHA_SITE_KEY=${{ secrets.MEDPLUM_RECAPTCHA_SITE_KEY }}
+          VITE_COPILOT_RUNTIME_URL=${{ secrets.COPILOT_RUNTIME_URL }}
+          OPENAI_API_KEY=${{ secrets.OPENAI_API_KEY }}
+          OPENAI_MODEL=${{ secrets.OPENAI_MODEL }}
+          EOF
+
+      - name: Build app
+        run: npm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@ Demo of a healthcare dashboard with AI-powered chart and report generation using
 
 The patient can chat with an AI agent and analyze their health records. The AI agent can generate charts and reports to display the patient's health data dynamically and provide insights. Current version focuses on weight-loss and diabetes care.
 
+This application demonstrates the usage of Generative UI techniques for healthcare dashboards, specifically with the [Agent–User Interaction (AG-UI) Protocol with CopilotKit](https://docs.ag-ui.com/introduction).
+
 ## Demo video
 
 Demo video coming soon...
@@ -22,7 +24,8 @@ Demo video coming soon...
 
 - Node.js 22.18 or higher
 - npm 11.6 or higher
-- Configured Medplum project (see section below)
+- Configured Medplum project (see steps below)
+- reCAPTCHA site key (for patient registration)
 - OpenAI API key
 
 ### Medplum Project setup
@@ -31,6 +34,28 @@ Create a new Medplum project at https://app.medplum.com/register.
 
 Get your Medplum project ID from the app.medplum.com [Project page](https://app.medplum.com/admin/project). Keep the project ID at hand to set it as an environment variable.
 
+### Create a patient default access policy
+
+1. Go to [app.medplum.com New AccessPolicy page, JSON tab](https://app.medplum.com/AccessPolicy/new/json)
+2. Paste the contents from [patient-access-policy.json](patient-access-policy.json)
+3. Click "OK"
+
+### Set up open patient registration
+
+To allow patients to self-register, set the patient access policy as the default.
+
+1. Navigate to [app.medplum.com Project page](https://app.medplum.com/Project) and select your project.
+2. In the "Edit" tab, set the "Default Patient Access Policy" field to your patient access policy and click "Update".
+
+For more details, see the [Open Patient Registration documentation](https://www.medplum.com/docs/user-management/open-patient-registration).
+
+### Set up reCAPTCHA
+
+A reCAPTCHA configuration is required for the registration form to work.
+
+1. Create a new reCAPTCHA configuration to get the site key and secret key at [google.com/recaptcha/admin/create](https://www.google.com/recaptcha/admin/create).
+2. Go to [app.medplum.com](https://app.medplum.com), go to Project, then Sites. Create a Site with domains `localhost` and `127.0.0.1` and set the reCAPTCHA site key and secret key.
+
 ### OpenAI API key setup
 
 Get your API key from [OpenAI Platform](https://platform.openai.com/api-keys).
@@ -48,11 +73,18 @@ Create a `.env` file in the project root:
 
 ```env
 VITE_MEDPLUM_PROJECT_ID=<your-medplum-project-id-here>
+VITE_MEDPLUM_RECAPTCHA_SITE_KEY=<your-recaptcha-site-key-here>
 OPENAI_API_KEY=<your-openai-api-key-here>
-OPENAI_MODEL=<choose-an-openai-llm-model-here>
 ```
 
-4. **Start the application**
+Optional variables (defaults to the values shown):
+```env
+VITE_MEDPLUM_BASE_URL=https://api.medplum.com
+VITE_COPILOT_RUNTIME_URL=http://localhost:4000/copilotkit
+OPENAI_MODEL=gpt-5-nano
+```
+
+3. **Start the application**
 
 **Option A: Start both services together (recommended)**
 ```bash
@@ -68,10 +100,16 @@ npm run server
 npm run dev
 ```
 
-5. **Open the app**: [http://localhost:3000](http://localhost:3000)
+4. **Open the app**: [http://localhost:3000](http://localhost:3000)
 
 ## Usage
 
+### Patient Sign-up and Sign-in
+
+1. **New users**: Click "Register here" to create a new patient account
+2. **Existing users**: Sign in as a Patient user
+3. After signing in, you'll access your AI Concierge dashboard
+
 ### AI Assistant Examples
 
 The AI assistant generates widgets dynamically based on natural language queries. Try these:
@@ -112,11 +150,11 @@ The AI analyzes all visible widget data and presents the interpretation in the c
 | `VITE_COPILOT_RUNTIME_URL` | No | `http://localhost:4000/copilotkit` | CopilotKit runtime endpoint |
 | `VITE_MEDPLUM_BASE_URL` | No | `https://api.medplum.com/` | Medplum API endpoint |
 | `VITE_MEDPLUM_PROJECT_ID` | Yes | - | Your Medplum project ID |
+| `VITE_MEDPLUM_RECAPTCHA_SITE_KEY` | Yes | - | Your reCAPTCHA site key |
 | `OPENAI_API_KEY` | Yes | - | Your OpenAI API key |
 | `OPENAI_MODEL` | No | `gpt-5-nano` | OpenAI model to use for the AI assistant |
 | `SERVER_PORT` | No | `4000` | Backend server port |
 
-
 ## Development
 
 ### Development Guidelines
@@ -157,6 +195,47 @@ npm test -- src/components/widgets/VitalsWidget.test.tsx
 npm test -- --testNamePattern="VitalsWidget"
 ```
 
+## Deployment to GitHub Pages
+
+This project includes a GitHub Actions workflow to automatically deploy the application to GitHub Pages.
+
+### Setup
+
+1. **Enable GitHub Pages for your repository:**
+   - Go to your repository Settings → Pages
+   - Under "Build and deployment", select "GitHub Actions" as the source
+
+2. **Configure GitHub Secrets:**
+   
+   Add the following secrets to your repository (Settings → Secrets and variables → Actions → New repository secret):
+   
+   - `MEDPLUM_BASE_URL`: e.g., `https://api.medplum.com`
+   - `MEDPLUM_CLIENT_ID`
+   - `MEDPLUM_PROJECT_ID`
+   - `MEDPLUM_RECAPTCHA_SITE_KEY`
+   - `COPILOT_RUNTIME_URL`
+   - `OPENAI_API_KEY`
+   - `OPENAI_MODEL`
+
+3. **Configure base path (if needed):**
+   
+   If your repository is hosted at `https://username.github.io/repository-name/` (not at a custom domain or root), you'll need to set the base path:
+   
+   ```bash
+   export VITE_BASE_PATH=/repository-name/
+   npm run build
+   ```
+   
+   Or add to GitHub Actions secrets and set in the workflow.
+
+### Deployment Triggering
+
+The workflow automatically deploys when you push to the `main` branch, or you can manually trigger it from the Actions tab in your GitHub repository.
+
+After deployment, your app will be available at:
+- `https://username.github.io/` (for user pages)
+- `https://username.github.io/repository-name/` (for project pages)
+
 ## License
 
 Apache 2.0 - See [LICENSE.txt](LICENSE.txt) for details
@@ -170,3 +249,9 @@ Apache 2.0 - See [LICENSE.txt](LICENSE.txt) for details
 - **CopilotKit Self-Hosting Guide**: [docs.copilotkit.ai/direct-to-llm/guides/self-hosting](https://docs.copilotkit.ai/direct-to-llm/guides/self-hosting)
 
 **Need Help?** Please feel free to create an issue!
+
+## Commercial Support
+
+[![alt text](https://avatars2.githubusercontent.com/u/5529080?s=80&v=4 "Vinta Logo")](https://www.vinta.com.br/)
+
+This project is maintained by [Vinta Software](https://www.vinta.com.br/). We offer design and development services for healthcare companies. If you need any commercial support, feel free to get in touch: contact@vinta.com.br
diff --git a/patient-access-policy.json b/patient-access-policy.json
@@ -0,0 +1,73 @@
+{
+  "resourceType": "AccessPolicy",
+  "name": "Patient Access Policy Template",
+  "id": "patient-access-policy-template",
+  "compartment": {
+    "reference": "%patient"
+  },
+  "resource": [
+    {
+      "resourceType": "Patient",
+      "criteria": "Patient?_compartment=%patient"
+    },
+    {
+      "resourceType": "Observation",
+      "criteria": "Observation?_compartment=%patient"
+    },
+    {
+      "resourceType": "DiagnosticReport",
+      "criteria": "DiagnosticReport?_compartment=%patient"
+    },
+    {
+      "resourceType": "MedicationRequest",
+      "criteria": "MedicationRequest?_compartment=%patient"
+    },
+    {
+      "resourceType": "Coverage",
+      "criteria": "Coverage?_compartment=%patient"
+    },
+    {
+      "resourceType": "PaymentNotice",
+      "criteria": "PaymentNotice?_compartment=%patient"
+    },
+    {
+      "resourceType": "CarePlan",
+      "criteria": "CarePlan?_compartment=%patient"
+    },
+    {
+      "resourceType": "Immunization",
+      "criteria": "Immunization?_compartment=%patient"
+    },
+    {
+      "resourceType": "Communication",
+      "criteria": "Communication?_compartment=%patient"
+    },
+    {
+      "resourceType": "Organization",
+      "readonly": true
+    },
+    {
+      "resourceType": "Practitioner",
+      "readonly": true
+    },
+    {
+      "resourceType": "Schedule",
+      "readonly": true
+    },
+    {
+      "resourceType": "Slot",
+      "readonly": true
+    },
+    {
+      "resourceType": "Binary"
+    },
+    {
+      "resourceType": "Bot",
+      "readonly": true
+    },
+    {
+      "resourceType": "OperationDefinition",
+      "readonly": true
+    }
+  ]
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,3 +1,5 @@
+import '@copilotkit/react-ui/styles.css';
+
 import { AppShell } from '@mantine/core';
 import { ErrorBoundary, Loading, useMedplum } from '@medplum/react';
 import type { JSX } from 'react';
diff --git a/src/components/RegisterForm.test.tsx b/src/components/RegisterForm.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '../test-utils/render';
+import { RegisterForm } from './RegisterForm';
+
+describe('RegisterForm', () => {
+  test('renders registration form', () => {
+    render(<RegisterForm />);
+    expect(screen.getByText(/Create Account/)).toBeInTheDocument();
+    expect(screen.getByText(/Register as a new patient/)).toBeInTheDocument();
+  });
+
+  test('shows back button when onCancel is provided', () => {
+    const onCancel = jest.fn();
+    render(<RegisterForm onCancel={onCancel} />);
+    const backButton = screen.getByRole('button', { name: /Back to sign in/ });
+    expect(backButton).toBeInTheDocument();
+    backButton.click();
+    expect(onCancel).toHaveBeenCalled();
+  });
+
+  test('does not show back button when onCancel is not provided', () => {
+    render(<RegisterForm />);
+    const backButton = screen.queryByRole('button', { name: /Back to sign in/ });
+    expect(backButton).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/RegisterForm.tsx b/src/components/RegisterForm.tsx
@@ -0,0 +1,42 @@
+import { Box, Button, Group, Text, Title } from '@mantine/core';
+import { RegisterForm as MedplumRegisterForm } from '@medplum/react';
+import type { JSX } from 'react';
+import { MEDPLUM_PROJECT_ID, MEDPLUM_RECAPTCHA_SITE_KEY } from '../config';
+import { IconArrowLeft } from '@tabler/icons-react';
+
+interface RegisterFormProps {
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+export function RegisterForm({ onSuccess, onCancel }: RegisterFormProps): JSX.Element {
+  return (
+    <Box p="md">
+      <div>
+        <Title order={3} ta="center" my="md">
+          Create Account
+        </Title>
+        <Text c="dimmed" size="sm" ta="center">
+          Register as a new patient to access your health information
+        </Text>
+      </div>
+
+      <MedplumRegisterForm
+        type="patient"
+        projectId={MEDPLUM_PROJECT_ID}
+        recaptchaSiteKey={MEDPLUM_RECAPTCHA_SITE_KEY}
+        onSuccess={() => {
+          onSuccess?.();
+        }}
+      />
+
+      {onCancel && (
+        <Group justify="center" mt="md">
+          <Button variant="subtle" onClick={onCancel} leftSection={<IconArrowLeft size={16} />}>
+            Back to sign in
+          </Button>
+        </Group>
+      )}
+    </Box>
+  );
+}
diff --git a/src/config.ts b/src/config.ts
@@ -1,6 +1,8 @@
 // Medplum Configuration
 export const MEDPLUM_BASE_URL = import.meta.env.VITE_MEDPLUM_BASE_URL || 'https://api.medplum.com/';
 export const MEDPLUM_PROJECT_ID = import.meta.env.VITE_MEDPLUM_PROJECT_ID;
+export const MEDPLUM_CLIENT_ID = import.meta.env.VITE_MEDPLUM_CLIENT_ID;
+export const MEDPLUM_RECAPTCHA_SITE_KEY = import.meta.env.VITE_MEDPLUM_RECAPTCHA_SITE_KEY;
 
 // CopilotKit Configuration - Self-hosted Runtime
 export const COPILOT_RUNTIME_URL = import.meta.env.VITE_COPILOT_RUNTIME_URL || 'http://localhost:4000/copilotkit';
diff --git a/src/pages/SignInPage.test.tsx b/src/pages/SignInPage.test.tsx
diff --git a/src/pages/SignInPage.tsx b/src/pages/SignInPage.tsx
diff --git a/vite.config.ts b/vite.config.ts

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import '@copilotkit/react-ui/styles.css';`
	`2`	`+`
`1`	`3`	`import { AppShell } from '@mantine/core';`
`2`	`4`	`import { ErrorBoundary, Loading, useMedplum } from '@medplum/react';`
`3`	`5`	`import type { JSX } from 'react';`