Rendyn
Connect MCP free

The Rendyn collection · 12 selected components

AI agent UI components for React

Give people a clear way to ask, follow the work, and decide what happens next. Explore React and TypeScript components for chat, human approval, tool permissions and generated results, grouped by the part of the agent workflow they serve.

Find your component Explore the examples

React · TypeScript · Live previews · Component source

Live from the catalogueApproval Card
Try Approval Card: a review surface for decisions, questions and requests for changes.
01

Compose a prompt and follow the response

A useful streaming chat needs more than a text box. Keep the composer predictable, make answers readable as they arrive, and let people read earlier messages without being pulled back to the newest token.

02

Review decisions and tool permissions

An approval asks whether a proposed result is acceptable. A tool permission asks whether a specific action may run. Show the proposal and its scope before asking for either decision, then display the state your server confirms.

Inspect the actual proposed file changes

File Diff

Put added and removed lines beside the decision, with syntax highlighting and change counts. Keep the reviewed revision tied to the action that is eventually executed.

Preview, API & source for File Diff
03

Show progress, sources and generated images

Long-running work should have an understandable state. Separate a loading cue from observed activity, and give generated media a stable place in the conversation before the final asset arrives.

From components to a product

Three ways to put them to work

Start with the user’s task, then choose the smallest set of components that makes it clear.

A publishing assistant that waits for review

Let an editor inspect a drafted announcement and its intended destination before publishing. Keep content review and tool execution visible as separate decisions.

  1. Approval Card

    Show the full draft and destination, then offer approval, rejection or a request for changes.

  2. Tool Approval

    When publishing requires a permission, show the named tool and exact parameters for that action.

  3. Tool Result

    Display the confirmed execution result, or retain a retryable error if publishing fails.

Persist approval on the server and bind it to the reviewed action. A card click alone does not authorize execution or prove the announcement was published.

A research chat with readable streaming answers

Keep the input available while a research answer arrives, expose sources after the response, and let a reader scroll back to an earlier passage.

  1. Prompt Input

    Submit the research question and chosen model; connect the stop action to request cancellation.

  2. Message Scroller

    Follow the live edge while the reader is there, then let them move freely through the transcript.

  3. Streaming Response

    Render the growing answer, its completed sources and any retry or feedback controls.

Your application owns transport, history and content sanitization. Choose which surrounding region announces updates so screen readers do not hear the same stream twice.

An image-generation workspace

Give an image request a predictable lifecycle, from its prompt through the wait to an asset the user can inspect. Keep the canvas dimensions stable across states.

  1. Prompt Input

    Collect the prompt and expose the generation options your service actually accepts.

  2. Image Generation

    Reserve the result area, reflect server-reported status and show the final image with meaningful alternative text.

  3. Agent Activity

    Show real preparation or generation events if your backend provides them, and surface errors with a recovery action.

The components supply the interface. You provide the image model or API, credentials, validated inputs and asset storage.

A small implementation example

Compose a reader-aware streaming response

This small display layer uses the catalogue APIs directly. Feed it the text and status from your existing chat transport after adding the component source and its listed dependencies.

Plain text is rendered safely as React content here. If you add Markdown or rich HTML, configure a safe renderer. The example supplies no model, network transport or persisted chat history.

"use client";

import { MessageScroller } from "@/components/agents/message-scroller";
import { StreamingResponse } from "@/components/agents/streaming-response";

export function Answer({ text, status }: {
  text: string;
  status: "streaming" | "complete" | "error";
}) {
  return (
    <MessageScroller
      label="Research conversation"
      busy={status === "streaming"}
      className="h-[28rem]"
    >
      <StreamingResponse
        status={status}
        copyText={text}
        announce={false}
      >
        {text}
      </StreamingResponse>
    </MessageScroller>
  );
}

Make it fit your application

Before you ship

Use server-confirmed states

Map your runtime events to each component’s supported states. Keep pending, approved, running, complete and error distinct where the component supports them; do not turn an optimistic click into a completed result.

Connect permissions to your backend

Validate the actor, tool, parameters and resource on the server. Record what was approved, handle expiry, and request another decision if the action changes. Define the scope of remembered access in your application.

Start with one conversation surface

For a broader reference, inspect Chat App, which composes messages, approvals, tools and generated media. Reuse only the pieces your product needs; its preview is a UI example rather than a hosted agent backend.

See the full interface composition in Chat App.

Common questions

Are these a complete AI agent framework?

They are React interface components. You connect your own model provider, agent runtime, authentication, persistence and tool execution. They can form the presentation layer around an existing backend.

Can I use them with a streaming chat backend?

Yes. Pass the content and supported status into the response components, and connect composer callbacks to your transport. Rendyn does not require a particular model provider; check the component source and dependencies against your existing app.

What is the difference between Approval Card and Tool Approval?

Approval Card supports reviewing an outcome or answering questions. Tool Approval is focused on the tool, its parameters and permission choices. Both need your server to validate and persist the decision before any protected action runs.

How do I try components and get their source?

Open a component page to use its live preview and inspect its documentation, dependencies and upstream attribution. Every component’s source is free without login. Connect your coding agent to the free MCP to search and retrieve source inside your project; only MCP needs an account.

Prefer choosing components with your coding agent? Connect Rendyn through MCP to search and retrieve implementation context.

Keep exploring

Animated React components

Choose text reveals, hover feedback and transitions for the rest of your product.

Explore the collection

Choose your next component

Try it in the catalogue

Inspect the live preview, usage, dependencies and upstream attribution before adapting it to your app.

Browse all agent components See source access and pricing