Generate, iterate, and export production-ready UI components, code and designs. It integrates seamlessly with Tailwind CSS and Material-UI, offering pre-built components and utilities to expedite UI design and implementation. Featuring advanced theming support, it ensures consistency across your pro
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Welcome to the AI-Powered Code Generator Extension for VS Code!
Welcome to your ultimate tool for effortless React development! Our VS Code extension, powered by PureCode AI, leverages advanced AI to generate high-quality code for React components supporting React + TailwindCSS, React + Material UI, HTML + TailwindCSS, HTML + Bootstrap, Angular + CSS and Angular + TailwindCSS.. This guide will walk you through the key features of our extension and help you get the most out of it.
Key Features
Text Description to Code Generator
What it Does: Simply describe the component you want in plain text, and our AI will generate the corresponding React code with Tailwind CSS or MUI styles.
How to Use:
Login to your account in vs code extension.
Describe your component in text area and Click on “ ✨Generate”
Watch as the code is generated and click on preview to see it rendered directly in your VS Code editor.
Example:
"A signup page with email, password and full size social media buttons."
Create or Upload Your Theme
What it Does: Customize the look and feel of your components by creating your own themes or uploading existing ones.
How to Use:
Click on “Add a theme” button from text area.
Select "Create New Theme" or "Upload Theme."
Choose from existing one, customize or upload your tailwind config file.
You can: Customize colors, fonts, and spacing to match your brand guidelines.
Tip: Use themes to maintain a consistent style across your components.
Getting Started
Installation
Steps:
Open VS Code and navigate to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
Search for "PureCode AI" and click "Install."
How to use
Steps:
Login to your account in vs code extension.
Describe your component in text area and Click on “ :sparkles:Generate”
Choose your preferred version from the three generated options
Preview it to see the component rendered directly in the VS Code editor, and view the generated code.
You’ll also have the options to Edit the code or Copy it for further use from the code tab.
Use the Select & Edit feature to modify any element, with real-time updates reflected in the preview.
Tips and Best Practices
Descriptive Inputs: Provide clear and detailed descriptions for the best results. The more specific your description, the more accurate the generated code will be.
Leverage Themes: Use the theme feature to keep your components visually consistent. This is particularly useful for maintaining brand identity across different projects.
Iterative Updates: Use the interactive update feature to fine-tune your components incrementally. Start with a broad description and refine the details as needed.
Code Edits: You can edit the generated code and make necessary adjustments to fit your project's specific requirements in webapp .
Prompting Ideas: We provide predefined prompts in the Prompting Ideas section, which can help users create tag-wise components, making it easier to organize and generate tailored outputs.
Support and Feedback
If you encounter any issues or have suggestions for improvements, please reach out to our support team at accounts@purecodesoftware.com We value your feedback and are committed to enhancing your coding experience.
We hope you enjoy using the PureCode AI and find it a valuable addition to your development toolkit. Happy coding!
Note: This guide is a living document and will be updated regularly to reflect new features and improvements.
