# 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](/rest-api/sdk/generation.md) 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](/rest-api/sdk/generation.md) 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="/pages/3HakPo5rmjlgHIYpy5Yo" %}
[Readme.io](/rest-api/api/readme.io.md)
{% endcontent-ref %}

{% content-ref url="/pages/7KVz9yHPKLMm9yjqkThN" %}
[Swagger](/rest-api/api/swagger.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.metacopier.io/rest-api/sdk/usage/typescript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.