No native modules, iOS pod install, or Android linking steps are required. This is a pure web (Node.js/browser) package.

Project setup

1. Copy the source/ directory into your project root, e.g. ./mattermost-webapp/.

2. Update your tsconfig.json to include path aliases matching the source:

{
  "compilerOptions": {
    "baseUrl": "./mattermost-webapp",
    "paths": {
      "types/store": ["types/store"],
      "selectors/*": ["selectors/*"],
      "actions/*": ["actions/*"],
      "components/*": ["components/*"],
      "utils/*": ["utils/*"]
    }
  }
}

3. If using Webpack, extend your resolve.alias to match:

// webpack.config.js (your project)
const path = require('path');
module.exports = {
  resolve: {
    alias: {
      'types/store': path.resolve(__dirname, 'mattermost-webapp/types/store'),
      'selectors': path.resolve(__dirname, 'mattermost-webapp/selectors'),
      'actions': path.resolve(__dirname, 'mattermost-webapp/actions'),
      'components': path.resolve(__dirname, 'mattermost-webapp/components'),
      'utils': path.resolve(__dirname, 'mattermost-webapp/utils'),
    }
  }
};

4. Provide the Redux store. The components expect a GlobalState shape from mattermost-redux. Initialize using your store setup or the one in source/store/.

5. Required environment variables (set in .env or build config):

   • MM_SERVICESETTINGS_SITEURL - Mattermost server URL
   • MM_FEATUREFLAGS_* - any feature flag overrides

6. Wrap your app with <Provider store={store}> and an IntlProvider from react-intl.

Public API

AboutBuildModal (connected component)

// source/components/about_build_modal/index.ts
import AboutBuildModal from './mattermost-webapp/components/about_build_modal';
// Props injected from Redux: config, license

Renders the "About" dialog showing server version, build hash, license info. Use it when you need to surface build/version metadata to end users. Connect it inside a Redux Provider — config and license are pulled automatically from getConfig and getLicense selectors.

AccessHistoryModal (connected component)

// source/components/access_history_modal/index.ts
import AccessHistoryModal from './mattermost-webapp/components/access_history_modal';
// Redux props: currentUserId, userAudits[]
// Redux actions: getUserAudits

Displays the current user's audit log (login history, IP addresses, timestamps). Mount it in a settings or security panel. It self-fetches audits via getUserAudits on mount and renders the results from the Redux store.

ActivityLogModal (connected component)

// source/components/activity_log_modal/index.ts
import ActivityLogModal from './mattermost-webapp/components/activity_log_modal';
// Redux props: currentUserId, sessions[], locale
// Redux actions: getSessions, revokeSession

Shows all active user sessions with the ability to revoke individual ones. Use it in an account security settings flow. The component manages its own data fetching and provides a "Log Out" button per session entry.

Working examples

Scenario - Render the About Build modal in a settings page

Mount the modal inside your Redux Provider to display server version and license details.

import React, {useState} from 'react';
import {Provider} from 'react-redux';
import {IntlProvider} from 'react-intl';
import store from './mattermost-webapp/store';
import AboutBuildModal from './mattermost-webapp/components/about_build_modal';

export const SettingsPage: React.FC = () => {
    const [showAbout, setShowAbout] = useState(false);
    return (
        <Provider store={store}>
            <IntlProvider locale='en'>
                <button onClick={() => setShowAbout(true)}>About</button>
                {showAbout && (
                    <AboutBuildModal onHide={() => setShowAbout(false)} />
                )}
            </IntlProvider>
        </Provider>
    );
};

Scenario - Display access history for the current user

Embed the access history modal in a security settings panel; it fetches its own data.

import React, {useState} from 'react';
import {Provider} from 'react-redux';
import {IntlProvider} from 'react-intl';
import store from './mattermost-webapp/store';
import AccessHistoryModal from './mattermost-webapp/components/access_history_modal';

export const SecurityPanel: React.FC = () => {
    const [open, setOpen] = useState(false);
    return (
        <Provider store={store}>
            <IntlProvider locale='en'>
                <button onClick={() => setOpen(true)}>View Login History</button>
                {open && <AccessHistoryModal onHide={() => setOpen(false)} />}
            </IntlProvider>
        </Provider>
    );
};

Scenario - Session management with ActivityLogModal

Allow users to view and revoke their active sessions from a profile page.

import React, {useState} from 'react';
import {Provider} from 'react-redux';
import {IntlProvider} from 'react-intl';
import store from './mattermost-webapp/store';
import ActivityLogModal from './mattermost-webapp/components/activity_log_modal';

export const ProfileSecurity: React.FC = () => {
    const [show, setShow] = useState(false);
    return (
        <Provider store={store}>
            <IntlProvider locale='en'>
                <button onClick={() => setShow(true)}>Manage Sessions</button>
                {show && <ActivityLogModal onHide={() => setShow(false)} />}
            </IntlProvider>
        </Provider>
    );
};

File walkthrough

• .github/ - GitHub Actions pipelines for lint, test, CodeQL, and performance benchmarks.
• actions/ - Thunk action creators; organized by domain (channel, post, user, websocket, views).
• client/ - Thin wrappers over @mattermost/client for REST API calls.
• components/ - Self-contained React components, each folder typically containing an index.ts connector and a main component file.
• fonts/ - WOFF/WOFF2 font assets loaded via SCSS.
• i18n/ - Translation JSON files keyed by locale code (e.g., en.json, de.json).
• images/ - PNG/SVG static assets referenced by components.
• packages/ - Internal npm workspace packages shared across the app.
• plugins/ - Mattermost plugin runtime: registry, component overrides, hook system.
• reducers/ - View-layer Redux reducers (not server entity state, which lives in mattermost-redux).
• sass/ - Global SCSS: theme variables, mixins, base styles.
• scripts/ - Build helpers, bundle analysis, and upgrade tooling.
• selectors/ - Reselect selectors for browser state, i18n locale, and view state.
• store/ - Redux store factory, middleware composition, initial state.
• stores/ - Legacy non-Redux stores kept for backward compatibility.
• types/ - Project-level TypeScript interfaces extending @mattermost/types.
• utils/ - Pure functions: URL utils, text formatting, browser detection, constants.
• entry.tsx - Webpack entry; bootstraps the app and registers service workers.
• root.tsx - Top-level React tree with Router, Provider, IntlProvider.
• module_registry.ts - Runtime registry enabling plugins to override components.
• webpack.config.js - Full production/dev Webpack config with code splitting.
• tsconfig.json - TypeScript config with strict mode and path aliases.
• babel.config.js - Babel presets for TypeScript and React.

Common pitfalls and fixes

• Path alias resolution fails at runtime - Your bundler must mirror every alias in tsconfig.json; add all aliases to webpack.config.js resolve.alias or vite.config.ts resolve.alias.
• GlobalState type mismatch - The components expect the full mattermost-redux entity state shape; initialize the Redux store with mattermost-redux reducers or TypeScript will error on state arguments.
• react-intl version pin - The components use useIntl and FormattedMessage APIs from react-intl v5+; installing v4 causes runtime hook errors.
• SCSS imports fail without sass-loader - Global styles in sass/ require sass-loader and css-loader in Webpack; add them or import the compiled CSS manually.
• mattermost-redux peer version must match - Components import selectors directly from mattermost-redux; mismatched versions cause selector shape errors. Pin to the version used in user@example.com.
• ESM/CJS interop with @mattermost/types - If your bundler outputs CJS, add esModuleInterop: true in tsconfig.json to avoid default import failures from ESM-only packages.

Vibe-coding prompt template

I have a copy of the Mattermost web app source (upstream: user@example.com) in my
project at ./mattermost-webapp/. I also have USAGE.md at the root describing the block.

Please help me integrate this source into my existing React/TypeScript project step by step:

1. Read USAGE.md and the file excerpts for real export names and signatures.
2. Update my tsconfig.json and webpack.config.js to add the path aliases listed in USAGE.md.
3. Wire the Redux store from ./mattermost-webapp/store/ into my existing Provider, or show me
   how to merge the reducers.
4. Import and render the following components from the source (use only exports visible in
   USAGE.md): AboutBuildModal, AccessHistoryModal, ActivityLogModal.
5. Show complete, runnable TypeScript/TSX snippets for each component — no pseudocode.
6. Flag any peer dependency version conflicts with my current package.json and suggest pinned
   versions that match user@example.com
7. Do not invent any API that is not shown in USAGE.md or the source file excerpts.

License and credit

The source is licensed under the Apache License 2.0 (source/LICENSE.txt). Original work by Mattermost, Inc. The upstream repository is mattermost/mattermost-webapp, package user@example.com. Note: active development has moved to the mattermost/mattermost-server monorepo under webapp/channels.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

The full install guide and integration prompts unlock after purchase.

Algolia JavaScript API Client Monorepo

Automation, Utilities & Developer Tools

Free