AI assistant for developing a web-based procedural 3D geometry system with visual node editor, Three.js rendering, and AI-powered generation capabilities.
Expert assistant for working with a web-based procedural geometry system featuring a visual node editor, Three.js rendering, and AI-powered generation capabilities.
This is a monorepo for a web-based procedural geometry system that allows users to create complex 3D geometry using a visual node editor with AI-powered generation capabilities. The main application is a Next.js 15 app with React 19, Three.js for 3D rendering, and ReactFlow for the node-based interface.
**Tech Stack:**
```bash
npm run dev # Start all apps in development mode with Turbopack
npm run build # Build all apps for production
npm run lint # Run linting across all apps
cd apps/web
npm run dev # Start Next.js dev server with Turbopack
npm run build # Create production build
npm run start # Start production server
npm run lint # Run Next.js linting
```
The application follows a modular component-based architecture with clear separation of concerns:
1. **Node Registry System** (`apps/web/app/registry/NodeRegistry.ts`)
- Central registry managing all node definitions (30+ built-in nodes)
- Supports dynamic node registration and custom JSON-based nodes
- Type-safe socket connections with validation
2. **AI Agent System** (`apps/web/app/agent/GeometryAIAgent.ts`)
- Handles AI-powered node and scene generation via OpenRouter
- Streaming responses with real-time integration
- Multiple model support (Claude, GPT-4, Gemini)
3. **Context-Based State Management**
- GeometryContext: Manages 3D geometry state and operations
- NodeContext: Handles node graph state and connections
- TimeContext: Controls animation and time-based parameters
- Multiple UI contexts for modals, logging, and layout
4. **Type System** (`apps/web/app/types/`)
- Comprehensive TypeScript definitions for all geometry types
- Socket type compatibility matrix
- Parameter validation schemas
```
apps/web/
├── app/
│ ├── components/ # UI components organized by feature
│ │ ├── NodeEditor/ # Node editor components
│ │ ├── Viewport/ # 3D viewport components
│ │ └── ui/ # Shared UI components
│ ├── registry/ # Node definitions and registry
│ │ ├── nodes/ # Individual node implementations
│ │ └── NodeRegistry.ts
│ ├── agent/ # AI agent implementation
│ ├── types/ # TypeScript type definitions
│ ├── contexts/ # React contexts for state management
│ ├── utils/ # Utility functions
│ └── api/ # API routes for AI and node operations
```
1. **Check existing patterns**
- Search `apps/web/app/components/` for similar components
- Review related node definitions in `apps/web/app/registry/nodes/`
- Check contexts in `apps/web/app/contexts/` for state management patterns
2. **Follow the socket type system**
- Review `apps/web/app/types/` for socket type definitions
- Ensure new connections are compatible with existing socket types
- Use the socket type compatibility matrix
3. **Use existing contexts**
- Leverage GeometryContext for 3D geometry state
- Use NodeContext for node graph operations
- Use TimeContext for animation parameters
- Avoid creating new contexts unless absolutely necessary
4. **Implement error boundaries**
- Add error boundaries around 3D rendering components
- Handle Three.js errors gracefully
- Provide fallback UI for failed renders
1. **Create the node definition**
- Create new file in `apps/web/app/registry/nodes/your-node.ts`
- Import the `NodeDefinition` type
- Define input/output sockets with proper types
- Define parameters with validation
2. **Implement the execute function**
- Add proper TypeScript typing for inputs/outputs
- Handle edge cases and invalid inputs
- Return geometry data in the expected format
- Consider performance for large geometries
3. **Register the node**
- Add import to `apps/web/app/registry/nodes/index.ts`
- Register node in the NodeRegistry
- Verify socket compatibility with existing nodes
4. **Test the node**
- Create test scene with your node
- Connect to various compatible nodes
- Test edge cases and invalid inputs
- Monitor performance with complex geometries
1. **Review the AI agent**
- Check `apps/web/app/agent/GeometryAIAgent.ts` for prompt templates
- Understand the current generation patterns
- Review existing model configurations
2. **Update API routes**
- Modify routes in `apps/web/app/api/ai/` as needed
- Ensure streaming responses work correctly
- Handle errors gracefully
3. **Test with different models**
- Test with Claude (Anthropic)
- Test with GPT-4 (OpenAI)
- Test with Gemini (Google)
- Compare quality and performance
4. **Validate generated output**
- Ensure nodes are valid and executable
- Verify connections are type-safe
- Test with various prompts
1. **Locate viewport components**
- Components are in `apps/web/app/components/Viewport/`
- Uses React Three Fiber for Three.js integration
- Check React Three Fiber docs for patterns
2. **Use memory monitoring**
- Utilize built-in memory monitoring hooks in utils
- Monitor performance for complex geometries
- Dispose of Three.js objects properly
3. **Handle camera controls**
- Use existing camera control components
- Maintain consistent UX patterns
- Test with various geometry scales
4. **Test rendering performance**
- Test with simple geometries
- Test with complex procedural meshes
- Monitor frame rates and memory usage
1. **Check Clerk configuration**
- Review `apps/web/middleware.ts` for protected routes
- Understand the authentication flow
- Check Clerk docs for advanced features
2. **Protect new routes**
- Add route patterns to middleware if needed
- Test authentication flow
- Handle unauthenticated states
1. **Don't skip type definitions** - always use proper types, never `any`
2. **Don't create new contexts unnecessarily** - use existing state management
3. **Don't forget memory cleanup** - dispose Three.js objects in useEffect cleanup
4. **Don't ignore socket compatibility** - verify type compatibility before connecting nodes
5. **Don't bypass authentication** - ensure protected routes remain protected
6. **Don't modify registry without registration** - always register new nodes properly
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/geometry-node-assistant/raw