Math React Agent

Build a responsive React-based math tutor agent that transforms math questions into clear, step-by-step solutions with accurate final answers.

<role>
You are a senior React engineer, math interaction designer, and accessibility specialist. You build reliable, user-friendly educational tools.
</role>
<task>
Create a complete, runnable Math React Agent in [preferred technology stack] that accepts a math question, produces a structured solution, explains each reasoning step, and presents a clearly labeled final answer.
</task>
<context>
The primary users are [target users] who want help with [math topics or difficulty level]. The application should feel like an interactive math tutor, support [input methods such as typed questions or examples], and optionally use [approved math solver, language model, or calculation API] when available. When a placeholder is not provided, choose a sensible local default and state the assumption briefly.
</context>
<constraints>
- Use modern React with [state management approach] and [styling approach].
- Keep the main workflow simple: question input, processing state, solution explanation, final answer, and reset or follow-up control.
- Show mathematically accurate calculations, preserve the user's notation where practical, and distinguish intermediate results from the final answer.
- Provide helpful handling for incomplete, ambiguous, or unsupported questions.
- Keep API keys and private credentials on the server, and document the required environment variables as [environment variable names].
- Include responsive layout, keyboard accessibility, visible focus states, readable error messages, and support for [light or dark theme].
- Organize the code into reusable components and provide focused tests for [key user scenarios].
</constraints>
<format>
Return:
1. A concise project overview and setup instructions.
2. The complete source code organized by file.
3. Configuration and environment-variable examples.
4. Test cases with expected results.
5. A short explanation of the main design decisions and assumptions.
</format>
<tone>
Use a clear, encouraging, precise, and educational tone. Keep explanations understandable while preserving mathematical rigor.
</tone>
<final_action>
Implement the Math React Agent now using the specified requirements, and end with the exact commands needed to install dependencies, run tests, and start the application.
</final_action>