AURION MCP Frontend

The AURION MCP Frontend is a richly animated conversational interface that blends an interactive 3D-inspired character, cinematic UI, and real-time voice capabilities into a futuristic operator console. It acts as the primary user interface for AURION, a multi-mode AI assistant that can switch between developer, companion, and stealth personas.

Features

• Immersive Character Renderer – TerminalCharacter combines continuous full-body motion, emotion-aware gestures, and mouse-responsive tracking to create a lifelike AI presence.
• Dynamic Conversation Flow – useAurionChat() orchestrates welcome prompts, streamed responses, and automated speech synthesis for each assistant reply.
• Voice Interaction – Integrated TTS and speech recognition (via useSpeechRecognition) power hands-free exchanges and animated lip-sync.
• Conversation History Panel – ConversationHistory keeps a persistent, scrollable log with speaking indicators and adaptive layouts.
• Customizable Modes – The Settings context toggles distinct personality presets (developer, companion, stealth) that drive prompts, tone, and visuals.
• Futuristic UI Shell – InteractiveBackground, SideNavigation, and RightSidebar provide telemetry-style visuals, ambient effects, and quick actions.

Tech Stack

• Framework: Next.js 14 (App Router) with TypeScript
• Styling: Tailwind CSS with custom glassmorphism and neon gradients
• Animation: React hooks leveraging requestAnimationFrame for 60fps motion
• Audio: Browser Speech API plus optional ElevenLabs integration

Getting Started

Clone the repository and install dependencies:

npm install

Launch the development server:

npm run dev

The app runs at http://localhost:3000. Edits to files within src/app/ and src/components/ hot-reload automatically.

Environment Setup

• Environment Variables: Copy env.example to .env and populate credentials (e.g., TTS providers, backend endpoints).
• Audio Permissions: Browsers may prompt for microphone access when enabling speech recognition.

Project Structure

├── src/
│   ├── app/               # App Router entrypoints, global layout, styles
│   ├── components/        # Character renderer, UI panels, controls
│   ├── hooks/             # Animation, speech, settings, and API hooks
│   ├── context/           # Shared settings state (mode, audio options)
│   └── services/          # Chat API client, TTS utilities
├── public/                # Static assets (audio cues, 3D models, icons)
├── assets/                # Project documentation imagery (e.g., ui.png)
├── CHARACTER_3D_SETUP.md  # Deep dive into animation system
├── TTS_SETUP.md           # Text-to-Speech configuration guide
└── README.md

Available Scripts

• npm run dev – Start the Next.js dev server with hot reload
• npm run build – Generate an optimized production build
• npm run start – Serve the production build locally
• npm run lint – Run linting with the configured ESLint ruleset

Assets

• UI Preview: assets/ui.png provides a snapshot of the primary conversation screen. Update this image to keep the documentation aligned with the latest UI.

Contributing

1. Fork the repository and create a feature branch.
2. Follow the existing code style and use npm run lint before submitting your changes.
3. Open a Pull Request describing the feature, screenshots (if UI changes), and testing steps.

Additional Documentation

• CHARACTER_3D_SETUP.md – Architecture of the character animation and emotional system.
• TTS_SETUP.md – Integration details for ElevenLabs and browser-based speech synthesis.

License

This project is currently distributed under a private/internal license. Contact the maintainers for usage permissions.