Generate follow-up questions using Groq API with structured JSON output
npm install followupaibash
npm install followupai
`
$3
Visit console.groq.com to get your free API key.
$3
`jsx
import { QuickChat } from 'followupai';
function MyPage() {
return (
My Website
);
}
`
That's it! You now have a fully functional AI chatbot that generates questions about any topic.
Usage Examples
$3
`jsx
import { QuickChat } from 'followupai';
`
$3
`jsx
// Set GROQ_API_KEY in your .env file
`
$3
`jsx
import { SimpleChat } from 'followupai';
model="llama-3.1-70b-version"
placeholder="What topic would you like me to create a question about?"
style={{
maxWidth: '800px',
border: '2px solid #007bff',
borderRadius: '16px'
}}
/>
`
$3
`jsx
Math Questions
Science Questions
`
Interactive Learning Experience
The chatbot provides a two-step learning process:
1. Answer Generation: When users ask a question, they receive a comprehensive answer
2. Comprehension Test: The chatbot then generates an interactive multiple-choice question to test understanding
$3
- User asks: "What is JavaScript?"
- Bot responds: Detailed explanation about JavaScript
- Bot follows up: Interactive quiz question about JavaScript concepts
- User can: Click answer choices, check their answer, and see explanations
$3
- Clickable choice buttons with A, B, C, D labels
- Visual feedback with color-coded results (green for correct, red for incorrect)
- Immediate validation with "Check Answer" button
- Detailed explanations for each answer
- New question generation to continue learning
What Users Can Ask
Users can ask the chatbot to generate questions about any topic:
- "Create a question about JavaScript"
- "Generate a math problem for 5th graders"
- "Make a science quiz about the solar system"
- "Ask me about machine learning concepts"
- "Create a history question about World War II"
The chatbot will respond with:
- A comprehensive answer to their question
- An interactive multiple choice question
- 4 answer choices (A, B, C, D)
- The correct answer with explanation
Advanced Usage
$3
`javascript
import { followupai } from 'followupai';
const ai = new followupai({
apiKey: 'your-groq-api-key',
model: 'llama-3.1-8b-instant'
});
// Generate a single question
const question = await ai.generateFollowUpQuestion(
'JavaScript',
'Focus on ES6 features',
'medium'
);
console.log(question.question);
console.log(question.choices);
console.log(question.correctAnswer);
console.log(question.explanation);
// Generate multiple questions
const questions = await ai.generateMultipleQuestions(
'Machine Learning',
5,
'Focus on neural networks',
'hard'
);
`
$3
`bash
Setup (first time)
npx followupai setup
Generate a question
npx followupai generate "JavaScript"
Generate multiple questions
npx followupai generate-multiple "Machine Learning" 5
Start demo server
npx followupai demo
`
Customization Options
$3
`typescript
interface SimpleChatProps {
apiKey?: string; // Your Groq API key
model?: string; // Groq model to use
placeholder?: string; // Input placeholder text
className?: string; // CSS class name
style?: React.CSSProperties; // Inline styles
}
`
$3
- llama-3.1-8b-instant (fastest)
- llama-3.1-70b-version (balanced)
- llama-3.1-405b-reasoning (most capable)
- mixtral-8x7b-32768
- gemma-7b-it
Configuration
$3
Create a .env file in your project root:
`bash
GROQ_API_KEY=your_api_key_here
followupai_MODEL=llama-3.1-8b-instant
`
$3
Or create a followupai.config.json:
`json
{
"apiKey": "your_api_key_here",
"model": "llama-3.1-8b-instant"
}
`
Installation
$3
`bash
npm install followupai
`
$3
`bash
yarn add followupai
`
$3
`bash
pnpm add followupai
`
Demo
Try the live demo:
`bash
npx followupai demo
`
Then visit http://localhost:3000 to see the chatbot in action!
Project Structure
`
followupai/
├── src/
│ ├── components/
│ │ ├── SimpleChat.tsx # Main chatbot component
│ │ └── EasyFollowChat.tsx # Advanced chat component
│ ├── followupai.ts # Core API class
│ ├── cli.ts # Command line interface
│ ├── demo-server.ts # Demo server
│ └── types.ts # TypeScript definitions
├── examples/
│ ├── simple-chat-usage.js # Simple usage examples
│ ├── basic-usage.js # Basic API usage
│ └── advanced-usage.js # Advanced API usage
├── demo/
│ ├── index.html # Main demo page
│ └── simple-chat-demo.html # Simple chat demo
└── README.md
`
Contributing
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)