Example App Pages

How to use the built-in AI and Todos pages as templates for rapid prototyping in the Ultimate Boilerplate.

---

AI Example Page (@src/app/ai)

• Purpose:
  • Demonstrates how to build an interactive AI chat experience using the boilerplate’s stack.
  • Showcases prompt handling, chat UI, and integration with an AI API endpoint.
• How to use as a template:
  • Copy the page and adapt the chat logic for your own AI-powered features (e.g., support bots, code assistants, etc.).
  • Extend the prompt list, customize the UI, or swap out the AI backend as needed.
• Extensibility:
  • Add new message types, streaming, or custom AI workflows.
  • Integrate with other backend APIs or business logic.

---

Todos Example Page (@src/app/todos)

• Purpose:
  • Provides a full CRUD example for managing a simple list of todos.
  • Demonstrates optimistic UI updates, mutation patterns, and state management.
• How to use as a template:
  • Use as a starting point for any CRUD-based feature (e.g., notes, tasks, projects).
  • Replace the data model and API calls to fit your use case.
• Extensibility:
  • Add filtering, sorting, or more complex data relationships.
  • Integrate with authentication, notifications, or external APIs.

---

Best Practices

• Use these example pages as blueprints for new features.
• Keep business logic in feature components for reusability.
• Follow the patterns shown for data fetching, mutation, and UI feedback.