π¦
Promptoria
No description available
0 installs
Trust: 30 β Low
Ai
Ask AI about Promptoria
Powered by Claude Β· Grounded in docs
I know everything about Promptoria. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Loading tools...
Reviews
Documentation
MCP Manager Frontend
Modern React dashboard built with Next.js 15, shadcn/ui, and TypeScript.
Features
- Authentication: JWT-based login/register with protected routes
- Project Management: Create and manage MCP projects
- MCP Server Configuration: Add, edit, and test Model Context Protocol servers
- Modern UI: Built with shadcn/ui components and Tailwind CSS
- Form Validation: react-hook-form + zod for robust validation
- Type Safety: Full TypeScript support
Tech Stack
- Framework: Next.js 15 with App Router
- UI Components: shadcn/ui (Radix UI primitives)
- Styling: Tailwind CSS
- Forms: react-hook-form + zod
- HTTP Client: axios
- State Management: React Context API
Getting Started
Install Dependencies
npm install
Environment Setup
Create .env.local:
NEXT_PUBLIC_API_URL=http://localhost:3000/api
Run Development Server
npm run dev
Open http://localhost:3001 in your browser.
Project Structure
src/
βββ app/ # Next.js App Router pages
β βββ login/ # Login page
β βββ dashboard/ # Dashboard page
β βββ projects/ # Projects list and detail
β βββ layout.tsx # Root layout
βββ components/
β βββ ui/ # shadcn/ui components
β βββ auth/ # Authentication components
β βββ dashboard/ # Dashboard components
βββ contexts/ # React contexts (Auth)
βββ services/ # API service layer
βββ lib/ # Utilities
Available Pages
/- Home (redirects to login or dashboard)/login- Login page/dashboard- Main dashboard/projects- Projects list/projects/new- Create new project/projects/[id]- Project detail with MCP servers
API Integration
All API calls are handled through the centralized api service:
import { api } from '@/services/api';
// Login
await api.login(email, password);
// Get projects
const projects = await api.getProjects();
// Create MCP server
await api.createMcpServer(projectId, { name, command, args });
shadcn/ui Components
The following shadcn/ui components are configured:
- Button
- Input
- Label
- Card
- Dialog
- Table
- Toast
Form Validation
Forms use react-hook-form with zod schemas:
const schema = z.object({
name: z.string().min(1, 'Required'),
email: z.string().email('Invalid email'),
});
const { register, handleSubmit } = useForm({
resolver: zodResolver(schema),
});
Protected Routes
Pages requiring authentication use the ProtectedRoute wrapper:
export default function DashboardPage() {
return (
<ProtectedRoute>
{/* Page content */}
</ProtectedRoute>
);
}
Build
npm run build
Lint
npm run lint
Format
npm run format
License
MIT
