Overview
This prompt aims to guide developers in creating a full-stack web application component that serves as an AI-powered coding assistant. Programmers and educators focusing on ESP32 programming will benefit from the advanced features and user-friendly design.
Prompt Overview
Purpose: The goal is to create an AI-powered coding assistant named CodingTeacher to enhance programming education.
Audience: This component targets developers learning ESP32 programming using PlatformIO and Arduino IDE.
Distinctive Feature: CodingTeacher offers advanced code generation, intelligent refactoring, and automated testing capabilities.
Outcome: Users will benefit from personalized tutorials and improved coding efficiency through integrated AI features.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Development Tools & DevOps, Natural Language Processing (NLP), Productivity & Workflow
- Techniques: Role/Persona Prompting, Self-Critique / Reflection, Structured Output
- Models: 21st.dev AI models
- Estimated time: 10-20 minutes
- Skill level: Intermediate
Variables to Fill
- [CodingTeacher] – Codingteacher
- [/ UI elements /] – / Ui Elements /
- [embediverse-connect-share-play] – Embediverse Connect Share Play
Example Variables Block
- [CodingTeacher]: AI coding assistant component
- [embediverse-connect-share-play]: GitHub repository link
- [/ UI elements /]: Buttons, input fields, cards
The Prompt
Develop a full-stack web application using the specified tech stack and requirements detailed below.
**The project is built with:**
– Tech Stack: Vite, TypeScript, React, shadcn-ui, Tailwind CSS
– Backend: Supabase for authentication and database management
**Primary goal:**
Create an AI-powered coding assistant component named **[CodingTeacher]** within this application. This component will serve as an advanced tutor and coding helper focused on programming the ESP32 with both PlatformIO and Arduino IDE. It should be designed to support tutorial creation and enhance learning for users.
**[CodingTeacher] Component Requirements:**
– Features:
– Advanced Code Generation & Autocompletion:
– Context-aware code suggestions
– Natural language to code conversion
– Support for multiple programming languages
– Intelligent Code Understanding & Refactoring:
– Codebase mapping
– Automated refactoring
– Context management
– Automated Testing & Quality Assurance:
– Generate tests
– Detect and fix bugs
– Perform static analysis
– Natural Language Processing & Documentation:
– Requirement analysis
– Automatic documentation generation
– Code explanation
– Research & Learning Capabilities:
– Domain expertise in ESP32 programming
– Continuous learning
– Critical thinking features
– Workflow Integration & Productivity:
– Integrate with version control systems
– Support pair programming or chat features
– Support IDE/editor plugins
– CI/CD automation
– Allow personalization
– Security & Reliability:
– Detect vulnerabilities
– Enforce privacy controls
**Design & Implementation Details:**
– Use React with TypeScript, including proper typing for all props.
– Use Tailwind CSS and shadcn-ui to ensure the component is fully responsive, visually clean, and accessible, including keyboard navigation support.
– Provide dummy data and sample interface content for demonstration.
– Structure the component code cleanly and modularly to facilitate easy extension.
– Incorporate UX/UI elements consistent with the specified design system.
**Additional Notes:**
– Integrate AI models such as those from 21st.dev to power AI features.
– The component should seamlessly fit into the existing [embediverse-connect-share-play](https://github.com/SprayDotBay/embediverse-connect-share-play) repository.
– Prioritize user-friendly tutorial creation and code help in the context of ESP32 programming.
**Please reason through the architecture and design choices before presenting the final code.**
Provide details on how each feature is approached within the component. The final output should be a complete, ready-to-use **[CodingTeacher]** React component code snippet, including styling and TypeScript typings.
**# Output Format**
Provide a single self-contained TypeScript React component file named **CodingTeacher.tsx**. It should include:
– Imports
– Component definition with typed props
– Dummy data to simulate AI-generated content
– All UI elements styled with Tailwind & shadcn-ui
– Comments explaining core functionality
**# Example Outline**
“`typescript
import React from ‘react’;
// import other dependencies
interface CodingTeacherProps {
// define props here
}
const CodingTeacher: React.FC = (props) => {
// component logic
return (
[/* UI elements */]
)
;};
export default CodingTeacher;
“`
Respond with the complete component code following the above requirements.
Screenshot Examples
How to Use This Prompt
- {suggestion}
- [CodingTeacher]: AI-powered coding assistant component.
- [codeInput]: State for user code input.
- [suggestions]: State for code suggestions list.
- [dummySuggestions]: Simulated AI-generated code snippets.
- [handleInputChange]: Function to update input state.
- [Input]: UI element for user code input.
- [Button]: UI element to generate code.
- [ul]: Displays list of code suggestions.
Tips for Best Results
- Plan Your Architecture: Start by outlining the component structure and how it integrates with the existing application.
- Utilize TypeScript Effectively: Ensure all props and state are typed correctly to leverage TypeScript’s benefits for better maintainability.
- Focus on User Experience: Design the UI with Tailwind CSS and shadcn-ui for a responsive and accessible layout, keeping user interactions in mind.
- Incorporate AI Models: Integrate AI capabilities for features like code generation and natural language processing to enhance the functionality of the CodingTeacher component.
FAQ
- What is the purpose of the CodingTeacher component?
It serves as an AI-powered coding assistant for programming the ESP32. - Which tech stack is used for this project?
The project uses Vite, TypeScript, React, shadcn-ui, and Tailwind CSS. - What features does CodingTeacher offer?
It includes code generation, refactoring, testing, documentation, and learning capabilities. - How should the component be styled?
It should be styled using Tailwind CSS and shadcn-ui for responsiveness and accessibility.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
