> Markdown version of [TypeScript Client](https://vaadin.com/docs/next/hilla/reference/typescript-client). Section index: [llms.txt](https://vaadin.com/docs/next/hilla/llms.txt)

# TypeScript Client Library

Hilla consists of two parts: a backend and a client. The client part is represented by the `@vaadin/hilla-frontend` library, which is able to support the features the backend provides.

One of the main public entities of the library is the `ConnectClient` object, which provides a seamless way to communicate with browser-callable services on the backend.

## <a id="default-typescript-client"></a>Default TypeScript Client

The default TypeScript client is the module that gets generated by the Hilla Maven plugin for a particular project.

The module contains the `ConnectClient` implementation, which is set up to communicate with the backend of the project.

## <a id="generated-client-modules"></a>Generated Client Modules

Along with the default TypeScript client, the Hilla Maven plugin is capable of generating specific modules for each browser-callable service defined in the backend. These modules also use the default TypeScript client described above to communicate with the backend.

## <a id="usage-example"></a>Usage Example

Consider a Hilla backend that’s served under the `/customEndpoint` URL prefix and has a single browser-callable service named `SingleService`, with a method `customMethod()` that takes a parameter `number`.

To access this method from the client part, depending on how many generated files are present, you can use one of the following approaches. The required `@vaadin/hilla-frontend` TypeScript library is automatically installed by the Hilla Maven plugin.

### <a id="using-the-generated-client-module"></a>Using the Generated Client Module

The service method can be called via the generated module method:

Using the generated module

```typescript
import { SingleService } from 'Frontend/generated/SingleService';

(async() => {
  await SingleService.customMethod(4);
})();
```

### <a id="using-the-generated-default-client"></a>Using the Generated Default Client

As an alternative to the generated module, the default TypeScript client API can be used to access the service as follows:

Using the generated client

```typescript
import client from 'Frontend/generated/connect-client.default';

(async() => {
  await client.call('SingleService', 'customMethod', {number: 4});
});
```

### <a id="using-the-hilla-typescript-client-library"></a>Using the Hilla TypeScript Client Library

Using the client library requires an extra step: specifying the URL prefix of the server to send the requests to.

Using the client library

```typescript
import { ConnectClient } from '@vaadin/hilla-frontend';
const client = new ConnectClient({endpoint: '/customEndpoint'});

(async() => {
  await client.call('SingleService', 'customMethod', {number: 4});
});
```