Buduj z CometAPIPotrzebujesz jednego API dla wielu modeli?Przetestuj proces w Playground, a potem utwórz klucz API, gdy model i koszt pasują do Twojego zastosowania.
Zbuduj asystenta AI przy użyciu Lovable i CometAPI
Dowiedz się, jak Lovable tworzy aplikacje internetowe, poznaj jego kluczowe funkcje i połącz CometAPI za pośrednictwem bezpiecznego backendu, korzystając z praktycznego samouczka dotyczącego asystenta pisania.
Lovable to platforma deweloperska zasilana AI, która przekształca instrukcje w języku naturalnym w edytowalny kod aplikacji webowych. Pomaga founderom, projektantom, zespołom produktowym i deweloperom budować interfejsy, łączyć usługi backendowe i publikować aplikacje poprzez iteracyjną rozmowę. Ten przewodnik wyjaśnia jej możliwości, architekturę projektu oraz praktyczną integrację CometAPI dla asystenta pisarskiego. Integracja dodaje inferencję modelu do budowanej aplikacji; nie stanowi sposobu na zastąpienie własnego agenta kodującego Lovable. Czytelnicy powinni rozumieć podstawy żądań HTTP i JavaScript oraz mieć dostęp do projektu w Lovable i konta CometAPI przed realizacją kroków wdrożenia.
Key Takeaways
Rozwój zasilany AI: Generuj i udoskonalaj aplikacje za pomocą promptów w języku naturalnym.
Możliwości full-stack: Buduj frontend z funkcjami backendu, bazami danych, uwierzytelnianiem i hostingiem.
Nowoczesna architektura: Nowe projekty Lovable od maja 2026 korzystają z TanStack Start opartyego na React i SSR.
Lovable (lovable.dev) to zasilana AI platforma do budowania pełnoprawnych aplikacji webowych full-stack przy użyciu języka naturalnego. Jej oficjalna strona i przegląd produktu stanowią punkt wyjścia do poznania platformy.
Opisujesz, czego potrzebujesz, w interfejsie czatu, a platforma generuje działającą aplikację z:
Backendem, bazą danych, uwierzytelnianiem i storage (poprzez wbudowany Lovable Cloud, który jest zarządzanym Supabase)
Integracjami, wdrożeniem oraz edytowalnym kodem będącym twoją własnością
Obsługuje cały cykl życia produktu — od prototypowania po wdrożenie — i potrafi synchronizować kod z GitHub, GitLab lub Bitbucket. Skierowana jest do founderów, menedżerów produktu, osób nietechnicznych i zespołów, które chcą działać szybko przy zachowaniu własności kodu. Wywodzi się z open-source’owego projektu GPT Engineer (założonego w Sztokholmie w 2023 przez Anton Osika i Fabian Hedin) i została zrebrandowana/skomasercjalizowana jako Lovable.
How Lovable Turns Prompts Into Applications
Opisz użytkowników aplikacji, strony, funkcje i zasady biznesowe.
Wygeneruj pierwszą wersję aplikacji i przejrzyj podgląd.
Podłącz bazę danych, logowanie, płatności lub zewnętrzne API.
Testuj zachowanie i dopracowuj kod, design i workflowy.
Opublikuj lub dalej utrzymuj wyeksportowany kod aplikacji.
Artykuł inżynieryjny Lovable z 1 czerwca 2026 opisuje przejście nowych projektów (od 13 maja 2026) na TanStack Start oparty na React i renderowanie po stronie serwera. Istniejące projekty React + Vite zachowują wcześniejszą architekturę; sprawdź rzeczywisty projekt przed wyborem implementacji funkcji serwerowej lub Edge Function.
Lovable Technical Specifications
Specyfikacja
Lovable
Kategoria
Zasilany AI kreator aplikacji webowych
Główna interakcja
Promptowanie w języku naturalnym
Framework nowych projektów
React i TanStack Start
Renderowanie
Renderowanie po stronie serwera w nowych projektach
Wcześniejsza architektura
React + Vite
Backend
Lovable Cloud i wspierane integracje
Uwierzytelnianie i baza
Wspierane
Zewnętrzne API
Konektory i niestandardowe żądania API
Integracja AI
Lovable AI i zewnętrzne API modeli
Dostęp do kodu
Generowany kod i workflowy GitHub
Współpraca
Funkcje workspace i projektów
Wdrożenie
Wbudowane i wspierane opcje zewnętrzne
Lovable to platforma do tworzenia aplikacji, a nie model bazowy. Dlatego parametry, okna kontekstu, przepustowość tokenów i wyniki MMLU nie opisują Lovable jako takiego. Dotyczą one konkretnych modeli AI używanych w procesie developmentu lub inferencji.
Can You Configure CometAPI in Lovable?
Tak — wewnątrz aplikacji generowanych przy użyciu Lovable. CometAPI może obsługiwać żądania do modeli poprzez chronioną funkcję backendową. To coś innego niż zmiana modelu LLM zasilającego własnego agenta kodującego Lovable.
Możesz zintegrować CometAPI w aplikacjach zbudowanych w Lovable, o ile wybrane modele i interfejsy są wspierane.
Nie oznacza to, że możesz bezpośrednio zastąpić model proxy developmentu używany przez samo Lovable.
Jeśli chcesz kontrolować, które modele wywołuje twoja aplikacja, skonfiguruj routing modeli w swoim kodzie po stronie serwera.
Integracja
Zgodność
Wyjaśnienie
Funkcje AI w wygenerowanej aplikacji
Tak
Chronione żądania API po stronie serwera
Chatbot lub asystent pisarski
Tak
Wywołuj wspierane modele czatowe CometAPI
Aplikacja multi-modelowa
Tak
Skonfiguruj ID modeli w routingu backendu
Zastąpienie wewnętrznego modelu Lovable
Brak standardowej opcji
Wybór modelu agenta wewnętrznego jest niezależny
Usługa backend przez CometAPI
Tak
Integracja poprzez niestandardowe HTTP lub funkcję serwerową
API zarządzania workspace Lovable
Oddzielne
Kontroluje zasoby platformy, a nie inferencję modeli
Wyjaśnienie Lovable dotyczące wewnętrznej orkiestracji modeli znajdziesz w artykule The model picker is a dead end. Poniższa integracja CometAPI dotyczy inferencji w aplikacji; ten artykuł nie twierdzi, że istnieje udokumentowane ustawienie CometAPI dla wewnętrznego agenta.
How the Lovable and CometAPI Architecture Works
Lovable wspiera to na dwa główne sposoby dla aplikacji, które tworzysz:
Secrets (zalecane przy bezpośrednim użyciu)
Przechowuj swój klucz CometAPI jako sekret projektu (np. COMETAPI_KEY lub OPENAI_API_KEY). Poproś Lovable na czacie projektu o integrację API poprzez bezpieczną Edge Function. Klucz pozostaje po stronie serwera i nigdy nie jest ujawniany w przeglądarce.
Niestandardowy konektor
Utwórz niestandardowy konektor w katalogu Connectors w workspace. Skonfiguruj bazowy URL (https://api.cometapi.com/v1), uwierzytelnianie (token Bearer lub nagłówek niestandardowy), a następnie dodaj połączenie wklejając klucz CometAPI. Żądania przechodzą przez bramę konektorów Lovable, utrzymując poświadczenia zaszyfrowane i poza twoim kodem.
Uwagi:
Wbudowane funkcje AI w aplikacjach używają zarządzanych kluczy Lovable i zużywają kredyty workspace. Nie możesz zamienić ich na klucz CometAPI (lub innego dostawcy).
Dla zewnętrznych wywołań AI wewnątrz twojej aplikacji (chatboty, generowanie itd.) podejście z sekretami lub konektorem niestandardowym działa i obciąża twoje konto CometAPI zamiast kredytów Lovable.
Brak dowodów na natywne/wstępnie dodane wsparcie CometAPI w katalogu konektorów Lovable według najnowszej dokumentacji; konfigurujesz to jako integrację zgodną z OpenAI lub niestandardowe API.
W skrócie: Lovable to silny kreator aplikacji „prompt-to-full-stack”, i tak — możesz skonfigurować i używać klucza CometAPI w bezpieczny sposób dla funkcji AI wewnątrz aplikacji, które tworzysz.
Przeglądarka wysyła dane wejściowe do backendu aplikacji. Backend odczytuje sekret, wywołuje CometAPI i zwraca wynik. Nigdy nie umieszczaj prywatnych kluczy API w komponentach React ani innym kodzie po stronie klienta.
How to Build an AI Writing Assistant With Lovable and CometAPI
Poniższy przykład buduje SmartWrite — asystenta pisarskiego AI z polem tekstowym, wyborem tonu i serwerowym żądaniem do CometAPI. Wybierz wzorzec granicy TanStack dla nowszego projektu lub kompletny punkt wejścia Supabase Edge Function dla starszego projektu. Wybierz jedną implementację backendu zgodną z twoim projektem, skonfiguruj sekrety i potwierdź obsługiwany model czatu na twoim koncie CometAPI. Przed publikacją uruchom przykład z własnymi sekretami projektu i modelem czatu dostępnym na twoim koncie.
Build a responsive AI writing assistant named SmartWrite.
Include a dashboard, a large prompt box, a tone selector
(Professional / Friendly / Concise), a Generate button,
and an output panel with Copy and Clear controls.
Use a clean responsive design with loading states and errors.
Implement AI generation only through a secure server function.
Never expose API credentials to the frontend.
Do not ship mock AI responses.
Step 2: Configure the CometAPI Credential
Wygeneruj klucz na swoim koncie CometAPI i zweryfikuj ID modelu czatu dostępnego dla tego konta. Ten poradnik używa bezpośredniej integracji backend, z COMETAPI_API_KEY i COMETAPI_MODEL jako konfiguracją po stronie serwera. Postępuj zgodnie z mechanizmem dostępu do sekretów wspieranym przez backend w twoim wygenerowanym projekcie.
Configuration example: Where to Store and Use CometAPI Credentials
Aby bezpiecznie połączyć CometAPI, poproś Lovable o utworzenie integracji po stronie serwera i zażądanie klucza API poprzez jego bezpieczny formularz. Możesz też zarządzać sekretami projektu w More → Settings → Secrets. Dla zewnętrznego backendu Supabase skonfiguruj sekrety w Supabase. Zobacz oficjalny przewodnik Lovable o Secretach.
Spełnij te cztery wymagania:
Przechowuj i odczytuj klucze API wyłącznie na serwerze. Dodaj COMETAPI_API_KEY poprzez bezpieczny interfejs Secrets projektu. Odczytuj go wyłącznie z sekretów po stronie serwera lub powiązań runtime. Nigdy nie umieszczaj klucza w kodzie frontendu, zmiennych środowiskowych dostępnych w przeglądarce, wiadomościach czatu ani zrzutach ekranu.
Trzymaj konfigurację API poza żądaniami frontendu. Skonfiguruj COMETAPI_MODEL na serwerze przy użyciu zweryfikowanego ID modelu CometAPI. Frontend powinien wysyłać tylko prompt i tone. Waliduj żądania względem dozwolonych pól i odrzucaj nieoczekiwane właściwości, w tym config, apiKey i model. Nigdy nie pozwalaj klientom dostarczać dowolnych kluczy API ani nadpisywać konfiguracji modelu po stronie serwera.
Użyj właściwej metody dostępu do sekretów dla runtime. Implementacja musi odpowiadać rzeczywistemu środowisku backendu w projekcie. Deploymenty oparte na Workerach używają wstrzykiwanych powiązań, podczas gdy Supabase Edge Functions mają dostęp do sekretów przez Deno.env. Nie zakładaj, że process.env, Deno.env i powiązania Workera są wymienne. Zweryfikuj sposób wstrzykiwania sekretów przed implementacją handlera API.
Zweryfikuj ochronę sekretów po publikacji. Sprawdź produkcyjny bundle JavaScript, panel Sieć w DevTools przeglądarki i logi aplikacji. Upewnij się, że klucze API nigdy nie pojawiają się w zasobach po stronie klienta, payloadach żądań, odpowiedziach, URL-ach ani logach. Potwierdź też, że żądania CometAPI są wykonywane na serwerze i że nieautoryzowane nadpisania konfiguracji są odrzucane.
Zapisany sekret nie oznacza automatycznie, że integracja jest bezpieczna lub działa. Integracja jest gotowa dopiero wtedy, gdy wywołania API po stronie serwera działają, żądania klientów nie mogą nadpisywać chronionych ustawień, a kontrole produkcyjne potwierdzają, że poświadczenia pozostają prywatne.
Skorzystaj z poniższego diagramu architektury, aby zidentyfikować granicę frontend–backend i miejsce przechowywania chronionych poświadczeń. Diagram jest koncepcyjny, a nie zrzutem interfejsu ustawień Lovable.
Prompt to give Lovable
Połącz SmartWrite bezpośrednio z CometAPI poprzez uwierzytelnioną funkcję backendową. Poproś mnie o COMETAPI_API_KEY w bezpiecznym formularzu sekretu i użyj COMETAPI_MODEL dla dokładnego ID modelu, który podam. Wysyłaj żądania POST do https://api.cometapi.com/v1/chat/completions tylko z serwera. Akceptuj prompt i tone, waliduj je, egzekwuj limity per-user i zwracaj do frontendu wyłącznie wygenerowany tekst. Użyj runtime backendu już obecnego w tym projekcie. Nie umieszczaj poświadczeń w czacie, kodzie frontendu ani żądaniach przeglądarki. Nie generuj pozornych wyników sukcesu. Wyjaśnij, jak przetestować integrację, i pokazuj zanonimizowane błędy, gdy zawodzi.
Lovable obsługuje również zarządzane konektory niestandardowe. Instrukcje tutaj celowo używają ścieżki bezpośredniej integracji opisanej w przewodniku integracji API, aby pasowały do pomocnika serwerowego poniżej.
Step 3: Test the CometAPI Chat Endpoint
Z zaufanego terminala Bash ustaw lokalnie COMETAPI_API_KEY i COMETAPI_MODEL, a następnie przetestuj POST https://api.cometapi.com/v1/chat/completions. Oficjalny przewodnik CometAPI’s official request guide dokumentuje bazowy URL, uwierzytelnianie Bearer i format odpowiedzi czatu. Wybierz model wspierający ten endpoint; zgodność nie gwarantuje każdej funkcji lub parametru dostawcy.
# Set COMETAPI_API_KEY securely in this terminal before running.
# Replace the model value with a chat model verified in your account.
export COMETAPI_MODEL="YOUR_VERIFIED_CHAT_MODEL_ID"
: "${COMETAPI_API_KEY:?Set COMETAPI_API_KEY first}"
curl --fail-with-body --max-time 45 \
https://api.cometapi.com/v1/chat/completions \
-H "Authorization: Bearer $COMETAPI_API_KEY" \
-H "Content-Type: application/json" \
--data "$(printf '{"model":"%s","messages":[{"role":"user","content":"Write a customer welcome email."}],"stream":false}' "$COMETAPI_MODEL")"
Punkt kontrolny: udana odpowiedź zawiera choices[0].message.content. Jeśli uwierzytelnianie się nie powiedzie lub model jest niedostępny, popraw to zanim połączysz interfejs użytkownika. Nie wklejaj pełnych poświadczeń ani prywatnych promptów do zrzutów diagnostycznych.
Step 4: Connect CometAPI Through a Secure Backend
Lovable obsługuje dwie architektury backendu:
Nowe projekty (TanStack Start): Użyj createServerFn, aby obsłużyć żądania API po stronie serwera.
Starsze projekty React + Vite: Użyj Supabase Edge Functions dla wywołań API po stronie serwera.
Wybierz implementację, która odpowiada architekturze twojego projektu.
Przechowuj COMETAPI_API_KEY i COMETAPI_MODEL jako powiązania Workera po stronie serwera. Jeśli twoje wdrożenie używa innego adaptera, użyj wspieranej przez niego metody dostępu do sekretów.
Dodaj COMETAPI_API_KEY i COMETAPI_MODEL do sekretów projektu Supabase, a następnie wdroż funkcję.
W obu podejściach trzymaj poświadczenia API na serwerze. Produkcyjne aplikacje powinny również zaimplementować uwierzytelnianie, walidację wejścia i limity wykorzystania per użytkownik.
Step 5: Connect the Lovable Interface
TanStack Start client
import { generate } from "./server/writing.functions";
const { text } = await generate({ data: { prompt, tone } });
// Render text as text content, not as trusted HTML.
React + Vite client
// Use the existing, signed-in Supabase client generated for your project.
const { data, error } = await supabase.functions.invoke("generate-writing", {
body: { prompt, tone },
});
if (error) throw new Error("Generation failed. Please try again.");
const text = data.text;
Użyj klienta odpowiadającego wybranemu wariantowi. TanStack używa wygenerowanego endpointu RPC; Supabase używa wdrożonej funkcji generate-writing. Żadne z tych podejść nie wymaga tworzenia osobnej ścieżki /api/generate. Przeglądarka może wysyłać swój token sesji aplikacji do uwierzytelniania, ale nigdy nie powinna wysyłać prywatnego poświadczenia CometAPI ani obiektu konfiguracji. Wyświetlaj stany ładowania, błędu i ponów oraz w interfejsie.
Step 6: Test and Publish the Application
Po publikacji testuj działający adres URL, a nie polegaj tylko na podglądzie w edytorze. Użyj prywatnego poświadczenia testowego i utrzymuj zrzuty/artefakty wolne od wartości sekretów. Wykonaj te kontrole przed szerszym udostępnieniem:
Przejrzyj zbudowany JavaScript po stronie przeglądarki, mapy źródeł i publiczną konfigurację pod kątem prywatnego klucza CometAPI. Szukaj lokalnie bez drukowania klucza w współdzielonym wyjściu terminala lub zapisywania go w raportach. Sama nazwa zmiennej nie jest dowodem wycieku wartości.
Przeanalizuj żądania w panelu Sieć przeglądarki, włączając payloady, nagłówki i odpowiedzi błędów. Żądanie powinno zawierać tylko dozwolone dane wejściowe do pisania i dane uwierzytelniające aplikacji; prywatny nagłówek Authorization CometAPI należy tylko do żądania serwer→dostawca.
Przejrzyj logi funkcji, logi aplikacji, ślady monitoringu i raporty błędów. Nie zapisuj kluczy, tokenów Bearer, obiektów konfiguracji ani pełnych treści błędów z upstream. Jeśli doszło do ekspozycji klucza, unieważnij go i wymień, a następnie usuń przyczynę ekspozycji przed ponownym testem.
Przetestuj żądania bez zalogowania i z wygasłą sesją; oba muszą być odrzucone przed wywołaniem dostawcy. Prześlij apiKey, config lub model jako dodatkowe pole i potwierdź odrzucenie. Przetestuj puste i zbyt duże prompty, nieprawidłowy ton, awarie dostawcy oraz wdrożony limit per użytkownik.
Potwierdź, że prawidłowe żądanie zalogowanego użytkownika generuje tekst przy użyciu wybranego modelu. Zapisz wersję wdrożenia i zanonimizowane wyniki testów pozytywnych/negatywnych; przykłady nie dowodzą, że twoje własne wdrożenie przeszło te kontrole.
What Can You Build With Lovable and CometAPI?
Projekt
Rola CometAPI
Potencjalne funkcje
Asystent pisarski AI
Tworzenie i przeredagowanie treści
Wybór tonu, szablony, edytor
Streszczanie dokumentów
Streszczanie wyodrębnionego tekstu
Uploady, Q&A o dokumentach, kluczowe punkty
Biurko wsparcia klienta
Klasyfikacja i draft odpowiedzi
Triage ticketów, sugerowane odpowiedzi
Asystent analityki biznesowej
Wyjaśnianie danych biznesowych
Pulpity KPI, wglądy w języku naturalnym
Zwykłe prompty dają czytelne odpowiedzi modelu.
Puste i zbyt duże prompty są bezpiecznie odrzucane.
Poświadczenia API nigdy nie pojawiają się w panelu sieci przeglądarki.
Przerwy w działaniu modeli zwracają niesensytywne komunikaty błędów.
Uwierzytelnieni użytkownicy mają limity żądań i monitoring aktywności.
Układ działa poprawnie na desktopie i urządzeniach mobilnych.
To są sugerowane wzorce projektów, a nie twierdzenia o ukończonych czy niezależnie zweryfikowanych wdrożeniach.
FAQ
How should a multi-tenant app prevent one customer’s records from appearing in another customer’s AI response?
Wyprowadzaj tenant i tożsamość użytkownika ze zweryfikowanej sesji serwerowej, a następnie zawężaj każde zapytanie do bazy danych przed zbudowaniem kontekstu modelu. Nigdy nie ufaj ID tenant dostarczonemu przez przeglądarkę ani nie polegaj na instrukcji w promptach, aby egzekwować dostęp. Tam, gdzie to wspierane, dodaj polityki RLS i zweryfikuj je na dwóch kontach testowych. Przetestuj ID rekordów, wyniki wyszukiwania, pliki eksportu i historię rozmów pod kątem dostępu między tenantami.
When is retrieval-augmented generation preferable to putting documents directly into every prompt?
Używaj retrieval, gdy kolekcja dokumentów jest zbyt duża, aby wysyłać ją każdorazowo, często się zmienia lub wymaga śledzenia źródeł. Parsuj i indeksuj dokumenty, pobieraj mały, relewantny zestaw i dołącz identyfikatory źródeł do odpowiedzi. Retrieval nadal wymaga ewaluacji: płynna odpowiedź może cytować nieistotny fragment. Utrzymuj filtry dostępu w zapytaniu retrieval i testuj pytania, na które odpowiedzi nie ma. Dla małego, stabilnego dokumentu bezpośredni kontekst może być prostszym startem.
How can streaming be added without displaying broken or misleading responses?
Traktuj streaming jako oddzielną funkcję transportową, a nie jednowierszową zamianę stream: false. Potwierdź format streamingu wybranego modelu, relatywuj zdarzenia po stronie backendu i obsłuż częściowe fragmenty, anulowanie, timeouty i utratę połączenia w UI. Oznacz przerwaną odpowiedź jako niekompletną i pozwól użytkownikowi świadomie ponowić. Unikaj wyświetlania streamowanego tekstu jako zaufanego HTML. Testuj na opublikowanej ścieżce hostingu, ponieważ pośrednicy mogą buforować strumień, który lokalnie wydawał się działać.
What should a fallback policy check before switching to another model?
Zdefiniuj, które awarie uzasadniają retry lub fallback, a następnie sprawdź, czy alternatywa wspiera ten sam endpoint, instrukcje, schemat narzędzi i format wyjścia. Ogranicz liczbę retry i unikaj cichej zmiany modeli dla workflowów wymagających spójnego zachowania. Oceń fallback na reprezentatywnych promptach, w tym przypadkach odmowy i złego formatu outputu. Jeśli output modelu wyzwala akcję zewnętrzną, chroń tę akcję osobnym potwierdzeniem lub zasadą idempotencji, aby ponowione generowanie nie powtórzyło działania.
What evidence should a team keep before promoting an AI feature from a pilot to regular use?
Utrzymuj wersjonowany zestaw ewaluacyjny z oczekiwanymi zachowaniami, konfiguracją modelu i promptów, zredagowanymi metadanymi żądań i zapisami nieudanych przypadków. Zdefiniuj kryteria akceptacji dla dokładności faktów, kształtu odpowiedzi, latencji i granic dostępu; porównuj wyniki po zmianach modelu lub promptów. Dla wrażliwych danych wejściowych zdecyduj, co może być przesyłane i przechowywane, zanim włączysz funkcję. To są sugerowane kontrole inżynieryjne, a nie twierdzenia, że Lovable czy CometAPI gwarantują określony wynik regulacyjny.
Conclusion: Is Lovable Worth Using?
Lovable ułatwia przekładanie pomysłów na działające aplikacje webowe. Jego narzędzia full-stack i integracje zewnętrzne są szczególnie przydatne do szybkiej walidacji koncepcji produktowych. CometAPI dodaje elastyczną ścieżkę inferencji modeli w czacie, pisaniu, analityce i innych workflowach zasilanych AI.
Zacznij od małej, zabezpieczonej aplikacji, przetestuj połączenie z CometAPI, przejrzyj wygenerowany kod i rozszerzaj po tym, jak kluczowe doświadczenie okaże się niezawodne.
