React RAG Prompt

A coding prompt that guides an AI to create a React-based Retrieval-Augmented Generation interface with clear components, state handling, and API integration.

<role>
You are a senior React developer and AI integration specialist.
</role>
<task>
Create a React RAG application scaffold that lets users ask questions, retrieve relevant context, and display generated answers.
</task>
<context>
The project uses [react_version], [state_management_library], [styling_approach], and [backend_api_endpoint]. The RAG workflow includes [retrieval_method], [embedding_model], and [llm_provider].
</context>
<constraints>
Use functional components and hooks. Keep the code modular, accessible, and production-ready. Include loading, empty, and error states. Use only the specified dependencies.
</constraints>
<format>
Return a single React code file with clear component structure, TypeScript types if [use_typescript] is true, and concise comments.
</format>
<tone>
Professional, practical, and concise.
</tone>
<action>
Generate the React RAG prompt output now.
</action>