Xref.ai

An AI-powered content generation platform built with Next.js 16, React 19, and Firebase. Xref.ai helps you create original content for blog posts, essays, marketing copy, product descriptions, and more using advanced AI capabilities.

🚀 Features

💬 AI Chat — Real-time conversational AI with streaming responses and conversation memory
📝 Text Summarization — Summarize any topic or scrape websites for content summarization
✨ Freestyle Writing — Generate creative content from custom prompts
📖 Text Simplification — Simplify complex text to different reading levels (1st Grade to PhD)
🎨 Image Generation — Create AI-generated images from text descriptions
🎯 Designer Tool — Mix creative elements (colors, artists, styles) to generate unique visual designs
📜 History — View and manage all your past generations
💳 Payments — Stripe integration for premium features and credits

🛠 Tech Stack

Core Framework

Package	Version	Purpose
Next.js	16.x	React framework with App Router and Turbopack
React	19.x	UI library with latest features
TypeScript	5.x	Type safety and developer experience

AI & Machine Learning

Package	Version	Purpose
Vercel AI SDK	6.x	Streaming AI responses and model integration
@ai-sdk/react	3.x	UI hooks for streaming chat
@ai-sdk/openai	3.x	OpenAI provider for text generation
@ai-sdk/anthropic	3.x	Anthropic provider
@ai-sdk/xai	3.x	xAI provider
@ai-sdk/google	3.x	Google provider
@ai-sdk/rsc	2.x	Server Actions streaming

Backend & Database

Package	Version	Purpose
Firebase	12.x	Authentication, Firestore database, Cloud Storage
Firebase Admin	13.x	Server-side Firebase operations
Stripe	20.x	Payment processing

UI & Styling

Package	Version	Purpose
Tailwind CSS	4.x	Utility-first CSS framework
Lucide React	0.562.x	Beautiful icon library
React Select	5.x	Advanced select/dropdown components
React Markdown	10.x	Render markdown content
React Hot Toast	2.x	Toast notifications

State Management & Utilities

Package	Version	Purpose
Zustand	5.x	Lightweight state management
Axios	1.x	HTTP client for API requests
Cheerio	1.x	HTML parsing for web scraping
Lodash	4.x	Utility functions

Additional Libraries

Package	Purpose
react-scroll-to-bottom	Auto-scrolling chat container
react-textarea-autosize	Auto-expanding textareas
react-simple-typewriter	Typewriter effect animations
react-cookie-consent	GDPR cookie consent banner
react-firebase-hooks	Firebase React hooks
remark-gfm	GitHub Flavored Markdown support
sharp	Image processing and optimization
cookies-next	Cookie management for Next.js

📦 Prerequisites

Before you begin, ensure you have:

Node.js 18.x or higher
npm 9.x or higher (or yarn/pnpm)
A Firebase project with:
- Authentication enabled (Email/Password and/or Google)
- Firestore Database
- Cloud Storage
An OpenAI API key (optional if you use credits only)
A Fireworks AI API key (for image generation)
A Stripe account (for payments)
- Optional: Anthropic, xAI, or Google API keys for alternate models

🔧 Installation

Clone the repository

git clone https://github.com/brown2020/xrefaiapp.git
cd xrefaiapp

Install dependencies
```
npm install
```
Set up environment variables
```
cp .env.example .env.local
```
Fill in your credentials (see Environment Variables)
Run the development server
```
npm run dev
```
Open in browser

Navigate to http://localhost:3000

🔐 Environment Variables

Create a .env.local file in the root directory with the following variables:

# Firebase Client Configuration
NEXT_PUBLIC_FIREBASE_APIKEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECTID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGEBUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=your_sender_id
NEXT_PUBLIC_FIREBASE_APPID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENTID=G-XXXXXXXXXX

# Firebase Admin (Server-side)
FIREBASE_TYPE=service_account
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_PRIVATE_KEY_ID=your_private_key_id
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxxx@your_project.iam.gserviceaccount.com
FIREBASE_CLIENT_ID=your_client_id
FIREBASE_AUTH_URI=https://accounts.google.com/o/oauth2/auth
FIREBASE_TOKEN_URI=https://oauth2.googleapis.com/token
FIREBASE_AUTH_PROVIDER_X509_CERT_URL=https://www.googleapis.com/oauth2/v1/certs
FIREBASE_CLIENT_CERTS_URL=https://www.googleapis.com/robot/v1/metadata/x509/...

# AI Providers (used when credits are enabled)
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=...
XAI_API_KEY=...
GOOGLE_API_KEY=...

# Fireworks AI (Image Generation)
FIREWORKS_API_KEY=your_fireworks_api_key

# Stripe
NEXT_PUBLIC_STRIPE_KEY=pk_...
STRIPE_SECRET_KEY=sk_...
NEXT_PUBLIC_STRIPE_PRODUCT_NAME=Xref.ai Credits
APP_URL=https://your-production-domain.com

# Optional
NEXT_PUBLIC_COOKIE_NAME=xrefAuthToken

# Optional (native IAP WebView)
IAP_WEBVIEW_SECRET=your_shared_hmac_secret

Getting API Keys

Service	Where to Get
Firebase	Firebase Console → Project Settings
OpenAI	OpenAI Platform
Fireworks AI	Fireworks Console
Stripe	Stripe Dashboard

📁 Project Structure

xrefaiapp/
├── public/                 # Static assets
│   └── .well-known/        # App associations (iOS/Android deep links)
├── src/
│   ├── actions/            # Server Actions
│   │   ├── generateAIResponse.ts    # Unified AI text generation
│   │   ├── generateImage.ts         # AI image generation
│   │   ├── confirmIapPurchase.ts    # Native IAP fulfillment
│   │   ├── paymentActions.ts        # Stripe payment handling
│   │   └── suggestTags.ts           # AI tag suggestions
│   │
│   ├── app/                # Next.js App Router pages
│   │   ├── api/proxy/      # Web scraping proxy endpoint
│   │   ├── api/chat/       # AI chat streaming endpoint
│   │   ├── chat/           # AI chat interface
│   │   ├── tools/          # AI writing tools
│   │   ├── history/        # Generation history
│   │   ├── account/        # User account management
│   │   └── ...             # Other pages
│   │
│   ├── components/         # React components
│   │   ├── ui/             # Reusable UI components
│   │   ├── icons/          # SVG icon components
│   │   ├── DesignerPrompt/ # Designer tool components
│   │   └── ...             # Feature components
│   │
│   ├── hooks/              # Custom React hooks
│   │   ├── useChatMessages.ts     # Chat history management
│   │   ├── useHistorySaver.ts     # Save to Firestore
│   │   └── ...
│   │
│   ├── firebase/           # Firebase configuration
│   │   ├── firebaseClient.ts      # Client-side SDK
│   │   └── firebaseAdmin.ts       # Admin SDK (server)
│   │
│   ├── zustand/            # State management stores
│   │   ├── useAuthStore.ts        # Authentication state
│   │   ├── useProfileStore.ts     # User profile state
│   │   └── usePaymentsStore.ts    # Payment/credits state
│   │
│   ├── data/               # Static data (painters, colors, etc.)
│   ├── types/              # TypeScript type definitions
│   └── utils/              # Utility functions
│
├── .env.example            # Environment variables template
├── next.config.mjs         # Next.js configuration
├── tailwind.config.ts      # Tailwind CSS configuration
└── tsconfig.json           # TypeScript configuration

🎯 Features Deep Dive

AI Chat (`/chat`)

A full-featured chat interface with:

Streaming responses — UI streaming via AI SDK useChat and /api/chat
Conversation memory — AI remembers context from previous messages
Persistent history — Conversations saved to Firestore
Load more — Pagination for older messages

Tools (`/tools`)

Six AI-powered writing tools:

Tool	Description
Summarize Website	Enter a URL to scrape and summarize web content
Summarize Text	Paste text to get a concise summary
Freestyle Writing	Generate creative content from any prompt
Simplify Writing	Convert complex text to simpler reading levels
Generate Image	Create AI images from text descriptions
Designer Tool	Combine creative elements for unique visual designs

History (`/history`)

View all past generations (text and images)
Search through history
Copy or download previous outputs
Expandable conversation view

Account Management (`/account`)

View profile information
Manage credits and payments
Delete account option

🏗 Architecture

Server Actions & API Routes

Xref.ai uses Server Actions for tools and API routes for chat streaming with AI SDK UI:

// Example: /api/chat route (AI SDK UI)
import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai("gpt-5.4"),
    messages,
  });

  return result.toUIMessageStreamResponse();
}

State Management (Zustand)

Lightweight, modular stores:

useAuthStore — User authentication state
useProfileStore — User profile and preferences
usePaymentsStore — Credits and payment status

Firestore Data Model

users/
  └── {uid}/
      ├── profile          # User profile document
      ├── summaries/       # Text generation history
      │   └── {docId}
      └── chats/           # Chat conversation history
          └── {docId}

📡 API Reference

Web Scraping Proxy

GET /api/proxy?url={encoded_url}

Fetches and returns HTML content from the specified URL for summarization.

Parameters:

url (required): URL-encoded website address

Response: Raw HTML content

API Routes

Endpoint	Purpose	Input
`POST /api/chat`	Streaming chat responses	`messages`, `history`, `model`
`POST /api/billing/checkout`	Start Stripe checkout session	`packId`, `redirectPath`
`POST /api/billing/confirm`	Confirm Stripe checkout session	`sessionId`
`GET /api/proxy`	Web scraping proxy	`url`

Server Actions

Action	Purpose	Input
`generateResponse`	Generate text from prompt	`systemPrompt`, `userPrompt`
`generateResponseWithMemory`	Generate with conversation context	`systemPrompt`, `chatHistory[]`
`generateImage`	Create AI image	`prompt`
`suggestTags`	Get tag suggestions	`freestyle`, `tags[]`
`createPaymentIntent`	Start Stripe payment	`amount`
`validatePaymentIntent`	Verify payment	`paymentIntentId`

🤝 Contributing

We welcome contributions! Here's how to get started:

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Make your changes
- Follow the existing code style
- Add TypeScript types for new code
- Test your changes locally
Commit your changes
```
git commit -m "Add amazing feature"
```
Push to your fork
```
git push origin feature/amazing-feature
```
Open a Pull Request

Development Guidelines

Use TypeScript for all new code
Follow functional components with hooks
Use Tailwind CSS for styling
Use Server Actions for tool generation and API routes for chat streaming
Use Zustand for global state management
Keep components modular and reusable

Available Scripts

npm run dev      # Start development server (Turbopack)
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

📞 Support

GitHub Issues: Report a bug
Email: info@ignitechannel.com
Website: xref.ai

Built with ❤️ by brown2020

Name		Name	Last commit message	Last commit date
Latest commit History 109 Commits
.claude		.claude
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
README.md		README.md
cors.json		cors.json
eslint.config.mjs		eslint.config.mjs
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
roadmap.md		roadmap.md
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Xref.ai

🚀 Features

📋 Table of Contents

🛠 Tech Stack

Core Framework

AI & Machine Learning

Backend & Database

UI & Styling

State Management & Utilities

Additional Libraries

📦 Prerequisites

🔧 Installation

🔐 Environment Variables

Getting API Keys

📁 Project Structure

🎯 Features Deep Dive

AI Chat (/chat)

Tools (/tools)

History (/history)

Account Management (/account)

🏗 Architecture

Server Actions & API Routes

State Management (Zustand)

Firestore Data Model

📡 API Reference

Web Scraping Proxy

API Routes

Server Actions

🤝 Contributing

Development Guidelines

Available Scripts

📄 License

📞 Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

AI Chat (`/chat`)

Tools (`/tools`)

History (`/history`)

Account Management (`/account`)

Packages