> ## Documentation Index
> Fetch the complete documentation index at: https://docs.craveup.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Prebuilt Storefront Prompt

> Copy this prompt into Cursor, Claude, ChatGPT, Codex, or another AI coding agent before building with Crave.

Use this prompt to give an AI coding agent enough Crave context to build a restaurant storefront without guessing the API, SDK, component, or MCP boundaries.

<Note>
  Paste the prompt into your agent's project instructions, system prompt, or first chat message. Keep API keys out of the prompt; provide credentials through `.env.local` or the MCP server environment.
</Note>

## Prompt

```text theme={null}
You are helping build a restaurant ordering storefront using Crave Cloud and Crave.js.

Goal:
- Build a production-minded storefront for foodservice ordering.
- Use Crave.js, the Storefront API, and Crave UI components where they fit.
- Use the CraveUp MCP server when it is available for menu inspection, setup, readiness checks, and implementation guidance.

Important docs:
- Main docs: https://docs.craveup.com
- Crave Cloud overview: https://docs.craveup.com/guides/crave-cloud-overview
- Storefront SDK: https://docs.craveup.com/getting-started/storefront-sdk
- REST API overview: https://docs.craveup.com/api-reference/overview/api-overview
- Components: https://docs.craveup.com/components/overview
- API key setup: https://docs.craveup.com/guides/generate-api-key
- MCP setup: https://docs.craveup.com/guides/ai/craveup-mcp-server

Platform model:
- Crave Cloud is the managed platform for restaurant franchise operations.
- Crave.js is the developer-facing storefront layer inside Crave Cloud.
- Storefront code should use Crave API keys that are allowed to access the target location and public-safe environment variables.
- Staff/admin operations belong in Business Manager or authenticated admin flows, not in public storefront code.
- Guest identity and staff identity are separate boundaries.

Storefront API authentication:
- Use X-API-Key with a Crave API key that is allowed to access the target location.
- Never expose admin tokens or secret payment keys in client code.
- API keys come from Dashboard > Developers > API Development > Step 1 - API Keys.
- Location IDs come from Dashboard > Developers > API Development > Step 2 - Location IDs.

Expected environment variables:
- NEXT_PUBLIC_CRAVEUP_API_KEY
- NEXT_PUBLIC_CRAVEUP_LOCATION_ID
- NEXT_PUBLIC_CRAVEUP_BASE_URL, only when not using production
- NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, when the app confirms payments in the browser

Standard ordering flow:
1. Load location and menu data.
2. Start an ordering session and keep the cart ID.
3. Add products with modifier selections.
4. Set fulfillment method: takeout, delivery, table_side, or room_service.
5. Set order time: ASAP or scheduled.
6. Collect customer details.
7. Optionally apply discounts and gratuity.
8. Create a payment intent through Crave.
9. Confirm the payment with Stripe.js using the returned client secret and connected account.
10. Show order confirmation and track analytics events.

SDK expectations:
- Prefer @craveup/storefront-sdk for TypeScript projects.
- Use direct REST calls only when the SDK does not cover a needed path.
- Keep cart, checkout, fulfillment, payment, analytics, and order-confirmation code separated enough to test.

UI expectations:
- Build the actual ordering experience first, not a marketing page.
- Use the Crave component docs for menu, cart, checkout, fulfillment, and post-order UI.
- Foodservice UI should be fast to scan, clear about fulfillment state, and hard to mis-order from.
- Mobile previews or mobile storefront work must preserve the phone frame aspect ratio.

MCP usage:
- If the CraveUp MCP server is connected, list available tools before using them.
- Use MCP tools for menu import, menu inspection, readiness checks, location settings, and Crave-specific implementation guidance.
- Do not send API keys in natural-language messages. Use MCP environment variables.
- Confirm destructive or production-impacting changes before making them.

Before finishing:
- Run the app locally.
- Verify menu load, cart update, fulfillment selection, checkout validation, and payment-intent creation.
- Run available lint, typecheck, and tests.
- Report exact commands run, any failing checks, and the local URL.
```

## Use it with Cursor or VS Code

Add the prompt to your project instructions, then ask:

```text theme={null}
Build a Next.js App Router storefront with menu browsing, cart, checkout, and Stripe payment intent creation using Crave.
```

## Use it with ChatGPT, Claude, or Codex

Paste the prompt into the first message, then add your repo-specific task:

```text theme={null}
Use this existing storefront repo. Wire it to Crave, add the missing checkout flow, and run it locally.
```

## Use it with the MCP server

After connecting the [CraveUp MCP server](/guides/ai/craveup-mcp-server), ask:

```text theme={null}
Use the CraveUp MCP server to inspect the configured location, verify the active menu, and identify what is missing before this storefront can accept orders.
```

## What the prompt is designed to prevent

* inventing API endpoints or SDK method names
* putting admin credentials into storefront code
* confusing guest identity with staff identity
* skipping fulfillment, order time, or customer-detail validation
* treating payment confirmation as complete before the Stripe step succeeds
* building only static preview UI instead of a real ordering flow