[docs][chat] Add suggestions to edit with MUI Chat #46309

bharatkashyap · 2025-06-10T09:58:20Z

Add support to pass a pre-generated aiSuggestion prop to the demo to render this UI
Clicking on the suggestion leads to MUI Chat with that demo opened, and the suggestion pre-typed in the chat*
*Needs to add a feature to get an initialMessage from the /open API

mui-bot · 2025-06-10T09:59:46Z

Netlify deploy preview

https://deploy-preview-46309--material-ui.netlify.app/

Bundle size report

@mui/material parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/system parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/utils parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details

Show details for 100 more bundles (86 more not shown)

@mui/lab/AdapterDateFns parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/AdapterDayjs parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/AdapterLuxon parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/AdapterMoment parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/CalendarPicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/CalendarPickerSkeleton parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/ClockPicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DateRangePickerDay parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DesktopDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DesktopDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DesktopDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/DesktopTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/LoadingButton parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/LocalizationProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/Masonry parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MobileDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MobileDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MobileDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MobileTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/MonthPicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/PickersDay parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/StaticDatePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/StaticDateRangePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/StaticDateTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/StaticTimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TabContext parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TabList parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TabPanel parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/Timeline parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineConnector parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineContent parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineDot parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineItem parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineOppositeContent parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimelineSeparator parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TimePicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TreeItem parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/TreeView parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/useAutocomplete parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/lab/YearPicker parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Accordion parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AccordionActions parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AccordionDetails parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AccordionSummary parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Alert parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AlertTitle parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AppBar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Autocomplete parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Avatar parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/AvatarGroup parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Backdrop parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Badge parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/BottomNavigation parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/BottomNavigationAction parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Box parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Breadcrumbs parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Button parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ButtonBase parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ButtonGroup parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Card parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardActionArea parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardActions parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardContent parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardHeader parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CardMedia parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Checkbox parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Chip parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CircularProgress parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ClickAwayListener parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Collapse parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Container parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/CssBaseline parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DefaultPropsProvider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Dialog parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DialogActions parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DialogContent parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DialogContentText parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/DialogTitle parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Divider parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Drawer parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Fab parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Fade parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FilledInput parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormControl parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormControlLabel parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormGroup parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormHelperText parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/FormLabel parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/GlobalStyles parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Grid parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/GridLegacy parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Grow parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/Icon parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/IconButton parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ImageList parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ImageListItem parsed: 0B^(0.00%) gzip: 0B^(0.00%)
@mui/material/ImageListItemBar parsed: 0B^(0.00%) gzip: 0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against bb326cc

alexfauquette · 2025-06-11T13:17:55Z

docs/src/modules/components/DemoAiSuggestionHero.tsx

+
+  const handleClick = async () => {
+    if (!baseUrl) {
+      return;
+    }


I'm wondering if we should render nothing in that case. Otherwise you risk to render a button that does nothing

Suggested change

const handleClick = async () => {

if (!baseUrl) {

return;

}

if (!baseUrl) {

return null;

}

const handleClick = async () => {

alexfauquette · 2025-06-11T13:23:15Z

docs/src/modules/components/DemoAiSuggestionHero.tsx

+    } catch (err: any) {
+      setError(err as Error);
+    } finally {
+      clearTimeout(setLoadingTimeout);


I'm wondering why there is a setLoadingTimeout. After 200ms the loading interface will disappear even if the API call is still pending

…suggestions

…al-ui into docs/ai-suggestions

alexfauquette · 2025-06-13T08:06:55Z

Maybe we should not display that on mobile. Or at least make it more subtile

…al-ui into docs/ai-suggestions

bharatkashyap · 2025-06-15T11:59:50Z

Less obstructive on mobile screens:

Screen.Recording.2025-06-15.at.3.53.03.PM.mov

alexfauquette

Good fr me.

Don't forget to remove the aiSuggestion if it was only for demonstration purpose

bharatkashyap · 2025-06-24T14:55:25Z

Noticed this is giving "React does not recognize the hasAiSuggestion prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase hasaisuggestion instead. If you accidentally passed it from a parent component, remove it from the DOM element."
Missed removing this from the forwarded props, fixing in [docs] Don't forward hasAiSuggestion #46415

fix: Open in MUI Chat

42e17b2

bharatkashyap added the docs Improvements or additions to the documentation. label Jun 10, 2025

bharatkashyap added 3 commits June 10, 2025 05:31

Merge branch 'master' into docs/ai-suggestions

fac380d

fix: CI

c291c84

fix: Simplify, uniform style

a2e2394

zannager requested a review from alexfauquette June 11, 2025 11:38

alexfauquette reviewed Jun 11, 2025

View reviewed changes

bharatkashyap added 5 commits June 13, 2025 13:02

fix: Alex review

3c2bc72

Merge branch 'master' into docs/ai-suggestions

4ad7011

Merge branch 'master' of github.com:mui-org/material-ui into docs/ai-…

31c41e7

…suggestions

Merge branch 'docs/ai-suggestions' of github.com:bharatkashyap/materi…

8b3df93

…al-ui into docs/ai-suggestions

fix: CI consistent-return

b1ec351

bharatkashyap added 4 commits June 15, 2025 13:00

fix: Alex review, responsiveness

e4bbacb

Merge branch 'master' into docs/ai-suggestions

1c89369

fix: eslint

4fad358

Merge branch 'docs/ai-suggestions' of github.com:bharatkashyap/materi…

92a73fd

…al-ui into docs/ai-suggestions

alexfauquette approved these changes Jun 16, 2025

View reviewed changes

bharatkashyap changed the title ~~[feat] [ai] Add suggestions to edit with MUI Chat~~ [docs] [ai] Add suggestions to edit with MUI Chat Jun 16, 2025

bharatkashyap added 3 commits June 16, 2025 20:25

feat: Support initialMessage

ee0094c

fix: Remove test

9fa65d7

Merge branch 'master' into docs/ai-suggestions

bb326cc

bharatkashyap enabled auto-merge (squash) June 18, 2025 08:35

bharatkashyap merged commit 0c2cd95 into mui:master Jun 18, 2025
23 checks passed

oliviertassinari changed the title ~~[docs] [ai] Add suggestions to edit with MUI Chat~~ [docs][chat] Add suggestions to edit with MUI Chat Jul 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

[docs][chat] Add suggestions to edit with MUI Chat #46309

[docs][chat] Add suggestions to edit with MUI Chat #46309

Uh oh!

bharatkashyap commented Jun 10, 2025 •

edited

Loading

Uh oh!

mui-bot commented Jun 10, 2025 •

edited

Loading

Uh oh!

alexfauquette Jun 11, 2025

Uh oh!

alexfauquette Jun 11, 2025

Uh oh!

alexfauquette commented Jun 13, 2025

Uh oh!

bharatkashyap commented Jun 15, 2025 •

edited

Loading

Uh oh!

alexfauquette left a comment

Uh oh!

Uh oh!

bharatkashyap commented Jun 24, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

[docs][chat] Add suggestions to edit with MUI Chat #46309

[docs][chat] Add suggestions to edit with MUI Chat #46309

Uh oh!

Conversation

bharatkashyap commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

alexfauquette Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

alexfauquette commented Jun 13, 2025

Uh oh!

bharatkashyap commented Jun 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexfauquette left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bharatkashyap commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bharatkashyap commented Jun 10, 2025 •

edited

Loading

mui-bot commented Jun 10, 2025 •

edited

Loading

bharatkashyap commented Jun 15, 2025 •

edited

Loading

bharatkashyap commented Jun 24, 2025 •

edited

Loading