---
name: azion-crie-uma-funcao-de-api-com-chatgpt
description: >-
  Gere o payload JSON de uma função com a integração ChatGPT no editor de Azion Console e leia a resposta com Preview deployment.
---

# Crie uma função de API com ChatGPT

Você cria uma função que responde a uma requisição `GET` com HTML e a uma requisição `POST` com JSON. A [integração com ChatGPT](/pt-br/documentacao/plataforma/functions/ai-integration/) do [editor de código](/pt-br/documentacao/plataforma/functions/code-editor/) de Azion Console escreve o payload JSON a partir de um comentário.

Duas páginas vizinhas cobrem as partes que esta deixa de fora:

- Para os padrões de handler de uma função e a saída de log dela, consulte [Escreva e teste uma função](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/functions-e-runtime/primeiros-passos/).
- Para uma API apoiada por um banco de dados, consulte [Crie uma API RESTful com Functions e SQL](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/functions-e-runtime/api-restful-edge-functions-edge-sql/).

---

## Pré-requisitos

- Uma conta Azion. Para criar uma, consulte [Como criar uma conta na Azion](/pt-br/documentacao/fundamentos/criar-uma-conta/).
- A permissão **Edit Functions** na conta. Ela também requer a permissão **View Functions**. Consulte [Teams Permissions](/pt-br/documentacao/fundamentos/teams-permissions/).
- Uma conta na [OpenAI](https://chat.openai.com/), com uma [API key](https://platform.openai.com/account/api-keys) e um [organization ID](https://platform.openai.com/account/org-settings).

---

## Declare as credenciais da OpenAI

A integração usa as credenciais da sua própria conta OpenAI. Ela lê essas credenciais de um comentário no código-fonte da função, então elas vêm primeiro.

Para colocar as credenciais no código-fonte de uma nova função:

1. **Abra a página Functions**

   Acesse [Azion Console](https://console.azion.com/) > **Products Menu** > **Libraries** > **Functions**.

2. **Selecione + Function**

3. **Nomeie a função**

   Insira um nome para a função. Por exemplo: `chatgpt-api`.

4. **Substitua o código predefinido na tab Code**

   Na tab **Code**, substitua o código predefinido pelos dois valores da sua conta OpenAI:

   ```javascript
   /*
   ChatGPTKey=[TOKEN VALUE]
   ChatGPTOrg=<your-organization-id>
   */
   ```

Os comandos da integração no editor agora autenticam com sua conta OpenAI.

> **nota**
>
> Azion Console não renderiza nenhum preview enquanto o código-fonte não tiver uma função `PreviewProvider`. O preview mostra um aviso que nomeia a função ausente. Uma seção adiante adiciona essa função.

---

## Gere os dados de resposta com ChatGPT

A geração de código transforma um comentário em JavaScript. O comando **ChatGPT: Generate** lê o comentário selecionado como prompt e escreve o código que retorna.

Para gerar o objeto que a API retorna:

1. **Insira o prompt como um comentário**

   Abaixo das credenciais, insira o comentário que descreve o objeto:

   ```javascript
   // generate an object with 5 properties being 2 of them array of objects
   ```

2. **Selecione o comentário**

3. **Abra o menu de contexto do editor e selecione ChatGPT: Generate**

   A requisição leva alguns segundos.

4. **Leia o código gerado**

   A integração escreve o objeto no editor. A saída é semelhante a:

   ```javascript
   let myObject = {
       property_1: 'value_1',
       property_2: 10,
       property_3: true,
       property_4: [{object_1: 'value_1'}, {object_2: 'value_2'}],
       property_5: [{object_3: 'value_3'}, {object_4: 'value_4'}]
   };
   ```

O código-fonte agora carrega o objeto que a API retorna para uma requisição `POST`.

---

## Monte o handler

O objeto gerado é dado. O handler decide o que a função retorna para cada método de requisição. Um handler `fetch` ramifica por `request.method`: o markup para um `GET`, o objeto para um `POST`.

Complete o código-fonte com a constante HTML, o handler e a exportação padrão:

```javascript
const html = `<!DOCTYPE html>
<body>
  <h1>Hello World</h1>
  <p>This markup was generated by Azion Functions.</p>
</body>`;

let myObject = {
    property_1: 'value_1',
    property_2: 10,
    property_3: true,
    property_4: [{object_1: 'value_1'}, {object_2: 'value_2'}],
    property_5: [{object_3: 'value_3'}, {object_4: 'value_4'}]
};

async function handleRequest(request) {
  switch (request.method) {
    case 'GET':
      return new Response(html, {
        headers: {
          'content-type': 'text/html;charset=UTF-8',
        },
      });
    case 'POST':
      return new Response(JSON.stringify(myObject), {
        headers: {
          'content-type': 'application/json',
        },
      });
  }
}

export default {
  async fetch(request, env, ctx) {
    return handleRequest(request);
  },
};
```

Cada ramificação declara no cabeçalho `content-type` o formato que retorna:

- O caso `GET` retorna a constante `html` como `text/html;charset=UTF-8`.
- O caso `POST` retorna o objeto gerado como `application/json`.

O switch cobre `GET` e `POST`. Adicione um caso para cada outro método que a API responde.

A exportação padrão é o padrão ES Modules, a forma recomendada de estruturar uma função. Para mover código existente do padrão legado Service Worker, consulte [Migre padrões de handler em Functions](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/functions-e-runtime/migrar-padroes-de-handler/).

O código-fonte agora carrega o handler completo da API.

---

## Visualize a resposta

[Preview deployment](/pt-br/documentacao/plataforma/functions/preview-deployment/) executa a função em Azion Console e mostra a resposta que o código retorna. Ele chama `PreviewProvider`, uma função auxiliar no código-fonte que monta uma requisição simulada para o handler.

Para ler as duas respostas antes que a função atenda tráfego:

1. **Adicione uma função PreviewProvider ao código-fonte**

   `PreviewProvider` monta a requisição que o preview envia e retorna a resposta que o preview renderiza. Adicione a função abaixo da exportação padrão, com `GET` como método:

   ```javascript
   function PreviewProvider(args) {
     var request = new Request("https://www.azion.com/example", {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
       },
       redirect: "follow",
     });
     return handleRequest(request);
   }
   ```

   Para cada valor que a requisição simulada carrega, consulte [Função PreviewProvider](/pt-br/documentacao/plataforma/functions/preview-deployment/#funcao-previewprovider).

2. **Abra o menu de contexto do editor e selecione Format Document**

3. **Leia a saída no editor de código**

   O preview renderiza a resposta `text/html` como a página. Selecione **Open** para ler a mesma saída em uma aba separada do navegador.

4. **Altere o método dentro de PreviewProvider para POST**

5. **Leia a saída novamente**

   O preview renderiza a resposta `application/json` como o corpo JSON do objeto gerado.

As duas respostas da função aparecem em Azion Console, sem nenhum deployment.

---

## Salve a função

O código-fonte completo carrega as credenciais, o objeto gerado, o handler e a função de preview:

```javascript
/*
ChatGPTKey=[TOKEN VALUE]
ChatGPTOrg=<your-organization-id>
*/

const html = `<!DOCTYPE html>
<body>
  <h1>Hello World</h1>
  <p>This markup was generated by Azion Functions.</p>
</body>`;

let myObject = {
    property_1: 'value_1',
    property_2: 10,
    property_3: true,
    property_4: [{object_1: 'value_1'}, {object_2: 'value_2'}],
    property_5: [{object_3: 'value_3'}, {object_4: 'value_4'}]
};

async function handleRequest(request) {
  switch (request.method) {
    case 'GET':
      return new Response(html, {
        headers: {
          'content-type': 'text/html;charset=UTF-8',
        },
      });
    case 'POST':
      return new Response(JSON.stringify(myObject), {
        headers: {
          'content-type': 'application/json',
        },
      });
  }
}

export default {
  async fetch(request, env, ctx) {
    return handleRequest(request);
  },
};

function PreviewProvider(args) {
  var request = new Request("https://www.azion.com/example", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
    redirect: "follow",
  });
  return handleRequest(request);
}
```

Para armazenar o código, selecione **Save**.

Azion Console armazena a função e a disponibiliza para ser instanciada em uma aplicação. A função não atende tráfego até que uma instância a vincule e uma regra do Rules Engine selecione essa instância.

---

## Próximos passos

- [Execute uma função em uma aplicação](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/functions-e-runtime/funcoes-serverless.md): Adicione a regra do Rules Engine que executa a instância, em Azion Console ou na Azion API.
- [Integração com ChatGPT](/pt-br/documentacao/plataforma/functions/ai-integration.md): As credenciais, os comandos do editor e a refatoração de código.
- [Preview deployment](/pt-br/documentacao/plataforma/functions/preview-deployment.md): Todos os valores que a requisição simulada carrega e como o preview renderiza cada formato.
- [Escreva e teste uma função](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/functions-e-runtime/primeiros-passos.md): Os padrões de handler de uma função e onde ler a saída de log dela.
- [Instâncias de função](/pt-br/documentacao/plataforma/applications/functions-instances.md): Passe Args para uma instância em JSON.
- [Crie uma API RESTful com Functions e SQL](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/functions-e-runtime/api-restful-edge-functions-edge-sql.md): Uma API apoiada por um banco de dados, com operações de criação, leitura, atualização e exclusão.