ai chatbot docs

Author: w3ichen

docs/getting-started/ai-chatbot.md

@@ -0,0 +1,114 @@
+---
+sidebar_label: "Generate & edit with AI"
+sidebar_position: 8
+---
+
+# Generating and editing apps with AI
+
+MecSimCalc integrates with your favorite OpenAI and Anthropic models to help you create and modify apps using natural language prompts. **Generate** new apps, **edit** existing ones, or **get help** with our documentation — all powered by AI.
+
+This page will walk you through some real-life examples created with our AI chatbot and the prompts they used.
+
+<div style={{textAlign: 'center'}}>
+
+![img alt](/docs/getting-started/ai_chatbot.png)
+
+</div>
+
+## Creating Illustrations
+
+### Tired of building practice problems in Word or Excel?
+
+Let our chatbot do the work for you. Just describe what you need, and it will create a complete interactive app — with input fields, step-by-step solutions, and graphs.
+No more formatting. No coding. No Excel.
+Try it now and share it with your students instantly.
+
+**Prompt:**
+
+> Create an app to calculate the dot product of two vectors. Let users enter the magnitude and angle (from the positive x-axis) of each vector. Show the solution detailed steps and plot the vectors.
+
+<div style={{width: "100%", height: "600px", overflow: "hidden"}}>
+<iframe src='https://mecsimcalc.com/app/3134054/vector_dot_product_calculator' style={{position:"relative", left:"-45px", top:"-48px"}} width="100%" height="600" title="MecSimCalc" frameBorder="0"></iframe>
+</div>
+
+---
+
+### Want to show your students how a function behaves — not just tell them?
+
+Skip graphs in PowerPoint or Excel.
+Use our chatbot to create interactive visualizations in seconds.
+No coding. Just teaching.
+Let your students explore functions visually — anytime, anywhere.
+
+**Prompt:**
+
+> Create an app that plots(x^(3.7)+y^(1.5)-5). Let the user input the x and y ranges. Allow the user to hover over the points.
+
+<div style={{width: "100%", height: "600px", overflow: "hidden"}}>
+<iframe src='https://mecsimcalc.com/app/9073531/3_d_surface_plot_x_3_7_y_1_5_5' style={{position:"relative", left:"-45px", top:"-48px"}} width="100%" height="600" title="MecSimCalc" frameBorder="0"></iframe>
+</div>
+
+---
+
+### Want your students to visualize motion instead of just solving equations?
+
+Use our chatbot to build interactive physics apps in seconds — with graphs, animations, and step-by-step solutions.
+No code. No spreadsheets. Just describe the problem. Perfect for physics educators or students who want to test ideas visually.
+
+**Prompt:**
+
+> Create an app that calculates and plots the trajectory of a projectile. Let the user enter the initial velocity, angle, and height. Show the time of flight, maximum height, and range. Plot the path of the projectile.
+
+<div style={{width: "100%", height: "600px", overflow: "hidden"}}>
+<iframe src='https://mecsimcalc.com/app/7487589/projectile_trajectory_calculator' style={{position:"relative", left:"-45px", top:"-48px"}} width="100%" height="600" title="MecSimCalc" frameBorder="0"></iframe>
+</div>
+
+## Class Interaction Example
+
+### Explained a tricky concept in class and want to check if students really understood it?
+
+Don’t waste time building forms.
+Just tell the chatbot what concept to test, and it will generate a custom quiz app that sends student responses directly to your email.
+Instant feedback. Fully customized to your lesson.
+
+- [How to add your email in the code](https://docs.mecsimcalc.com/advanced-applications/quiz-toolkit#email-results-to-studentinstructor)
+
+**Prompt:**
+
+> Create an app that asks students to explain the conditions for equilibrium in 2D. Let them enter their CCID and written answer. When they submit, send their response to xxxxx@ualberta.ca.
+
+<div style={{width: "100%", height: "600px", overflow: "hidden"}}>
+<iframe src='https://mecsimcalc.com/app/8861989/2_d_equilibrium_conditions_assessment' style={{position:"relative", left:"-45px", top:"-48px"}} width="100%" height="600" title="MecSimCalc" frameBorder="0"></iframe>
+</div>
+
+## Quiz Examples With Grading
+
+### Want to quiz your students and collect their scores automatically?
+
+With MecSimCalc, you can create an auto-graded app that logs student answers to a shared spreadsheet.
+No grading. No Google Forms. Just instant results — and everything saved in one place.
+
+- [Learn how to use Gsheet in MecSimCalc](https://docs.mecsimcalc.com/advanced-applications/quiz-toolkit#export-results-to-google-sheets)
+
+**Prompt:**
+
+> Create a quiz app that asks: ‘What is the moment at midspan for a simply supported beam of 6 m with a 4 kN/m uniform load?’ The student should enter their CCID and answer. The correct answer is –72 kNm. Award 1 mark if the answer is correct. Append the CCID, answer, and score to this Google Sheet: https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxx
+
+<div style={{width: "100%", height: "600px", overflow: "hidden"}}>
+<iframe src='https://mecsimcalc.com/app/5698085/simply_supported_beam_midspan_moment_quiz' style={{position:"relative", left:"-45px", top:"-48px"}} width="100%" height="600" title="MecSimCalc" frameBorder="0"></iframe>
+</div>
+
+### Need a fast way to test student understanding — and collect their answers?
+
+Let the chatbot build a self-marking quiz app that also stores responses to a Google Sheet or sends them to your email.
+Instant quiz. Automatic grading. Results saved.
+
+- [Learn how to use Gsheet in MecSimCalc](https://docs.mecsimcalc.com/advanced-applications/quiz-toolkit#export-results-to-google-sheets)
+
+**Prompt:**
+
+> Create a quiz app that asks: ‘A projectile is launched at 25 m/s at an angle of 40°. What is the maximum height it reaches?’ The student enters their CCID and answer. The correct answer is 12.9 m. Award 1 mark if correct. Append the result to this sheet: [Google Sheet link].
+
+<div style={{width: "100%", height: "600px", overflow: "hidden"}}>
+<iframe src='https://mecsimcalc.com/app/2893542/projectile_motion_maximum_height_quiz' style={{position:"relative", left:"-45px", top:"-48px"}} width="100%" height="600" title="MecSimCalc" frameBorder="0"></iframe>
+</div>