Vim Canvas™️ Demo App (React)

Quick Links

• Vim Canvas™️ Developer Platform
• Vim Canvas™️ Docs
• VimOS.js Canvas™️ SDK

What is Vim Canvas™️?

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.

Repo Overview 😎

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

Vim Canvas™️ Demo App (React)

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, and Cloudfare for back end authentication flow. These are only front end and back end libraries or languages that are used as examples in the demo app. You can use Vim OS SDK in any front or back end language or libraries you are currently using if you already have an application.

Folder Structure

• 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.

Running the example code

Prerequisites

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.

❕ You don't need a cloudflare user / account to run the app locally.

Installation

To install and run the app locally, follow these steps:

1. Clone the repository:

git clone https://github.com/getvim/vim-canvas-demo-app.git

2. Navigate to the project directory:

cd vim-canvas-demo-app-react

3. Install the dependencies:

npm install

4. Create a .dev.vars file with the following content:

CLIENT_ID=<<YOU ACCOUNT CLIENT ID>>
CLIENT_SECRET=<<YOUR ACCOUNT CLIENT SECRET>>
REDIRECT_URL=http://localhost:8788

5. Start the development server:

npm run dev

This will start both the backend at http://localhost:8788 and the frontend at http://localhost:3000.
The backend will proxy the frontend - making both API & frontend available at http://localhost:8788.

6. Follow up on Testing Your Application in the official docs

Authentication Flow

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.

Settings Application Demo

On top of using VimOS.js to integrate your application's iframe within Vim Connect and display it in the Vim Hub on EHRs, you can also inject an additional optional iframe into the Vim Console. This allows you to create a dedicated Settings Application where organization administrators can customize and configure your main application.

This settings application is implemented under /settings route.

For further information

Vim Canvas™️ Pricing

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

Contributing

• 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.