Skip to content

Commit bb1d08e

Browse files
authored
docs: add bloom prompting and features (#14747)
* docs: add bloom prompting and features * fix event * fixes
1 parent 6842ddb commit bb1d08e

24 files changed

Lines changed: 1647 additions & 68 deletions

File tree

www/apps/bloom/PROMPT_IMPROVER_IMPLEMENTATION.md

Lines changed: 840 additions & 0 deletions
Large diffs are not rendered by default.
File renamed without changes.
Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
export const metadata = {
2+
title: `Use Demo Data`,
3+
}
4+
5+
# {metadata.title}
6+
7+
This guide covers how to add demo data to your store to test and showcase your store design before you have real products. Bloom can generate demo data for you or pull it from existing websites and images.
8+
9+
## Why Use Demo Data
10+
11+
Demo data is perfect if you have an idea for a store but don't have products yet. It's also great for designers showcasing their store design. Demo data makes your store look real and professional.
12+
13+
Adding demo data manually is time-consuming and doesn't give you a realistic view of how your store will look with real products. You'll have to come up with product names, descriptions, images, and prices on your own.
14+
15+
Bloom makes it easy to add demo data with realistic details. You can generate products based on your brand style, pull them from existing websites, or extract them from images. This way you can focus on building and showcasing your store without worrying about product data.
16+
17+
Bloom can add demo data like products, categories, reviews, and more. Add demo data based on your store's features and design to make it look complete and polished.
18+
19+
<Note>
20+
21+
On your first publish, all demo products become real products in your live store. After that, Bloom can't add demo products anymore. You'll have to add them manually through the admin dashboard.
22+
23+
</Note>
24+
25+
---
26+
27+
## Generate Products with Bloom
28+
29+
The quickest way to add demo products is to ask Bloom to generate them for you. Bloom uses AI to create realistic product data based on your prompts.
30+
31+
### Quick Product Generation
32+
33+
You can start with simple prompts to quickly generate products. For example:
34+
35+
```bash
36+
Add 5 skincare products
37+
```
38+
39+
```bash
40+
Generate 10 clothing items for a streetwear brand
41+
```
42+
43+
```bash
44+
Add 6 coffee products with prices $10-$30
45+
```
46+
47+
Bloom will generate the products immediately with the necessary information and images. You'll see them in your store preview and admin dashboard.
48+
49+
{/* TODO: Add screenshot showing quick generated products */}
50+
51+
### Detailed Product Generation
52+
53+
You can also provide more detailed prompts to get products that fit your brand and style better. For example:
54+
55+
```bash
56+
Add 8 minimalist furniture products for a Scandinavian-style store, prices $200-$1500, include sofas, chairs, and tables
57+
```
58+
59+
```bash
60+
Generate 6 organic tea products with detailed descriptions about ingredients and health benefits, prices $15-$35
61+
```
62+
63+
```bash
64+
Create 10 streetwear hoodies and t-shirts for a youth brand, include sizes S-XL, prices $30-$80, modern designs
65+
```
66+
67+
{/* TODO: Add screenshot showing detailed generated products with variants */}
68+
69+
### Generate Other Demo Data
70+
71+
Bloom can also generate other types of demo data like product categories, collections, and reviews. For example:
72+
73+
```bash
74+
Add 3 product categories: "Skincare", "Makeup", "Haircare"
75+
```
76+
77+
```bash
78+
Create a "Best Sellers" collection and add these products to it: [product names]
79+
```
80+
81+
```bash
82+
Generate 20 product reviews for these products with ratings and comments
83+
```
84+
85+
---
86+
87+
## Copy Products from Websites
88+
89+
Another way to add demo products is to pull them from existing websites. This is useful when another store has products similar to what you want in your demo store.
90+
91+
Based on the URLs you provide, Bloom can extract product information like titles, descriptions, images, and prices to create demo products in your store.
92+
93+
Refer to the [Pull from URLs](../pull-from-urls/page.mdx) guide for details on how to pull products from websites.
94+
95+
---
96+
97+
## Copy Products from Images
98+
99+
If you have product screenshots or photos, Bloom can extract product information from images. This works for products that aren't on public websites, or if you have design mockups with product details you want to use.
100+
101+
Bloom can analyze the images to identify product names, descriptions, and prices. This is especially useful for designers who have product mockups and want to quickly turn them into demo products in their store.
102+
103+
Refer to the [Pull from URLs](../pull-from-urls/page.mdx#alternative-pull-content-from-images) guide for details on how to pull products from images.
104+
105+
---
106+
107+
## Generate Images
108+
109+
Bloom can generate any images you need for your store, whether it's product images, category banners, or images for your content pages. This is great for quickly filling your store with visuals that match your brand style.
110+
111+
For example, you can ask Bloom:
112+
113+
```bash
114+
Generate 5 images for the skincare products in my store
115+
```
116+
117+
```bash
118+
Add images to the About Us page showing skin care products and people using them
119+
```
120+
121+
Bloom will generate the images based on your store's style or product details and add them to your store.
122+
123+
{/* TODO: Add screenshot showing generated images */}
124+
125+
---
126+
127+
## Remove Demo Data Before Publishing
128+
129+
Once you're ready to go live, you can ask Bloom to remove all demo data from your store. This way you can start fresh with real products without having to delete demo products manually.
130+
131+
<Note type="warning">
132+
133+
Removing demo data is irreversible. Make sure you're ready to delete all demo products and data before asking Bloom to remove it.
134+
135+
</Note>
136+
137+
To remove demo products, ask Bloom:
138+
139+
```bash
140+
Remove all demo products from my store
141+
```
142+
143+
You can also specify other types of demo data to remove, or ask Bloom to remove all demo data:
144+
145+
```bash
146+
Remove all demo data from my store
147+
```
148+
149+
Bloom will clear out all demo products, categories, reviews, and any other demo data it added to your store. After that, you can start adding real products and data for your live store.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import { InlineIcon, Table } from "docs-ui"
2+
import { LaptopMobile } from "@medusajs/icons"
3+
4+
export const metadata = {
5+
title: `Responsive View`,
6+
}
7+
8+
# {metadata.title}
9+
10+
Responsive View lets you see how your store looks on mobile devices. Use this feature to check mobile appearance while building and ask Bloom to fix any issues.
11+
12+
{/* TODO: Add screenshot showing mobile view */}
13+
14+
## Why Check Mobile View?
15+
16+
Most customers shop on their phones, so your store needs to look good and work well on mobile. Checking mobile view manually is tedious as you have to switch devices or resize your browser.
17+
18+
With Responsive View, you can quickly toggle between desktop and mobile views right in the preview. This makes it easy to spot and fix mobile-specific issues without leaving Bloom. You can still use Bloom's features like [Selection Mode](../selection-mode/page.mdx) to target specific elements for mobile fixes.
19+
20+
### When to Check Mobile View?
21+
22+
Check mobile view regularly as you build your store, especially after making design changes and adding features. This way you can catch and fix mobile issues early, making sure they also look good on desktop.
23+
24+
Waiting until the end of development to check mobile view can lead to a long list of issues that are harder to fix. Regularly checking mobile view helps you maintain a great experience for all customers, regardless of device.
25+
26+
---
27+
28+
## Switch to Mobile View
29+
30+
To see how your store looks on mobile:
31+
32+
1. Click the <InlineIcon Icon={LaptopMobile} alt="Device Toggle Icon" /> icon in the preview toolbar.
33+
2. The preview resizes to show how your store looks on a phone.
34+
35+
{/* TODO: Add screenshot showing device toggle icon and mobile view */}
36+
37+
Click the desktop icon to return to full-width view.
38+
39+
---
40+
41+
## Review Your Store in Mobile View
42+
43+
Once in mobile view, navigate through your store as a customer would and look for any issues. Pay attention to the following details:
44+
45+
<Table>
46+
<Table.Header>
47+
<Table.Row>
48+
<Table.HeaderCell>
49+
Aspect
50+
</Table.HeaderCell>
51+
<Table.HeaderCell className="w-2/3">
52+
What to Check
53+
</Table.HeaderCell>
54+
</Table.Row>
55+
</Table.Header>
56+
<Table.Body>
57+
<Table.Row>
58+
<Table.Cell>
59+
Text
60+
</Table.Cell>
61+
<Table.Cell>
62+
- Are headings readable and not too large?
63+
- Is body text not too small?
64+
- Is important information visible without zooming?
65+
</Table.Cell>
66+
</Table.Row>
67+
<Table.Row>
68+
<Table.Cell>
69+
Buttons
70+
</Table.Cell>
71+
<Table.Cell>
72+
- Are buttons large enough to tap easily?
73+
- Is the add to cart button prominent on product pages?
74+
- Do buttons overlap or get cut off?
75+
</Table.Cell>
76+
</Table.Row>
77+
<Table.Row>
78+
<Table.Cell>
79+
Images
80+
</Table.Cell>
81+
<Table.Cell>
82+
- Do images fit within the screen without horizontal scrolling?
83+
- Are product images clear and not cut off?
84+
- Do hero images look good on mobile?
85+
</Table.Cell>
86+
</Table.Row>
87+
<Table.Row>
88+
<Table.Cell>
89+
Navigation
90+
</Table.Cell>
91+
<Table.Cell>
92+
- Does the menu open and close properly?
93+
- Are all links working and easy to tap?
94+
- Are cart and search icons accessible?
95+
</Table.Cell>
96+
</Table.Row>
97+
<Table.Row>
98+
<Table.Cell>
99+
Layout
100+
</Table.Cell>
101+
<Table.Cell>
102+
- Is there any horizontal scrolling?
103+
- Do sections have good spacing?
104+
- Does content stack properly without overlapping?
105+
</Table.Cell>
106+
</Table.Row>
107+
</Table.Body>
108+
</Table>
109+
110+
Make sure to test all key pages in mobile view, including the homepage, product pages, and checkout. Look for any issues that could affect the customer experience or sales.
111+
112+
---
113+
114+
## Ask Bloom to Fix Mobile Issues
115+
116+
Once you identify issues in mobile view, you can ask Bloom to fix them. Provide clear prompts on what to change, mention that the issue is specific to mobile, and provide screenshots if possible. Bloom will adjust the mobile styling while keeping desktop view unchanged.
117+
118+
For example, you can say:
119+
120+
```bash
121+
The hero text is too large on mobile, make it smaller
122+
```
123+
124+
```bash
125+
Increase spacing between buttons on mobile
126+
```
127+
128+
```bash
129+
The product images are cut off on mobile, fix them
130+
```
131+
132+
Once Bloom makes the changes, review both mobile and desktop views to ensure the issue is resolved and works across devices.
File renamed without changes.

www/apps/bloom/app/selection-mode/page.mdx renamed to www/apps/bloom/app/features/selection-mode/page.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,12 @@ To adjust spacing for an element:
160160
- All values are in px (pixels) for precise control.
161161
5. Click "Save All" to save your changes.
162162

163+
<Note title="Heads up">
164+
165+
When you adjust margin and padding, it affects both desktop and mobile views. If you want to make responsive spacing changes, ask Bloom to make the changes instead and clarify the need for responsive adjustments in your prompt.
166+
167+
</Note>
168+
163169
![Adjusting margin and padding in selection mode](https://res.cloudinary.com/dza7lstvk/image/upload/v1770726635/Bloom/CleanShot_2026-02-10_at_14.30.26_2x_iwzdzh.png)
164170

165171
---

www/apps/bloom/app/md-content/[[...slug]]/route.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,19 @@ export async function GET(req: NextRequest, { params }: Params) {
7171
acceptHeader.includes("text/plain") ||
7272
acceptHeader.includes("text/markdown")
7373
) {
74-
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
75-
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
76-
person_profiles: "always",
77-
defaults: "2025-05-24",
78-
})
74+
if (!posthog.__loaded) {
75+
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
76+
api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
77+
person_profiles: "always",
78+
defaults: "2025-05-24",
79+
})
80+
}
7981

8082
posthog.capture(
8183
"md_content_requested_agents",
8284
{
83-
path: req.url,
84-
user_agent: req.headers.get("user-agent") || undefined,
85+
$current_url: req.url,
86+
$raw_user_agent: req.headers.get("user-agent") || undefined,
8587
},
8688
{
8789
send_instantly: true,

0 commit comments

Comments
 (0)