/node_modules/@boomi/exosphere/dist/react/index.mjs\"\n }\n}\n```\n#### Usage\n\nStart using Exosphere React components. Example:\n```\n// src/App.(js|ts|tsx)\n\nimport {ExButton} from '@boomi/exosphere';\n\nfunction App() {\n return (\n \n Hello from ExoSphere!\n
\n );\n}\n\nexport default App;\n```\n\n### Vue\n\n#### Installation\n\n```\nnpm i @boomi/exosphere --save\n```\n\n#### Configuration\n```\n// src/main.js\n\nimport \"@boomi/exosphere/dist/styles.css\";\nimport \"@boomi/exosphere\";\n```\n\n#### Usage\n```\n// src/App.vue\n\n Hello Vue!\n\n```\n\n### Angular\n#### Installation\n\n```\nnpm i @boomi/exosphere --save\n```\n\n\n#### Configuration\n```\n// app.module.ts\n\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n declarations: [AppComponent],\n imports: [BrowserModule],\n providers: [],\n bootstrap: [AppComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})\nexport class AppModule {}\n```\n\nImport Exosphere & it's styles\n```\n// app.component.ts\n\nimport \"@boomi/exosphere/dist/styles.css\";\nimport \"@boomi/exosphere\";\n```\n\n#### Usage\n```\n// app.component.html\n\n\n Hello Angular!\n
\n```\n\n## Requirements\nNode v16+\n\n\n## Install\nInstall all dependencies\n```bash\nnpm install\n```\n\n## Pre start (only once)\nAdds git hooks to run unit tests when code is committed\n````\nnpm run prestart\n````\n\n## Storybook\nRuns storybook in watch mode on http://localhost:6006/ with hot module replacement for development. Changes in code can be previewed instantly. \n```bash\nnpm run storybook\n```\n\n## Build\nCreate javascript and styles bundle. Also, wraps web components for React usage\n\n```bash\nnpm run build\n```\n\n## Feature Testing\n\n### Prerequisite\n- Git CLI\n- Node\n- Bitbucket Access to the Exosphere Repo\n- Exosphere Repo local clone\n\nBuilds and host the storybook build files locally.\nCurrently, the default branch is set to `develop`.\n\n```\nnpm run build-storybook:host\n```\n\nuse `--branch` flag to build and host the respective branch i.e.\n```\nnpm run build-storybook:host --branch=\n\nExamples:\nnpm run build-storybook:host --branch=UU-127\nnpm run build-storybook:host --branch=develop\n```\n\nNote: Make sure that feature branch has been pushed to the bitbucket origin by developer.\n## Unit Testing\nRuns unit tests\n```\nnpm test\n```\n\n## Coverage\nGenerates code coverate report in coverage/ folder\n```\nnpm run coverage\n```\n\n## Scaffolding\nGenerates scaffolding of a new component\n```\nnpm run create-component\n```\nyou need to export the newly created component in the index.ts file under src/components.\n\n## MCP Server\n\nExosphere 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.\n\n### Consumer setup\n\nThe 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:\n\n```json\n{\n \"mcpServers\": {\n \"exosphere\": {\n \"command\": \"node\",\n \"args\": [\"./node_modules/@boomi/exosphere/dist/mcp-server/index.js\"]\n }\n }\n}\n```\n\nTo disable this behaviour, set `EXOSPHERE_SKIP_MCP=1`. Use one of:\n\n```bash\n# Shell profile (~/.zshrc, ~/.bashrc)\nexport EXOSPHERE_SKIP_MCP=1\n```\n\n```ini\n# .npmrc (project or global)\nexosphere_skip_mcp=1\n```\n\nRestart 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`.\n\n### Updating the MCP server (Exosphere developers)\n\nThe 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.\n\n**When you update a `knowledge.md` file**, rebuild the registry and bundle manually:\n\n```bash\nnpm run mcp:build\n```\n\nThis runs three steps in sequence:\n\n1. `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`\n2. `mcp:bundle` — bundles the MCP server + all dependencies into a single self-contained `dist/mcp-server/index.js`\n3. `mcp:copy-data` — copies the registry JSON files into `dist/mcp-server/data/`\n\nThe MCP build is also included in the full production build (`npm run build`), so the registry is always up to date in published packages.\n\n**Adding a new component to the registry:**\n\nNo 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.\n\n## Browser Support\nChrome, Edge, Safari","readmeFilename":"README.md"}