+ The only AI app builder that truly knows backend development +
+ ++ Features โข + Quick Start โข + New Features โข + Setup Guide โข + Architecture โข + Contributing +
+ +--- + +## ๐ What is Chef? + +[Chef](https://chef.convex.dev) is a revolutionary AI-powered application builder that creates **complete full-stack web applications** with: + +- ๐๏ธ **Built-in Database** - Powered by Convex reactive database +- ๐ **Zero-Config Authentication** - User management out of the box +- ๐ **File Upload System** - Handle media and documents seamlessly +- โก **Real-time UIs** - Live updates across all connected clients +- ๐ **Background Workflows** - Automated tasks and processes +- ๐ค **AI Code Generation** - Smart, context-aware code creation + +### ๐ฏ Why Chef is Different + +Unlike other AI code generators that only create frontend mockups, Chef understands and builds **complete backend systems**. It leverages [Convex](https://convex.dev)'s powerful APIs to create production-ready applications with real databases, authentication, and server-side logic. + +--- + +## โจ Features + +### ๐จ **Frontend Capabilities** +- **React/TypeScript** - Modern, type-safe frontend development +- **Responsive Design** - Mobile-first, adaptive layouts +- **Component Library** - Reusable UI components with Tailwind CSS +- **Real-time Updates** - Live data synchronization +- **File Management** - Drag-and-drop file uploads + +### ๐ง **Backend Power** +- **Convex Database** - Reactive, real-time database +- **Authentication** - Secure user management with OAuth +- **API Functions** - Serverless backend functions +- **File Storage** - Secure file upload and management +- **Background Jobs** - Scheduled tasks and workflows + +### ๐ค **AI Integration** +- **Multi-Provider Support** - OpenAI, Anthropic, Google, xAI +- **Context-Aware Generation** - Understands your entire codebase +- **Incremental Development** - Build and iterate on existing projects +- **Smart Debugging** - AI-powered error detection and fixes -Chef's capabilities are enabled by being built on top of [Convex](https://convex.dev), the open-source reactive database designed to make life easy for web app developers. The "magic" in Chef is just the fact that it's using Convex's APIs, which are an ideal fit for codegen. +--- -Development of the Chef is led by the Convex team. We -[welcome bug fixes](./CONTRIBUTING.md) and -[love receiving feedback](https://discord.gg/convex). +## ๐ New Features (Latest Update) -This project is a fork of the `stable` branch of [bolt.diy](https://github.com/stackblitz-labs/bolt.diy). +This fork includes three major enhancements: -## Getting Started +### 1. ๐ **Enhanced API Key Management** +- **Visual Interface** - Manage all API keys through a clean UI +- **Multiple Providers** - Support for Anthropic, Google, OpenAI, and xAI +- **Secure Storage** - Encrypted key storage in Convex database +- **Validation** - Real-time API key validation +- **No Environment Setup** - Add keys directly through settings page -Visit our [documentation](https://docs.convex.dev/chef) to learn more about Chef and check out our prompting [guide](https://stack.convex.dev/chef-cookbook-tips-working-with-ai-app-builders). +### 2. ๐ **GitHub Integration** +- **OAuth Authentication** - Secure GitHub account connection +- **Repository Browser** - View and select existing repositories +- **Project Import** - Continue work on existing GitHub projects +- **Seamless Workflow** - Import, modify, and deploy GitHub repos -The easiest way to build with Chef is through our hosted [webapp](https://chef.convex.dev), which includes a generous free tier. If you want to -run Chef locally, you can follow the guide below. +### 3. ๐ **Unified Architecture** +- **Single URL Access** - Frontend and backend served from one endpoint +- **Simplified Deployment** - No separate backend deployment needed +- **Development Efficiency** - Streamlined local development setup -### Running Locally +--- -Note: This will use the hosted Convex control plane to provision Convex projects. However, Chef tokens used in this enviroment will not count towards usage in your Convex account. +## ๐ Quick Start -**1. Clone the project** +### Prerequisites +- **Node.js 20+** - [Download here](https://nodejs.org/) +- **pnpm** - Fast, disk space efficient package manager +- **Git** - Version control -Clone the GitHub respository and `cd` into the directory by running the following commands: +### 1-Minute Setup ```bash -git clone https://github.com/get-convex/chef.git +# Clone the repository +git clone https://github.com/somdipto/chef.git cd chef + +# Install dependencies +npm install -g pnpm +pnpm install + +# Set up environment +echo 'VITE_CONVEX_URL=placeholder' > .env.local + +# Start development +pnpm dev ``` -**2. Set up local environment** +๐ **That's it!** Chef will start without requiring any API keys upfront. Add them through the UI at `http://127.0.0.1:5173/settings`. + +--- -Run the following commands in your terminal: +## ๐ Detailed Setup + +### Step 1: Environment Setup ```bash +# Install Node Version Manager (if not installed) +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash + +# Use the correct Node version nvm install nvm use + +# Install pnpm globally npm install -g pnpm -pnpm i -echo 'VITE_CONVEX_URL=placeholder' >> .env.local -npx convex dev --once # follow the steps to create a Convex project in your team -``` -Note: `nvm` only works on Mac and Linux. If you are using Windows, you may have to find an alternative. +# Install project dependencies +pnpm install +``` -**3. Set up Chef OAuth application** +### Step 2: Convex Database Setup -Go to the Convex [dashboard](https://dashboard.convex.dev/team/settings/applications/oauth-apps) and create an OAuth application. The team you use to create the application will be the only team you can sign-in with on local Chef. Redirect URIs will not matter, but you can set one to http://127.0.0.1:5173 (or whatever port youโll run the Chef UI on) so that the form can be submitted. +```bash +# Initialize Convex (follow interactive prompts) +npx convex dev --once + +# This will: +# 1. Create a Convex account (or login) +# 2. Set up a new project +# 3. Generate your CONVEX_URL +# 4. Update .env.local automatically +``` -**4. Set up Convex deployment** +### Step 3: Configure Environment Variables -Use `npx convex dashboard` to open the Convex [dashboard](https://dashboard.convex.dev) and go to Settings โ Environment Variables. Then, set the following environment variables: +Create or update `.env.local`: ```env -BIG_BRAIN_HOST=https://api.convex.dev -CONVEX_OAUTH_CLIENT_ID=+ Built with โค๏ธ by developers, for developers +
+ + diff --git a/SETUP_FEATURES.md b/SETUP_FEATURES.md new file mode 100644 index 000000000..baebcdcdc --- /dev/null +++ b/SETUP_FEATURES.md @@ -0,0 +1,63 @@ +# Chef Features Setup Guide + +This guide covers the setup for the three new features added to Chef: + +## 1. API Key Management via UI โ + +**Already implemented** - The settings page now shows all supported providers: +- Anthropic (Claude) +- Google (Gemini) +- OpenAI (GPT) +- xAI (Grok) + +Users can add, view, and remove API keys through the UI at `/settings`. + +## 2. GitHub Integration ๐ง + +**Setup required:** + +1. Create a GitHub OAuth App: + - Go to GitHub Settings โ Developer settings โ OAuth Apps + - Click "New OAuth App" + - Set Authorization callback URL to: `http://127.0.0.1:5173/settings` + +2. Update environment variables in `.env.local`: + ``` + GITHUB_CLIENT_ID=your_github_client_id + GITHUB_CLIENT_SECRET=your_github_client_secret + VITE_APP_URL=http://127.0.0.1:5173 + ``` + +3. Deploy Convex functions: + ```bash + npx convex dev + ``` + +## 3. Unified Backend/Frontend โ + +**Already implemented** - The app serves both frontend and backend from a single URL: +- Frontend: React/Remix app +- Backend: Convex functions for API keys and GitHub integration +- All accessible from `http://127.0.0.1:5173` + +## Usage + +1. Start the development server: + ```bash + pnpm run dev + npx convex dev # in another terminal + ``` + +2. Visit `http://127.0.0.1:5173/settings` to: + - Manage API keys for all supported providers + - Connect GitHub account and browse repositories + - Configure other settings + +## Files Modified/Created + +- `convex/schema.ts` - Added GitHub integration schema +- `convex/github.ts` - GitHub integration backend functions +- `app/routes/api.github.oauth.ts` - GitHub OAuth handler +- `app/components/settings/GitHubCard.tsx` - GitHub UI component +- `app/components/SettingsContent.client.tsx` - Updated settings page +- `app/components/settings/ApiKeyCard.tsx` - Enhanced API key management diff --git a/app/components/ModernHomepage.client.tsx b/app/components/ModernHomepage.client.tsx new file mode 100644 index 000000000..5e547426d --- /dev/null +++ b/app/components/ModernHomepage.client.tsx @@ -0,0 +1,231 @@ +import { useState } from 'react'; +import { ModernLayout, ModernContainer, ModernCard } from './ui/ModernLayout'; +import { ModernHeader } from './header/ModernHeader'; +import { ModernHero } from './landing/ModernHero'; +import { ModernChatInterface } from './chat/ModernChatInterface'; +import { ModernWorkbench } from './workbench/ModernWorkbench'; +import { cn } from '~/utils/classNames'; + +type ViewMode = 'landing' | 'chat' | 'workbench'; + +export function ModernHomepage() { + const [viewMode, setViewMode] = useState2 hours ago
+1 day ago
+3 days ago
+Chat with Chef to create your full-stack application
++ Chef combines the power of AI with a complete backend platform to help you build production-ready applications in minutes. +
+Describe your app in natural language and watch Chef build it for you with intelligent code generation.
+Built on Convex for instant updates, reactive queries, and seamless real-time collaboration.
+One-click deployment to production with automatic scaling and global CDN distribution.
++ Join thousands of developers building the future with AI-powered full-stack development. +
+ +Full-stack AI assistant
+{message.content}
++ {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} +
+