### Install React Client

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Install the React client package for Fuma Comment.

```bash
npm install @fuma-comment/react
# or
yarn add @fuma-comment/react
# or
pnpm add @fuma-comment/react
```

--------------------------------

### Run Development Server

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/README.md

Use this command to start the development server for the project. Open http://localhost:3001 in your browser to view the application.

```bash
yarn dev
```

--------------------------------

### Start Development Server

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/example-better-auth/README.md

Run the Next.js development server using npm, yarn, pnpm, or bun. This command starts a local server for development and hot-reloading.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Copy Environment Variables Template

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/example-better-auth/README.md

Copy the example environment file to be used for local development. This file should then be populated with specific credentials.

```bash
cp .env.example .env.local
```

--------------------------------

### Setup HonoComment Middleware

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/hono.mdx

Add this code to your Hono app to initialize the Fuma Comment middleware. Ensure you provide valid storage and authentication adapters.

```typescript
import { Hono } from "hono";
import { HonoComment } from "@fuma-comment/server/hono";

const app = new Hono();

HonoComment({
    app,
    storage: // storage adapter
    auth: // auth adapter
});
```

--------------------------------

### Configure NextAuth Adapter for Fuma Comment

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/next-auth.mdx

Add this configuration to your Fuma Comment setup to enable NextAuth authentication. Ensure `authOptions` is correctly imported from your NextAuth configuration.

```typescript
import { createNextAuthAdapter } from "@fuma-comment/server/adapters/next-auth";
import { authOptions } from "@/app/api/auth/[...nextauth]/options";

const auth = createNextAuthAdapter(authOptions);
```

--------------------------------

### Configure MongoDB Adapter

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/mongodb.mdx

Set up the MongoDB adapter by importing and initializing it with your database instance and authentication method. Ensure the 'db' object is correctly imported from your application's database configuration.

```typescript
import { createMongoDBAdapter } from "@fuma-comment/server/adapters/mongo-db";
import { db } from "@/lib/database";

export const storage = createMongoDBAdapter({
	db,
	auth: "better-auth" | "next-auth",
});
```

--------------------------------

### Configure BetterAuth Adapter

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/better-auth.mdx

Import and create the BetterAuth adapter for Fuma Comment. Ensure you have BetterAuth initialized in your application.

```typescript
import { createBetterAuthAdapter } from "@fuma-comment/server/adapters/better-auth";
import { auth as betterAuth } from "@/lib/auth";

const auth = createBetterAuthAdapter(betterAuth);
```

--------------------------------

### Write Pending Changelog File

Source: https://github.com/fuma-nama/fuma-comment/blob/main/AGENTS.md

Create a pending changelog file in the .tegami/ directory. Include YAML frontmatter specifying packages and their version bumps, followed by user-facing release notes under headings.

```markdown
---
packages:
  "npm:@acme/ui": patch
---

### Fix button hover state

The hover color now matches the design system.

```

--------------------------------

### Prisma Adapter Configuration

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/prisma.mdx

Configures the Prisma adapter for Fuma Comment. Ensure Prisma is initialized and the correct authentication method is specified.

```typescript
import { createPrismaAdapter } from "@fuma-comment/server/adapters/prisma";

const storage = createPrismaAdapter({
	db: prisma,
	auth: "next-auth" | "better-auth",
});
```

--------------------------------

### NextAuth.js Adapter Configuration

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Integrate Fuma Comment with NextAuth.js by creating an adapter using your NextAuth options.

```ts
import { createNextAuthAdapter } from "@fuma-comment/server/adapters/next-auth";
// Next Auth options
import { authOptions } from "@/app/api/auth/[...nextauth]/options";

const auth = createNextAuthAdapter(authOptions);
```

--------------------------------

### Initialize Comments with Authentication

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Set up the Comments component in your React application, including a sign-in function for authentication.

```tsx
"use client";
import { signIn } from "next-auth/react";
import { Comments } from "@fuma-comment/react";

export function CommentsWithAuth() {
	return (
		<Comments
			// comments are grouped by page
			page="default"
			auth={{
				type: "api",
				// function to sign in
				signIn: () => void signIn("github"),
			}}
		/>
	);
}
```

--------------------------------

### UploadThing Integration for Image Uploads

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/image-upload.mdx

Integrate UploadThing for image uploads by creating a storage instance and passing it to the Comments component. Ensure you have the necessary auth configuration.

```tsx
import { Comments } from "@fuma-comment/react";
import { createUploadThingStorage } from "@fuma-comment/react/uploadthing";

const storage = createUploadThingStorage();

export function CommentsWithAuth() {
	return (
		<Comments
			storage={storage}
			auth={
				{
					// auth config
				}
			}
		/>
	);
}
```

--------------------------------

### Clerk Adapter and Storage Configuration

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/clerk.mdx

Configure the Clerk adapter by passing the auth function and then create the Drizzle adapter for storage, including the Clerk adapter for user profile access.

```typescript
import { auth } from "@clerk/nextjs/server";
import { ClerkAdapter } from "@fuma-comment/server/adapters/clerk";
// ORM adapter:
import { db } from "./database";
import { createDrizzleAdapter } from "@fuma-comment/server/adapters/drizzle";
import { comments, rates, roles } from "@/lib/schema";

// pass a function that can obtain the auth object, e.g. `auth()` on Next.js
export const clerkAdapter = ClerkAdapter(() => auth());

export const storage = createDrizzleAdapter({
	db,
	schemas: {
		comments,
		rates,
		roles,
	},
	auth: clerkAdapter,
});
```

--------------------------------

### Database Role Integration

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/role-system.mdx

Configure Fuma Comment to use a database for role management. This involves setting the `role` option to 'database' in the NextComment configuration.

```typescript
import { NextComment } from "@fuma-comment/server/next";

export const { GET, DELETE, PATCH, POST } = NextComment({
	role: "database",
	// other options
});
```

--------------------------------

### BetterAuth Adapter Configuration

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Configure Fuma Comment to use BetterAuth by creating an adapter with your BetterAuth instance.

```ts
import { createBetterAuthAdapter } from "@fuma-comment/server/adapters/better-auth";
import { auth as betterAuth } from "@/lib/auth";

const auth = createBetterAuthAdapter(betterAuth);
```

--------------------------------

### Prisma Schema for Fuma Comment

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Configure the Prisma adapter for Fuma Comment. Specify your Prisma client instance and auth provider.

```ts
import { createPrismaAdapter } from "@fuma-comment/server/adapters/prisma";

const storage = createPrismaAdapter({
	db: prisma,
	// Use tables created by your auth provider
	auth: "next-auth" | "better-auth",
});
```

--------------------------------

### Directly Register FastifyComment Instance

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/fastify.mdx

Pass your existing Fastify instance directly to FastifyComment for integration. This method is an alternative to using `app.register`.

```typescript
import { FastifyComment } from "@fuma-comment/server/fastify";

FastifyComment({
	app,
	storage,
	auth,
});
```

--------------------------------

### Configure Drizzle Adapter for Fuma Comment

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/drizzle.mdx

Integrates Drizzle ORM with Fuma Comment by creating an adapter. This requires your database instance and schema definitions. Supports 'next-auth' or 'better-auth'.

```typescript
import { createDrizzleAdapter } from "@fuma-comment/server/adapters/drizzle";
import { db } from "@/lib/database";
import { comments, rates, roles, user } from "@/lib/schema";

const storage = createDrizzleAdapter({
	db,
	auth: "next-auth" | "better-auth",
	schemas: {
		comments,
		rates,
		roles,
		user,
	},
});
```

--------------------------------

### Import Fuma Comment Styles

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Import the default CSS styles for Fuma Comment components. For Tailwind CSS v4, use the provided preset.

```css
import "@fuma-comment/react/style.css";
```

```css
@import "tailwindcss";
@import "@fuma-comment/react/preset.css";
```

--------------------------------

### Next.js API Route for Fuma Comment

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Set up the Next.js API route handler for Fuma Comment. Ensure you import your configured auth and storage adapters.

```ts
import { NextComment } from "@fuma-comment/server/next";

export const { GET, DELETE, PATCH, POST } = NextComment({
	// import from comment.config.ts
	auth,
	storage,
});
```

--------------------------------

### Route Configuration with Clerk Auth

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/clerk.mdx

Update your API route configuration to use the Clerk adapter for authentication and the configured storage.

```typescript
import { NextComment } from "@fuma-comment/server/next";
import { clerkAdapter, storage } from "@/lib/comment.config";

export const { GET, DELETE, PATCH, POST } = NextComment({
	// import from comment.config.ts
	auth: clerkAdapter,
	storage,
});
```

--------------------------------

### Cloudinary Integration for Image Uploads

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/image-upload.mdx

Set up Cloudinary for image uploads with unauthorized requests. This involves defining a custom storage context with an upload function that posts to the Cloudinary API. Ensure your NEXT_PUBLIC_CLOUDINARY_CLOUDNAME environment variable is set.

```tsx
import type { StorageContext } from "@fuma-comment/react";
import { Comments } from "@fuma-comment/react";

const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUDNAME;

const storage: StorageContext = {
	enabled: true,
	async upload(file) {
		const body = new FormData();
		body.append("file", file);
		body.append("upload_preset", "fuma_comment");

		const res = await fetch(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, {
			method: "POST",
			body,
		});

		if (res.ok) {
			const result = (await res.json()) as {
				secure_url: string;
				width: number;
				height: number;
			};

			return {
				url: result.secure_url,
				width: result.width,
				height: result.height,
			};
		}

		throw new Error("Failed to upload file");
	},
};

export function CommentsWithAuth() {
	return (
		<Comments
			storage={storage}
			auth={
				{
					// auth config
				}
			}
		/>
	);
}
```

--------------------------------

### Custom Image Renderer Configuration

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/image-upload.mdx

Customize how images are rendered by providing a custom 'render' function within the storage context. This allows for using components like 'next/image' or applying specific styling.

```tsx
import type { StorageContext } from "@fuma-comment/react";

const storage: StorageContext = {
	enabled: true,
	render: (props) => {
		// component
	},
};
```

--------------------------------

### Register Fuma Comment Plugin

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/fastify.mdx

Register the Fuma Comment plugin with default settings. Ensure you have a storage and auth adapter configured.

```typescript
import Fastify from "fastify";
import { commentPlugin } from "@fuma-comment/server/fastify";

const app = Fastify();

await app.register(
	commentPlugin({
		storage,
		auth,
	}),
);

await app.listen({ port: 3000 });
```

--------------------------------

### Prisma Schema Definition

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/prisma.mdx

Defines the data models for the Prisma ORM. This file should be placed in the specified path within your project.

```json
{
	"file": "../../packages/server/src/db/schema.prisma",
	"codeblock": true
}
```

--------------------------------

### Express.js Integration for Fuma Comment

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Integrate Fuma Comment with an Express.js application by passing your app instance and adapters to ExpressComment.

```ts
import { ExpressComment } from "@fuma-comment/server/express";

ExpressComment({
  // your app
  app,
  // import from comment.config.ts
  auth,
  storage
});
```

--------------------------------

### Elysia.js Plugin for Fuma Comment

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Use the Fuma Comment plugin with Elysia.js. Configure the auth and storage adapters, and optionally set a prefix for the API routes.

```ts
import Elysia from "elysia";
import { commentPlugin } from "@fuma-comment/server/elysia";

const app = new Elysia()
	.use(
		commentPlugin({
			// pass your adapters
			auth,
			storage,
			elysia: {
				// or other prefix if you wanted
				prefix: "/api/comments",
			},
		}),
	)
	.listen(8080);

const res = await fetch("http://localhost:8080/api/comments/page");

console.log(await res.json());
```

--------------------------------

### Auth Provider Role Integration

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/role-system.mdx

Integrate Fuma Comment with an auth provider that supports roles, such as Clerk. This requires defining a custom `getSessionWithRole` function within the `auth` configuration.

```typescript
import { NextComment } from "@fuma-comment/server/next";

export const { GET, DELETE, PATCH, POST } = NextComment({
	role: "auth",
	auth: {
		async getSessionWithRole(req, { page }) {
			// ...
		},
	},
	// other options
});
```

--------------------------------

### Register Fuma Comment Plugin with Custom Base URL

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/fastify.mdx

Mount the Fuma Comment plugin routes under a custom base URL. This is useful for organizing API endpoints.

```typescript
await app.register(
	commentPlugin({
		storage,
		auth,
		baseUrl: "api",
	}),
);
```

--------------------------------

### Drizzle ORM Schema for Fuma Comment

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/index.mdx

Copy the Drizzle schema definitions required for Fuma Comment to interact with your database. Ensure your auth tables are correctly referenced.

```ts
import { createDrizzleAdapter } from "@fuma-comment/server/adapters/drizzle";
import { comments, rates, roles, user } from "@/lib/schema";

const storage = createDrizzleAdapter({
	db,
	schemas: {
		comments,
		rates,
		roles,
		user,
	},
	// Use tables created by your auth provider
	auth: "next-auth" | "better-auth",
});
```

--------------------------------

### Drizzle Schema Definition

Source: https://github.com/fuma-nama/fuma-comment/blob/main/apps/docs/content/docs/drizzle.mdx

Specifies the Drizzle schema file path for Fuma Comment integration. Ensure this file correctly defines your database schemas.

```json
{
	"file": "../../packages/server/src/db/schema.drizzle.ts",
	"codeblock": true
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.