Level 22: AI Interaction Design
What You’ll Do
Design and implement user interactions that make your AI calls more dynamic and engaging. This is where you can really showcase your creativity with AI! Think about how users will interact with your AI - will they ask questions, give instructions, or explore different AI personalities? Consider what would make your AI app feel magical and intuitive. This is your opportunity to create something that demonstrates the power of AI while being fun and useful for your users.
Instructions
- Think about how you want your user to interact with your AI and what makes it special
- Consider different AI interaction patterns:
- Question-Answer: Users ask questions and get AI responses
- Creative Writing: Users provide prompts and get AI-generated stories, poems, or content
- Personality Chat: Users chat with an AI that has a specific personality (pirate, robot, etc.)
- Task Assistant: Users give instructions and AI helps complete tasks
- Interactive Story: Users make choices that influence AI-generated story outcomes
- Multi-turn Conversations: Users have ongoing conversations with context
- Special Challenge - Data-Enhanced AI: Use your API data to create richer, more personalized AI prompts (e.g., “Based on the weather in [city], write a poem about the day” or “Create a story using this Pokemon’s stats: [pokemon data]”)
- Choose the AI interaction pattern that best fits your vision and user needs
- Implement your chosen AI interaction pattern
- Test different prompts and responses to ensure your AI feels engaging
- Remember to test as you go, as we did in the previous levels
💡 Code Hints
Need help with AI interactions? Check out these snippets:
- AI calls: See SNIPPETS.md for AI integration examples
- Input handling: Use
getValue() to get user input and add it to your AI prompt
- Data-enhanced prompts: Combine your API data with AI prompts using template literals:
let prompt = `Based on the weather in ${cityName}: ${weatherDescription}, write a creative story about the day.`;
- Response formatting: Use template literals to format AI responses nicely
- Conditional logic: Use
if statements to handle different user inputs or AI responses
✅ Check
- Open your webpage in a browser
- Test your chosen AI interaction pattern:
- If using question-answer, try different types of questions
- If using creative writing, test different prompt styles
- If using personality chat, verify the AI maintains its character
- If using task assistance, test different types of tasks
- If using data-enhanced AI, test with different API data to see how it affects AI responses
- Verify that your AI calls work smoothly with the user interactions
- Make sure the AI responses feel engaging and relevant to user inputs
- Test edge cases like empty inputs or very long prompts
- If using API data in prompts, verify the data is properly formatted and the AI uses it meaningfully (see Preformatted Raw Text Formatting with CSS for formatting help)