I Built AgentComposerUI: UI Components for AI Agents That Actually Need Human Approval

AI agents can generate social media posts, write emails, create GitHub pull requests and automate plenty of other tasks. But there's one part of the workflow that often gets overlooked: how do humans review and approve what an agent creates?

Most applications end up building these interfaces from scratch. You need editors, previews, validation, approval buttons, rejection flows and a way to send feedback back to the agent.

I wanted to make that easier, so I built AgentComposerUI, an open-source React component library for building human-in-the-loop (HITL) interfaces for AI agents.

Instead of providing just another text editor, it provides dedicated composers for different kinds of agent-generated content.

What is AgentComposerUI?

AgentComposerUI is a collection of React and Tailwind CSS components designed to sit between an AI agent and the person reviewing its output.

Currently, it includes four dedicated composers:

• LinkedIn Composer: Create, edit and preview LinkedIn posts.
• Twitter/X Thread Composer: Work with multi-post threads, character limits and thread previews.
• Email Composer: Review outreach emails and newsletters, including subject lines and email content.
• GitHub PR Composer: Review AI-generated pull request descriptions, metadata and checklists.

Each composer has its own interface and content model, rather than forcing every use case into the same generic editor.

Why I built it

Imagine building an AI marketing assistant. Your agent can generate a LinkedIn post, a Twitter thread and an outreach email.

The model can return structured JSON, but you still need to turn that JSON into a usable interface.

You might need to:

• Display the generated content in an editable form.
• Show a realistic preview of how it will appear.
• Validate content against platform-specific constraints.
• Allow users to approve or reject drafts.
• Send feedback to the agent when revisions are needed.
• Keep the UI synchronized while the agent is generating content.

Now imagine doing all of that for several different content types.

That's the problem AgentComposerUI is intended to address. It provides reusable, platform-specific interfaces and the state management needed for human review.

Four composers, four different use cases

1. LinkedIn Composer

The LinkedIn Composer is designed for AI-generated LinkedIn posts.

It includes an editor, author information, hashtag controls, a media dropzone, character counting and a LinkedIn-style preview.

The preview supports desktop and mobile layouts, including simulated feed truncation and the familiar "see more" behavior.

You can use the ready-made component or build your own layout using its compound components.

import { LinkedInComposer } from "agentcomposerui";

<LinkedInComposer
  data={post}
  status="reviewing"
  onChange={setPost}
  onApprove={handleApprove}
  onReject={handleReject}
/>

This is useful for social media agents that generate posts but should leave the final editing and publishing decision to a human.

2. Twitter/X Thread Composer

A single text box isn't sufficient when an agent generates an entire thread.

The Twitter/X Thread Composer is designed around multi-post content, with thread editing, character counting and a visual thread preview.

It also includes a countdown ring, author information and approval and rejection controls.

The composer can be integrated into an agent workflow where the model generates a thread, a human edits individual posts and the final thread is approved.

This is particularly useful for social media automation tools that need to handle threads rather than individual posts.

3. Email Outreach and Newsletter Composer

Email is another common use case for AI agents, particularly for outreach, marketing and customer communication.

The Email Composer provides an interface for reviewing generated emails, with an editor and an email-style preview.

It also includes dedicated subject analysis and a token bar, alongside the usual approval and rejection actions.

That makes it possible to build an email review workflow in which an agent drafts an email, a user edits it and the agent can receive feedback for another revision.

It's intended for applications such as AI outreach assistants, newsletter generators and email automation tools.

4. GitHub Pull Request Composer

AI coding agents can generate code, but their work often needs a human-readable pull request description and a review process.

The GitHub PR Composer provides an interface for reviewing generated PR content, with a dedicated editor, preview, metadata sidebar and checklist.

It also supports approval and rejection actions, making it possible to build a review step into an AI-assisted development workflow.

For example, an agent could generate a pull request description and checklist after completing a coding task. A developer could then review and modify the content before approving it.

The component is focused on the PR composition and review interface, not on replacing GitHub's underlying pull request functionality.

Human-in-the-loop workflows are built in

One of the central ideas behind AgentComposerUI is that generating content and approving content are two different responsibilities.

The library supports a state machine with the following states:

• idle
• streaming
• reviewing
• approved
• rejected

A typical workflow looks like this:

1. An agent starts generating content.
2. The UI displays the draft as it becomes available.
3. The user reviews and edits the draft.
4. The user approves it or requests changes.
5. If changes are requested, feedback can be sent back to the agent.
6. The updated draft can be reviewed again.

The library also provides useComposerState for managing composer state outside the individual components.

This lets developers connect the UI to their own agent orchestration and backend logic without having to implement the entire review state machine themselves.

Built for flexibility, not just drop-in usage

Every composer has a ready-to-use component, but you aren't restricted to its default layout.

The compound component API lets you arrange individual parts of the interface yourself.

For example, the LinkedIn Composer exposes components such as:

• Root
• Header
• Author
• StageIndicator
• Editor
• HashtagBar
• MediaDropzone
• Preview
• Actions
• CharacterCount
• ApproveButton
• RejectButton

This is useful when you want the built-in functionality but need a different layout to match your application.

The library also exposes composer-specific hooks and contexts for more customized integrations.

Connecting composers to LLMs

A UI library is only one part of an AI workflow. The agent still needs a way to generate structured content.

AgentComposerUI provides schemas that can be used with common LLM tool-calling approaches, including the Vercel AI SDK, OpenAI function calling and Anthropic tool definitions.

For example, with the Vercel AI SDK:

import { tool } from "ai";
import {
  linkedInPostSchema,
  type LinkedInPostData,
} from "agentcomposerui/schemas";

export const linkedInTool = tool({
  description: "Draft a LinkedIn post",
  parameters: linkedInPostSchema,
  execute: async (postData: LinkedInPostData) => {
    return {
      success: true,
      draft: postData,
    };
  },
});

The general idea is to have the model generate structured data and pass that data to the corresponding composer.

The UI handles editing and review, while your application remains responsible for agent execution, persistence and any final external actions.

Getting started

AgentComposerUI is available on npm.

npm install agentcomposerui

It requires React 18 or later, React DOM 18 or later and Tailwind CSS 3 or later.

Import the library's base styles:

import "agentcomposerui/styles.css";

For Tailwind CSS v4, add the package source to your CSS:

@import "tailwindcss";
@source "../node_modules/agentcomposerui";

You can then import the composers you need:

import {
  LinkedInComposer,
  TwitterThreadComposer,
  EmailOutreachComposer,
  GitHubPRComposer,
} from "agentcomposerui";

You don't need to use all four. Each composer can be integrated into an application according to its requirements.

Tech stack

AgentComposerUI is built with:

• React for the component architecture.
• TypeScript for typed component APIs and data.
• Tailwind CSS for styling.
• Zod and JSON Schema for structured data and LLM integration.
• Vitest for testing.
• Bun, oxlint and oxfmt for development tooling.

The package is MIT licensed and available on npm.

What's next?

I built AgentComposerUI to make the human-facing side of AI agent workflows easier to implement.

There are plenty of potential directions for expanding the library, including more platform-specific composers, additional integrations and further customization options.

For now, the focus is on providing dedicated interfaces for social media, email and development workflows without requiring developers to build every review experience from scratch.

Try it out

If you're building AI agents that generate content and need human approval, give AgentComposerUI a look.

• GitHub: https://github.com/theajmalrazaq/agentcomposerui
• npm: https://www.npmjs.com/package/agentcomposerui

It's open source, and feedback, issues and contributions are welcome.

If you're building something with it, I'd love to hear what you're working on.