Building Sulta AI wasn’t just about writing code—it was about crafting an experience. We wanted to create an AI assistant that feels personal, powerful, and seamless, whether you’re chatting, creating agents, or managing your workspace. Here’s a peek behind the curtain at how we made it happen.
1. The Vision: More Than Just Chat
From day one, we knew Sulta AI had to be more than a chatbot. We envisioned a platform where users could:
- Chat with advanced AI (powered by foundational models)
- Create and manage custom agents
- Organize conversations into threads
- Enjoy a beautiful, responsive UI
We wanted Sulta AI to feel like a true assistant—always there, always helpful.
2. Laying the Foundation: Next.js & Firebase
We chose Next.js for its flexibility and performance, and Firebase for real-time data and authentication. This combo let us move fast and scale easily.
- Authentication: Firebase Auth keeps users secure and sessions smooth.
- Database: Firestore stores chats, messages, and agent configs in real time.
- Analytics: Firebase Analytics helps us understand how you use Sulta AI, so we can keep improving.
3. The Chat Experience: Real-Time, Responsive, Reliable
The heart of Sulta AI is the chat. We obsessed over every detail:
- Real-Time Threads: Each conversation is a “thread,” stored in Firestore and updated live. No refresh needed.
- Message Flow: When you send a message, it appears instantly, then the AI’s response streams in. We use Gemini and OpenAI under the hood, switching models as needed.
- Media Support: Images, docs, and more—Sulta AI isn’t just text.
Code peek:
Our "chat-page.tsx" file orchestrates the chat UI, sidebar, and message logic. We use React hooks to manage state, and Firestore’s "onSnapshot" for real-time updates.
4. Custom Agents: Your AI, Your Way
Why settle for one-size-fits-all? With Sulta AI, you can create your own agents for different tasks—customer support, onboarding, school help, and more.
How We Achieve Agent Customization
Agent customization is at the core of Sulta AI’s flexibility. Here’s how we do it:
- Agent Types & Forms: In "/components/agent-creation/agent-types/", you’ll find forms for different agent templates—like "customer-support-form.tsx", "employee-onboarding-form.tsx", and "school-assistant-agent.tsx". Each form collects unique parameters, letting users tailor the agent’s behavior and knowledge base.
- Configurable Metadata: When you create an agent, we store its configuration (model, temperature, context, etc.) in Firestore. This metadata is used to personalize every interaction.
- Dynamic System Messages: Each agent can have its own system prompt, which guides the AI’s responses. This is handled in files like "generateSystemMessage.ts" and injected into the chat logic.
- Plug-and-Play: Agents are modular. You can switch between them in the chat sidebar, and each thread remembers which agent it’s using.
Code peek:
The agent creation logic lives in "/components/agent-creation/", and agent configs are managed in Firestore via "/app/api/firebase/db/createAgent/".
5. Super Agent Templates: The Next Evolution
We’re rolling out Super Agent Templates—pre-built, highly capable agents designed for complex workflows. Here’s what makes them special:
- Multi-Modal Abilities: Super agents can handle text, images, and documents, switching context as needed.
- Advanced Context Handling: They remember more, adapt faster, and can be fine-tuned for specific industries or roles.
- Easy Deployment: Just pick a template, tweak a few settings, and you’re ready to go.
- Extensible: You can layer extra context fields, power-ups, and integrations (like analytics or external APIs) right from the creation UI.
Code peek:
Check out "super-agents.tsx" in "/components/agent-creation/" for the new template logic. We’re using a combination of dynamic forms and metadata-driven config to make these agents both powerful and easy to use.
6. A Sidebar That Works Everywhere
We wanted navigation to feel natural, whether you’re on desktop or mobile.
- Responsive Drawer: On mobile, the sidebar slides out. On desktop, it’s always there.
- Thread List: See all your conversations at a glance, start new ones, or delete old threads.
- Quick Links: Jump to the dashboard, create agents, or tweak your settings.
Code peek:
The sidebar logic lives in "chat-page.tsx" and "/components/Sidebar/app-sidebar.tsx".
7. Design: Light, Dark, and Everything in Between
We believe tools should adapt to you, not the other way around.
- Theme Support: Sulta AI detects your system theme and lets you switch between light and dark.
- Modern UI: We use Tailwind CSS for rapid, consistent styling, and custom components for a polished look.
8. AI Power: Gemini & OpenAI
Sulta AI’s brains come from the best:
- Gemini: For creative, context-rich responses.
- OpenAI: For code, logic, and more.
We built a flexible backend that can route requests to the right model, and even combine their strengths.
Code peek:
See "/app/api/LLM/" for our model integrations.
9. Shipping Fast, Learning Faster
We’re always shipping new features, fixing bugs, and listening to your feedback. Our codebase is modular, so we can add new agent types, chat features, or integrations without breaking a sweat.
10. What’s Next?
We’re just getting started. Expect smarter agents, more integrations, and even smoother experiences soon.
Final Thoughts
Building Sulta AI has been a journey—one filled with late nights, “aha!” moments, and lots of coffee. We hope you love using it as much as we loved building it.
Want to see more?
Check out our GitHub or get started now.
Thanks for being part of the Sulta AI story!