puckeditor
AI-Powered Component and Page Generation
Hi there ,
Thanks again for the amazing work on Puck! It's been a game-changer for building visual editing experiences in React.
As we explore ways to accelerate content creation and reduce manual setup, we’d love to see support for AI-assisted generation of components and pages.
Feature Suggestion
Some ideas that could be incredibly useful:
- Integrate with AI models (e.g. OpenAI, local LLMs) to generate new components based on user prompts.
- Allow users to describe a layout or page in natural language and auto-generate a Puck config.
- Suggest field structures, default props, and render logic for new components.
- Enable AI-powered template recommendations based on existing content or goals.
Use Case
This would help:
- Speed up onboarding for new users unfamiliar with React or Puck config.
- Empower non-technical users to create pages by describing what they want.
- Reduce repetitive work for developers when building similar layouts.
We’d love to hear if this is something you’re exploring — and we’d be happy to contribute or collaborate on a proof of concept!
Thanks again
Hey @huynv-dev!
Thank you so much for your kind words and for requesting this.
We're exploring this in our internal roadmap, and we already have a "Puck AI" issue here for tracking all AI-related features: #296.
However, we're very interested in learning more about your specific use case and what exactly your needs are for AI integration.
Would you be open to having a conversation through Discord or another medium?
Hi @huynv-dev! Asked Fede to keep this one open as I think there's some good suggestions and this ticket could serve as a useful discussion thread.
I believe there are two parts to what you're proposing:
- Creating Puck pages (data) using an LLM (similar to #296, which Fede pointed to - this ticket hasn't got a lot of information)
- Generating Puck configs (code) using an LLM
We are actively exploring page data generation (1) on our internal roadmap, as Fede mentioned. Code generation (2) is something we're also interested in, but I think there are some easy things we can do at the open-source level to help support this.
It's already possible to generate Puck configs using LLMs and coding agents, so I'm curious what specifically you're looking for, and what your ideal workflow is?
Hello,
Thank you to all the developers of the Puck project. I would like to inquire about the AI-related plugin features, specifically regarding the display location.
Currently, the Puck editor does support an AI plugin, and I have found relevant information in the official documentation. The AI plugin is currently displayed in the left plugin bar, and clicking it presents the chat interface.
What I am looking for is how to implement this through a custom editor layout. I hope to add a <Puck.AI /> component so that I can customize the layout. Currently, the Puck editor provides components such as <Puck.Components />, <Puck.Fields />, and <Puck.Outline />.
Is it possible to add a component similar to <Puck.AI />?
Thank you.
Is it possible for you to share the system prompt you use on the backend side for Puck AI?
Hello,
Thank you to all the developers of the Puck project. I would like to inquire about the AI-related plugin features, specifically regarding the display location.
Currently, the Puck editor does support an AI plugin, and I have found relevant information in the official documentation. The AI plugin is currently displayed in the left plugin bar, and clicking it presents the chat interface.
What I am looking for is how to implement this through a custom editor layout. I hope to add a
<Puck.AI />component so that I can customize the layout. Currently, the Puck editor provides components such as<Puck.Components />,<Puck.Fields />, and<Puck.Outline />.Is it possible to add a component similar to
<Puck.AI />?Thank you.
Thank you for the kind words!
Regarding customizing the chat UI, we're planning to release support for custom chat UIs very soon. We just wrapped up a big iteration on the rich text editor, and this is next on our list.
I recommend keeping an eye on this PR for the latest updates: #1112