ExoSphere

A library of Web Components

• Works with all frameworks 💡
• First-class React support 👔
• Dark theme enabled 🌙
• Bundled with Vite ⚡

Usage

Web Components

Local installation

Add styles and javascript file to the <head> section of your HTML markup

<link rel="stylesheet" href="/dist/styles.css">
<script type="module" src="/dist/index.mjs"></script>

Usage

// index.html

<ex-button type="primary" flavor="branded">Hello Web Components!</ex-button>

React

Web components are wrapped with a react wrapper

Installation

npm i @boomi/exosphere --save

Configuration

Import CSS in a global file such as index.(js|ts|tsx) or App.(js|ts|tsx)

import "@boomi/exosphere/dist/styles.css";

For Jest, you need to add the following entry in your package.json

// package.json

"jest" : {
      "transformIgnorePatterns": [ "<roodDir>/node_modules/(?!@boomi/exosphere/)" ],
      "moduleNameMapper": {
            "^@boomi/exosphere": "<rootDir>/node_modules/@boomi/exosphere/dist/react/index.mjs"
      }
}

Usage

Start using Exosphere React components. Example:

// src/App.(js|ts|tsx)

import {ExButton} from '@boomi/exosphere';

function App() {
  return (
    <div>
        <ExButton flavor="base" type="primary"> Hello from ExoSphere!</ExButton>
    </div>
  );
}

export default App;

Vue

Installation

npm i @boomi/exosphere --save

Configuration

// src/main.js

import "@boomi/exosphere/dist/styles.css";
import "@boomi/exosphere";

Usage

// src/App.vue
<template>
    <ex-button type="primary" flavor="branded" @click="doSomething">Hello Vue!<ex-button>
</template>

Angular

Installation

npm i @boomi/exosphere --save

Configuration

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

Import Exosphere & it's styles

// app.component.ts

import "@boomi/exosphere/dist/styles.css";
import "@boomi/exosphere";

Usage

// app.component.html

<div>
  <ex-button (click)="doSomething()" type="primary" flavor="branded">Hello Angular!</ex-button>
</div>

Requirements

Node v16+

Install

Install all dependencies

npm install

Pre start (only once)

Adds git hooks to run unit tests when code is committed

npm run prestart

Storybook

Runs storybook in watch mode on http://localhost:6006/ with hot module replacement for development. Changes in code can be previewed instantly.

npm run storybook

Build

Create javascript and styles bundle. Also, wraps web components for React usage

npm run build

Feature Testing

Prerequisite

• Git CLI
• Node
• Bitbucket Access to the Exosphere Repo
• Exosphere Repo local clone

Builds and host the storybook build files locally. Currently, the default branch is set to develop.

npm run build-storybook:host

use --branch flag to build and host the respective branch i.e.

npm run build-storybook:host --branch=<FEATURE_BRANCH>

Examples:
npm run build-storybook:host --branch=UU-127
npm run build-storybook:host --branch=develop

Note: Make sure that feature branch has been pushed to the bitbucket origin by developer.

Unit Testing

Runs unit tests

npm test

Coverage

Generates code coverate report in coverage/ folder

npm run coverage

Scaffolding

Generates scaffolding of a new component

npm run create-component

you need to export the newly created component in the index.ts file under src/components.

MCP Server

Exosphere ships an MCP (Model Context Protocol) server that gives AI assistants (Claude Code, Cursor, etc.) structured knowledge of all components, icons, props, events, and usage guidelines.

Consumer setup

The MCP server is bundled inside the package. When you run npm install @boomi/exosphere, a postinstall script automatically writes a .mcp.json to your project root:

{
  "mcpServers": {
    "exosphere": {
      "command": "node",
      "args": ["./node_modules/@boomi/exosphere/dist/mcp-server/index.js"]
    }
  }
}

To disable this behaviour, set EXOSPHERE_SKIP_MCP=1. Use one of:

# Shell profile (~/.zshrc, ~/.bashrc)
export EXOSPHERE_SKIP_MCP=1

# .npmrc (project or global)
exosphere_skip_mcp=1

Restart Claude Code (or your MCP-compatible IDE) after installing. The server exposes 10 tools: list_components, get_component_details, get_code_examples, search_components, get_usage_guidelines, get_design_tokens, search_icons, list_icon_categories, get_component_summary, and list_tools.

Updating the MCP server (Exosphere developers)

The MCP server reads from a pre-built registry (mcp-server/data/component-registry.json) generated from each component's knowledge.md, TypeScript source, Storybook stories, React wrapper, and styles.

When you update a knowledge.md file, rebuild the registry and bundle manually:

npm run mcp:build

This runs three steps in sequence:

1. mcp:generate-registry — re-parses all knowledge.md, .ts, .stories.ts, React wrapper, and .styles.ts files → writes mcp-server/data/component-registry.json and icon-registry.json
2. mcp:bundle — bundles the MCP server + all dependencies into a single self-contained dist/mcp-server/index.js
3. mcp:copy-data — copies the registry JSON files into dist/mcp-server/data/

The MCP build is also included in the full production build (npm run build), so the registry is always up to date in published packages.

Adding a new component to the registry:

No manual registry edits are needed. Once a component has a knowledge.md following the standard template, it is picked up automatically on the next npm run mcp:generate-registry. The generator prints a completeness score for each component — aim for 80%+ by including Overview, API Reference, Usage Guidelines, Best Practices, and Examples sections in the knowledge file.

Browser Support

Chrome, Edge, Safari