🤖 AndresAI — App (Frontend)

Next.js 16 frontend for AndresAI — serves both the chat UI at / and the admin at /admin.

Companion repo • Features • Screenshots • Stack • Quick Start • Routes • Deployment • Contributing

---

🔗 Companion repo

This is the frontend half of AndresAI. The project was originally a single repo and has since been split:

• Frontend (this repo) — andres-ai-agent-app: Next.js 16 on Vercel. Chat UI at /, admin UI at /admin.
• Backend — AndresAI-Agent: FastAPI, PostgreSQL/pgvector, Redis. Deployed via Docker on a server.

The frontend talks to the backend over HTTPS — you must run the backend repo locally (or point at a deployed instance) for chat and admin to work. The backend URL is configured via NEXT_PUBLIC_API_URL.

✨ Features

• 💬 Streaming chat UI — cyberpunk-themed, renders the backend's newline-delimited JSON stream as it arrives, with a stop-generation control
• 📊 Admin dashboard — stats with range filters (this month, 30/60/90 days, all time) and charts built with Recharts
• 🗂️ Conversations view — browse full chat threads grouped per user
• 📡 Real-time updates — the admin subscribes to the backend's WebSocket (/api/admin/ws) so new users/messages appear live, no refresh needed
• 🧠 Knowledge base & agent context editors — manage the agent's RAG entries and system prompt; the backend re-embeds on save
• 👤 User management — user details modal with per-user stats, cascade delete with custom confirmation modals

📸 Screenshots

Chat

The cyberpunk-themed chat UI streaming an answer about open source projects:

Admin — Dashboard

Live usage stats, latency percentiles, throughput charts, and geography:

Admin — Conversations

One row per user with message counts, last activity, and a preview of the last message:

Admin — Conversation detail

Clicking a row opens the full thread with per-user metadata (latency, client, IP, geo):

🧰 Stack

• Next.js 16 (App Router, Turbopack, React 19)
• TypeScript 6
• Tailwind v4 + shadcn/ui (Radix-based, Nova preset)
• Recharts for admin charts, sonner for toasts
• marked for chat message rendering
• pnpm as the package manager (pinned via packageManager in package.json)

⚠️ This project uses Next.js 16 — APIs, conventions, and file structure differ from earlier major versions. See AGENTS.md.

🚀 Quick Start

1️⃣ Clone

git clone [email protected]:aduquehd/andres-ai-agent-app.git
cd andres-ai-agent-app

2️⃣ Install pnpm (once)

npm install -g pnpm
# or
corepack enable && corepack prepare pnpm@latest --activate

3️⃣ Configure

cp .env.local.example .env.local

# Public URL of the FastAPI backend (andres-ai-api).
# Local dev:    http://localhost:8000
# Production:   your deployed API origin, no trailing slash
NEXT_PUBLIC_API_URL=http://localhost:8000

# Optional — Google Analytics tracking ID, applied only to the chat route.
# NEXT_PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX

4️⃣ Run the backend (separate repo)

The frontend won't do anything useful without the backend running. In another terminal:

git clone [email protected]:aduquehd/AndresAI-Agent.git
cd AndresAI-Agent
# Follow the backend's README — copy .env.example, then:
docker compose up

5️⃣ Run the frontend

pnpm install
pnpm dev

Open http://localhost:3000/ for the chat or http://localhost:3000/admin for the admin.

🗺️ Routes

Path	What it is
/	Chat UI (route group (chat)). Cyberpunk CSS + Orbitron/Exo 2 fonts.
/admin	Admin dashboard — stats, range filter, charts. Wrapped in AdminShell, enforces auth.
/admin/login	Admin login (sibling of (dashboard), unauthenticated users land here).
/admin/users	Users table with per-user details modal and stats.
/admin/conversations	Full chat threads grouped per user.
/admin/messages	Messages table.
/admin/agent-messages	Pydantic AI message lists per user.
/admin/knowledge-base	RAG entries — backend re-embeds on save.
/admin/agent-contexts	Agent context (system prompt) entries.
/admin/model-config	Agent model and request settings, with a test run before saving.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗