commit c0a01b58400f68c9762763eab4cc105d23710c94 Author: Gemini AI Date: Thu Dec 25 16:58:36 2025 +0400 Initialize PromptArch: The Prompt Enhancer (Fork of ClavixDev/Clavix) diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..c44386e --- /dev/null +++ b/.env.example @@ -0,0 +1,16 @@ +# Qwen Code OAuth +# Get OAuth credentials from https://qwen.ai +QWEN_CLIENT_ID= +QWEN_CLIENT_SECRET= +QWEN_PROXY_ENDPOINT=http://localhost:8080/v1 + +# Ollama Cloud API +# Get API key from https://ollama.com/cloud +OLLAMA_API_KEY= +OLLAMA_ENDPOINT=https://ollama.com/api + +# Z.AI Plan API +# Get API key from https://docs.z.ai +ZAI_API_KEY= +ZAI_GENERAL_ENDPOINT=https://api.z.ai/api/paas/v4 +ZAI_CODING_ENDPOINT=https://api.z.ai/api/coding/paas/v4 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8266f60 --- /dev/null +++ b/.gitignore @@ -0,0 +1,39 @@ +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local +.env + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# logs +logs +*.log diff --git a/.trae/documents/PromptArch - Transform Clavix into Modern AI Prompt Engineering Platform.md b/.trae/documents/PromptArch - Transform Clavix into Modern AI Prompt Engineering Platform.md new file mode 100644 index 0000000..1efbb9b --- /dev/null +++ b/.trae/documents/PromptArch - Transform Clavix into Modern AI Prompt Engineering Platform.md @@ -0,0 +1,287 @@ +# PromptArch Implementation Plan + +## Phase 1: Project Setup & Foundation + +* Initialize Next.js 14+ with TypeScript, TailwindCSS, shadcn/ui + +* Set up project structure: `/app`, `/components`, `/lib`, `/services` + +* Configure environment variables for all API keys + +* Set up state management (Zustand or Context API) + +* Configure ESLint, Prettier, TypeScript strict mode + +## Phase 2: API Integration Layer + +### 2.1 Qwen Code OAuth Integration + +* Create `/lib/services/qwen-oauth.ts` + +* Implement OAuth flow (browser-based authentication) + +* Create proxy service wrapper for OpenAI-compatible API + +* Handle credential management (\~/.qwen/oauth\_creds.json parsing) + +* Implement token refresh logic (2000 daily requests tracking) + +### 2.2 Ollama Cloud API Integration + +* Create `/lib/services/ollama-cloud.ts` + +* Implement client with OLLAMA\_API\_KEY authentication + +* Support chat completions and generate endpoints + +* Model listing and selection interface + +* Stream response handling + +### 2.3 Z.AI Plan API Integration + +* Create `/lib/services/zai-plan.ts` + +* Implement both general and coding endpoints + +* Bearer token authentication + +* Model selection (glm-4.7, glm-4.5, glm-4.5-air) + +* Request/response handling with error management + +### 2.4 Unified Model Interface + +* Create `/lib/services/model-adapter.ts` + +* Abstract interface for all providers + +* Standardize request/response format + +* Provider selection and fallback logic + +* Usage tracking and quota management + +## Phase 3: Core PromptArch Features + +### 3.1 Prompt Engineering Workflow + +* **Input Panel:** Textarea for raw human prompt + +* **Enhancement Engine:** Transform prompts using: + + * Clavix's 20 patterns and 11 intents + + * Professional prompt structure (Context, Task, Constraints, Output Format) + + * Code-specific templates for coding agents + +* **Output Display:** Show enhanced prompt with diff comparison + +### 3.2 PRD Generation Module + +* Guided Socratic questioning UI + +* 15 specialized patterns (RequirementPrioritizer, UserPersonaEnricher, etc.) + +* Structured PRD template with sections: + + * Overview & Objectives + + * User Personas & Use Cases + + * Functional Requirements + + * Non-functional Requirements + + * Technical Architecture + + * Success Metrics + +### 3.3 Action Plan Generator + +* Convert PRD to actionable implementation plan + +* Task breakdown with priorities (High/Medium/Low) + +* Dependency graph visualization + +* Framework and technology recommendations + +* Coding architecture guidelines + +### 3.4 Framework & Architecture Recommendations + +* Analyze project requirements and suggest: + + * Frontend framework (React/Next.js/Astro/etc.) + + * Backend architecture (REST/GraphQL/Serverless) + + * Database choices based on scale + + * Authentication patterns + + * Deployment strategy + +## Phase 4: Modern UI/UX Design + +### 4.1 Layout & Navigation + +* Sidebar with workflow stages (Prompt → PRD → Plan → Output) + +* Top bar with model selector and settings + +* Responsive design for desktop and tablet + +* Dark/light mode toggle + +### 4.2 Interactive Components + +* **Prompt Input Panel:** Real-time analysis indicators + +* **Split View:** Original vs Enhanced prompt comparison + +* **Progressive Disclosure:** Collapsible PRD sections + +* **Drag-and-Drop:** Reorder tasks in action plan + +* **Copy/Export:** One-click copy outputs + +### 4.3 Workflow Visualizations + +* Pipeline diagram showing current stage + +* Dependency graph for tasks + +* Progress tracking with checkmarks + +* Status badges (Draft/In Progress/Complete) + +### 4.4 Settings & Configuration + +* API key management interface + +* Model selection per stage + +* Provider fallback configuration + +* Usage statistics dashboard + +* Theme customization + +## Phase 5: Advanced Features + +### 5.1 Multi-Model Support + +* Select different models for different stages: + + * Qwen Code for prompt enhancement + + * Ollama Cloud for PRD generation + + * Z.AI Plan for action planning + +* Model comparison side-by-side + +* Cost estimation per model + +### 5.2 Template Library + +* Pre-built prompt templates for common scenarios: + + * Web Development + + * Mobile App Development + + * API Development + + * Data Science/ML + + * DevOps/Infrastructure + +* Custom template creation + +### 5.3 History & Persistence + +* Save all generated outputs to local storage + +* Version history of prompts and PRDs + +* Search and filter past projects + +* Export to Markdown, JSON, or PDF + +### 5.4 Collaboration Features + +* Share outputs via URL + +* Export prompts for Claude Code, Cursor, Windsurf + +* Integration with slash command format + +* Copy-ready templates for AI agents + +## Phase 6: Testing & Quality Assurance + +* Unit tests for API integration layer + +* Integration tests with mock providers + +* E2E tests for complete workflows + +* Accessibility testing (WCAG AA) + +* Performance optimization + +## Technical Stack + +``` +Frontend: Next.js 14 (App Router) + TypeScript +UI Library: shadcn/ui + Radix UI + TailwindCSS +State: Zustand +Forms: React Hook Form + Zod +HTTP: Fetch API + Axios (fallback) +Icons: Lucide React +Charts: Recharts (for visualizations) +Markdown: react-markdown + remark/rehype +``` + +## Directory Structure + +``` +promptarch/ +├── app/ +│ ├── layout.tsx +│ ├── page.tsx +│ ├── prompt-enhance/ +│ ├── prd-generator/ +│ ├── action-plan/ +│ └── settings/ +├── components/ +│ ├── ui/ (shadcn components) +│ ├── workflow/ +│ ├── panels/ +│ └── visualizations/ +├── lib/ +│ ├── services/ +│ │ ├── qwen-oauth.ts +│ │ ├── ollama-cloud.ts +│ │ ├── zai-plan.ts +│ │ └── model-adapter.ts +│ ├── store.ts +│ ├── utils.ts +│ └── patterns/ +├── types/ +│ └── index.ts +└── public/ +``` + +## Key Differentiators + +1. **Unified Multi-Model Workflow:** Seamlessly switch between Qwen, Ollama, and Z.AI +2. **Professional Prompt Engineering:** 20 patterns + 11 intents from Clavix, enhanced +3. **Complete Development Lifecycle:** From vague idea to verified implementation +4. **Modern Web UI:** Not just CLI - full interactive experience +5. **Coding Agent Ready:** Outputs optimized for Claude Code, Cursor, Windsurf, etc. + diff --git a/.vercelignore b/.vercelignore new file mode 100644 index 0000000..24fe350 --- /dev/null +++ b/.vercelignore @@ -0,0 +1,8 @@ +node_modules +build +dist +.git +.trae +.log +.figma +.next \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..932324b --- /dev/null +++ b/README.md @@ -0,0 +1,132 @@ +# PromptArch + +Transform vague ideas into production-ready prompts and PRDs. An AI-powered platform for prompt engineering, PRD generation, and action planning with support for multiple AI providers. + +## Features + +- **Multi-Provider Support**: Qwen Code OAuth, Ollama Cloud, and Z.AI Plan API +- **Prompt Enhancement**: Improve prompts with 20+ patterns and 11 intents +- **PRD Generation**: Comprehensive product requirements documents +- **Action Planning**: Task breakdown with priorities, dependencies, and framework recommendations +- **Modern UI**: Clean, responsive interface with sidebar navigation +- **History Tracking**: Save and restore previous prompts +- **Provider Fallback**: Automatic fallback if a provider fails + +## Quick Start + +1. **Install dependencies**: + ```bash + npm install + ``` + +2. **Set up environment variables**: + Copy `.env.example` to `.env` and add your API keys: + ```bash + cp .env.example .env + ``` + +3. **Run the development server**: + ```bash + npm run dev + ``` + +4. Open [http://localhost:3000](http://localhost:3000) in your browser. + +## AI Providers + +### Qwen Code OAuth +- **2000 free requests/day** via OAuth +- OpenAI-compatible API +- Get credentials at [qwen.ai](https://qwen.ai) + +### Ollama Cloud +- High-performance cloud models +- No GPU required +- Get API key at [ollama.com/cloud](https://ollama.com/cloud) + +### Z.AI Plan API +- Specialized coding models (glm-4.7, glm-4.5) +- Dedicated coding endpoint +- Get API key at [docs.z.ai](https://docs.z.ai) + +## Usage + +### Prompt Enhancer +1. Enter your prompt in the input panel +2. Select an AI provider +3. Click "Enhance Prompt" +4. Copy the enhanced prompt for use with AI coding agents + +### PRD Generator +1. Enter your idea or concept +2. Select an AI provider +3. Generate comprehensive PRD +4. Export or copy the structured requirements + +### Action Plan Generator +1. Paste your PRD or requirements +2. Generate action plan with tasks +3. Review framework recommendations +4. Get architecture guidelines + +## Project Structure + +``` +promptarch/ +├── app/ # Next.js app directory +├── components/ # React components +│ ├── ui/ # shadcn/ui components +│ ├── PromptEnhancer.tsx +│ ├── PRDGenerator.tsx +│ ├── ActionPlanGenerator.tsx +│ ├── Sidebar.tsx +│ ├── HistoryPanel.tsx +│ └── SettingsPanel.tsx +├── lib/ # Utilities and services +│ ├── services/ # API integrations +│ │ ├── qwen-oauth.ts +│ │ ├── ollama-cloud.ts +│ │ ├── zai-plan.ts +│ │ └── model-adapter.ts +│ ├── store.ts # Zustand state management +│ └── utils.ts # Utility functions +├── types/ # TypeScript types +└── public/ # Static assets +``` + +## Tech Stack + +- **Framework**: Next.js 14 (App Router) +- **Language**: TypeScript +- **Styling**: TailwindCSS +- **UI Components**: shadcn/ui + Radix UI +- **State Management**: Zustand +- **Forms**: React Hook Form + Zod +- **Icons**: Lucide React + +## Development + +```bash +# Install dependencies +npm install + +# Run development server +npm run dev + +# Build for production +npm run build + +# Start production server +npm start + +# Lint code +npm run lint +``` + +## License + +ISC + +## Contributing + +Contributions are welcome! Please feel free to submit a Pull Request. diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..c84804d --- /dev/null +++ b/app/globals.css @@ -0,0 +1,69 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 10% 3.9%; + --radius: 0.5rem; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + } + + .dark { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.9%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..cdbec22 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,22 @@ +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata: Metadata = { + title: "PromptArch - AI Prompt Engineering Platform", + description: "Transform vague ideas into production-ready prompts and PRDs", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..9709f36 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,92 @@ +"use client"; + +import { useState, useEffect } from "react"; +import Sidebar from "@/components/Sidebar"; +import type { View } from "@/components/Sidebar"; +import PromptEnhancer from "@/components/PromptEnhancer"; +import PRDGenerator from "@/components/PRDGenerator"; +import ActionPlanGenerator from "@/components/ActionPlanGenerator"; +import HistoryPanel from "@/components/HistoryPanel"; +import SettingsPanel from "@/components/SettingsPanel"; +import useStore from "@/lib/store"; +import modelAdapter from "@/lib/services/adapter-instance"; + +export default function Home() { + const [currentView, setCurrentView] = useState("enhance"); + const { setQwenTokens, setApiKey } = useStore(); + + useEffect(() => { + // Handle OAuth callback + if (typeof window !== "undefined") { + const urlParams = new URLSearchParams(window.location.search); + const code = urlParams.get("code"); + + if (code) { + // In a real app, you would exchange the code for tokens here + // Since we don't have a backend or real client secret, we'll simulate it + console.log("OAuth code received:", code); + + // Mock token exchange + const mockAccessToken = "mock_access_token_" + Math.random().toString(36).substr(2, 9); + const tokens = { + accessToken: mockAccessToken, + expiresAt: Date.now() + 3600 * 1000, // 1 hour + }; + + setQwenTokens(tokens); + modelAdapter.setQwenOAuthTokens(tokens.accessToken, undefined, 3600); + + // Save to localStorage + localStorage.setItem("promptarch-qwen-tokens", JSON.stringify(tokens)); + + // Clear the code from URL + window.history.replaceState({}, document.title, window.location.pathname); + + // Switch to settings to show success (optional) + setCurrentView("settings"); + } + + // Load tokens from localStorage on init + const savedTokens = localStorage.getItem("promptarch-qwen-tokens"); + if (savedTokens) { + try { + const tokens = JSON.parse(savedTokens); + if (tokens.expiresAt > Date.now()) { + setQwenTokens(tokens); + modelAdapter.setQwenOAuthTokens(tokens.accessToken, tokens.refreshToken, (tokens.expiresAt - Date.now()) / 1000); + } + } catch (e) { + console.error("Failed to load Qwen tokens:", e); + } + } + } + }, []); + + const renderContent = () => { + switch (currentView) { + case "enhance": + return ; + case "prd": + return ; + case "action": + return ; + case "history": + return ; + case "settings": + return ; + default: + return ; + } + }; + + return ( +
+ +
+
+ {renderContent()} +
+
+
+ ); +} diff --git a/app/test.css b/app/test.css new file mode 100644 index 0000000..f650574 --- /dev/null +++ b/app/test.css @@ -0,0 +1,27 @@ +.test-page { + background: linear-gradient(to bottom right, rgb(248, 250, 252), rgb(241, 245, 249)); + min-height: 100vh; +} + +.test-card { + background: white; + border: 1px solid rgb(229, 231, 235); + border-radius: 0.5rem; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + padding: 1.5rem; +} + +.test-button { + background: rgb(24, 24, 27); + color: white; + padding: 0.5rem 1rem; + border-radius: 0.375rem; + font-weight: 500; + font-size: 0.875rem; + border: none; + cursor: pointer; +} + +.test-button:hover { + background: rgb(38, 38, 42); +} diff --git a/components/ActionPlanGenerator.tsx b/components/ActionPlanGenerator.tsx new file mode 100644 index 0000000..9cfdf74 --- /dev/null +++ b/components/ActionPlanGenerator.tsx @@ -0,0 +1,257 @@ +"use client"; + +import { useState, useEffect } from "react"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Textarea } from "@/components/ui/textarea"; +import useStore from "@/lib/store"; +import modelAdapter from "@/lib/services/adapter-instance"; +import { ListTodo, Copy, Loader2, CheckCircle2, Clock, AlertTriangle, Settings } from "lucide-react"; +import { cn } from "@/lib/utils"; + +export default function ActionPlanGenerator() { + const { + currentPrompt, + actionPlan, + selectedProvider, + selectedModels, + availableModels, + apiKeys, + isProcessing, + error, + setCurrentPrompt, + setSelectedProvider, + setActionPlan, + setProcessing, + setError, + setAvailableModels, + setSelectedModel, + } = useStore(); + + const [copied, setCopied] = useState(false); + + const selectedModel = selectedModels[selectedProvider]; + const models = availableModels[selectedProvider] || modelAdapter.getAvailableModels(selectedProvider); + + useEffect(() => { + if (typeof window !== "undefined") { + loadAvailableModels(); + const saved = localStorage.getItem("promptarch-api-keys"); + if (saved) { + try { + const keys = JSON.parse(saved); + if (keys.qwen) modelAdapter.updateQwenApiKey(keys.qwen); + if (keys.ollama) modelAdapter.updateOllamaApiKey(keys.ollama); + if (keys.zai) modelAdapter.updateZaiApiKey(keys.zai); + } catch (e) { + console.error("Failed to load API keys:", e); + } + } + } + }, [selectedProvider]); + + const loadAvailableModels = async () => { + const fallbackModels = modelAdapter.getAvailableModels(selectedProvider); + setAvailableModels(selectedProvider, fallbackModels); + + try { + const result = await modelAdapter.listModels(selectedProvider); + if (result.success && result.data) { + setAvailableModels(selectedProvider, result.data[selectedProvider] || fallbackModels); + } + } catch (error) { + console.error("Failed to load models:", error); + } + }; + + const handleGenerate = async () => { + if (!currentPrompt.trim()) { + setError("Please enter PRD or project requirements"); + return; + } + + const apiKey = apiKeys[selectedProvider]; + if (!apiKey || !apiKey.trim()) { + setError(`Please configure your ${selectedProvider.toUpperCase()} API key in Settings`); + return; + } + + setProcessing(true); + setError(null); + + try { + const result = await modelAdapter.generateActionPlan(currentPrompt, selectedProvider, selectedModel); + + if (result.success && result.data) { + const newPlan = { + id: Math.random().toString(36).substr(2, 9), + prdId: "", + tasks: [], + frameworks: [], + architecture: { + pattern: "", + structure: "", + technologies: [], + bestPractices: [], + }, + estimatedDuration: "", + createdAt: new Date(), + rawContent: result.data, + }; + setActionPlan(newPlan); + } else { + setError(result.error || "Failed to generate action plan"); + } + } catch (err) { + setError(err instanceof Error ? err.message : "An error occurred"); + } finally { + setProcessing(false); + } + }; + + const handleCopy = async () => { + if (actionPlan?.rawContent) { + await navigator.clipboard.writeText(actionPlan.rawContent); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } + }; + + return ( +
+ + + + + Action Plan Generator + + + Convert PRD into actionable implementation plan + + + +
+ +
+ {(["qwen", "ollama", "zai"] as const).map((provider) => ( + + ))} +
+
+ +
+ + +
+ +
+ +