Ahora que tenemos la aplicación con los modelos, podemos generar el código del cliente para el frontend.

#### Instalar `openapi-ts`

Puedes instalar `openapi-ts` en tu código de frontend con:

<div class="termy">

```console
$ npm install @hey-api/openapi-ts --save-dev

---> 100%
```

</div>

#### Generar el Código del Cliente

Y genera esquemas OpenAPI.

Así es como funciona en Flask, Starlette, Responder, etc.

Pero luego, tenemos otra vez el problema de tener una micro-sintaxis, dentro de un string de Python (un gran YAML).

El editor no puede ayudar mucho con eso. Y si modificamos parámetros o esquemas de Marshmallow y olvidamos también modificar ese docstring YAML, el esquema generado estaría obsoleto.

Si quieres jugar con tokens JWT y ver cómo funcionan, revisa <a href="https://jwt.io/" class="external-link" target="_blank">https://jwt.io</a>.

## Instalar `PyJWT`

Necesitamos instalar `PyJWT` para generar y verificar los tokens JWT en Python.

Asegúrate de crear un [entorno virtual](../../virtual-environments.md){.internal-link target=_blank}, activarlo y luego instalar `pyjwt`:

<div class="termy">

```console

`Response` directamente (o cualquier subclase, como `JSONResponse`), los datos no se convertirán automáticamente (incluso si declaras un `response_model`), y la documentación no se generará automáticamente (por ejemplo, incluyendo el "media type" específico, en el HTTP header `Content-Type` como parte del OpenAPI generado).

Pero también puedes declarar el `Response` que quieres usar (por ejemplo, cualquier subclase de `Response`), en el *path operation decorator* usando el parámetro `response_class`....

Y hay docenas de alternativas, todas basadas en OpenAPI. Podrías añadir fácilmente cualquiera de esas alternativas a tu aplicación construida con **FastAPI**.

También podrías usarlo para generar código automáticamente, para clientes que se comuniquen con tu API. Por ejemplo, aplicaciones frontend, móviles o IoT.

## Recapitulación, paso a paso

### Paso 1: importa `FastAPI`

### Generate a TypeScript Client with Tags { #generate-a-typescript-client-with-tags }

If you generate a client for a FastAPI app using tags, it will normally also separate the client code based on the tags.

This way, you will be able to have things ordered and grouped correctly for the client code:

<img src="/img/tutorial/generate-clients/image06.png">

In this case, you have:

Existem muitas ferramentas para gerar clientes a partir do **OpenAPI**.

Uma ferramenta comum é o <a href="https://openapi-generator.tech/" class="external-link" target="_blank">OpenAPI Generator</a>.

Se voce está construindo um **frontend**, uma alternativa muito interessante é o <a href="https://github.com/hey-api/openapi-ts" class="external-link" target="_blank">openapi-ts</a>.

## Geradores de Clientes e SDKs - Patrocinadores

## OpenAPI-Client-Generatoren

Es gibt viele Tools zum Generieren von Clients aus **OpenAPI**.

Ein gängiges Tool ist <a href="https://openapi-generator.tech/" class="external-link" target="_blank">OpenAPI Generator</a>.

Wenn Sie ein **Frontend** erstellen, ist <a href="https://github.com/hey-api/openapi-ts" class="external-link" target="_blank">openapi-ts</a> eine sehr interessante Alternative.

// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.
//

        try {
            assertTrue(outputFile.exists());
            generator.setCommandList(Collections.singletonList("invalid_command_for_test"));
            assertTrue(generator.generate("test_id", outputFile));
        } finally {
            outputFile.delete();
        }
    }

    public void test_generate_outputFile_null() throws Exception {
        generator.setCommandList(Collections.singletonList("echo test"));
        try {