Por que o Chat com IA não vai matar os sites, mas reinventá-los

GitHub | Demo ao Vivo

Olá, comunidade TabNews!

Sou um desenvolvedor e arquiteto que vive na interseção entre frameworks web, SEO e ferramentas de inteligência artificial. Nos últimos anos, tenho trabalhado em projetos que combinam Next.js, Web3 e IA, e quero compartilhar uma descoberta arquitetônica que mudou completamente minha forma de pensar interfaces.

Não se trata de mais um conjunto de componentes modernos, mas de uma mudança na própria forma como projetamos a interação entre humanos e aplicações web. Vou falar sobre o que acontece no cruzamento entre chats de IA e sites clássicos, e o que isso significa para desenvolvedores e negócios.

O Problema: Interfaces Tradicionais vs. IA

Por vinte anos, a web funcionou de forma previsível: você acessa uma página, vê um menu, cabeçalho, rodapé, alguns links para páginas vizinhas e, às vezes, uma busca interna. Estamos acostumados com a metáfora da biblioteca: há um catálogo, seções, prateleiras e fichas. Para chegar à prateleira certa, você precisa entender minimamente como o "bibliotecário" (ou seja, o arquiteto da informação) pensou.

Isso parecia natural. Você entra na página inicial, rola a tela, entende mais ou menos como o produto funciona, vai para "Documentação", depois para "API", depois para "Authentication". Dez cliques, meia hora, alguns favoritos no navegador — e pronto, você se sente "familiarizado" com o produto.

Motores de busca como Google e Yandex apenas reforçaram esse modelo. Tornaram-se um catálogo global, mas o resultado ainda eram as mesmas páginas. Nos acostumamos a "googlar", abrir 5-10 abas e montar manualmente a resposta a partir de fragmentos dispersos. Parecia normal: é assim que a web funciona.

A Explosão dos Chats de IA

Então veio o acesso massivo a chats de IA. No início, parecia uma brincadeira: responde algo, tem senso de humor, às vezes inventa coisas. Mas muito rapidamente aconteceu uma mudança importante.

As pessoas pararam de adaptar seus pensamentos ao formato "2-3 palavras-chave". Em vez de "comprar tênis São Paulo", começaram a escrever: "preciso de tênis confortáveis para caminhada diária, não para corrida, orçamento até 300 reais, pode ser em SP ou com entrega rápida". Na busca tradicional, essa consulta parece estranha, mas no chat é natural. E o mais perigoso para a "velha web" é que, nesse momento, o usuário já não liga de onde virá a resposta.

A modelo cognitivo está mudando. Antes, o usuário era forçado a pensar: "Como formular a consulta para que o buscador entenda e dê links relevantes?" Agora ele pensa: "Como explicar a tarefa como eu explicaria a uma pessoa real?" E essa é a diferença entre "se adaptar à máquina" e "falar humanamente".

A Solução: Arquitetura de Slots Paralelos

Depois de muito experimentar, cheguei a uma conclusão: a nova interface não é "um site com widget de chat no canto" nem "um chat que às vezes abre sites no navegador". A nova interface é o design consciente de múltiplos fluxos paralelos de experiência.

Três Slots Independentes

No projeto AIFA, implementei uma arquitetura com três slots paralelos:

1. @left — Fluxo de diálogo (chat de IA, autenticação, assistente)
2. @rightStatic — Fluxo de conteúdo público (páginas estáticas SEO-first)
3. @rightDynamic — Fluxo dinâmico (overlay para usuários autenticados)

app/
├── layout.tsx              # Root com três slots paralelos
├── @left/                  # Slot de IA/Auth
│   ├── (_AUTH)/
│   │   └── login/
│   ├── (_CHAT)/
│   │   └── default.tsx
│   ├── layout.tsx
│   └── loading.tsx
├── @rightStatic/           # Slot estático (SEO)
│   ├── (_PUBLIC)/
│   │   ├── features/
│   │   └── docs/
│   ├── @modal/             # Rotas interceptadas
│   │   ├── (...)interception_chat/
│   │   └── (...)interception_modal/
│   └── layout.tsx
└── @rightDynamic/          # Slot dinâmico (overlay)
    ├── (_client)/
    │   └── layout-client.tsx
    ├── dashboard/
    └── layout.tsx

Essa separação permite que páginas estáticas perfeitas para SEO e UX impulsionado por IA coexistam sem compromissos.

Implementação Técnica no Next.js 15

1. Root Layout com Slots Paralelos

O layout raiz define três slots que vivem simultaneamente:

// app/layout.tsx
export default async function RootLayout({
  left,
  rightStatic,
  rightDynamic,
}: {
  left: React.ReactNode;
  rightStatic: React.ReactNode;
  rightDynamic: React.ReactNode;
}) {
  return (
    <html lang="pt-BR" suppressHydrationWarning>
      <body>
        <div className="flex h-screen">
          {/* Slot esquerdo: Chat/Auth (desktop only) */}
          <div className="hidden md:flex md:w-[35%] border-r">
            {left}
          </div>
          
          {/* Slot direito: conteúdo principal */}
          <div className="w-full md:w-[65%] relative">
            {/* Estático: sempre presente (SEO) */}
            <main className="absolute inset-0 overflow-y-auto">
              {rightStatic}
            </main>
            
            {/* Dinâmico: overlay condicional */}
            {rightDynamic}
          </div>
        </div>
      </body>
    </html>
  );
}

2. Slot Estático com Rotas Interceptadas

O slot @rightStatic gerencia modais sem recarregar a página:

// app/@rightStatic/@modal/(...)interception_chat/page.tsx
"use client";

import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";

export default function ChatDrawerModal() {
  const router = useRouter();
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setIsOpen(true), 10);
    return () => clearTimeout(timer);
  }, []);

  const handleClose = () => {
    setIsOpen(false);
    setTimeout(() => router.back(), 300);
  };

  return (
    <>
      {/* Backdrop */}
      <div
        className={`fixed inset-0 bg-black/50 backdrop-blur-sm z-30
          transition-opacity duration-300
          ${isOpen ? "opacity-100" : "opacity-0"}`}
        onClick={handleClose}
      />
      
      {/* Drawer deslizante */}
      <div
        className={`fixed inset-y-0 left-0 z-40 w-full
          bg-background shadow-2xl transform
          transition-transform duration-300 ease-in-out
          ${isOpen ? "translate-x-0" : "-translate-x-full"}`}
      >
        <ChatExample />
      </div>
    </>
  );
}

Por que isso é poderoso:

• Mobile: chat abre como modal full-screen
• Desktop: chat persiste no slot esquerdo
• SEO: conteúdo estático permanece no DOM
• Zero recarga: navegação suave com interceptação

3. Slot Dinâmico com Autenticação

O overlay dinâmico só aparece após login:

// app/@rightDynamic/layout.tsx
import { isAuthenticated } from "../@left/(_AUTH)/login/(_server)/actions/auth";
import { RightDynamicLayoutClient } from "./(_client)/layout-client";

export default async function RightDynamicLayout({ 
  children 
}: { 
  children: React.ReactNode 
}) {
  const authenticated = await isAuthenticated();
  
  return (
    <RightDynamicLayoutClient initialAuth={authenticated}>
      {children}
    </RightDynamicLayoutClient>
  );
}

// app/@rightDynamic/(_client)/layout-client.tsx
"use client";

export function RightDynamicLayoutClient({
  children,
  initialAuth
}: {
  children: React.ReactNode;
  initialAuth: boolean;
}) {
  const { isAuthenticated } = useAuth();

  useEffect(() => {
    initAuthState(initialAuth);
  }, [initialAuth]);

  if (!isAuthenticated) return null;

  return (
    <div className="absolute inset-0 z-50 bg-background overflow-y-auto">
      {children}
    </div>
  );
}

Progressive Enhancement:

1. Sem JavaScript: Usuário vê páginas estáticas (@rightStatic)
2. Com JavaScript: Após login, overlay dinâmico cobre o estático
3. SEO Preservado: HTML estático sempre presente no source

Padrões Avançados

Arquitetura Fractal

Para escalar, uso uma estrutura fractal com três camadas:

(_FEATURE)/
├── (_client)/          # Lógica client-side
│   ├── (_hooks)/
│   └── (_components)/
├── (_server)/          # Server actions
│   └── actions/
└── (_shared)/          # Utilidades compartilhadas
    ├── (_types)/
    └── (_translations)/

Benefícios:

• Máximo 25 componentes por nível
• Cada fractal é independente
• Fácil de testar e manter

Estratégia de Renderização Híbrida

Slot	Estratégia	Por quê
@rightStatic	SSG/ISR	SEO perfeito, funciona sem JS
@left	Client-side	Interação em tempo real (chat)
@rightDynamic	SSR + Overlay	Dados sensíveis, requer auth

PWA e Modo Offline

// next.config.mjs
import withPWA from 'next-pwa';

const config = withPWA({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  skipWaiting: true,
});

Resultado:

• Páginas estáticas funcionam offline
• Service worker cacheia assets
• Fallback gracioso sem rede

Casos de Uso Reais

1. Documentação + IA Assistant

Tradicionalmente, documentação é uma floresta de seções. O usuário sabe que a resposta está em algum lugar, mas não sabe onde exatamente.

Com AIFA:

• Usuário pergunta: "Como atualizar token de autenticação em app multi-tenant?"
• Chat conhece toda a documentação, monta resposta de várias páginas
• Abre a seção relevante no slot direito com highlight

2. E-commerce Conversacional

Lojas online dependem de filtros. Filtros de marca, tamanho, preço, cor, material — às vezes cinco painéis de filtros seguidos.

Com AIFA:

• Usuário: "Procuro tênis pretos sem logos chamativos, para cidade, tamanho 43, até 500 reais"
• Chat entende a categoria, aplica filtros, sugere marcas
• Exibe produtos no slot direito como cards grandes

3. Painéis B2B com IA Contextual

Sistemas B2B complexos sofrem porque a interface leva semanas para aprender. Dentro há dezenas de telas, cada uma com dezenas de campos.

Com AIFA:

• Usuário: "Mostre clientes com aumento de churn nos últimos 3 meses, mas ticket médio alto"
• Chat constrói query, abre relatório no slot direito
• Explica em texto como formulou os critérios

Recursos e Próximos Passos

🚀 Experimente Agora

GitHub: https://github.com/aifa-agi/aifa-v2.1
Demo ao Vivo: https://aifa-v2-1.vercel.app/

📦 Tech Stack

• Framework: Next.js 15 (App Router)
• Linguagem: TypeScript 5
• Estilização: Tailwind CSS 4
• UI: Radix UI, Lucide Icons
• Animação: Motion (sucessor do Framer Motion)
• IA: Vercel AI SDK (ai, @ai-sdk/react)
• Deploy: Vercel
• PWA: next-pwa

🗺️ Roadmap AIFA

Este é o segundo starter de uma série. Os próximos incluem:

1. v2.2 — Multilíngue estático-dinâmico
2. v2.3 — Auth avançado com RBAC
3. v2.4 — Chat com AI SDK + Artifacts
4. v2.5 — Sistema de blog expert
5. v2.6 — Integração com apps externos via API
6. v2.7 — Tokenização de ativos (Web3)

💬 Comunidade

Telegram: @bolshiyanov
Issues/Discussões: GitHub Issues

⭐ Apoie o Projeto

Se este template ajudou você, considere dar uma estrela no GitHub! Isso ajuda outros desenvolvedores a descobrir o projeto e motiva o desenvolvimento contínuo.

---

Conclusão: Chegou a Hora?

Não tenho uma resposta definitiva de "sim" ou "não". Mas tenho uma convicção honesta: não posso mais construir interfaces como se a IA não existisse.

Não dá para projetar seriamente um produto para os próximos 5-10 anos e ignorar o fato de que usuários estão acostumados a diálogo, não apenas navegação.

Acredito que estamos em um momento parecido com a transição de sites estáticos para SPAs: na época, também parecia "apenas mais uma técnica". Mas foi uma mudança de paradigma.

Arquitetura de slots, rotas paralelas, camada de IA que vive lado a lado com o conteúdo, não acima dele — tudo isso ainda parece específico, nichado. Mas quando você começa a montar esses pedaços em projetos reais, surge a sensação de que não há outro caminho.

Pare de pensar "páginas contra chats" e comece a pensar "fluxos que devem viver juntos".

---

Construído com ❤️ pela equipe AIFA
© 2025 AIFA · Next.js 15 · App Router · Arquitetura AI-Ready

Tags: #nextjs #ai #seo #parallel-routes #app-router #typescript