Every project starts with a single line of code, an initial commit. Mine was no different. On a quiet day, I pushed the first commit, laying the foundation for what would become a personal AI chat assistant. The goal was simple: create a space for a conversation, a digital extension of my own thoughts and experiences. The initial setup was basic, just a SvelteKit frontend and a simple backend to handle requests. Little did I know, this was the start of a long and exciting journey of iteration and improvement.
The chat was just a shell, a pretty interface with no one to talk to. It was time to give it a voice. I integrated the first AI model, bringing the magic of large language models to my personal website. The initial implementation was a straightforward API call to an AI provider, but it was a huge leap forward. Suddenly, my website could talk back. It could answer questions, tell jokes, and even write a little bit of code. This was the moment the project truly came alive. I used the `fetch` API to send the user's message to a serverless function, which then relayed the message to the AI provider. The response was then streamed back to the client, creating a real-time conversation.
The initial AI was good, but I wanted it to be more personal, more knowledgeable about me and my work. That's when I decided to implement a Retrieval-Augmented Generation (RAG) architecture. I started by creating embeddings of my personal data, like my resume and other documents, and storing them in a Supabase vector database. This allowed the AI to retrieve relevant information from my life and work, providing more contextually aware and accurate responses. The chat was no longer just a generic AI; it was becoming my AI. The `supabaseService.ts` file handles the connection to Supabase, and the `getContextFromSupabase` function is used to retrieve the most relevant context for a given query.
With great power comes great responsibility. As the chat became more capable, I realized the importance of safety. I implemented a multi-layered safety system to prevent harmful or inappropriate content. This included checks on both the user's input and the AI's response. I used a combination of techniques, including keyword filtering and AI-powered content moderation, to ensure that the conversation remains safe and respectful. This was a critical step in making the chat a responsible and trustworthy AI assistant. The `isSafePrompt.ts` and `isSafeResponse.ts` files contain the logic for these safety checks.
As the chat's features grew, so did the complexity of the frontend. I needed a robust way to manage the application's state. I turned to Svelte's built-in stores, which provided a simple and elegant solution. I created stores to manage the chat history, the user's input, and the AI's responses. This made the code more organized, easier to reason about, and more scalable. It was a classic example of how a good architecture can make a complex application feel simple. The `app.svelte.ts` file is where the main application state is managed, and the `chat.svelte.ts` file handles the state of the chat specifically.
A great user experience is about more than just functionality; it's about the little details that make an application a joy to use. I spent a lot of time refining the UI/UX of the chat. I added a custom writing animation to simulate the AI thinking, sound effects to provide auditory feedback, and a responsive design that works beautifully on any device. These small touches might seem insignificant on their own, but together they create a polished and engaging experience that makes the chat feel more human. The `WritingAnimation.svelte` component is a great example of this attention to detail.
I want my chat to be accessible to everyone, regardless of their language. That's why I implemented internationalization (i18n) support. I started by adding Spanish localization, but the architecture is designed to be easily extensible to other languages. I used a library to manage the translations, making it easy to add new languages in the future. This was an important step in making the chat a truly global application. The `en.json` and `es.json` files contain the English and Spanish translations, respectively.
The journey of building this chat has been one of continuous learning and improvement. From the initial commit to the latest features, every step has been a valuable experience. I'm constantly looking for ways to make the chat smarter, safer, and more enjoyable to use. The dev log is a testament to this ongoing process, a story of how a simple idea can evolve into a complex and rewarding project. And the best part is, the story is far from over.