---
title: Examples
description: Production-ready examples of AI chat in React — ChatGPT clones, copilots, generative UI, artifacts, multimodal, and more, all built with assistant-ui.
---

import { ExampleCard } from "@/components/docs/example-card";
import { INTERNAL_EXAMPLES, COMMUNITY_EXAMPLES } from "@/lib/examples";

<header className="mt-12 mb-16 text-center md:mt-20">
<h1 className="mb-4 font-medium text-4xl">Examples</h1>

<span className="block text-muted-foreground">
  Explore our collection of examples that demonstrate different ways to integrate assistant-ui into your applications.
</span>
</header>

<div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
  {INTERNAL_EXAMPLES.map((item) => (
    <ExampleCard key={item.title} {...item} />
  ))}
</div>

<h2 className="mt-16 mb-8 font-medium text-2xl">Community Examples</h2>

<div className="grid gap-6 lg:grid-cols-2 xl:grid-cols-3">
  {COMMUNITY_EXAMPLES.map((item) => (
    <ExampleCard key={item.title} {...item} />
  ))}
</div>

<div className="my-16 not-prose">
  <p className="text-muted-foreground">Looking for more examples? <a href="/showcase" className="font-medium text-foreground transition-colors hover:text-foreground/70">Check out the community showcase →</a></p>
</div>