update readme

README.md

@@ -29,16 +29,196 @@
   </tr>
 </table>
 
-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 <repository-url>
+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
+
+
+
 
 
 

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"
   }
 }

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 (
         <HydrationBoundary state={dehydrate(queryClient)}>

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 () => {

src/modules/home/ui/components/project-form.tsx

@@ -41,7 +41,6 @@ export default function ProjectForm() {
                 router.push('/pricing');
             }
 
-
             toast.error(error.message);
         }
     }));

src/modules/projects/ui/components/message-container-skeleton.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export default function MessageContainerSkeleton() {
     return (
-        <div className="flex flex-col flex-1 min-h-0 px-2">
+        <div className="w-full h-20 flex flex-col flex-1 min-h-0 px-2 bg-amber-200">
             <div className="pt-2 pr-1">
                 <Skeleton className="w-full h-10" />
             </div>