AI Content Generator

A modal/form for generating content with AI, featuring template presets, tone and length controls, and a preview with edit/regenerate flow.

Preview

Install Summary

Component Files

File	Path
ai-content-generator.tsx	components/ai-assist/ai-content-generator/ai-content-generator.tsx
generator-context.tsx	components/ai-assist/ai-content-generator/generator-context.tsx
template-selector.tsx	components/ai-assist/ai-content-generator/template-selector.tsx
tone-controls.tsx	components/ai-assist/ai-content-generator/tone-controls.tsx
content-preview.tsx	components/ai-assist/ai-content-generator/content-preview.tsx
types.ts	components/ai-assist/ai-content-generator/types.ts
index.ts	components/ai-assist/ai-content-generator/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add dialog button textarea select

Terminal

bash

npm install @phosphor-icons/react

Installation

Component Files

The component consists of the following files:

1. ai-content-generator.tsx

ai-content-generator.tsx

tsx

"use client";

import { useState } from "react";
import {
  MagicWand,

2. generator-context.tsx

generator-context.tsx

tsx

"use client";

import { createContext, useContext, useState, ReactNode } from "react";

interface GeneratorContextValue {

3. template-selector.tsx

template-selector.tsx

tsx

"use client";

import { FileText } from "@phosphor-icons/react";
import { cn } from "@/lib/utils";
import type { ContentTemplate } from "./types";

4. tone-controls.tsx

tone-controls.tsx

tsx

"use client";

import { cn } from "@/lib/utils";
import type { ToneOption, LengthOption } from "./types";

5. content-preview.tsx

content-preview.tsx

tsx

"use client";

import { Copy, Check, ArrowClockwise } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import { StreamingResponse } from "../streaming-response";

6. types.ts

types.ts

tsx

export interface ContentTemplate {
  id: string;
  label: string;
  description?: string;
  icon?: React.ComponentType<{ className?: string }>;

7. index.ts

index.ts

tsx

export { AIContentGenerator } from "./ai-content-generator";
export type {
  AIContentGeneratorProps,
  ContentTemplate,
  ToneOption,

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/page.tsx

tsx

"use client";

import { AIContentGenerator } from "@/components/ai-assist";

export default function ContentPage() {