A Next.js application that generates viral LinkedIn posts using AI-powered workflows with Mastra.
- 🤖 AI-Powered Content Generation: Uses Mastra workflows to generate engaging LinkedIn posts
- 📝 Customizable Content: Choose content type, tone, and topics
- 📋 Copy & Paste Ready: Generated content is formatted for direct use on LinkedIn
- 🏷️ Smart Hashtags: Automatically generates relevant hashtags for better reach
- 📱 Responsive Design: Works seamlessly on desktop and mobile devices
- ⚡ Real-time Generation: Fast content generation with loading states
- Frontend: Next.js 14 with TypeScript
- UI Components: Shadcn/ui with Tailwind CSS
- AI Workflows: Mastra client-js SDK
- Styling: Tailwind CSS
- Icons: Lucide React
frontend/
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ └── generate/
│ │ │ └── route.ts # API route for content generation
│ │ ├── dashboard/
│ │ │ ├── create/
│ │ │ │ └── page.tsx # Content creation page
│ │ │ └── page.tsx # Dashboard with workflow test
│ │ └── page.tsx # Landing page
│ ├── components/
│ │ ├── content-generation-form.tsx # Main content generation form
│ │ ├── workflow-test.tsx # Workflow testing component
│ │ └── ui/ # Shadcn/ui components
│ └── lib/
│ ├── mastra-client.ts # Mastra client configuration
│ ├── services/
│ │ └── content-service.ts # Content generation service
│ └── hooks/
│ └── use-content-generation.ts # React hook for content generation
└── references/
└── workflows.md # Workflow configuration reference
- Node.js 18+
- Mastra server running on
http://localhost:4111 - Content generation workflow named
contentGenerationWorkflow
- Clone the repository:
git clone <repository-url>
cd frontend- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:3000 in your browser.
- Navigate to the Dashboard
- Click "Create New Post" or use the "Generate AI Post" button
- Enter your topic in the text area
- Select content type and tone (optional)
- Click "Generate Post"
- Copy the generated content and hashtags
- Paste directly to LinkedIn
- Go to the Dashboard
- Find the "Workflow Test" card in the sidebar
- Click "Test Workflow" to verify the Mastra integration
- Check the results for successful execution
Generates LinkedIn content using the Mastra workflow.
Request Body:
{
"topic": "string (required)",
"contentType": "article | trend | news | tutorial (optional)",
"tone": "professional | casual | inspiring | informative (optional)",
"scheduledTime": "string (optional)"
}Response:
{
"success": true,
"data": {
"linkedinPost": "string",
"hashtags": ["string"],
"topic": "string"
},
"runId": "string"
}The application integrates with Mastra workflows for content generation:
- Workflow Name:
contentGenerationWorkflow - Input Schema: Topic, content type, tone, and scheduling options
- Output Schema: LinkedIn post content, hashtags, and topic
- Steps: Research topic and generate content
The workflow is configured in the Mastra server with the following structure:
{
"contentGenerationWorkflow": {
"name": "content-generation-workflow",
"description": "Complete workflow for researching and creating viral LinkedIn content",
"inputSchema": {
"topic": "string (required)",
"contentType": "string (optional)",
"tone": "string (optional)",
"scheduledTime": "string (optional)"
},
"outputSchema": {
"linkedinPost": "string",
"hashtags": ["string"],
"topic": "string"
}
}
}- New Content Types: Update the
ContentGenerationInputinterface incontent-service.ts - UI Components: Add new components in the
components/directory - API Routes: Create new routes in
app/api/ - Hooks: Add custom hooks in
lib/hooks/
- Services: Business logic and API calls
- Hooks: React state management and side effects
- Components: Reusable UI components
- Pages: Next.js page components
- API Routes: Server-side API endpoints
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License.