Puck AI 0.7 adds file attachment support, so users can drop images, PDFs and text files straight into their prompts. See the AI overview for more information on Puck AI.

In this post, we’ll go over everything new in Puck AI 0.7 and how you can start using it:

• What’s new in Puck AI 0.7
• Full changelog
• How to upgrade

You can also find in-depth documentation in our AI docs.

What’s new in Puck AI 0.7

File attachments

Puck AI now accepts file attachments. Users can upload a screenshot of the layout they want, include a brand brief as a PDF, or attach a markdown file of copy, and the agent will use it as context when generating the page.

Attachments are on by default. To configure them, pass chat.attachments to createAiPlugin:

const aiPlugin = createAiPlugin({
  chat: {
    attachments: {
      enabled: true,
      accept: ["image/*", ".pdf"],
      maxFiles: 5,
      maxSizeBytes: 10485760,
    },
  },
});

Out of the box you get images, PDFs, .doc, .docx, .txt and .md, with a 10 MB limit and up to five files per message. Narrow the accept list if you only want a subset.

If you’re hooking into the prompt with chat.onSubmit, the callback signature now receives the attachments alongside the prompt:

const aiPlugin = createAiPlugin({
  chat: {
    onSubmit: (prompt, options) => {
      console.log(prompt, options?.attachments);
    },
  },
});

To turn attachments off entirely, set enabled: false.

Full changelog

Features

• support file attachments in ai plugin

Bug Fixes

• ensure focus outline visible for AI submit button
• handle screenshot failures gracefully
• handle trailing slashes in cloud-client puckHandler
• only track scroll during streaming
• stop throwing data-finish warning in AI plugin

How to upgrade

Upgrading Puck

Run the following command to install the latest version of Puck AI packages:

npm install @puckeditor/cloud-client@latest @puckeditor/plugin-ai@latest

pnpm add @puckeditor/cloud-client@latest @puckeditor/plugin-ai@latest

yarn add @puckeditor/cloud-client@latest @puckeditor/plugin-ai@latest

bun add @puckeditor/cloud-client@latest @puckeditor/plugin-ai@latest

Update your route handler

To use attachments, you need to ensure your /api/puck/* endpoint supports the GET and DELETE methods, in addition to the original POST method.

// app/api/puck/[...all]/route.ts

import { puckHandler } from "@puckeditor/cloud-client";

const handleRequest = (request) => {
  return puckHandler(request, {
    ai: {
      context: "We are Google. You create Google landing pages.",
    },
  });
};

export const DELETE = handleRequest;
export const GET = handleRequest;
export const POST = handleRequest;

Some frameworks already match every method (such as Hono app.use) and require no change. See the puckHandler reference for more information.

Try the Puck AI beta

Puck AI is now in open beta. Sign up