Skip to main content

​
Installation

This guide will help you install and configure the MCMP JavaScript SDK in your JavaScript or TypeScript project.

​
Requirements

Node.js Version

Node.js 16.0 or higher is required for the MCMP JavaScript SDK

Package Manager

npm, yarn, pnpm, or bun recommended

​
npm Installation

Install the MCMP JavaScript SDK using npm: 
npm install @mcmp/sdk

​
TypeScript Support

For TypeScript projects, the SDK includes built-in type definitions: 
npm install @mcmp/sdk typescript

​
yarn Installation

Install using yarn: 
yarn add @mcmp/sdk

​
pnpm Installation

Install using pnpm: 
pnpm add @mcmp/sdk

​
Bun Installation

Install using Bun: 
bun add @mcmp/sdk

​
CDN Installation

For browser usage without a build system, use the CDN: 
<script src="https://cdn.mcmp.app/sdk/latest/mcmp-sdk.min.js"></script>
<script>
  const client = new McmpSDK.McmpClient({
    apiKey: 'your-api-key'
  });
</script>

​
ES Modules

The SDK supports ES modules for modern JavaScript: 
import { McmpClient } from '@mcmp/sdk';

const client = new McmpClient({
  apiKey: 'your-api-key'
});

​
CommonJS

For CommonJS environments: 
const { McmpClient } = require('@mcmp/sdk');

const client = new McmpClient({
  apiKey: 'your-api-key'
});

​
TypeScript Configuration

For TypeScript projects, ensure your tsconfig.json includes: 
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "skipLibCheck": true
  }
}

​
Framework Integration

​
React

For React applications, install the React-specific package: 
npm install @mcmp/sdk @mcmp/sdk-react

import { McmpProvider, useMcmpClient } from '@mcmp/sdk-react';

function App() {
  return (
    <McmpProvider apiKey="your-api-key">
      <MyComponent />
    </McmpProvider>
  );
}

function MyComponent() {
  const client = useMcmpClient();
  
  // Use the client in your component
  return <div>MCMP SDK Ready!</div>;
}

​
Vue.js

For Vue.js applications: 
npm install @mcmp/sdk @mcmp/sdk-vue

<template>
  <div>
    <h1>MCMP SDK</h1>
    <p>Server count: {{ serverCount }}</p>
  </div>
</template>

<script setup lang="ts">
import { useMcmpClient } from '@mcmp/sdk-vue';

const client = useMcmpClient();
const serverCount = ref(0);

onMounted(async () => {
  const servers = await client.servers.list();
  serverCount.value = servers.length;
});
</script>

​
Angular

For Angular applications: 
npm install @mcmp/sdk @mcmp/sdk-angular

import { McmpModule } from '@mcmp/sdk-angular';

@NgModule({
  imports: [McmpModule.forRoot({ apiKey: 'your-api-key' })],
  // ...
})
export class AppModule { }

​
Environment Configuration

​
Environment Variables

Create a .env file for your API key: 
# .env
MCMP_API_KEY=your-api-key-here
MCMP_BASE_URL=https://api.mcmp.app/v1

import { McmpClient } from '@mcmp/sdk';

const client = new McmpClient({
  apiKey: process.env.MCMP_API_KEY,
  baseUrl: process.env.MCMP_BASE_URL
});

​
Configuration Files

Create a configuration file: 
// config.js
export const mcmpConfig = {
  apiKey: 'your-api-key-here',
  baseUrl: 'https://api.mcmp.app/v1',
  timeout: 30000,
  retries: 3
};

// config.ts
export interface McmpConfig {
  apiKey: string;
  baseUrl?: string;
  timeout?: number;
  retries?: number;
}

export const mcmpConfig: McmpConfig = {
  apiKey: process.env.MCMP_API_KEY!,
  baseUrl: process.env.MCMP_BASE_URL,
  timeout: 30000,
  retries: 3
};

​
Verification

Test your installation with a simple example: 
import { McmpClient } from '@mcmp/sdk';

async function testInstallation() {
  try {
    const client = new McmpClient({
      apiKey: 'your-api-key'
    });
    
    // Test authentication by making a simple API call
    const servers = await client.servers.list();
    console.log('MCMP JavaScript SDK installed successfully!');
    console.log('Servers:', servers.length);
    
  } catch (error) {
    console.error('Installation test failed:', error.message);
  }
}

testInstallation();

​
Dependencies

The MCMP JavaScript SDK includes the following dependencies:
  • Built-in fetch API with automatic retries
  • Request/response interceptors
  • Automatic JSON parsing
  • Native WebSocket support
  • Automatic reconnection
  • Event handling
  • Full TypeScript support
  • Comprehensive type definitions
  • IntelliSense support

​
Troubleshooting

Ensure the package is installed correctly and your Node.js version is 16.0 or higher.
Make sure you have TypeScript installed and your tsconfig.json is configured properly.
Check that you’re using the correct import syntax for your module system (ES modules vs CommonJS).
Verify your network connection and that the MCMP API is accessible from your environment.

​
Next Steps

1

Authentication

Configure API keys and authentication
2

Quick Start

Learn the basics of the SDK