UI + API Integrations

When implementing a UI + API integration, your application front end is hosting a portion of the Blueprint web application UI inside it, so there is nothing to download or install for your users. Your application front end communicates with the Blueprint UI by sending JavaScript messages to it, and the Blueprint UI will communicate with your application by firing events that your application can listen to.

In this integration method, the clinician user will be authenticated to your application. Your backend will call Blueprint APIs to create a clinician record for that user in Blueprint (if they do not exist) and then to authenticate that user with Blueprint on your behalf. The Blueprint server-to-server clinician authentication method returns an access token that should be securely returned to your application front end, and in turn your application front end will send the access token to the embedded Blueprint UI so the embedded UI can act on behalf of the clinician. In this method, clinicians do not need to "sign up" for a new account as it happens implicitly through the methods described above.

To start a recording session and to generate clinical artifacts, Blueprint needs to have a record for the client being treated. Your backend will call Blueprint APIs to create clients based on the clients in your application. Then your application's front end will send a message to the embedded Blueprint UI to select the current client in your application so that when the clinician starts a session recording via the embedded Blueprint UI, the correct client record is used.

The workflow of implementing a UI + API integration looks like this:

  1. Add the Blueprint UI JavaScript snippet to your application's front end code, which in this method will be for recording purposes only.

  2. Your partner organization will be provisioned by Blueprint with an API client id, API client secret, and API key.

    1. These are secrets that should be stored securely with your application backend and never shared to front end code.
  3. Your application backend will authenticate with Blueprint using the API client id and API client and will receive an access token to be used (along with your API key) for subsequent server-to-server calls. This is the server-to-server access token.

  4. Your application backend will create clinician records in Blueprint for the users of your application. You can provide an external id of the clinician (for example, the user id in your application) that will be stored in Blueprint.

  5. Your application backend will create client records in Blueprint for the clients in your application. You can provide an external id of the client (for example, the medical record number of the patient in your application) that will be stored in Blueprint.

  6. Before a clinician user of your application can start a session recording, your backend will need to authenticate that clinician with Blueprint by calling authenticate using the internal id of the clinician.

    1. This method returns a short-lived access token that should be securely returned to your application front end. This the clinician access token.

    2. This method also returns a longer-lived refresh token that should be held by your backend to generate new clinician access tokens as needed.

  7. Once your application front end has the clinician access token, it will send a message with that token to the embedded Blueprint UI, so UI can start a session on the clinician's behalf.

  8. Your application front end will send a message to the embedded Blueprint UI to select the current client in your application.

  9. The clinician then starts a session recording via the Blueprint UI.

    1. Blueprint UI captures the audio and sends it to the Blueprint servers.
  10. When the clinical artifacts are ready, the Blueprint backend will send a webhook to endpoints that you have implemented. Typically the payload of each webhook will have metadata about the event that happened, and relevant internal ids that your backend can then use to fetch additional details via the Blueprint API. Your application backend can then process and store these artifacts as needed.