Chcesz zbudować aplikację asystenta AI? Ten przewodnik jest dla Ciebie!

Pokażemy Ci wszystkie kroki potrzebne do zbudowania pierwszej aplikacji asystenta AI. Podzieliliśmy je na trzy sekcje:

1. Tworzenie i konfigurowanie aplikacji na platformie monday
2. Uruchamianie przykładowej aplikacji w środowisku lokalnym
3. Łączenie środowiska lokalnego z platformą monday

Po wykonaniu tych kroków będziesz mieć działającą aplikację! Jeśli chcesz w dowolnym momencie sprawdzić, jak działa kod, obejrzyj sesję programowania na żywo.

Tworzenie i konfigurowanie aplikacji

Zaczniemy od interfejsu monday.com. Jeśli nie masz jeszcze konta monday, zarejestruj się tutaj.

Włącz wersję beta asystenta AI

Asystent AI jest nadal w wersji zapoznawczej, więc po utworzeniu konta musisz go na nim włączyć. Administrator konta musi też włączyć tryb dewelopera, aby przetestować aplikację.

1. Kliknij swoje zdjęcie profilowe w prawym górnym rogu.
2. Wybierz monday.labs.
3. Wpisz Developer mode w pasku wyszukiwania.
4. Kliknij Aktywuj (Activate) i zamknij okno modalne.
5. Poczekaj, aż strona się odświeży.
6. Wpisz Ai Apps Assistant For Developers w pasku wyszukiwania.
7. Kliknij Aktywuj i zamknij okno modalne.
8. Poczekaj, aż strona się odświeży, a następnie otwórz tablicę monday.
9. Zaakceptuj warunki w wyskakującym oknie Welcome to AI Assistant.

Utwórz aplikację

Po włączeniu wersji beta asystenta AI możesz utworzyć aplikację!

1. Kliknij swoje zdjęcie profilowe w prawym górnym rogu.
2. Wybierz Deweloperzy (Developers). W nowej karcie otworzy się Developer Center.
3. W nowej karcie kliknij Utwórz aplikację (Create app).
4. Zmień nazwę aplikacji i kliknij Zapisz (Save).

Dodaj funkcję asystenta AI do aplikacji

Po utworzeniu aplikacji możesz dodać do niej funkcję asystenta AI. Na tym etapie musisz też wybrać lokalizację tej funkcji.

1. Przejdź do karty Features i wybierz Utwórz funkcję (Create feature).
2. W wyskakującym oknie kliknij Filtruj według typu (Filter by type) i wybierz AI. Zobaczysz wszystkie lokalizacje, w których można używać asystenta AI.
3. Wybierz Asystent AI w nagłówku tablicy (Board header AI assistant).
4. Kliknij Pusta funkcja (Empty feature), a następnie Utwórz (Create).
5. Zmień nazwę funkcji i wybierz kształt Szeroki (Wide).
6. Kliknij Zapisz, aby zapisać zmiany.

Uruchamianie środowiska lokalnego

Pobierz przykładowy kod

Pobierz przykładowy kod z GitHub. Możesz pobrać plik ZIP z GitHub albo użyć polecenia git clone:

git clone https://github.com/yuhgto/monday-ai-prompt-template

Zainstaluj ngrok (zalecane) lub użyj monday tunnel

W tym przewodniku zalecamy użycie usługi ngrok, która bezpiecznie łączy środowisko lokalne z internetem. Aby z niej skorzystać, musisz założyć bezpłatne konto i zainstalować oprogramowanie. Jeśli nie chcesz używać ngrok, możesz też użyć monday tunnel, aby udostępnić środowisko lokalne w internecie.

Jeśli korzystałeś już z ngrok, możesz przejść do następnego kroku. Jeśli zdecydujesz się użyć monday tunnel, jego konfiguracja jest prosta. Opisujemy ją w następnej sekcji.

Aby użyć ngrok:

1. Pobierz i zainstaluj oprogramowanie ze strony ngrok.
2. Utwórz konto ngrok.
3. Pobierz token autoryzacyjny z panelu konta.
4. Dodaj token autoryzacyjny do lokalnej instalacji, uruchamiając ngrok config add-authtoken \<token>.

📘 Informacja dla użytkowników Maca

Podczas konfiguracji ngrok przez brew może pojawić się błąd uprawnień. Jeśli tak się stanie, otwórz finder, kliknij plik instalacyjny lewym przyciskiem myszy, jednocześnie naciskając Control, a następnie kliknij Otwórz (open).

Ustaw zmienne środowiskowe

Teraz możesz dodać odpowiednie klucze API jako zmienne środowiskowe.

1. Utwórz nowy plik o nazwie .env.local.
2. Skopiuj do tego pliku zawartość pliku .env.
3. Wklej klucz API OpenAI jako wartość OPENAI_API_KEY.
4. Wklej klucz API monday jako wartość MONDAY_API_KEY. Tutaj dowiesz się, jak uzyskać token API.
5. Pobierz klucz tajny klienta aplikacji z głównej strony aplikacji.

📘 Nie chcesz łączyć aplikacji z kontem OpenAI?

Możesz edytować /app/api/prompts/route.ts, aby połączyć ją z wybranym interfejsem API!

Uruchom aplikację lokalnie

Po skonfigurowaniu przykładowego kodu i ngrok możesz uruchomić aplikację.

1. W terminalu przejdź do pobranego folderu z kodem: cd monday-ai-prompt-template.
2. Zainstaluj zależności za pomocą npm:npm install.
3. Uruchom serwer deweloperski. Będzie działać na porcie 3000: npm run dev.

Połącz środowisko lokalne z monday.com

Możesz wykonać te kroki za pomocą ngrok (zalecane) albo monday tunnel.

ngrok (zalecane)

Utwórz tunel ngrok na porcie 3000

1. Otwórz nowe okno terminala i uruchom ngrok http 3000.
2. Skopiuj zwrócony adres URL.

Wklej adres URL ngrok jako nową kompilację

1. Skopiuj adres URL ngrok.
2. Otwórz aplikację i przejdź do utworzonej funkcji asystenta AI.
3. Kliknij przycisk Nowa kompilacja (New build).
4. Wklej adres URL ngrok jako niestandardowy adres URL.
5. Kliknij Utwórz kompilację (Create build).

monday tunnel

Wykonaj poniższe kroki, jeśli ngrok nie działa.

Utwórz monday tunnel na porcie 3000

1. Otwórz nowe okno terminala i uruchom npx @mondaydotcomorg/tunnel --port 3000.
2. Skopiuj zwrócony adres URL.

Wklej adres URL monday tunnel jako nową kompilację

1. Skopiuj adres URL monday tunnel.
2. Otwórz aplikację i przejdź do utworzonej funkcji asystenta AI.
3. Kliknij przycisk Nowa kompilacja.
4. Wklej adres URL monday tunnel jako niestandardowy adres URL i kliknij Utwórz kompilację.

Przetestuj aplikację na prawdziwej tablicy

1. Otwórz tablicę monday.com.
2. Kliknij Asystent AI (AI assistant) i wybierz swoją aplikację.
3. Wpisz coś i sprawdź, jak aplikacja aktualizuje tablicę w czasie rzeczywistym!

📘 Dołącz do naszej społeczności deweloperów!

Stworzyliśmy społeczność dla deweloperów. Możesz w niej przeszukiwać wcześniejsze tematy i znajdować rozwiązania, zadawać pytania, poznawać nowe funkcje i aktualizacje oraz uczyć się wskazówek i sztuczek od innych deweloperów. Dołącz do nas! 😎