AHGUIAHUIAHUIA

🤖 @falai/agent Documentation Site

Documentation website for the @falai/agent framework - Build intelligent, conversational AI agents with TypeScript.

🚀 Features

• ✨ Automated Content Generation: Automatically fetches and renders documentation from @falai/agent package
• 📚 Documentation Pages: All docs from the package's /docs folder rendered with syntax highlighting
• 💻 Live Examples: Interactive code examples from the package's /examples folder
• 🎨 Modern UI: Beautiful, responsive design with dark theme
• ⚡ Fast Performance: Built with Vite + React for lightning-fast development and builds
• 🔍 Type-Safe: Full TypeScript support throughout

📦 Tech Stack

• Framework: React 19 + TypeScript
• Build Tool: Vite 7
• Package Manager: Bun
• Routing: React Router v7
• Markdown Rendering: react-markdown with remark-gfm
• Syntax Highlighting: rehype-highlight with highlight.js
• Linting: ESLint with TypeScript support

🛠️ Development

Prerequisites

• Bun 1.0+ (recommended) or Node.js 18+
• The @falai/agent package is automatically included as a dependency

Installation

# Clone the repository
git clone <your-repo-url>
cd falai-site

# Install dependencies
bun install

Development Server

# Start development server (includes metadata generation)
bun run dev

The site will be available at http://localhost:5173

Build for Production

# Build the site
bun run build

# Preview the production build
bun run preview

Other Commands

# Generate content metadata from @falai/agent package
bun run generate:metadata

# Run type checking
bun run typecheck

# Run linter
bun run lint

📁 Project Structure

falai-site/
├── scripts/
│   └── generate-content-metadata.ts  # Generates metadata from @falai/agent package
├── src/
│   ├── components/
│   │   ├── CodeViewer.tsx           # Renders code examples
│   │   ├── Header.tsx               # Site header with navigation
│   │   ├── Layout.tsx               # Main layout wrapper
│   │   ├── MarkdownViewer.tsx       # Renders markdown documentation
│   │   └── Sidebar.tsx              # Sidebar navigation
│   ├── pages/
│   │   ├── DocPage.tsx              # Individual documentation page
│   │   ├── ExamplePage.tsx          # Individual example page
│   │   └── HomePage.tsx             # Landing page with README
│   ├── App.tsx                      # Main app component with routing
│   ├── App.css                      # Global styles
│   └── content-metadata.json        # Auto-generated metadata
├── vite.config.ts                   # Vite configuration
└── package.json

🔄 How It Works

1. Metadata Generation: The generate-content-metadata.ts script scans the @falai/agent package for documentation and examples
2. Static Content Copy: Vite plugin copies markdown and code files to the build output
3. Dynamic Routing: React Router creates routes for all docs and examples based on metadata
4. Runtime Fetching: Content is fetched at runtime and rendered with syntax highlighting

🎨 Customization

Styling

The site uses CSS custom properties (CSS variables) for easy theming. Edit src/App.css to customize:

:root {
  --bg-primary: #0a0a0b;
  --accent-primary: #6366f1;
  /* ... more variables */
}

Content

The documentation content is automatically sourced from the @falai/agent package. To update:

1. Update the @falai/agent package version in package.json
2. Run bun install
3. Run bun run generate:metadata to update metadata
4. Build or start dev server

🚢 Deployment

The site is a static SPA that can be deployed to any static hosting service:

• Vercel: Connect your repository and deploy automatically
• Netlify: Same as Vercel, with automatic builds
• GitHub Pages: Deploy the dist folder
• Cloudflare Pages: Connect and deploy

Build Output

The dist folder contains:

• Static HTML, CSS, and JS
• /content/ directory with all markdown and code files
• Optimized and minified assets

📝 License

MIT © 2025

---

Built with ❤️ for the @falai/agent community