AgentCorp

Reinventing the workplace

Comment

AgentCorp 🚀

A stunning 3D interactive web application that brings AI agents to life through an immersive carousel experience. AgentCorp provides seamless access to specialized AI assistants for various business functions, all wrapped in a beautiful, modern interface.

AgentCorp Banner

✨ Features

  • 3D Interactive Carousel: Smooth, rotating carousel showcasing different AI agents with auto-rotation and manual control
  • Specialized AI Agents: Five distinct AI agents tailored for specific business needs:
    • 💼 Financial Analyst
    • 📱 Marketing Specialist
    • 📋 Executive Assistant
    • 👥 HR Manager
    • ⚖️ Legal Advisor
  • Immersive Experience: Dynamic animations, floating particles, and smooth transitions
  • Modal Integration: Click any agent to open an interactive iframe interface with microphone support
  • Responsive Design: Beautiful UI that works across different screen sizes
  • Organization Onboarding: Custom splash page to collect organization information before entry

🎯 Inspiration

In today's fast-paced business environment, organizations need quick access to specialized expertise across multiple domains. However, hiring specialists for every function is costly and time-consuming. We envisioned a world where businesses of any size could have instant access to a suite of AI-powered specialists, ready to assist with everything from financial analysis to legal advice.

The inspiration came from observing how fragmented business tools have become—different platforms for different functions, each requiring separate logins and workflows. We wanted to create a unified, visually stunning hub where all your AI assistants live together in harmony, accessible through a single, intuitive interface.

🔧 What it does

AgentCorp serves as your organization's AI-powered command center. Here's how it works:

  1. Onboarding: Organizations enter their details through an elegant splash page
  2. Agent Selection: Users browse through a 3D carousel of AI agents, each representing a different business function
  3. Interaction: Clicking on any agent opens an immersive modal with a fully functional AI interface powered by Anam AI
  4. Intelligent Conversation: Each agent uses RAG (Retrieval-Augmented Generation) to access domain-specific knowledge bases, ensuring accurate and contextual responses
  5. Action-Oriented: Agents can perform real actions through n8n workflow integrations—send emails, create calendar events, generate reports, and more
  6. Voice Interactions: Full microphone support enables natural voice conversations with realistic avatar responses
  7. Seamless Navigation: Users can easily switch between agents or return to the carousel view

Powered by Advanced AI Technologies

Anam AI Avatars: Each agent is brought to life with Anam AI's conversational avatar technology, featuring:

  • Realistic facial animations synchronized with speech
  • Natural voice synthesis
  • Real-time response generation
  • Microphone-enabled voice input

RAG Knowledge Base: Every agent has access to a specialized knowledge base through RAG:

  • Financial Analyst: Financial regulations, accounting standards, market data
  • Marketing Specialist: Marketing frameworks, campaign best practices, industry trends
  • Executive Assistant: Productivity techniques, communication templates, scheduling protocols
  • HR Manager: Employment law, HR policies, recruitment strategies
  • Legal Advisor: Legal precedents, contract templates, compliance requirements

n8n Tool Calling: Agents can take actions through automated workflows:

  • Send emails and notifications
  • Create and update calendar events
  • Generate and export documents
  • Query databases and APIs
  • Trigger custom business processes
  • Integrate with third-party services (Slack, Google Workspace, CRM systems, etc.)

🛠️ How we built it

AgentCorp combines cutting-edge web technologies to create an unforgettable user experience:

Frontend Stack

  • React: Core framework for component-based architecture
  • Three.js & @react-three/fiber: 3D graphics and rendering engine
  • @react-three/drei: Enhanced Three.js components and helpers
  • Maath: Mathematical easing functions for smooth animations

AI & Backend Integration

  • Anam AI: Powers the conversational avatar agents with realistic voice and facial animations
  • RAG (Retrieval-Augmented Generation): Knowledge base integration for context-aware responses
  • n8n: Workflow automation platform for tool calling and external integrations
  • Vector Database: Stores and retrieves relevant information for each specialized agent

Key Technical Components

  1. 3D Scene Management: Custom Rig component handling rotation, scroll, and auto-rotation states
  2. Smart Interaction: Sophisticated event handling that pauses auto-rotation during user interaction
  3. Modal System: Dynamic iframe embedding with agent-specific URLs for each AI agent
  4. Animation Engine: Frame-by-frame animations using useFrame hooks for butter-smooth 60fps performance
  5. State Management: React hooks managing hover states, scroll positions, and modal visibility
  6. Custom Shaders: GLSL shaders for rounded rectangles and visual effects
  7. Anam AI Integration: Embedded avatar agents with microphone permissions for voice interactions
  8. Knowledge Base: RAG system that provides each agent with domain-specific knowledge
  9. Tool Calling Layer: n8n workflows enabling agents to perform actions and access external services

Architecture Highlights

src/
├── App.js              # Main 3D scene and carousel logic
├── SplashPage.js       # Organization onboarding form
├── components/ui/      # Reusable UI components
└── styles/            # CSS with animations and glassmorphism effects

💪 Challenges we ran into

  1. Smooth Rotation Transitions: Creating seamless transitions between auto-rotation, user scroll, and click-to-focus was complex. We implemented a sophisticated state management system with normalized angles and smooth interpolation to prevent jarring movements.

  2. 3D Card Interactions: Making the cards feel responsive without compromising the carousel's rotation was tricky. We solved this by implementing careful event propagation control and dynamic scaling animations.

  3. Anam AI Integration: Embedding Anam AI avatars as iframes while maintaining smooth communication and microphone permissions across different browsers required careful handling of iframe security policies and WebRTC configurations.

  4. RAG Implementation: Building an effective knowledge base for each agent required careful data curation and chunking strategies. We had to balance between providing comprehensive information and maintaining fast retrieval times.

  5. n8n Workflow Orchestration: Designing robust n8n workflows that could handle various edge cases (API failures, timeout scenarios, data validation) while providing seamless experiences required extensive testing and error handling.

  6. Agent-Specific Context: Ensuring each AI agent maintains its specialized knowledge domain without bleeding into other areas required careful prompt engineering and knowledge base segmentation.

  7. Performance Optimization: Rendering 3D graphics at 60fps while maintaining smooth animations and handling real-time AI responses required optimization of re-renders and efficient use of refs.

  8. State Synchronization: Keeping track of multiple states (hover, scroll, rotation, modal, AI conversations) and ensuring they work harmoniously together was a complex orchestration problem.

  9. Cross-Origin Communication: Managing secure communication between the main app and embedded Anam AI iframes while preserving functionality required implementing proper CORS policies and postMessage protocols.

🏆 Accomplishments that we're proud of

  • Stunning Visual Design: Created a truly immersive 3D experience that feels more like a high-end product demo than a web application
  • AI-Powered Interactions: Successfully integrated Anam AI to create lifelike conversational agents with realistic avatars and voice
  • Intelligent Knowledge Base: Implemented RAG architecture that provides each agent with accurate, domain-specific knowledge
  • Action-Capable Agents: Built n8n workflows enabling agents to perform real-world tasks, not just conversations
  • Smooth Performance: Achieved consistent 60fps animations even with multiple interactive elements and real-time AI processing
  • Intuitive UX: Users instinctively understand how to interact with the carousel—no tutorial needed
  • Modular Architecture: Built a scalable system where adding new agents with custom knowledge bases is straightforward
  • Attention to Detail: Every interaction has been polished—from the rotating close button to the pulsing particles in the background
  • Seamless Integration: Successfully orchestrated multiple complex technologies (3D rendering, AI avatars, RAG, workflow automation) into a unified experience

📚 What we learned

  1. 3D Web Development: Gained deep expertise in Three.js and React Three Fiber, understanding how to build performant 3D experiences in the browser

  2. Animation Mathematics: Learned advanced concepts like angle normalization, easing functions, and frame-based interpolation for smooth animations

  3. State Management Complexity: Discovered the importance of careful state architecture when dealing with multiple interactive systems that need to coordinate

  4. Performance Optimization: Learned how to use refs strategically to avoid unnecessary re-renders while maintaining reactive UI updates

  5. UX Psychology: Understood how subtle animations and responsive feedback can dramatically improve the perceived quality and usability of an application

  6. Shader Programming: Gained experience writing custom GLSL shaders for unique visual effects

🚀 What's next for AgentCorp

Short-term Goals

  • More Agents: Expand the roster to include Sales, Operations, Customer Support, and Data Science specialists
  • Customization: Allow organizations to customize agent personalities and expertise domains
  • Conversation History: Implement persistent chat history across sessions
  • Voice Enhancement: Add advanced voice features like voice cloning for consistent agent personalities

Medium-term Vision

  • Agent Collaboration: Enable multiple agents to work together on complex tasks
  • Analytics Dashboard: Provide insights into which agents are most utilized and their impact
  • Mobile App: Create native mobile experiences with AR capabilities to place agents in physical space
  • Integration Hub: Connect with popular business tools (Slack, Microsoft Teams, Salesforce, etc.)

Long-term Ambitions

  • Custom Agent Training: Allow organizations to train agents on their specific data and processes
  • Agent Marketplace: Create a marketplace where developers can build and sell specialized agents
  • Multi-language Support: Expand to support conversations in multiple languages
  • Enterprise Features: Add role-based access control, audit logs, and compliance features for large organizations
  • Agent Autonomy: Develop agents that can proactively identify and solve problems without prompting

🚦 Getting Started

Prerequisites

Node.js >= 16.0.0
npm or yarn

Installation

  1. Clone the repository

    git clone https://github.com/yourusername/agentcorp.git
cd agentcorp

  2. Install dependencies

    npm install

  3. Start the development server

    npm run dev

  4. Open your browser and navigate to the local development URL (typically http://localhost:3000 or http://localhost:5173)

Building for Production

npm run build

🎨 Tech Stack

  • React - UI Framework
  • Three.js - 3D Graphics Library
  • @react-three/fiber - React Renderer for Three.js
  • @react-three/drei - Useful helpers for React Three Fiber
  • Maath - Math utilities for animations
  • CSS3 - Styling with custom animations and glassmorphism

🤝 Contributing

We welcome contributions! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

Built with ❤️ by the AgentCorp team

🙏 Acknowledgments

  • Three.js community for excellent documentation and examples
  • Anam.ai for providing the AI agent infrastructure
  • The React Three Fiber team for making 3D in React accessible

AgentCorp - Your AI-powered business command center 🚀

Built With

Share this project:

Updates

Submission history