Skip to main content
You can make generated artifacts, such as slides and reports, directly editable by the user. By enabling this feature, an “Edit” button appears on the artifact. When clicked, it allows the user to modify the content—like changing text, updating titles, or correcting data—as if they were editing a document. This is an opt-in feature that is enabled with a single prop on your C1 components.

​
Implementation

To enable artifact editing, you need to pass the enableArtifactEdit: true flag to the C1 component you are using.

​
Using <C1Component>

Pass the enableArtifactEdit prop directly to the component. 
import { C1Component, ThemeProvider } from "@thesysai/genui-sdk";

function MyArtifactViewer({ c1Response, updateMessage }) {
  return (
    <ThemeProvider>
      <C1Component
        c1Response={c1Response}
        enableArtifactEdit={true}
        updateMessage={updateMessage} // Crucial for saving the user's edits
      />
    </ThemeProvider>
  );
}

​
Using <C1Chat>

Pass enableArtifactEdit: true inside the customizeC1 prop object. 
import { C1Chat } from "@thesysai/genui-sdk";

function MyChat() {
  return (
    <C1Chat
      apiUrl="/api/chat"
      customizeC1={{
        enableArtifactEdit: true,
      }}
      // Ensure your useThreadManager hook is configured
      // to handle onUpdateMessage for persistence.
    />
  );
}

​
How It Works

When enableArtifactEdit is set to true, the C1 UI renders an “Edit” button on the artifact. Clicking this button makes the artifact’s content fields editable, allowing the user to make direct changes.

​
Persisting the Changes

After a user finishes editing and saves their changes, the component’s internal state is updated. To ensure these changes are not lost, a callback is triggered with the new, modified content.
  • For <C1Component>, the updateMessage callback fires.
  • For <C1Chat> (or when using useThreadManager), the onUpdateMessage callback fires.
You must implement these callbacks to save the updated message content to your database. This keeps your backend state consistent with the manual edits the user sees on the frontend. Without this step, any manual changes will be lost on the next page load.