Vim is the middleware platform for healthcare. Vim Canvas is a self-service platform that empowers application developers to embed their application into Electronic Health Record (EHR) workflows, resulting in a streamlined and low-friction experience for end users. With Vim, you can deploy your applications on top of Vim Connect - Vim's in-EHR connectivity layer - accelerating time to market at reduced cost and improved flexibility.
This repo contains example projects for building applications on top of Vim Canvas. The applications in different frameworks demonstrates how to use the VimOS.js Canvas SDK to interact with the Vim Canvas platform. The app showcases the following features:
- Authentication with Vim Canvas
- Embedding an application into the Vim Canvas platform
- Viewing EHR entities, including
- Patients
- Encounters
- Referrals
- Orders
- Updating EHR entities, including
- Encounters
- Referrals
Under the vim-canvas-demo-app-react we have a project that uses cloudflare pages to host the Vim Canvas Demo App built with React & also the serverless service needed for the authentication flow.
The app is built with vite and react and uses shadcn, radix-ui,tailwindcss for the UI components.
functions- Contains cloudflare pages functions for the authentication flow.src/components/ui- Contains UI components generated with Shadcn.src/hooks- Contains custom hooks for the application, including hooks that wrap the VimOS.js Canvas SDK - following the docs examples.
In order to see the demo code in action, you must first configure an application in the Vim Canvas Developer Platform.
If you don’t have a Vim Canvas developer account yet, register here to gain access.
To install and run the app locally, follow these steps:
- Clone the repository:
git clone https://github.com/getvim/vim-canvas-demo-app.git- Navigate to the project directory:
cd vim-canvas-demo-app-react- Install the dependencies:
npm install- Create a
.dev.varsfile with the following content:
CLIENT_ID=<<YOU ACCOUNT CLIENT ID>>
CLIENT_SECRET=<<YOUR ACCOUNT CLIENT SECRET>>-
Change the
appUrlinfunctions/api/launch.tsto"http://localhost:8788"(the local app url). -
Start the development server:
npm run dev- Follow up on Testing Your Application in the official docs
The functions folder is a cloudflare pages function that handles the authentication flow for the app.
When running locally the api server starts at http://localhost:8788 & exposes the following endpoints:
/api/launch- This endpoint is used to initiate the authentication flow./api/token- This endpoint is used to handle the callback from the Vim Canvas platform to create a token.
| Starter Access | Patient-Based | User-Based |
|---|---|---|
| Design and test your application before choosing a plan. | Active Member Pricing (AMP) Billed Based on Per Member Per Month (PMPM) | Per User Per Month (PUPM) |
| Who is this right for? | Who is this right for? | Who is this right for? |
| - Access to developer platform - Ability to build application using Vim workflows - Design and testing only. Activation and distribution of application requires a package |
- Patient-based pricing model in use or applicable to workflow - Application is enabled based on patient in context in the EHR - Allows for unlimited clinic-level users |
- User-based pricing model in use or applicable to application - Application is always available and is not specific to patients - Based on number of users/year for which the application is enabled |
| Example: A mental health referral solution |
Example: An efficiency solution such as a medical documentation tool |
- How can I submit an improvement?
- Improvements are always welcomed! 🥳 Open a PR with a proper description and we'll review it as soon as possible
- Spot a bug 🕷 ?
- We welcome code changes that improve the apps or fix a problem. Please make sure to follow all best practices and open an "Issue" and we'll review it as soon as possible.