diff --git a/README.md b/README.md index f59fe04..a075caa 100644 --- a/README.md +++ b/README.md @@ -29,16 +29,196 @@ -https://github.com/user-attachments/assets/403225b6-0665-4dea-b33c-2f49552d5031 +## Overview + +NeoCode is an AI-powered website builder that generates complete Next.js applications from single prompts using a multi-agent architecture. The system orchestrates specialized AI agents to handle code generation, task summarization, and user response creation in isolated sandbox environments. + +## Quick Start -## Get started ### Prerequisites -- git -- recent version of NodeJS and NPM -- E2B -- Gemini API key -- Neon URL -- Clerk secrets (for billing) + +Before you begin, ensure you have the following: + +- **Development Tools**: git, recent Node.js and NPM +- **API Keys & Services**: + - E2B API key for sandbox environments + - Gemini API key for AI model access + - Neon database URL for PostgreSQL + - Clerk secrets for authentication and billing + +### Installation + +1. Clone the repository: +```bash +git clone +cd neocode +``` + +2. Install dependencies: +```bash +npm install +``` + +3. Configure environment variables: +```bash +# Copy the example environment file +cp .env.example .env.local + +# Edit with your API keys and configuration +``` + +4. Set up the database: +```bash +npx prisma migrate dev +npx prisma generate +``` + +5. Start the development server: +```bash +npm run dev +``` + +## Usage Guide + +### Basic Usage + +1. **Access the Application**: Navigate to `http://localhost:3000` +2. **Enter Your Prompt**: Describe the website you want to build in natural language +3. **Wait for Generation**: The AI agents will create your application in the sandbox +4. **Preview Results**: View the generated application with the provided preview URL + +## Development Guide + +### Architecture Overview + +NeoCode uses a multi-agent system with the following key components: + +```mermaid +graph TB + User["User Prompt"] + Trigger["tRPC API"] + Inngest["Inngest Event System"] + CodeAgent["codeAgent (gemini-2.5-flash)"] + Sandbox["E2B Sandbox"] + Database["Prisma/PostgreSQL"] + + User --> Trigger + Trigger --> Inngest + Inngest --> CodeAgent + CodeAgent --> Sandbox + CodeAgent --> Database + Sandbox --> CodeAgent +``` + +### Core Components + +**1. Agent System** (`src/inngest/functions.ts`) +- `codeAgentFunction`: Main orchestrator that handles the entire workflow. +- `codeAgent`: Primary AI agent for code generation using Gemini 2.5 Flash. +- `createNetwork`: Manages iterative execution with router logic. + +**2. State Management** +The system maintains state through the `AgentState` interface: +```typescript +interface AgentState { + summary: string, + files: { [path: string]: string } +} +``` + +**3. Tool System** +The agent interacts with the sandbox through three main tools: +- `terminal`: Execute shell commands (npm install, etc.) +- `createOrUpdateFiles`: Write files to the sandbox +- `readFiles`: Read file contents for verification + +### Adding New Features + +**1. Extending the Agent Tools** +To add new capabilities, modify the tools array in `src/inngest/functions.ts`: + +```typescript +tools: [ + // Existing tools... + createTool({ + name: "your-new-tool", + description: "Description of what it does", + parameters: z.object({ + // Define your parameters + }), + handler: async ({ parameters, step, network }) => { + // Implementation + } + }) +] +``` + +**2. Modifying the System Prompt** +Update `src/prompt.ts` to: +- Add new coding standards +- Include additional component libraries +- Modify workflow instructions +- Update success criteria + +**3. Customizing the Sandbox** +Modify the sandbox configuration in the agent function: +```typescript +const sandbox = await Sandbox.create("neo-test-1"); +await sandbox.setTimeout(SANDBOX_TIMEOUT); +``` + +### Development Workflow + +**1. Local Development** +- Use `npm run dev` for the main application +- Test prompts through the web interface +- Monitor agent execution in the console + +**2. Debugging Agent Execution** +- Check Inngest dashboard for function execution +- Review sandbox logs for file operations +- Examine database records for generated content + +**3. Testing Changes** +- Test with various prompt types +- Verify component imports and usage +- Check responsive design output +- Validate TypeScript compilation + +## Deployment + +### Environment Setup + +1. **Production Database**: Configure Neon PostgreSQL +2. **API Keys**: Set up production API keys for all services +3. **Environment Variables**: Configure all required environment variables + +### Deployment Steps + +1. **Build the Application**: +```bash +npm run build +``` + +2. **Deploy to Vercel**: +```bash +vercel --prod +``` + +3. **Configure Inngest**: Set up production Inngest functions + +## Contributing + +### Submitting Changes + +1. Fork the repository +2. Create a feature branch +3. Implement your changes +4. Test it +5. Submit a pull request with detailed description + + + diff --git a/package-lock.json b/package-lock.json index d288c72..79c782b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,7 @@ "": { "name": "neocode", "version": "0.1.0", + "hasInstallScript": true, "dependencies": { "@clerk/nextjs": "^6.23.2", "@clerk/themes": "^2.2.53", @@ -86,7 +87,7 @@ "tailwindcss": "^4", "tsx": "^4.20.3", "tw-animate-css": "^1.3.4", - "typescript": "^5" + "typescript": "^5.8.3" } }, "node_modules/@alloc/quick-lru": { diff --git a/package.json b/package.json index aaf2000..92dcccd 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "dev": "next dev --turbopack", "build": "next build", "start": "next start", - "lint": "next lint", + "lint": "next lint", "postinstall": "prisma generate" }, "dependencies": { @@ -88,6 +88,6 @@ "tailwindcss": "^4", "tsx": "^4.20.3", "tw-animate-css": "^1.3.4", - "typescript": "^5" + "typescript": "^5.8.3" } } diff --git a/src/app/projects/[projectId]/page.tsx b/src/app/projects/[projectId]/page.tsx index 3e6dc99..8137cb8 100644 --- a/src/app/projects/[projectId]/page.tsx +++ b/src/app/projects/[projectId]/page.tsx @@ -16,10 +16,10 @@ export default async function Page({ // PREFETCH void queryClient.prefetchQuery(trpc.messages.getMany.queryOptions({ projectId: projectId - })) + })); void queryClient.prefetchQuery(trpc.projects.getOne.queryOptions({ id: projectId - })) + })); return ( diff --git a/src/inngest/functions.ts b/src/inngest/functions.ts index 88b23c3..f83e650 100644 --- a/src/inngest/functions.ts +++ b/src/inngest/functions.ts @@ -76,7 +76,7 @@ export const codeAgentFunction = inngest.createFunction( name: "terminal", description: "Use the terminal to run commands", parameters: z.object({ - command: z.string(), + command: z.string() }), handler: async ({ command }, { step }) => { return await step?.run("terminal", async () => { diff --git a/src/modules/home/ui/components/project-form.tsx b/src/modules/home/ui/components/project-form.tsx index 194e7bb..61d0dfc 100644 --- a/src/modules/home/ui/components/project-form.tsx +++ b/src/modules/home/ui/components/project-form.tsx @@ -41,7 +41,6 @@ export default function ProjectForm() { router.push('/pricing'); } - toast.error(error.message); } })); diff --git a/src/modules/projects/ui/components/message-container-skeleton.tsx b/src/modules/projects/ui/components/message-container-skeleton.tsx index 7a6d029..6c71cf0 100644 --- a/src/modules/projects/ui/components/message-container-skeleton.tsx +++ b/src/modules/projects/ui/components/message-container-skeleton.tsx @@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton"; export default function MessageContainerSkeleton() { return ( -
+