Skip to content

alp82/aistack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

215 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

AI Stack AI Stack

Discover, compare, and share AI technology stacks

Live npm

Stars, Forks, Issues and License


AI Stack Demo


Improve your AI workflow


Discord Reddit

🎯 What is AI Stack

AI Stack helps developers and teams discover, compare, and share AI technology stacks. Whether you are building a new AI-powered application or optimizing an existing setup, AI Stack is a curated collection of tools, frameworks, and configs that lets you make informed decisions - and carry your own AI config between machines with one command.

✨ Features

  • πŸ” Discover AI tools and frameworks organized by stack
  • βš–οΈ Compare stacks side by side and cut costs for your own usage
  • πŸš€ Share your own AI stacks with the community
  • βž• Add missing tools inline during stack creation or in batch mode
  • πŸ”„ Sync configs between your repo and the web with the CLI
  • πŸ” Authentication via email/password and Google SSO

βš™οΈ How It Works

AI Stack has two surfaces that work together: the web app where you browse and publish, and the CLI that bridges your local filesystem with your stack.

flowchart LR
    dev(["πŸ‘©β€πŸ’» Your repo"]) -->|aistack collect| stack[("πŸ“¦ Your Stack<br/>on aistack.to")]
    stack -->|browse & compare| world(["🌍 Community"])
    world -->|fork ideas| stack
    stack -->|aistack create| any(["πŸ–₯️ Any machine"])
Loading
  1. The web app (aistack.to) - where you browse stacks, compare tools, and publish your own setups. Each stack groups multiple projects, and each project holds your actual AI config files (prompts, rules, skills, MCP servers).

  2. The CLI (@use-aistack/cli) - a small tool that scans your project for AI config files and uploads them, or clones someone else's configs into your working directory. No manual copy-paste.

Typical flow:

  • Sign up on the web app and create a stack.
  • Run npx @use-aistack/cli collect inside your repo to upload your .cursorrules, CLAUDE.md, AGENTS.md, skills, and MCP configs to your stack.
  • Share the stack link. On another machine, run npx @use-aistack/cli create to write that AI setup into the current directory.

πŸ’» CLI

The CLI is published to npm as @use-aistack/cli. Run it on demand with npx - no install required:

npx @use-aistack/cli <command>
Command What it does
login Authenticate with your AI Stack account via browser
collect Scan the current project for AI config files and upload them to your stack
create Write your stack's AI config files into the current directory

collect detects: .cursorrules, CLAUDE.md, AGENTS.md, .cursor/rules/, mcp.json, skill directories, prompts, and global configs (~/.claude/, ~/.cursor/, etc).

Install globally (optional) - if you would rather type aistack than npx @use-aistack/cli every time:

npm i -g @use-aistack/cli
# then: aistack login Β· aistack collect Β· aistack create

πŸ›  Contributing

The rest of this document is for contributors working on the AI Stack web app or CLI.

Tech Stack

TanStack Start React 19 Tailwind CSS v4 TypeScript Convex Better Auth Vite pnpm Biome Vitest PostHog

Frontend

Backend & Data

  • Backend: Convex - serverless database and backend functions
  • Authentication: Better Auth - modern authentication solution
  • State Management: TanStack Query - server state management
  • Forms: TanStack Forms - type-safe form handling

Development Tools

  • Language: TypeScript - type-safe JavaScript
  • Build Tool: Vite - fast build tool and dev server
  • Package Manager: pnpm - fast, disk-space-efficient package manager
  • Linting/Formatting: Biome - all-in-one toolchain
  • Testing: Vitest - fast unit testing framework
  • Analytics: PostHog - product analytics suite

πŸ“ Project Structure

aistack/              # Main web application
β”œβ”€β”€ convex/           # Convex backend functions & schema
β”œβ”€β”€ public/           # Static assets
β”œβ”€β”€ src/              # React application source
β”‚   β”œβ”€β”€ components/   # Shared UI primitives and cross-feature components
β”‚   β”œβ”€β”€ features/     # Feature-scoped modules (landing, stack-editor, etc.)
β”‚   β”œβ”€β”€ integrations/ # Third-party integrations
β”‚   └── routes/       # File-based routing
└── README.md         # You are here

Frontend architecture notes

  • Route files should stay composition-focused (data fetch + section orchestration).
  • Landing page is organized under src/features/landing/*.
  • Stack editor is organized under src/features/stack-editor/* with section components in sections/*, reducer/selectors/hooks in state/*, and status computation in editor-status.ts.
  • Reusable visual wrappers live under src/components/system/*.

πŸš€ Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • pnpm (recommended) or npm
  • Git

Installation

# 1. Clone the repository
git clone https://github.com/alp82/aistack.git
cd aistack

# 2. Install dependencies
pnpm install

# 3. Set up environment variables
cp .env.example .env.local
# VITE_CONVEX_URL and CONVEX_DEPLOYMENT are required

# 4. Initialize Convex (sets up your deployment + env vars)
pnpm convex dev

# 5. Start the development server
pnpm dev

The application will be available at:

πŸ“œ Available Scripts

# Development
pnpm dev          # Start development server
pnpm convex dev   # Start Convex backend server

# Building
pnpm build        # Build for production
pnpm preview      # Preview production build

# Code Quality
pnpm lint         # Run Biome linter
pnpm format       # Format code with Biome
pnpm check        # Run all Biome checks

# Testing
pnpm test         # Run unit tests with Vitest

πŸ§ͺ Testing

The project uses Vitest for unit testing. Tests live in src/**/__tests__ directories.

Vitest is configured in vite.config.ts with test.environment = "jsdom" and test.setupFiles = ["./src/test/setup.ts"]. src/test/setup.ts loads @testing-library/jest-dom/vitest matchers for DOM assertions.

# Run all tests
pnpm test

# Run a single test file
pnpm vitest run src/features/stack-editor/state/__tests__/editor-reducer.test.ts

# Watch mode
pnpm test --watch

# Coverage report
pnpm test --coverage

🎨 Adding Components

This project uses Shadcn UI components. Add new components with:

pnpm dlx shadcn@latest add [component-name]

Design note: No border-radius (sharp corners throughout), monospace fonts for buttons/labels/technical accents, and lime as the brand color.

πŸ“Š Development Notes

  • The development server runs on http://localhost:3019; the Convex backend on http://localhost:3210. Both should stay running during development.
  • Use Chrome DevTools MCP for debugging and reviewing code updates.
  • Dev Admin Access: in development mode, a "Dev Admin Login" button appears on the login page. It signs in as dev-admin@example.com with admin privileges. Requires the Convex env var IS_DEV=true (email verification is also skipped when IS_DEV=true).

πŸ—„ Database Migrations

Migration scripts live in convex/migrations/. Run them via the Convex Dashboard (Functions tab β†’ pick the function β†’ Run Function) or the CLI:

# Run an internal query (read-only, for previews)
npx convex run migrations/backup:exportStackDescriptions

# Run an internal mutation (makes changes)
npx convex run migrations/populateShortIds:populateAllShortIds

Available migration scripts

migrations/backup.ts - Backup & Restore

Function Type Description
exportStackDescriptions Query Export all stack descriptions as JSON backup
exportShortIdMappings Query Export tool/model/bundle shortId mappings
restoreStackDescription Mutation Restore a single stack from backup
restoreStackDescriptionsBatch Mutation Restore multiple stacks from a backup array

migrations/populateShortIds.ts - ShortId Population

Function Type Description
getMissingCounts Query Check how many records are missing a shortId
populateAllShortIds Mutation Populate shortIds for all tools, models, bundles
populateToolShortIds Mutation Populate shortIds for tools only
populateModelShortIds Mutation Populate shortIds for models only
populateBundleShortIds Mutation Populate shortIds for bundles only

migrations/migrateStackDescriptions.ts - Description Migration

Function Type Description
getStackCounts Query Count stacks with legacy blocks (iconUrl attributes)
dryRunMigration Query Preview what would be migrated without changes
previewStackMigration Query Preview migration for a single stack
migrateAllStackDescriptions Mutation Run the actual migration on all stacks

Migration workflow

⚠️ Before running migrations on production, always create a backup first.

# 1. Backup existing stack descriptions
npx convex run migrations/backup:exportStackDescriptions > backup-stacks.json

# 2. Check how many records need shortId population
npx convex run migrations/populateShortIds:getMissingCounts

# 3. Populate shortIds for tools, models, and bundles
npx convex run migrations/populateShortIds:populateAllShortIds

# 4. Preview description migration (dry run)
npx convex run migrations/migrateStackDescriptions:dryRunMigration

# 5. Run the actual description migration
npx convex run migrations/migrateStackDescriptions:migrateAllStackDescriptions

Restoring from backup

# Single stack
npx convex run migrations/backup:restoreStackDescription \
  '{"stackId": "k1234...", "description": "<p>Original content...</p>"}'

# Multiple stacks (pass a JSON array)
npx convex run migrations/backup:restoreStackDescriptionsBatch \
  '{"backups": [{"stackId": "k1234...", "description": "..."}]}'

🀝 How to Contribute

Contributions are welcome.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request against main

πŸ“„ License

Licensed under the MIT License - see the LICENSE file for details.

πŸ”— Links


Built with πŸ’š by Alper Ortac Β· x.com/alperortac

Live

Releases

Packages

Contributors

Languages