# Typescript

## Create API Key from metacopier.io

You can use two types of API keys:

* **Project-level API key**: Navigate to **Your Projects > (Choose a project) > API Keys** (provides access to all accounts in the project)
* **Account API key**: Automatically generated when an account is created (provides access only to that specific account). Retrieve using the [getAccountApiKeys](https://api.metacopier.io/rest/api/documentation/swagger-ui/index.html#/Account%20API/getAccountApiKeys) endpoint.

*Note: Please do not share your API Key to people whom you don't trust.*

### Package Information

The package is based on the following **OpenAPI** configuration:

{% embed url="<https://api.metacopier.io/rest/api/documentation/v3/api-docs>" %}

## Angular

### Install with npm

Execute the following command to install the api package to your project:

```
npm i ng-metacopier-api
```

Or you can manually download it directly from npmjs.com

{% embed url="<https://www.npmjs.com/package/ng-metacopier-api>" %}

### Example

#### App Module

{% hint style="info" %}
Import both MetaCopierAPIApiModule and HttpClientModule
{% endhint %}

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterOutlet } from '@angular/router';
import { MetaCopierAPIApiModule } from 'ng-metacopier-api';

@NgModule({
  declarations: [AppComponent, DashboardComponent],
  imports: [
    RouterOutlet,
    BrowserModule,
    AppRoutingModule,
    MetaCopierAPIApiModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

#### Component

<pre class="language-typescript"><code class="lang-typescript">import { Component, OnInit } from '@angular/core';
import {
  MetaCopierAPIConfigurationParameters,
  AccountAPIService,
  MetaCopierAPIConfiguration,
  AccountDTO,
} from 'ng-metacopier-api';

<strong>@Component({
</strong>  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.scss',
})
export class DashboardComponent implements OnInit {
  private _paramsConfig: MetaCopierAPIConfigurationParameters = {
    apiKeys: {
      'X-API-KEY': 'YOUR_API_KEY', // Replace this value with your API key
    },
    basePath: 'https://api.metacopier.io',
  };

  constructor(private _accountAPIService: AccountAPIService) {}

  ngOnInit(): void {
    this._accountAPIService.configuration = new MetaCopierAPIConfiguration(
      this._paramsConfig
    );

    this._accountAPIService.getAccounts().subscribe({
      next: (data: AccountDTO[]) => {
        console.log(data);
      },
      error: (e: Error) => {
        console.error(e);
      },
    });
  }
}
</code></pre>

### Generate your own package

With the following command, you can generate your own package for the metacopier api:

{% hint style="info" %}
Be sure that you have installed the OpenAPI Generator.\
See [generation](https://docs.metacopier.io/rest-api/sdk/generation "mention") page for more information.
{% endhint %}

```bash
openapi-generator-cli generate -i https://api.metacopier.io/rest/api/documentation/v3/api-docs -g typescript-angular
```

For more information regarding the Open API generator, please visit their offical page:

{% embed url="<https://openapi-generator.tech/>" %}

## React

### Install with npm

```
npm i js-metacopier-api
```

Or you can manually download it directly from npmjs.com

{% embed url="<https://www.npmjs.com/package/js-metacopier-api>" %}

### Example

{% hint style="info" %}
You need to have the axios package installed too
{% endhint %}

#### App

```tsx
import "./App.css";
import axios from "axios";
import { useEffect, useState } from "react";
import { AccountAPIApi, Configuration } from "js-metacopier-api";

function App() {
  const [data, setData] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const apiConfig = new Configuration({
      apiKey: "YOUR_API_KEY", // Replace this value with your API key
      basePath: "https://api.metacopier.io",
    });

    const fetchData = async () => {
      const api = new AccountAPIApi(apiConfig, apiConfig.basePath, axios);

      try {
        const response = await api.getAccounts();
        setData(response.data);
      } catch (err: any) {
        setError(err.message);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>React App with Generated API Client</h1>
      {error ? (
        <p>Error: {error}</p>
      ) : (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      )}
    </div>
  );
}

export default App;
```

### Generate your own package

With the following command, you can generate your own package for the metacopier api:

{% hint style="info" %}
Be sure that you have installed the OpenAPI Generator.\
See [generation](https://docs.metacopier.io/rest-api/sdk/generation "mention") page for more information.
{% endhint %}

```bash
openapi-generator-cli generate -i https://api.metacopier.io/rest/api/documentation/v3/api-docs -g typescript-axios
```

For more information regarding the Open API generator, please visit their offical page:

{% embed url="<https://openapi-generator.tech/>" %}

## What endpoints can I call?

To check all available endpoints see either of the two pages:

{% content-ref url="../../api/readme.io" %}
[readme.io](https://docs.metacopier.io/rest-api/api/readme.io)
{% endcontent-ref %}

{% content-ref url="../../api/swagger" %}
[swagger](https://docs.metacopier.io/rest-api/api/swagger)
{% endcontent-ref %}