“Até 2030, a inteligência artificial poderá contribuir com até US$ 15 trilhões para a economia global.” – Fonte: PwC

Por que integrar IA em aplicações Next.js?

Conceitos básicos de IA: desmistificando a inteligência artificial

Um modelo de IA aprende com exemplos e faz previsões.

Agora, bora codar!

Criando um chatbot com Next.js

Passo 1: configurando o projeto Next.js

npx create-next-app meu-chatbot-ia
cd meu-chatbot-ia
npm run dev

Passo 2: criando uma API para processar perguntas

/meu-chatbot-ia
 ├── /pages
 │   ├── /api
 │   │   ├── chatbot.js
 │   ├── index.js
 ├── faq.json
 ├── package.json

{
  "perguntas": [
    {
      "pergunta": "O que é a Rocketseat?",
      "resposta": "A Rocketseat é uma escola de programação que te leva do zero ao próximo nível!"
    },
    {
      "pergunta": "Quais cursos a Rocketseat oferece?",
      "resposta": "A Rocketseat oferece cursos de desenvolvimento web, mobile, backend e especializações como IA para devs!"
    }
  ]
}

import faq from "../../faq.json";

// Esta função recebe uma pergunta e retorna uma resposta correspondente
export default function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Método não permitido' });
  }

  const { pergunta } = req.body;

  if (!pergunta) {
    return res.status(400).json({ error: 'Nenhuma pergunta fornecida' });
  }

  // Procura a pergunta no JSON e retorna a resposta correspondente
  const resposta = faq.perguntas.find(
    (item) => item.pergunta.toLowerCase().includes(pergunta.toLowerCase())
  );

  return res.status(200).json({ resposta: resposta ? resposta.resposta : "Desculpe, não sei a resposta." });
}

Passo 3: criando a interface do chatbot

import { useState } from 'react';

export default function Home() {
  const [pergunta, setPergunta] = useState('');
  const [resposta, setResposta] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch('/api/chatbot', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pergunta }),
    });
    const data = await res.json();
    setResposta(data.resposta);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Chatbot Rocketseat</h1>
      <form onSubmit={handleSubmit}>
        <input
	        type="text"
          value={pergunta}
          onChange={(e) => setPergunta(e.target.value)}
          placeholder="Faça sua pergunta..."
        />
        <button type="submit">Perguntar</button>
      </form>
      {resposta && <p>Resposta: {resposta}</p>}
    </div>
  );
}

Agora, teste seu chatbot! Rode npm run dev e faça perguntas para ele!

Integrando um modelo de IA ao chatbot

Passo 1: criando uma conta na OpenAI e gerando a API Key

1. Acesse o site da OpenAI: https://platform.openai.com/signup.

2. Crie uma conta ou faça login.

3. No painel, vá até API Keys e gere uma chave secreta (anote-a, pois será usada no código).

Passo 2: instalando a biblioteca OpenAI no Next.js

npm install openai

Passo 3: criando a API Route para IA no Next.js

import { Configuration, OpenAIApi } from "openai";

// Configure a API Key (recomenda-se usar variáveis de ambiente para segurança)
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY, // Defina sua chave no arquivo .env.local
});

const openai = new OpenAIApi(configuration);

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Método não permitido' });
  }

  const { pergunta } = req.body;

  if (!pergunta) {
    return res.status(400).json({ error: 'Nenhuma pergunta fornecida' });
  }

  try {
    // Enviando a pergunta para a API da OpenAI (usando o modelo GPT-3.5 Turbo)
		const response = await openai.createChatCompletion({
			model: "gpt-3.5-turbo",
			messages: [{ role: "system", content: "Você é um chatbot útil e amigável que responde perguntas sobre a Rocketseat." },
				        { role: "user", content: pergunta }],
		});

    // Obtendo a resposta gerada pela IA
    const resposta = response.data.choices[0].message.content;

    return res.status(200).json({ resposta });
  } catch (error) {
    console.error("Erro ao chamar a OpenAI API:", error);
    return res.status(500).json({ error: "Erro ao processar a resposta da IA" });
  }
}

Passo 4: configurando a API Key no ambiente

OPENAI_API_KEY=SUA_CHAVE_AQUI

npm run dev

Passo 5: atualizando o Frontend do chatbot

import { useState } from 'react';

export default function Home() {
  const [pergunta, setPergunta] = useState('');
  const [resposta, setResposta] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setResposta('');

    const res = await fetch('/api/chatbot', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pergunta }),
    });

    const data = await res.json();
    setResposta(data.resposta);
    setLoading(false);
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Chatbot com IA 🚀</h1>
      <form onSubmit={handleSubmit}>
        <input
	        type="text"
          value={pergunta}
          onChange={(e) => setPergunta(e.target.value)}
          placeholder="Faça sua pergunta..."
        />
        <button type="submit">Perguntar</button>
      </form>

      {loading && <p>Gerando resposta...</p>}
      {resposta && <p><strong>IA:</strong> {resposta}</p>}
    </div>
  );
}

Próximos passos: expandindo a inteligência do chatbot

• Melhorar o contexto das respostas
• Enviar mensagens anteriores na API para manter uma conversa contínua.

• Usar um modelo mais avançado
• Trocar o gpt-3.5-turbo por um modelo mais atual, caso tenha disponível em sua conta.

• Adicionar suporte a voz
• Integrar bibliotecas como Web Speech API para transformar texto em áudio! 🎙

Agora que você aprendeu o básico, o céu é o limite!

Conclusão: o futuro está em suas mãos!

Agora é sua vez! Teste, experimente e compartilhe suas criações com a comunidade. O próximo nível te espera!