Widgets

Modified on Wed, 1 Apr at 5:43 AM

MAGICapp Web Components

MAGICapp provides embeddable web components that allow third-party websites to display clinical guideline content and enable authenticated API access. These components are production-ready widgets that can be easily integrated into any web application.

Available Components

<magicapp-connect>

An authentication and API component that handles OAuth 2.0 login flow with MAGICapp's API. Third-party applications use this component to:

Authenticate users via Keycloak
Obtain access tokens for API calls
Automatically manage token refresh
Provide access to the APIBuilder for making authenticated API calls
Enable authenticated requests from other components on the page

The APIBuilder is lazy-loaded on first use, providing a fluent interface for accessing MAGICapp's API endpoints without requiring manual token management.

Use Case: Required for any third-party application that needs to make authenticated API calls to MAGICapp. Can also be used standalone to provide programmatic API access.

<magicapp-recommendation>

Displays a complete clinical recommendation with all associated content (key information, rationale, evidence summaries, decision aids, etc.). This component uses the same code as the MAGICapp UI - the web component is simply a wrapper around the production interface.

Use Case: Embed individual clinical recommendations on external websites, EHR systems, or clinical decision support tools.

<magicapp-pico>

Displays PICO (Population, Intervention, Comparison, Outcome) information for clinical questions. Like the recommendation component, this uses production UI code wrapped in a web component.

Use Case: Display structured clinical question information on external platforms.

How It Works

Authenticated Components: The magicapp-recommendation and magicapp-pico components can be on the same page asmagicapp-connect to automatically use OAuth authentication for API calls. When used standalone, they make unauthenticated (public) API requests.

Integration Steps:

Include the component script(s) in your page's <head> section
Add the component tag(s) in your HTML markup where you want the widget to appear
Configure the component using HTML attributes or JavaScript properties
(Optional) Listen for component events to respond to user interactions

Code Reuse: The recommendation and PICO widgets leverage the same battle-tested code that powers the MAGICapp production interface, ensuring consistency and reliability.

Examples and Demos

Widget Demo - Public-facing examples and integration patterns
Authentication Demo – Examples using OAuth authentication
Widget Test Page – Internal testing and development sandbox

Getting Started

See the individual component documentation pages for:

Installation instructions
Configuration options
API reference
Code examples
Troubleshooting guides

Need help? Contact api-support@magicapp.org to get your client credentials and start integrating.