Průvodce spuštěním e-shopu
Nainstalujete si jednou Claude Code a pak u každé kapitoly zkopírujete připravený prompt. Claude odvede technickou práci před vašima očima, vy zakládáte účty, zadáváte své údaje a schvalujete.
Jeden prompt, který vás provede vším
Nejdřív si jednou nainstalujte Node.js a Claude Code, to je popsáno v kapitolách 1 až 4 podrobné dokumentace. Potom vložte do terminálu příkaz z e-mailu. E-shop se stáhne a Claude Code se s tímto promptem spustí sám. Pokud jste stáhli ZIP, spusťte ve složce s projektem příkaz claude a vložte prompt níže. Claude vás provede vším ostatním a bude po vás chtít jen účty, klíče a schválení.
Vložte tenhle prompt do Claude Code
Koupil jsem si StartEshop, celý projekt je v této složce. Nejsem technik. Chci, abys mě dovedl k vlastnímu e-shopu, který běží na mé doméně a přijímá skutečné objednávky. Jak spolu pracujeme: - Piš česky, krátce a bez odborných slov. Vždy jen jeden krok a předtím jednou větou řekni, co uděláš a proč. - Terminál, kód, konfiguraci a nasazení děláš ty. Účty u služeb zakládám já: napiš mi přesně, kam jít a co hledat, a když si nejsem jistý, zeptej se, co vidím na obrazovce. - Klíče a hesla do chatu nepíšu. Připrav soubor .env s prázdnými položkami a otevři mi ho, vložím je tam sám. Pak jen ověř, že jsou vyplněné, hodnoty nikdy nevypisuj. - Cokoliv, co stojí peníze, nejdřív schválím. - Průběžně zapisuj do souboru POSTUP.md, co je hotové a co zbývá, abych mohl kdykoli skončit a příště napsat jen „pokračuj podle POSTUP.md“. Než začneš, prostuduj projekt sám, včetně .env.example, src/config/store.ts a dokumentace v dph/, a návod na https://www.starteshop.cz/cs/lp/dokumentace/llms.txt. Pak mi ukaž plán v pár bodech. Pořadí, na kterém trvám: 1. Obchod nejdřív rozběhni u mě v počítači. 2. Ještě před prvním nasazením na internet vyměň výchozí heslo a token do administrace za silné a vyplň se mnou údaje firmy, tedy IČO, DIČ, adresu, bankovní účet a jestli jsem plátce DPH. 3. Nasaď obchod přes můj GitHub na Vercel a napoj mou doménu. Doména je v projektu na více místech, včetně webhooku ve Stripe a ověření v Resendu, najdi a změň všechna. 4. U každé služby mi řekni, co stojí. Upozorni mě, že AI funkce obchodu používají API placené podle spotřeby, zvlášť od mého předplatného Claude. 5. Projdi se mnou zkušební objednávku v testovacím režimu Stripe, ověř, že dorazily e-maily a faktura má mé údaje, a pak mě proveď přepnutím Stripe do ostrého režimu. Bezpečnost: před každým zásahem do databáze ji zazálohuj s datem v názvu souboru. Když se objeví chyba, přečti celý její text, vysvětli mi ji jednou větou a teprve pak ji oprav. Až přijde řeč na měsíční DPH, připomeň mi agenta /dph.
Vložte ho jako jednu zprávu. Claude se pak ptá sám, vy jen odpovídáte a potvrzujete.
Podrobné kapitoly nikam nezmizely. Kdykoliv se přepněte na Podrobnou dokumentaci a projděte si krok po kroku ten, který vás zajímá.
Jak tahle dokumentace funguje
Kapitoly 1 až 4 jsou jednorázová ruční příprava: nainstalujete Node.js a Claude Code. Od kapitoly 5 dál každá kapitola začíná promptem, který zkopírujete do Claude Code, a hned pod ním stojí, co Claude udělá a co bude chtít po vás.
Co děláte vy
- •Zakládáte účty u služeb, jsou vaše a znějí na vaše jméno.
- •Zadáváte vlastní přístupové údaje a klíče. Zůstávají ve vašem souboru .env a ve vašem účtu na Vercelu.
- •Schvalujete všechno, co stojí peníze, i každý zásah, na který se Claude zeptá.
- •Rozhodujete, jak má e-shop vypadat a fungovat, a výsledek si prohlédnete v prohlížeči.
Co dělá Claude Code
- •Píše a spouští příkazy v terminálu, takže je nemusíte znát.
- •Vytvoří a vyplní konfiguraci podle údajů, které mu nadiktujete.
- •Upravuje kód, texty, ceny dopravy i vzhled a změnu vám ukáže.
- •Nasadí e-shop na internet a pomůže dohledat příčinu, když něco nesedí.
Pracuje s vámi, ne za vašimi zády
Odhadovaný čas: 1 až 2 hodiny
Většinu času zaberou registrace u služeb, které musíte udělat vy. Vlastní nastavení a nasazení běží pod Claude Code.
Obsah
Co budete potřebovat
Jednorázový ruční krokNic z toho není technické. Stačí počítač, e-mail a chvíle klidu.
Základní požadavky
Počítač
Windows, Mac nebo Linux, cokoliv funguje
E-mailová adresa
Pro registrace u služeb (Vercel, Stripe a další)
Co obdržíte po nákupu
Instalační příkaz a ZIP soubor
Kompletní e-shop včetně administrace, faktur a účetního agenta. Příkaz z e-mailu ho nainstaluje sám, ZIP rozbalíte ručně. Od té chvíle je váš.
Platební karta (pro ověření ve Stripe a pro předplatné Claude Code)
Stripe ověřuje kartu při registraci. Předplatné Claude Code je samostatný měsíční poplatek u Anthropicu.
S čím počítat
- •Claude Code: vlastní předplatné u Anthropicu, viz kapitola 4.
- •Vercel, Neon a Resend: na rozjezd obvykle stačí bezplatné nebo levné tarify, podle podmínek služeb a návštěvnosti. Obchod můžete provozovat i na vlastním serveru.
- •Stripe: neplatíte měsíčně, jen provizi z uskutečněných plateb.
- •Doména: roční poplatek u registrátora, pokud ji chcete vlastní.
Programovat nemusíte
Slovníček pojmů
Jen pojmy, na které v tomhle průvodci opravdu narazíte. Nic víc znát nepotřebujete.
Dvě slova, která uvidíte pořád
Prompt
Věta nebo odstavec, kterým Claude Code řeknete, co má udělat. V každé kapitole máte jeden připravený, stačí ho zkopírovat.
Soubor .env
Textový soubor ve složce projektu, kde jsou uložené vaše klíče ke službám. Nikdy se nenahrává na internet a nepatří do zálohy kódu.
Programy na vašem počítači
Claude Code
Váš asistent. Běží v terminálu, čte složku projektu a dělá v ní práci, kterou mu zadáte. Vidíte přitom každý krok.
Terminál
Okno pro zadávání příkazů. Na Windows Příkazový řádek (cmd), na Macu Terminal. Budete ho otevírat hlavně proto, abyste spustili Claude Code.
Node.js
Základ, na kterém e-shop běží. Nainstalujete jednou v kapitole 3 a víc se o něj nestaráte.
Online služby
Vercel
Hosting, kde e-shop běží na internetu. Na rozjezd bývá zdarma nebo levný a stará se o rychlost a dostupnost. Místo něj můžete použít i jiný hosting nebo vlastní server.
Neon
Databáze. Tady bydlí produkty, objednávky a zákazníci. Na rozjezd obvykle stačí bezplatný tarif.
Stripe
Platební brána pro karty, Apple Pay a Google Pay. Platíte jen provizi z transakcí.
Resend
Odesílání e-mailů zákazníkům, tedy potvrzení objednávky a informace o odeslání.
Zásilkovna (Packeta)
Doprava. Z e-shopu si zákazník vybere výdejní místo, vy pak dávkově vystavujete štítky.
GitHub(volitelné)
Úložiště kódu vašeho e-shopu. Není povinné, ale díky němu Vercel nasadí každou změnu sám.
Nemusíte tomu rozumět do hloubky
Instalace Node.js
Jednorázový ruční krokProč ruční instalace? Node.js je základ, na kterém běží jak e-shop, tak samotný Claude Code. Musí být tedy dřív než on. Je to poslední instalace, kterou děláte sami.
- 1
Jděte na nodejs.org
- 2
Klikněte na tlačítko "Get Node.js®"
- 3
Na stránce Download vyberte verzi LTS (doporučená)
Stránka sama pozná váš systém a nabídne správný soubor
- 4
Otevřete stažený soubor a klikejte "Next" až do konce
- 5
Restartujte počítač
Jak poznáte, že to vyšlo
Registrace Claude Code
Jednorázový ruční krokClaude Code je samostatná služba od Anthropicu. Potřebuje vlastní účet a vlastní předplatné, které není součástí ceny e-shopu. Bez něj zbytek průvodce nespustíte.
AVytvoření účtu u Anthropicu
- 1
Jděte na console.anthropic.com
- 2
Klikněte na "Sign Up" a vytvořte si účet (můžete použít Google účet)
- 3
Vyberte si tarif, obvykle stačí Claude Pro
Tarify:
- Claude Pro: nižší měsíční paušál, pro rozjezd e-shopu obvykle stačí
- Claude Max: vyšší paušál pro intenzivní každodenní používání
Aktuální ceny a limity najdete přímo u Anthropicu, mění se v čase. Předplatné bývá levnější než platit za API kredity.
BInstalace Claude Code
- 1
Otevřete terminál:
- Windows: Win + R, napište
cmd, Enter - Mac: Cmd + mezerník, napište "Terminal", Enter
- Windows: Win + R, napište
- 2
Zkopírujte tento příkaz do terminálu a stiskněte Enter:
npm install -g @anthropic-ai/claude-code - 3
Počkejte, až instalace doběhne (může to trvat minutu)
CPrvní spuštění a přihlášení
- 1
V terminálu napište:
claude - 2
Otevře se prohlížeč a přihlásíte se ke svému účtu u Anthropicu
- 3
Přihlaste se a povolte přístup
- 4
Claude Code je připravený. Od téhle chvíle mu píšete přímo v terminálu
Odsud dál už jedete s promptem
Vytvoření účtů u služeb
Účty musíte založit vy, znějí na vaše jméno a vy je platíte. Claude vás jimi provede, řekne, kde přesně kliknout a který údaj si zkopírovat.
Zkopírujte tento prompt do Claude Code
Jsem majitel tohohle e-shopu a nemám technické znalosti. Otevři si v projektu soubor .env.example a proveď mě po jedné službami, u kterých si musím založit účet: 1. Neon (databáze, klíč DATABASE_URL) 2. Stripe (platby kartou, klíče STRIPE_SECRET_KEY a NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY) 3. Resend (e-maily zákazníkům, klíč RESEND_API_KEY) 4. Zásilkovna / Packeta (doprava, klíče PACKETA_API_KEY a PACKETA_API_PASSWORD) 5. Vercel (hosting, kde e-shop poběží) U každé služby mi řekni, na jakou adresu jít, co tam vyplnit, který údaj si mám zkopírovat a co služba stojí. Projdi .env.example celý, a pokud v něm jsou další služby, třeba klíče pro AI funkce obchodu, řekni mi, k čemu jsou a jestli je potřebuji hned. AI funkce se platí podle spotřeby, zvlášť od mého předplatného Claude. Registrace dělám já, ty jen říkej, co mám klikat. Klíče si zatím jen uložím stranou, do projektu je vkládat nebudeme. Po každé službě počkej, až ti napíšu hotovo.
Hranaté závorky nahraďte svými údaji.
Co Claude udělá
- •Přečte soubor .env.example a řekne přesně, které klíče tenhle e-shop potřebuje a k čemu slouží.
- •Provede vás jednou službou po druhé a počká, než dokončíte registraci.
- •Upozorní, co je zdarma a kde platíte provizi nebo paušál.
- •Poradí s volbami, u kterých se registrace ptá, například region databáze eu-central-1 (Frankfurt) kvůli rychlosti v Česku.
Co bude chtít po vás
- •Abyste registrace proklikali sami, účty jsou vaše.
- •Potvrzení hotovo po každé službě, ať ví, kdy pokračovat.
- •Zkopírované klíče si zatím jen uložte stranou, vkládat je budete v kapitole 6.
Ruční postup krok za krokemRozbalte, pokud si to chcete udělat sami nebo chcete vědět, co se děje pod rukama.
Neon
Databáze, kde se ukládají produkty a objednávky
- 1
Jděte na neon.tech a zaregistrujte se
- 2
Klikněte na "New Project"
- 3
Pojmenujte projekt (třeba "muj-eshop") a vyberte region eu-central-1 (Frankfurt)
Po vytvoření zkopírujte Connection string. To je hodnota pro DATABASE_URL.
Stripe
Platby kartou, Apple Pay a Google Pay
- 1
Jděte na stripe.com a vytvořte účet
- 2
Projděte ověřením firmy nebo živnosti (můžete dokončit později, v testovacím režimu zatím funguje vše)
- 3
V Dashboardu: Developers → API keys, zkopírujte oba klíče
Publishable key je NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, Secret key je STRIPE_SECRET_KEY. Třetí klíč, podpis webhooku, přidáte v kapitole 9.
Resend
Odesílání e-mailů zákazníkům
- 1
Jděte na resend.com a zaregistrujte se
- 2
Otevřete API Keys a vytvořte nový klíč
- 3
Až budete mít vlastní doménu, ověřte ji v sekci Domains, aby e-maily chodily z vaší adresy
Klíč je hodnota pro RESEND_API_KEY. Bez ověřené domény odesíláte jen z testovací adresy Resendu.
Zásilkovna (Packeta)
Doprava a výdejní místa
- 1
Jděte na client.packeta.com a založte účet
- 2
V klientské sekci najděte API heslo a API klíč
- 3
Klíč potřebujete dvakrát, jednou pro server a jednou pro výběr výdejního místa v košíku
Hodnoty pro PACKETA_API_KEY, PACKETA_API_PASSWORD a NEXT_PUBLIC_PACKETA_API_KEY.
Vercel
Hosting, kde bude e-shop běžet
- 1
Jděte na vercel.com
- 2
Klikněte na "Sign Up", ideálně přes GitHub, ať vám pak nasazení běží samo
- 3
Potvrďte e-mail, pokud to Vercel vyžaduje
Než půjdete dál, měli byste mít:
- ✓ Connection string z Neonu
- ✓ Stripe Publishable key a Secret key
- ✓ Resend API key
- ✓ Packeta API klíč a heslo
- ✓ Účet na Vercelu
Příprava projektu
Pokud jste použili příkaz z e-mailu, máte tenhle krok hotový a Claude Code už běží s průvodcem. Jinak rozbalte ZIP na plochu, otevřete ve složce terminál, napište claude a vložte tenhle prompt.
Zkopírujte tento prompt do Claude Code
Připrav tenhle projekt k prvnímu spuštění na mém počítači. Postupuj po krocích a po každém mi řekni, co se stalo: 1. Vytvoř soubor .env podle .env.example. 2. Klíče do chatu psát nebudu. Nech je v .env prázdné a otevři mi soubor, vložím tam sám DATABASE_URL z Neonu, oba klíče ze Stripe, RESEND_API_KEY a klíče Packeta. Pak jen ověř, že jsou vyplněné, hodnoty nevypisuj a nic si nevymýšlej. 3. Pro ADMIN_TOKEN a ADMIN_PASSWORD vygeneruj silné náhodné hodnoty, zapiš je do .env a řekni mi, kde je tam najdu, ať si je uložím. Do chatu je nevypisuj. 4. NEXT_PUBLIC_BASE_URL a NEXT_PUBLIC_URL nastav zatím na http://localhost:3000. 5. Spusť npm install, potom npx prisma generate a npx prisma db push, aby se v databázi vytvořily tabulky, a pak npm run db:seed, které přidá pár ukázkových produktů. 6. Spusť npm run dev a řekni mi, na jaké adrese uvidím e-shop a na jaké se přihlásím do administrace. Kdyby něco selhalo, oprav to a vysvětli mi jednou větou, co to bylo.
Hranaté závorky nahraďte svými údaji.
Co Claude udělá
- •Vytvoří soubor .env s vašimi klíči. Zůstává jen na vašem počítači, do zálohy kódu se nedostane.
- •Vygeneruje silné admin heslo a token, ať nezůstane výchozí.
- •Nainstaluje závislosti a vytvoří v prázdné databázi všechny tabulky e-shopu.
- •Spustí e-shop na http://localhost:3000 a nechá ho běžet.
Co bude chtít po vás
- •Klíče, které jste si uložili v kapitole 5.
- •Souhlas, než přepíše soubor, který už existuje.
- •Abyste si zapsali admin heslo. Přihlašujete se jím do administrace na /admin/login.
Ruční postup krok za krokemRozbalte, pokud si to chcete udělat sami nebo chcete vědět, co se děje pod rukama.
1. Rozbalte projekt
Rozbalte ZIP soubor a přesuňte složku, kam chcete, třeba na plochu.
2. Otevřete terminál ve složce
Windows: Otevřete složku, pravý klik, "Otevřít v Terminálu"
Mac: Pravý klik na složku, "New Terminal at Folder"
3. Spusťte Claude Code
V terminálu napište claude a vložte prompt výše.
Co se do .env vyplňuje
Soubor .env.example je vzor se všemi názvy. Pro rozjezd potřebujete tyhle:
- •DATABASE_URL: připojení k databázi z Neonu
- •ADMIN_TOKEN a ADMIN_PASSWORD: přístup do administrace, generuje Claude
- •NEXT_PUBLIC_BASE_URL a NEXT_PUBLIC_URL: adresa e-shopu
- •STRIPE_SECRET_KEY, NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, STRIPE_WEBHOOK_SECRET: platby
- •RESEND_API_KEY: odesílání e-mailů
- •PACKETA_API_KEY, PACKETA_API_PASSWORD, NEXT_PUBLIC_PACKETA_API_KEY: doprava
- •PROJECT_NAME a úložiště obrázků: BLOB_READ_WRITE_TOKEN nebo klíče R2
- •ANTHROPIC_API_KEY: nepovinné, pro AI asistenta v e-shopu
Lokální vývoj vs. produkce
E-shop běží ve dvou podobách: jedna jen pro vás na počítači, druhá pro zákazníky na internetu. Změny nejdřív zkusíte doma, teprve pak je pošlete ven.
Zkopírujte tento prompt do Claude Code
Chci pracovat bezpečně: nejdřív u sebe, teprve potom naostro. Spusť e-shop na mém počítači příkazem npm run dev a nech ho běžet, ať v prohlížeči vidím změny hned. Až ti řeknu, že jsem s úpravou spokojený, ověř příkazem npm run build, že je e-shop připravený k nasazení. Ale pozor: npm run build v tomhle projektu spouští i prisma db push, takže mi předtím vždycky řekni, na kterou databázi ukazuje DATABASE_URL v .env, a počkej na moje potvrzení.
Hranaté závorky nahraďte svými údaji.
Co Claude udělá
- •Spustí lokální verzi na http://localhost:3000 a nechá ji běžet, změny se projeví během vteřin.
- •Před nasazením ověří, že se e-shop poskládá bez chyb.
- •Řekne, na kterou databázi je projekt zrovna napojený, ať omylem nesáhnete do ostré.
Co bude chtít po vás
- •Potvrzení, než spustí build, protože zasahuje i do struktury databáze.
- •Vaše oči. Změnu si prohlédněte v prohlížeči, než půjde ven.
Lokální vývoj
Na vašem počítači
E-shop vidíte jen vy. Na testování a úpravy.
- •Zkoušení nových funkcí
- •Úpravy designu a obsahu
- •Experimentování bez rizika
Adresa:
http://localhost:3000Produkce
Na internetu (Vercel)
E-shop vidí zákazníci. Ostrý provoz.
- •Skutečné objednávky
- •Skutečné platby
- •Skutečné e-maily zákazníkům
Adresa:
https://vas-eshop.vercel.appJedna věc, o které je dobré vědět
Příkaz npm run build v tomhle projektu nejdřív spustí prisma generate a prisma db push a teprve pak sestaví e-shop. Sáhne tedy i do struktury databáze, na kterou ukazuje DATABASE_URL. Proto v promptu výše necháváte Claude, ať vám nejdřív řekne, o kterou databázi jde.
Příkazy, které uvidíteSpouští je za vás Claude Code. Tady jen proto, abyste věděli, co se v terminálu děje.
npm installjednou na začátkuStáhne knihovny, ze kterých je e-shop poskládaný.
npm run devlokální vývojSpustí e-shop na http://localhost:3000.
npm run buildpřed nasazenímOvěří, že e-shop jde sestavit. Zároveň synchronizuje strukturu databáze.
npx prisma db pushdatabázePromítne strukturu tabulek do databáze.
npm run db:studionahlédnutí do datOtevře jednoduchý prohlížeč obsahu databáze.
git add . && git commit -m "popis" && git pushnasazení změnPošle změny na GitHub, Vercel je pak nasadí sám.
claudeváš asistentSpustí Claude Code ve složce projektu.
Doporučené pořadí
Nasazení na internet
Teď se e-shop dostane na veřejnou adresu. Nejjednodušší cesta je přes GitHub, protože pak Vercel nasadí každou další změnu sám.
Zkopírujte tento prompt do Claude Code
Nasaď tenhle e-shop na internet přes Vercel. Nejdřív mi jednou větou řekni, co budeš dělat, a počkej na moje ano. Pak: 1. Zkontroluj, že soubor .env, složka dph/vat a dph/company.json nejdou do gitu. 2. Založ git repozitář a nahraj projekt na můj GitHub, do GitHubu se přihlásím já. 3. Projdi .env.example a vypiš mi všechny proměnné, které mám vložit ve Vercelu, a u každé řekni, odkud ji vzít. Hodnoty zkopíruju ze svého .env sám, ty je nevypisuj. Zkontroluj, že ADMIN_PASSWORD a ADMIN_TOKEN už nejsou výchozí. 4. Po nasazení mi dej veřejnou adresu, otevři ji a zkontroluj, že se e-shop načte a že se dá přihlásit do administrace.
Hranaté závorky nahraďte svými údaji.
Co Claude udělá
- •Ověří, že se vaše klíče ani účetní doklady nedostanou do veřejného úložiště kódu.
- •Připraví projekt pro GitHub a nahraje ho tam.
- •Vypíše přesně ty proměnné, které tenhle e-shop potřebuje, a řekne, odkud každou vzít.
- •Po nasazení zkontroluje, že veřejná adresa opravdu funguje.
Co bude chtít po vás
- •Přihlášení k GitHubu a k Vercelu, obojí děláte vy.
- •Vložení proměnných ve Vercelu, klíče zadáváte vlastníma rukama.
- •Souhlas, než cokoliv poprvé zveřejní.
Ruční postup krok za krokemRozbalte, pokud si to chcete udělat sami nebo chcete vědět, co se děje pod rukama.
Možnost A: přes GitHub (doporučeno)
- 1
Řekněte Claude Code:
"Vytvoř nový GitHub repozitář a nahraj tam tenhle projekt"
- 2
Ve Vercelu klikněte na "Add New Project"
- 3
Propojte GitHub účet a vyberte repozitář
- 4
V sekci "Environment Variables" přidejte všechny proměnné z
.env - 5
Klikněte na "Deploy" a počkejte
Možnost B: přes Vercel CLI
- 1
Nainstalujte Vercel CLI:
npm install -g vercel - 2
Spusťte nasazení:
vercel - 3
Odpovězte na otázky, většinou stačí Enter
- 4
Po nasazení doplňte environment variables ve Vercelu
Hotovo
vas-projekt.vercel.appNastavení plateb (Stripe)
Aby e-shop poznal, že zákazník zaplatil, musí mu to Stripe umět oznámit. Tomu oznámení se říká webhook a nastavíte ho jednou.
Zkopírujte tento prompt do Claude Code
Pomoz mi zprovoznit platby kartou. Otevři si soubor src/app/api/stripe/webhook/route.ts a vypiš mi události, které tenhle e-shop zpracovává. Pak mě naveď krok za krokem: kde ve Stripe dashboardu webhook založit, jakou zadat URL (adresa mého e-shopu a na konci /api/stripe/webhook) a které události zaškrtnout. Podpisový klíč začínající whsec_ si zkopíruju já, ty mi řekni, kam ho vložit do .env i do Vercelu a co se musí stát, aby se změna projevila. Nakonec se mnou projdi zkušební objednávku v testovacím režimu Stripe a řekni mi, kde v administraci ji uvidím. Až budu chtít přijímat skutečné platby, proveď mě aktivací účtu ve Stripe a přepnutím do ostrého režimu: ostré klíče v .env i ve Vercelu a nový webhook pro ostrý režim, protože ten testovací v něm neplatí.
Hranaté závorky nahraďte svými údaji.
Co Claude udělá
- •Vyčte přímo z kódu e-shopu, které události má webhook poslouchat, takže seznam vždy sedí s vaší verzí.
- •Sestaví přesnou adresu webhooku podle vaší domény.
- •Řekne, kam podpisový klíč patří a proč musí být i ve Vercelu.
- •Projde s vámi zkušební objednávku od košíku po fakturu.
Co bude chtít po vás
- •Přihlášení do Stripe dashboardu a proklikání webhooku, to je na vás.
- •Zkopírovaný podpisový klíč whsec_.
- •Rozhodnutí, kdy přepnout z testovacího režimu na ostrý.
Ruční postup krok za krokemRozbalte, pokud si to chcete udělat sami nebo chcete vědět, co se děje pod rukama.
- 1
V Stripe dashboardu: Developers → Webhooks
- 2
Klikněte na "Add endpoint"
- 3
Jako Endpoint URL zadejte:
https://vase-domena.cz/api/stripe/webhookDoménu nahraďte svou skutečnou doménou nebo adresou z Vercelu.
- 4
Vyberte události, které e-shop zpracovává:
- • payment_intent.succeeded
- • payment_intent.payment_failed
- • payment_intent.processing
- • checkout.session.completed
- • charge.succeeded
- • charge.updated
- 5
Klikněte na "Add endpoint"
- 6
Zkopírujte Signing secret (whsec_...) a přidejte ho do .env i do Vercelu jako
STRIPE_WEBHOOK_SECRET
Přidání vlastní domény
Doménu si kupujete vy u registrátora. Pak se musí přenastavit na několika místech naráz, což je přesně to, co Claude ohlídá.
Zkopírujte tento prompt do Claude Code
Koupil jsem doménu [moje-domena.cz] a chci ji používat místo adresy s .vercel.app. Projdi se mnou všechna místa, kde se doména mění, a co půjde, uprav rovnou: 1. DNS záznamy, které mám nastavit u registrátora, ukaž mi je z Vercelu. 2. NEXT_PUBLIC_BASE_URL a NEXT_PUBLIC_URL v souboru .env i ve Vercelu. 3. baseUrl a supportUrl v souboru src/config/store.ts. 4. Adresa webhooku ve Stripe. 5. Ověření domény v Resendu, aby e-maily zákazníkům chodily z mojí adresy. Změny v projektu udělej ty, u služeb mi řekni, co mám naklikat, a na konci mi dej seznam, co jsem odkliknul a co ještě zbývá.
Hranaté závorky nahraďte svými údaji.
Co Claude udělá
- •Upraví adresu e-shopu v projektu, tedy .env a src/config/store.ts.
- •Připomene místa, na která se běžně zapomíná: webhook ve Stripe a ověřená doména v Resendu.
- •Dá vám na konci seznam, co je hotové a co ještě čeká na vás.
Co bude chtít po vás
- •Nákup domény a přístup k DNS u registrátora.
- •Naklikání DNS záznamů, které Vercel vypíše.
- •Trpělivost, propagace DNS bývá otázka minut, výjimečně hodin.
Ruční postup krok za krokemRozbalte, pokud si to chcete udělat sami nebo chcete vědět, co se děje pod rukama.
- 1
Kupte si doménu u registrátora (Wedos, Forpsi, IONOS a další)
- 2
Ve Vercelu: Settings → Domains
- 3
Přidejte svoji doménu
- 4
Vercel vám vypíše DNS záznamy, které nastavíte u registrátora
- 5
Počkejte na propagaci DNS, obvykle minuty, nejdéle 24 hodin
První kroky po spuštění
E-shop běží. Teď z něj uděláme váš obchod. Začněte prvním promptem, ostatní jsou na dalších kartách a berete si je, jak potřebujete.
Nejdřív identita a heslo
Než pustíte dovnitř zákazníky, změňte přístupy do administrace a vyplňte údaje, které se objevují na fakturách a v e-mailech.
Zkopírujte tento prompt do Claude Code
Spouštím e-shop naostro, pojďme z něj udělat můj obchod. 1. Vygeneruj nové silné hodnoty pro ADMIN_PASSWORD a ADMIN_TOKEN, změň je v .env i ve Vercelu a řekni mi, kde je v .env najdu, ať si je uložím. Do chatu je nevypisuj. 2. Otevři src/config/store.ts a postupně se mě zeptej na: název e-shopu a tagline, název firmy, adresu, IČO a DIČ, kontaktní a supportní e-mail, telefon, číslo účtu a IBAN pro faktury, odesílací e-mail a jestli jsem plátce DPH. Vyplň jen to, co ti řeknu, nic si nevymýšlej. 3. Až to bude hotové, řekni mi, co z těchto údajů se objeví na fakturách, co v e-mailech a co v patičce e-shopu.
Hranaté závorky nahraďte svými údaji.
Co Claude udělá
- •Vymění výchozí přístupy do administrace za vaše vlastní, na počítači i na Vercelu.
- •Vyplní firemní údaje na jednom místě, odkud si je berou faktury, e-maily i patička.
- •Nastaví, jestli jste plátce DPH, což pak platí i pro účetního agenta z kapitoly 12.
Co bude chtít po vás
- •Vaše skutečné firemní údaje, IČO, DIČ a bankovní účet.
- •Uložení nového admin hesla, přihlašujete se jím na /admin/login.
- •Nasazení změny, ať se nové hodnoty projeví i na ostré adrese.
Další prompty, které se vám budou hodit
Produkty a kategorie
Chci naplnit e-shop zbožím. Ukaž mi v administraci, kde se přidávají kategorie a produkty, a jeden vzorový produkt mi tam založ, ať vidím, jak vypadá hotová položka. Mám produkty v tabulce, takže mi poraď i s hromadným importem z Excelu a se sloupci, které šablona čeká.
Doprava a platby
Ceny a názvy dopravy a plateb jsou v souboru src/lib/order-options.ts. Vypiš mi, co tam teď je, a pak nastav: [Zásilkovna 89 Kč, doručení na adresu 99 Kč, dobírka 39 Kč, osobní odběr zdarma]. Zkontroluj, že se to správně propíše do košíku a do potvrzovacího e-mailu.
Texty e-shopu
Texty e-shopu jsou přímo ve stránkách a komponentách (src/app, src/components). Najdi a změň mi [popis textu, který chcete upravit] a ukaž mi, kde všude se objevuje.
Vzhled
Chci změnit hlavní barvu e-shopu na [barva]. Barvy nejsou v jednom souboru, jsou to třídy Tailwindu přímo v komponentách, takže mi nejdřív najdi a vypiš, kde se hlavní barva používá, navrhni změnu a ukaž mi ji na localhostu. Potvrdím ti to, teprve pak to prosím doprav všude.
E-maily zákazníkům
Odesílací adresa je v src/config/store.ts v sekci email. Nastav ji na [adresa], zkontroluj, jestli je doména ověřená v Resendu, a ukaž mi náhled potvrzení objednávky, ať vidím, jak e-mail vypadá, než ho dostane první zákazník.
Zkušební objednávka
Projdi se mnou celou objednávku v testovacím režimu Stripe: od vložení do košíku po potvrzovací e-mail a fakturu. Řekni mi, kde v administraci objednávku najdu, co si mám u ní zkontrolovat a jak poznám, že se platba správně spárovala.
Když si nevíte rady
Agenti: měsíční DPH a zákaznická podpora
E-shop má vestavěného účetního agenta pro Claude Code. Jednou za měsíc napíšete /dph a dostanete hotová XML pro přiznání k DPH, kontrolní hlášení a případně souhrnné hlášení. Jen je nahrajete na mojedane.cz.
Každý měsíc stačí napsat
/dph
Nebo běžnou větou: udělej DPH za červenec. Agent se doptá na měsíc a na složku s přijatými fakturami.
Co Claude udělá
- •Vydané faktury a dobropisy si vezme přímo z databáze vašeho e-shopu.
- •Přijaté faktury z vaší složky přečte, i když jsou v podsložkách nebo dvakrát.
- •Nezávislí auditoři projdou duplicity, doklady na cizí subjekt, reverse charge z EU, dobropisy a doklady mimo měsíc.
- •Vygeneruje XML pro DP3, KH a SHV a zvaliduje je proti schématům finanční správy.
Co bude chtít po vás
- •Složku s přijatými fakturami za daný měsíc, klidně jen tak nasypanou.
- •Rozhodnutí u sporných dokladů. Agent je předloží a vysvětlí, rozhodujete vy.
- •Nahrání hotových XML na mojedane.cz, podání dělá vždy plátce sám.
Jednorázová příprava, zhruba deset minut
- •V src/config/store.ts mít isVatPayer: true a správnou vatRate. To je zdroj pravdy pro faktury i pro agenta.
- •Vyplnit dph/company.json podle vzoru dph/company.example.json: DIČ, sídlo, kódy finančního úřadu, OKEČ, jednatel. Kódy najdete na kterémkoliv minulém přiznání.
- •Spustit dph/scripts/setup.sh, které zkontroluje nástroje pro čtení PDF.
- •Obojí za vás udělá Claude, když spustíte /dph poprvé.
Jak měsíc probíháRozbalte, pokud si to chcete udělat sami nebo chcete vědět, co se děje pod rukama.
- 1
Přijaté faktury od dodavatelů nasypete do jedné složky (PDF, klidně i s podsložkami a duplicitami).
- 2
Vydané faktury a dobropisy si agent vezme přímo z databáze e-shopu.
- 3
Přijaté faktury přečtou agenti a nezávislí auditoři je zkontrolují: duplicity, faktury vystavené na někoho jiného, reverse charge z EU, dobropisy, doklady mimo měsíc.
- 4
Co vyžaduje rozhodnutí, s vámi agent probere. Nic nerozhoduje za vás.
- 5
Vygeneruje XML (DP3, KH, SHV), zvaliduje je proti schématům finanční správy a vy je nahrajete v pořadí DP3, KH, SHV. Když EPO něco vytkne, vložte hlášku agentovi a opraví to.
Termín
Přiznání i kontrolní hlášení se podávají do 25. dne následujícího měsíce. Po podání dejte agentovi složku s opisy a potvrzeními z EPO, uloží je k danému měsíci.
Vyzkoušejte si to v demo administraci
V sekci Účetnictví demo adminu je záznam skutečného běhu agenta na sedmi vzorových fakturách. Přehrajete si ho krok za krokem: rozhodnutí u každé faktury, nálezy auditorů i výsledná XML.
Otevřít demoCo je automatizované a co na požádání
Zákaznická podpora s agenty
E-shop má vestavěnou zákaznickou podporu, kterou dělají agenti Claude. Převezmou tikety z formuláře na webu (a pokud chcete, i e-maily ze schránky podpory), připraví odpovědi, zkontrolují je a pošlou. Co musíte rozhodnout vy, čeká v administraci na stránce Čeká na vás.
Zapnete ji jednou větou
/podpora
Nebo běžně: chci zákaznickou podporu. Claude s vámi projde údaje obchodu, pravidla vracení a reklamací, schránku a klíč pro agenty a spustí první běh.
Co Claude udělá
- •Odpovídá zákazníkům v jazyce obchodu (čeština nebo angličtina): kde je objednávka, odstoupení, reklamace, zrušení, změna e-mailu.
- •Každou odpověď před odesláním zkontroluje kód i druhý agent: žádné vymyšlené částky, termíny ani sliby.
- •Začíná ve zkušebním režimu: odpovědi čekají na vaše schválení, naostro ji přepnete, až budete spokojení.
- •Po každém běhu vám pošle souhrn, co odeslala a co čeká na vás.
Co bude chtít po vás
- •Schválení, úpravy a výjimky v administraci (Čeká na vás).
- •Vracení peněz: podpora peníze nikdy neposílá, vrátíte je sami a v administraci kliknete Vráceno.
Agenti podpory běží na vlastním klíči Anthropic API, placeném podle spotřeby zvlášť od předplatného Claude (nebo na tokenu z claude setup-token). Klíč si uložíte při nastavení, do chatu se nepíše.
Když se něco pokazí
Chybová hláška není konec světa. Skoro vždy stačí ji celou přečíst a nechat ji Claude Code opravit.
První pomoc: zkopírujte celou chybu
Nezkracujte ji a nepřepisujte vlastními slovy. Označte celý text hlášky v terminálu nebo v prohlížeči, vložte ho do Claude Code a nechte si vysvětlit, co se stalo. Claude pracuje ve vašem projektu a pod vaším dohledem, takže než začne něco měnit, může vám nejdřív říct co a proč.
Univerzální prompt na jakoukoliv chybu
Tady je chyba, kterou mi to vypsalo: [vlož celý text chyby]. Diagnostikuj příčinu v tomto projektu a oprav ji; než něco změníš, řekni mi co a proč.
Tenhle prompt stačí na většinu situací. Případy níž jsou jen zkratka pro to, na co se naráží nejčastěji.
Čtyři nejčastější zádrhely
Port 3000 je obsazený
Po npm run dev to hlásí, že port 3000 už někdo používá, nebo se e-shop otevře na jiném čísle portu. Obvykle vám na pozadí běží dev server z minula.
Zkopírujte tento prompt do Claude Code
Když spustím npm run dev, hlásí to, že port 3000 je obsazený. Zjisti, jaký proces ten port drží, a nabídni mi dvě možnosti: ukončit ten proces, nebo spustit dev server na jiném portu. Než něco ukončíš, řekni mi, o jaký proces jde.
Lokální adresa e-shopu je http://localhost:3000, viz kapitola 7.
Chyba databáze nebo špatný DATABASE_URL
E-shop nenaběhne a hlásí problém s připojením nebo chybějící tabulky. Nejčastěji je databáze na Neonu uspaná po nečinnosti, nebo je v souboru .env neúplný connection string.
Zkopírujte tento prompt do Claude Code
E-shop hlásí chybu databáze: [vlož celý text chyby]. Přečti si DATABASE_URL v mém souboru .env, ověř, jestli je connection string kompletní a jestli se na databázi dá připojit. Pokud jede na Neonu, poraď mi, jak si ověřím, že databáze není uspaná. Potom spusť npx prisma db push a řekni mi, co to vypsalo. Žádná data nemaž a nepřepisuj bez mého souhlasu. Přihlašovací údaje nikam nevypisuj.
Connection string nikam nekopírujte, Claude si ho přečte přímo z .env. Vzor všech klíčů je v .env.example.
Na Vercelu chybí proměnná, u vás doma to jede
Lokálně všechno funguje, ale nasazený e-shop padá nebo v něm část věcí nefunguje. Skoro vždy chybí ve Vercelu některý klíč, který máte doma v .env.
Zkopírujte tento prompt do Claude Code
Lokálně e-shop funguje, ale nasazená verze na Vercelu ne. Hlásí tohle: [vlož celý text chyby nebo popiš, co nefunguje]. Přečti si názvy klíčů v mém souboru .env a porovnej je s tímhle seznamem proměnných z Vercelu: [vlož názvy proměnných z Vercelu, Settings → Environment Variables]. Řekni mi, které tam chybí, u každé stručně k čemu je, a co mám doplnit. Hodnoty klíčů nikam nevypisuj.
Z Vercelu kopírujte jen názvy proměnných, ne jejich hodnoty.
Objednávky zůstávají nezaplacené, webhook nedojde
Zákazník zaplatil kartou, ale v administraci je objednávka pořád jako nezaplacená. To znamená, že se Stripe nedovolal do e-shopu.
Zkopírujte tento prompt do Claude Code
Zákazníci platí kartou, ale objednávky zůstávají v administraci jako nezaplacené. Přečti si soubor src/app/api/stripe/webhook/route.ts a řekni mi, jakou adresu má mít webhook ve Stripe a jaké události má poslouchat. Potom se mnou projdi, jestli v Stripe dashboardu sedí Endpoint URL, jestli mám v .env i ve Vercelu stejný STRIPE_WEBHOOK_SECRET a jak si přečtu log webhooku ve Stripe, abychom viděli, kde to spadlo. Veď mě krok za krokem, klikat budu já.
Adresa webhooku je vaše doména a k ní /api/stripe/webhook, viz kapitola 9.
Když si ani tak nevíte rady
Napište přes formulář podpory. Popište, co jste zkoušeli, a přiložte celou hlášku, ať se v tom dá zorientovat. Jsem jeden člověk, takže se ozvu, jakmile to stihnu.
Napsat na podporu e-mailemKaždodenní provoz
E-shop běží a chodí objednávky. Tohle je přehled toho, co si odkliknete v administraci a co si necháte udělat promptem.
Administrace na adrese /admin
Přihlásíte se heslem, které jste si nastavili v kapitole 11. Co v administraci najdete:
Objednávky
Seznam objednávek s filtrem podle stavu, podle platby a s hledáním. V detailu objednávky měníte stav, překlikáváte zaplaceno a nezaplaceno, doplňujete číslo sledování, upravujete adresu a píšete si interní poznámky.
Faktury a dobropisy
Faktura se k objednávce vygeneruje sama a stáhnete si ji jako PDF. Když zrušíte celou objednávku nebo jen některé položky, e-shop k tomu vystaví dobropis, který si stáhnete stejným tlačítkem.
Vrácení peněz
Peníze vracíte tam, odkud přišly, tedy ve Stripe dashboardu nebo převodem z banky. E-shop k tomu vede doklad, sám ale žádné peníze neposílá.
Produkty, kategorie a sklad
Zakládání a úpravy produktů včetně variant, řazení do kategorií a skladové počty.
Podpora
Tikety, které vám zákazníci založí přes formulář podpory na e-shopu.
Další sekce
Slevové kódy, expedice, feedy, newsletter, účetnictví a nastavení obchodu. Každá má v administraci vlastní stránku.
Co si necháte udělat promptem
Úpravy zboží a hromadný import
Jednotlivé produkty upravíte klikáním v administraci. Když jich máte hodně, je v seznamu produktů import z Excelu: soubor .xlsx produkty zakládá i aktualizuje, párují se podle kódu produktu.
Zkopírujte tento prompt do Claude Code
Chci naplnit a upravovat zboží v e-shopu. Ukaž mi, kde v administraci se produkty zakládají a upravují, a vysvětli mi hromadný import z Excelu: jaké sloupce musí soubor mít, co je povinné u nového produktu, jak se zadávají varianty a co se stane s produkty, které v souboru nebudou. Připrav mi vzorový soubor, ať vidím formát.
Import se páruje podle kódu produktu. Prázdné sloupce existující data nepřepíšou. Před větším importem si udělejte zálohu, viz níž.
Změna textů na webu
Texty jsou přímo ve stránkách e-shopu. Claude je najde podle toho, jak je vidíte na webu, a přepíše je všude, kde se opakují.
Zkopírujte tento prompt do Claude Code
Chci změnit text na webu. Najdi ho ve stránkách a komponentách (src/app, src/components) a uprav ho všude, kde se opakuje. Text, který chci změnit, teď na webu vypadá takhle: [vlož text, jak ho vidíš na webu]. Nově tam má být: [napiš, jak to má být]. Než to uložíš, ukaž mi, ve kterém souboru jsi to našel.
Záloha databáze, než něco riskujete
Produkty, objednávky i faktury žijí v databázi, ne ve složce s kódem. Kopie projektu vám je nezachrání. Záloha je jeden prompt a chvilka čekání.
Zkopírujte tento prompt do Claude Code
Udělej zálohu databáze tohohle e-shopu. Připojovací údaje si přečti sám z DATABASE_URL v souboru .env, do chatu je nevypisuj. Pomocí pg_dump ulož zálohu do složky backups a dej jí do názvu dnešní datum. Pokud pg_dump nemám nainstalovaný, řekni mi, jak ho doinstaluju. Postarej se, ať se složka backups nedostane do gitu, a na konci mi řekni cestu k souboru a jak je velký.
Connection string nikam nekopírujete. Claude si ho přečte z .env sám.
Kdy zálohu určitě chcete
- •Před hromadným importem produktů z Excelu.
- •Před aktualizací knihoven a před jakoukoliv změnou, která sahá do struktury databáze.
- •Před úpravou, u které si nejste jistí, jak dopadne. Vrátit se zálohou je vždycky levnější než dohledávat, co se ztratilo.
Aktualizace knihoven
E-shop stojí na knihovnách, které se časem vyvíjejí. Aktualizovat se vyplatí po malých krocích, ne všechno naráz, a po každém kroku si ověřit, že se e-shop pořád sestaví.
Zkopírujte tento prompt do Claude Code
Chci opatrně aktualizovat knihovny tohohle projektu. Nejdřív mi vypiš, co je zastaralé, a řekni mi, u čeho hrozí, že se aktualizací něco rozbije. Potom aktualizuj po malých krocích, po každém kroku spusť build a řekni mi, co se změnilo a jestli to prošlo. Než pustíš build, připomeň mi, že sahá i do databáze, a počkej na moje potvrzení.
Před aktualizací si udělejte zálohu databáze podle promptu výše.
Build sahá do databáze
npm run build v tomhle projektu spouští i prisma db push, takže mění strukturu té databáze, na kterou ukazuje DATABASE_URL. Než ho pustíte, ověřte si, o kterou databázi jde, a mějte zálohu. Podrobněji v kapitole 7.
Příkazy si pamatovat nemusíte
Zaseklo se to?
První pomoc je vždy stejná: popište Claude Code v terminálu, co se stalo, a přiložte hlášku, kterou vidíte. Když to nepomůže, napište mi.