An AI chatbot that doesn't just answer — it feels present.
Powered by LLaMA 3.3, FastAPI, and a living interface built with Three.js.
What if an AI could feel alive between messages?
Zenith GPT is a chatbot, but not the kind you dismiss with a shrug. Every interaction has weight here. A 3D orb breathes in response to your mouse, to the cadence of speech, to the rhythm of thought. While the model thinks, the interface doesn't freeze — it waits, visibly, alive.
Under the hood, a multi-agent backend makes decisions in milliseconds: it detects your language, evaluates whether your question is ambiguous, and chooses the right tool — direct answer, web search, or image generation — before the first token reaches the screen.
| What it does | How |
|---|---|
| Streaming responses | Tokens arrive in real time via SSE. No loading spinners, no dead air. |
| 4 personalities | Casual, Tutor, Professional, Technical — each with distinct tone and structure. |
| Web search | DuckDuckGo integration with source citation, triggered automatically when current data is needed. |
| Image generation | Requests are converted to cinematic prompts and rendered through Flux via Pollinations.ai. |
| Language detection | Responds in whichever language you write in — no settings to change. |
| Ambiguity handling | Asks for clarification before guessing when a question has multiple interpretations. |
| Chat management | Create, rename, search, favorite, and delete conversations. |
| Usage stats | Messages, characters sent/received, active days — tracked locally, never sent anywhere. |
| Dark mode | One toggle. Smooth transition. Zero flash on load. |
| Keyboard shortcuts | Ctrl+N new chat. Ctrl+K search. |
| Responsive | Full experience on mobile with a dedicated bottom nav and slide-out drawer. |
The orb isn't decoration. It's a metallic sphere with iridescence, clearcoat, and custom simplex noise shaders that distort the surface in response to three inputs:
- Mouse proximity — hovering accelerates orbiting particles and warps the geometry.
- Audio frequency — during TTS playback, sound waves drive real-time mesh deformation.
- Time — the sphere breathes on its own, subtly, between interactions.
Post-processing adds bloom, chromatic aberration, film noise, and vignette for a cinematic finish.
| Library | Role |
|---|---|
| Next.js 14 | App Router, server components, optimized bundling. |
| React 18 | Declarative UI with hooks and concurrent features. |
| TypeScript | Full type safety across components and utilities. |
| Tailwind CSS | Utility-first styling with class-based dark mode. |
| Three.js | 3D rendering via React Three Fiber and Drei. |
| Postprocessing | Bloom, chromatic aberration, noise, and vignette effects. |
| Framer Motion | Spring animations, layout transitions, blur effects. |
| react-markdown | Markdown rendering with syntax highlighting for code blocks. |
| Lucide React | Consistent, lightweight icon system. |
| Tool | Role |
|---|---|
| FastAPI | Async Python API with native streaming support. |
| Groq | Inference layer for LLaMA 3.3 70B and LLaMA 3.1 8B. |
| DuckDuckGo Search | Real-time web search with result parsing. |
| Pollinations.ai | Image generation through Flux model. |
| Pydantic | Request validation and schema enforcement. |
| Platform | What runs there |
|---|---|
| Vercel | Next.js frontend, edge-optimized, auto-deployed from Git. |
| Render | Python API with streaming, cold start on free tier. |
┌───────────────────────────────────────────────────────────┐
│ Client (Vercel) │
│ │
│ Next.js 14 ──► React 18 ──► Three.js Canvas │
│ │ │ │ │
│ Tailwind CSS Framer Motion R3F + PostFX │
│ │
│ Streaming POST ──────────────┐ │
└───────────────────────────────────────────┼───────────────┘
│
▼
┌───────────────────────────────────────────────────────────┐
│ API (Render) │
│ │
│ FastAPI ──► Agent Orchestrator │
│ │ │
│ ┌───────────┼───────────────┐ │
│ ▼ ▼ ▼ │
│ Groq API DuckDuckGo Pollinations.ai │
│ (LLaMA) (Search) (Flux Images) │
│ │
│ Language ─► Ambiguity ─► Decision ─► Stream │
└───────────────────────────────────────────────────────────┘
- You type a message. The frontend streams a
POSTto/ask. - The backend detects the language of your input.
- It checks for ambiguity — if your question could mean multiple things, it asks before answering.
- A routing decision is made: direct answer, web search, or image generation.
- The appropriate model is selected — LLaMA 3.3 70B for complex queries, LLaMA 3.1 8B for fast ones.
- Tokens stream back chunk by chunk. The 3D orb reacts in real time.
- If an image was generated, it appears at the end of the response as markdown.
- Node.js >= 18.17.0
- Python 3.10+
- A Groq API key
Clone and install the frontend:
git clone https://github.com/sebastianvasquezechavarria1234/python-api-render.git
cd python-api-render
npm installConfigure environment variables:
cp .env.local.example .env.localEdit .env.local and set your API URL:
NEXT_PUBLIC_API_URL=https://your-api-url/ask
Run the development server:
npm run devOpen http://localhost:3000.
Set up the backend:
pip install -r requirements.txt
cp .env.example .envEdit .env and add your Groq key:
GROQ_API_KEY=your_key_here
Start the API:
uvicorn api.main:app --reload --port 8000Note: The Render free tier puts the API to sleep after inactivity. The first request after idle takes 30–60 seconds to wake the server. Subsequent requests are instant.
| Variable | Description |
|---|---|
NEXT_PUBLIC_API_URL |
Full URL to the backend /ask endpoint. |
| Variable | Description |
|---|---|
GROQ_API_KEY |
Your Groq Console API key for LLaMA access. |
Streams a response as plain text, chunk by chunk.
Request body:
{
"name": "Sebastian",
"question": "Explain quantum computing",
"personality": "tecnico",
"history": []
}| Field | Type | Required | Description |
|---|---|---|---|
name |
string |
Yes | User's name, used in responses. |
question |
string |
Yes | The message to process. |
personality |
string |
No | One of: casual, tutor, profesional, tecnico. Defaults to casual. |
history |
array |
No | Previous messages for context. Limited to last 5; older messages are summarized. |
Response: Streaming plain text. If an image was generated, it's appended as a markdown image tag pointing to Pollinations.ai.
Returns server status.
{ "status": "ok" }zenith-gpt/
├── api/
│ ├── main.py # FastAPI app, CORS, /ask and /health endpoints
│ ├── groq_service.py # Agent orchestrator, tool routing, model selection
│ ├── schemas.py # Pydantic request models
│ └── personality.py # Personality definitions
├── src/
│ ├── app/
│ │ ├── page.tsx # Main chat interface
│ │ ├── layout.tsx # Root layout with metadata
│ │ └── globals.css # Global styles, typography, scrollbar
│ └── components/
│ ├── AIOrb.tsx # 3D orb with shaders, particles, TTS integration
│ ├── ChatMessages.tsx # Message rendering with markdown and code blocks
│ ├── InputBar.tsx # Input area with personality selector
│ ├── NewSidebars.tsx # Desktop sidebar + mobile drawer
│ ├── Suggestions.tsx # Empty-state cards with prompt suggestions
│ ├── WelcomeModal.tsx # First-visit name entry
│ ├── InfoModal.tsx # In-app documentation
│ ├── StatsModal.tsx # Usage statistics dashboard
│ └── types.ts # Chat and Message interfaces
├── public/
│ ├── favicon.png
│ ├── logo.png
│ └── preview.jpg
├── requirements.txt
├── tailwind.config.ts
├── vercel.json
└── LICENSE
In api/groq_service.py:
MODEL_FAST = "llama-3.1-8b-instant" # Fast responses
MODEL_POWER = "llama-3.3-70b-versatile" # Complex reasoningExtend the personalidades dict in api/groq_service.py:
personalidades = {
"casual": "...",
"tutor": "...",
"profesional": "...",
"tecnico": "...",
"my_style": "You are Zenith, ...",
}Then add a matching entry in src/components/InputBar.tsx.
TEMPERATURE = 0.8 # 0.0 = deterministic, 1.0 = creativeMade with ❤️ by Sebastián V