Project Overview: an-codeAI
an-codeAI is a cutting-edge tool designed to generate highly available code using advanced AI technologies from OpenAI and Anthropic Claude, specifically their Claude 3.5 Sonnet and GPT-4 Vision capabilities. This project caters to both web and native application developers by supporting popular frameworks such as React, Vue, Tailwind CSS, and shadcn/ui for web applications, as well as React Native for mobile solutions.
The code generation process with an-codeAI is user-friendly and robust, allowing users to provide input through screenshots, sketched drafts, and direct text inputs. This flexibility ensures that developers can work efficiently from varied inspiration sources to realize their coding projects swiftly.
Key Features
Technology Stack Support
an-codeAI is equipped to handle several key technology stacks:
- Web Development: Including frameworks like React, Vue, Tailwind CSS, and shadcn/ui.
- Native Development: With support for React Native, allowing the creation of mobile applications.
Editing Capabilities
The project also supports extensive editing capabilities, tailored to cater to various coding needs:
- HTML combined with Tailwind CSS
- React paired with Tailwind CSS
- An advanced combination of React, Tailwind CSS, and shadcn/ui
Input Methods
To facilitate diverse coding approaches, an-codeAI accepts:
- Screenshots: Allowing direct conversion of visual elements to code.
- Text: For those who prefer writing their input commands or ideas.
- Whiteboarding: Capturing drafts and sketches via whiteboard interfaces, which are then translated into functional code.
Example: React + shadcn/ui
An illustrative feature of an-codeAI is its ability to process Excalidraw drawings and automatically generate the corresponding output code. This level of integration highlights the tool’s efficiency and ease of use in transforming visual drafts into executable code formats.
Try It Out!
Interested individuals can explore an-codeAI directly by visiting its online platform, or opt to run it locally by executing the following command:
npm run dev
Configuration and APIs
an-codeAI offers easy integration with various APIs to enhance coding experiences:
- OpenAI Configuration:
- Requires an OpenAI API Key.
- Allows customizing the base URL for API requests (e.g., using proxy settings).
- Features mock AI responses for testing, which do not require actual API calls.
- Gemini API:
- Although free, it is not recommended due to suboptimal output quality.
- Also requires an API key for access.
Support and Contributions
The project is open-source and continuously evolving, and the contributors welcome feedback and support from the community. If this tool proves beneficial, users can consider supporting the developers by buying them a coffee.
In summary, an-codeAI represents a powerful fusion of AI technologies and coding practices, designed to streamline the development process and inspire innovative solutions for both web and mobile applications.