Minds AIssistant

Minds AIssistant to znacznie więcej niż standardowa aplikacja do notatek. To zaawansowane narzędzie do autorefleksji, które łączy funkcjonalność cyfrowego dziennika z siłą sztucznej inteligencji. Projekt powstał z myślą o użytkownikach, którzy pragną nie tylko zapisywać swoje myśli, ale również głębiej je analizować i pracować nad rozwojem osobistym z pomocą wirtualnego coacha.

Architektura i Technologie

Minds AIssistant to aplikacja internetowa typu Single Page Application (SPA). Składa się z dwóch głównych części: frontendu napisanego w React oraz backendu opartego na Node.js z frameworkiem Express.js. Dane przechowywane są w relacyjnej bazie danych PostgreSQL.

Frontend

• Framework/Biblioteka: React (v19).
• Routing: Nawigacja po stronie jest obsługiwana przez react-router-dom (v7).
• Bundler: Projekt jest budowany i serwowany za pomocą Vite.
• Komunikacja HTTP: Do komunikacji z backendem wykorzystywana jest biblioteka axios.
• UI/Styling: Interfejs użytkownika jest zbudowany z użyciem komponentów z bibliotek React Bootstrap i MUI. Style globalne i niestandardowe zdefiniowano w pliku public/styles.css.

Backend

• Framework: Express.js.
• Baza Danych: PostgreSQL, z którą aplikacja łączy się za pomocą biblioteki pg.
• Uwierzytelnianie: Za proces logowania i autoryzacji odpowiada Passport.js ze strategią passport-local dla logowania e-mailem i hasłem oraz opcjonalnie passport-google-oauth2 dla logowania przez Google.
• Bezpieczeństwo:
  • Hasła użytkowników są hashowane przy użyciu biblioteki bcrypt.
  • Sesje są zarządzane przez express-session.
  • Endpoint logowania jest chroniony przed atakami brute-force za pomocą express-rate-limit.

Komponenty Odpowiedzialne za Chatbota

Funkcjonalność chatbota jest zaimplementowana w całości po stronie klienta (frontendu) i opiera się na bezpośredniej komunikacji z zewnętrznym API (Google Gemini).

1. Inicjalizacja Chatu

Użytkownik może rozpocząć rozmowę z AI na temat konkretnej notatki. W komponencie Note.jsx, który renderuje pojedynczą notatkę, znajduje się przycisk uruchamiający chat.

// client/src/components/Note.jsx
<Button variant="outline-primary" size="sm" onClick={() => onOpenChat(note)} title="Porozmawiaj z AI">
    <FaRobot />
</Button>

Prop onOpenChat jest przekazywany z komponentu DailyNotesView.jsx, który zarządza stanem widoczności chatbota i przekazuje do niego dane wybranej notatki.

// client/src/components/DailyNotesView.jsx
const handleOpenChat = (note) => {
    if (note && note.content) {
        setNoteForChat(note);
        setIsChatOpen(true);
    } // ...
};

// ... w JSX ...
{isChatOpen && noteForChat && (
    <Chatbot note={noteForChat} onClose={handleCloseChat} />
)}

2. Główny Komponent Chatbota (Chatbot.jsx)

To serce całej funkcjonalności. Odpowiada za zarządzanie stanem rozmowy, wysyłanie zapytań do API i renderowanie interfejsu.

• Stan: Komponent przechowuje historię chatu (chatHistory) oraz status ładowania odpowiedzi (isLoading).
• Inicjalizacja: Po zamontowaniu komponentu, uruchamiany jest hook useEffect, który tworzy początkowy system prompt i wysyła pierwszą prośbę do AI, aby przeanalizowało notatkę użytkownika.

// client/src/components/Chatbot.jsx
useEffect(() => {
    const initialPrompt = createInitialPrompt(note.content);
    const analyzingMessage = { role: "model", text: "Analizuję Twoją notatkę..." };
    const fullInitialHistory = [...initialPrompt, analyzingMessage];
    setChatHistory(fullInitialHistory);
    generateBotResponse(initialPrompt);
}, [note]);

3. System Prompt (startInfo.js)

To kluczowy element, który instruuje model AI, jak ma się zachowywać. Jest to predefiniowany tekst, który ustawia tożsamość bota jako “empatycznego coacha personalnego” i definiuje zasady komunikacji oparte na metodzie Haima Ginotta. Prompt ten jest dołączany na początku każdej konwersacji.

// client/src/startInfo.js
export const startInfo = `
Tytuł: Instrukcja dla modelu: Wirtualny Coach i Doradca

Treść:
Jesteś empatycznym i wspierającym coachem personalnym. Twoim celem jest pomoc użytkownikowi w przeanalizowaniu problemów, myśli i uczuć opisanych w jego notatce. Komunikuj się w języku polskim. Twoja metoda komunikacji jest ściśle oparta na zasadach Haima Ginotta, autora książki "Między rodzicami a dziećmi".

// ... (reszta instrukcji)
`;

4. Komunikacja z API Google Gemini

Funkcja generateBotResponse w Chatbot.jsx odpowiada za formatowanie historii chatu i wysłanie jej do API Gemini.

• Klucz API oraz URL do API są przechowywane w zmiennych środowiskowych, co jest dobrą praktyką bezpieczeństwa. Zmienna VITE_API_URL jest ładowana z pliku .env przez Vite.
• Historia rozmowy jest wysyłana w ciele zapytania POST w formacie wymaganym przez API.
• Odpowiedź od AI jest następnie dodawana do stanu chatHistory, co powoduje jej wyrenderowanie w interfejsie.

// client/src/components/Chatbot.jsx
const generateBotResponse = async (history) => {
    setIsLoading(true);
    const apiHistory = history
        .map(({ role, text }) => ({ role, parts: [{ text }] }));

    const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ contents: apiHistory })
    };

    try {
        const response = await fetch(import.meta.env.VITE_API_URL, requestOptions);
        const data = await response.json();
        if (!response.ok) throw new Error(data.error.message || "Something went wrong!");

        const apiResponseText = data.candidates[0].content.parts[0].text.replace(/\*\*(.*?)\*\*/g, "$1").trim();
        setChatHistory(prev => [...prev.filter(m => (m.text !== "Myślę...") && (m.text !== "Analizuję Twoją notatkę...")), { role: "model", text: apiResponseText }]);
    } catch (error) {
        // ... (obsługa błędów)
    } finally {
        setIsLoading(false);
    }
};

Struktura Plików Projektu

Minds-AIssistant/
├── .gitignore
├── README.md
├── client/
│   ├── index.html
│   ├── package.json
│   ├── public/
│   │   └── styles.css
│   ├── src/
│   │   ├── components/
│   │   │   ├── App.jsx
│   │   │   ├── ChatForm.jsx
│   │   │   ├── ChatMessage.jsx
│   │   │   ├── Chatbot.jsx
│   │   │   ├── CreateArea.jsx
│   │   │   ├── DailyNotesView.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── Header.jsx
│   │   │   ├── Home.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Note.jsx
│   │   │   ├── NoteEditorDialog.jsx
│   │   │   ├── Notebook.jsx
│   │   │   └── Register.jsx
│   │   ├── main.jsx
│   │   └── startInfo.js
│   └── vite.config.js
└── server/
    ├── index.js
    └── package.json

Podsumowanie

“Minds AIssistant” to w pełni funkcjonalna aplikacja full-stack, która demonstruje zdolność do łączenia nowoczesnych technologii webowych w spójny i użyteczny produkt. Projekt ten nie jest jedynie prostym notatnikiem (CRUD), ale zaawansowanym narzędziem, którego główną wartością jest innowacyjne wykorzystanie sztucznej inteligencji do wspierania rozwoju osobistego użytkownika.

Kluczowe aspekty techniczne, takie jak bezpieczne uwierzytelnianie, obsługa sesji, komunikacja z zewnętrznym API (Google Gemini) oraz stworzenie dynamicznego interfejsu w React, zostały pomyślnie zaimplementowane.
Szczególną uwagę poświęcono “Prompt Engineeringowi” – zaprojektowaniu precyzyjnych instrukcji dla modelu AI, aby jego interakcje z użytkownikiem były wartościowe i utrzymane w pożądanym, terapeutycznym tonie.

W celu przedstawienia aplikacji od strony wizualnej oraz zaprezentowania mechaniki programu na żywo nagrałem video które umieściłem poniżej. Gorąco zachęcam do obejrzenia.

GITHUB

https://github.com/szymonMCS/Minds-AIssistant.git