Editable Responses Kit

Generate response drafts through iterative refinement stages. Edit, diff, and finalize before accepting.

0/4 stages complete0 tokens

Generation Stages

Generate initial draft

Add data visualizations

Incorporate stakeholder feedback

Finalize & polish

Click "Generate Draft" to start...

Integration Code

import { EditableResponse, useDiffTracker } from 'agent-tools-kit/ui'

function ChatMessage({ message }) {
  const { edits, trackEdit, revert, accept } = useDiffTracker(message.content)

  return (
    <EditableResponse
      content={message.content}
      editable={true}
      onEdit={(newContent) => trackEdit(newContent)}
      onAccept={(finalContent) => {
        accept()
        agent.continueWith(finalContent)
      }}
      onRevert={revert}
      showDiff={true}
      showHistory={true}
      maxRevisions={10}
    />
  )
}