PROJECT OVERVIEW: The goal is to build 'Akıl Yoldaşı' (Intellect Companion), a single-page application (SPA) designed to augment human thought processes with AI, rather than replace them. It addresses the growing concern that AI might diminish human creativity and critical thinking by positioning AI as a collaborative partner. The app's core value proposition is to empower users to generate new ideas, synthesize research, and structure arguments more effectively, always maintaining human oversight and critical input at the center of the process. It's a tool for knowledge workers, researchers, writers, and anyone looking to leverage AI to expand their cognitive capabilities in a human-centered way. The app should foster a sense of partnership with AI, providing intelligent assistance without taking away the user's agency or intellectual ownership.
TECH STACK: The application will be built using React for the UI, leveraging React Hooks for state management and functional components. Tailwind CSS will be used for all styling, ensuring a utility-first approach and highly customizable, responsive design. Vite will be the build tool for a fast development experience. For client-side routing, React Router Dom should be used to manage different sections of the SPA. State persistence will be handled via LocalStorage. A mock API client will simulate AI interactions to focus on front-end development, using `setTimeout` for artificial delays.
CORE FEATURES:
1. IDEA CANVAS: This feature allows users to input their core ideas, research questions, or problem statements. The AI will then generate diverse perspectives, related concepts, potential solution paths, and relevant keywords based on the user's input. Users can save these AI-generated insights, refine them, or discard them. The flow involves a textarea for input, a 'Generate Insights' button, and a display area for AI suggestions, each with an 'Add to Notes' or 'Refine' option.
2. DISCOVERY ENGINE: Users can enter a topic or keyword to initiate a search. The AI will simulate fetching and summarizing relevant articles, theses, blog posts, and discussions. Each summarized resource will include a title, URL (mock), a short snippet, and an AI-generated summary. Users can add these resources to a 'Read Later' list or request further summarization/analysis from the AI. The flow includes a search bar, a results list, and detailed view modals for each resource.
3. ARGUMENT BUILDER: This tool assists users in developing a thesis or argument. Users input their main thesis statement and supporting points. The AI will provide critical feedback, identify weak spots, suggest counter-arguments, and recommend additional evidence or logical connections. Users can iteratively refine their arguments with AI assistance. The flow involves a thesis input, an area for adding argument points, AI feedback alongside each point, and a final 'Review Argument' summary.
4. THOUGHT VISUALIZER: An interactive canvas where users can visualize their ideas, AI suggestions, and connected resources in a mind map or flowchart format. Users can drag and drop nodes (representing ideas, arguments, or resources), create connections between them, and add labels to connections. The AI can also suggest connections between existing nodes. This will be a simplified visualizer using basic DOM manipulation and drag-and-drop, not a complex graph library for MVP.
5. HUMAN TOUCH NOTES: Crucial for the human-centered philosophy. For every AI-generated output (ideas, summaries, argument feedback), users will have a dedicated section to add their own critical notes, corrections, annotations, and additional thoughts. This ensures that the human intellect remains primary and generative. This feature should be integrated seamlessly into the display of AI outputs, allowing for inline editing or dedicated note panels.
UI/UX DESIGN:
- LAYOUT: A clean, two-column layout. A fixed left sidebar for main navigation (Idea Canvas, Discovery Engine, Argument Builder, Thought Visualizer). The main content area occupies the rest of the screen, adapting dynamically. A minimalist header with the app title and a user profile icon.
- COLOR PALETTE: Professional and calming. Dominant background: `neutral-900` (dark charcoal), text: `neutral-100` (off-white). Accent colors for interactive elements: `blue-500` or `indigo-500`. Secondary accent for positive actions: `green-500`. Error messages: `red-500`. Cards/panels: `neutral-800` or `neutral-700`.
- TYPOGRAPHY: A readable sans-serif font like Inter (or a system fallback like `sans-serif`) for all text. `text-lg` for headings, `text-base` for body, `text-sm` for secondary info.
- RESPONSIVE DESIGN: Mobile-first approach. On smaller screens, the sidebar should collapse into a toggleable overlay or be replaced by a bottom navigation bar. Content areas should fluidly adjust. All components must be fully responsive.
- ICONS: Use a well-known icon library like Heroicons for clear visual cues.
DATA MODEL (Persisted in LocalStorage):
- `userProfile`: `{ id: string, name: string, email: string, settings: { theme: 'dark' | 'light' } }`
- `ideas`: `Array<{ id: string, title: string, content: string, aiSuggestions: string[], userNotes: string[], createdAt: string, lastModified: string }> `
- `discoveries`: `Array<{ id: string, query: string, results: Array<{ title: string, url: string, snippet: string, aiSummary: string, savedToList: boolean }>, createdAt: string }>`
- `arguments`: `Array<{ id: string, thesis: string, points: Array<{ statement: string, aiCritique: string, userRefinement: string, evidenceSuggestions: string[] }>, createdAt: string, lastModified: string }>`
- `visualizations`: `Array<{ id: string, name: string, nodes: Array<{ id: string, text: string, type: 'idea' | 'argument' | 'resource', x: number, y: number }>, edges: Array<{ id: string, source: string, target: string, label: string }>, createdAt: string, lastModified: string }>`
COMPONENT BREAKDOWN:
- `App.jsx`: Main entry point, handles global state (user profile), routing (`<BrowserRouter>`).
- `Layout.jsx`: Contains `<Sidebar>`, `<Header>`, and a main content area for route rendering. Responsible for responsive layout changes.
- `Sidebar.jsx`: Navigation links (`<NavLink>`) to features. Collapsible for mobile.
- `Header.jsx`: Displays app title, potentially a user avatar/menu.
- `IdeaCanvasPage.jsx`: Renders `IdeaInputForm`, `AISuggestionsList`, and `UserNotesEditor` for a specific idea.
- `IdeaInputForm.jsx`: Textarea for initial input, 'Generate Insights' button.
- `AISuggestionsList.jsx`: Displays AI-generated points, each with options to add to user notes.
- `UserNotesEditor.jsx`: A rich text editor or markdown editor for users to refine and expand on ideas.
- `DiscoveryEnginePage.jsx`: Comprises `SearchInput`, `SearchResultsList`, and `DiscoveryCard`.
- `SearchInput.jsx`: Input field and search button.
- `SearchResultsList.jsx`: Renders a list of `DiscoveryCard` components.
- `DiscoveryCard.jsx`: Displays resource title, snippet, AI summary, and 'Add to Read Later' button.
- `ArgumentBuilderPage.jsx`: Integrates `ThesisInput`, `ArgumentPointEditor`, and `EvidenceSuggestions`.
- `ThesisInput.jsx`: Textarea for the main thesis.
- `ArgumentPointEditor.jsx`: Input for each argument point, displays AI critique, and allows user refinement.
- `EvidenceSuggestions.jsx`: Lists potential evidence or sources suggested by AI.
- `ThoughtVisualizerPage.jsx`: Contains the `MindMapCanvas` and potentially a `NodeEditorModal`.
- `MindMapCanvas.jsx`: Interactive canvas with draggable/connectable nodes. Uses basic React state for node positions and connections.
- `NodeEditorModal.jsx`: Modal to edit node content or add new nodes.
- `LoadingSpinner.jsx`: Generic loading component for AI interactions.
- `ErrorMessage.jsx`: Component to display error messages.
- `Modal.jsx`: Reusable modal component for various pop-ups (e.g., node editing, detailed resource view).
- `Button.jsx`: Reusable button component with Tailwind styles.
- `Input.jsx`: Reusable input component.
ANIMATIONS & INTERACTIONS:
- Sidebar: Smooth slide-in/out transition on collapse/expand using Tailwind's `transition` utilities.
- AI Responses: A subtle loading spinner or skeleton loader while AI generates content. Once loaded, content should fade in smoothly.
- Buttons: Slight scale-up and shadow change on hover (`hover:scale-105`, `hover:shadow-lg`).
- Cards: Lift effect with a subtle shadow increase on hover (`hover:translate-y-[-2px] hover:shadow-xl`).
- Toast Notifications: For successful saves or error messages, appearing at the top-right and fading out after a few seconds.
- Thought Visualizer: Smooth dragging of nodes, clear visual feedback when connecting nodes.
EDGE CASES:
- Empty States: For each feature, display a clear message and an encouraging prompt when there's no data (e.g., 'No ideas yet, start brainstorming!', 'Your read later list is empty.').
- Error Handling: Implement `try-catch` blocks for simulated AI calls and `localStorage` operations. Display user-friendly error messages (e.g., 'Failed to fetch AI insights. Please try again.').
- Input Validation: Basic client-side validation for minimum/maximum input lengths where applicable.
- Accessibility (a11y): Ensure proper semantic HTML, ARIA attributes for interactive elements (buttons, modals), keyboard navigation, and sufficient color contrast.
SAMPLE DATA (Mock data to populate initial state):
```javascript
const mockIdeas = [
{
id: 'idea-1',
title: 'The Role of AI in Philosophical Inquiry',
content: 'How can AI assist in exploring complex philosophical questions without dictating answers?',
aiSuggestions: [
'AI as a dialectical partner: generating counter-arguments.',
'Content synthesis: summarizing vast philosophical texts.',
'Concept mapping: visualizing relationships between ideas.',
'Ethical considerations of AI-driven thought.',
'The Socratic method implemented by AI.'
],
userNotes: ['Important to focus on augmentation, not automation.', 'Consider limitations in qualitative reasoning.'],
createdAt: '2023-10-26T10:00:00Z',
lastModified: '2023-10-26T10:30:00Z'
},
{
id: 'idea-2',
title: 'AI and Creative Writing: A Collaborative Approach',
content: 'Can AI truly enhance human creativity in writing, or does it lead to homogenization?',
aiSuggestions: [
'AI for plot generation and character development.',
'Style transfer and genre exploration.',
'Overcoming writer’s block with AI prompts.',
'Maintaining a unique authorial voice.',
'Copyright implications of AI-assisted works.'
],
userNotes: ['Explore tools that offer suggestions, not complete paragraphs.', 'Focus on unique narratives.'],
createdAt: '2023-10-25T14:30:00Z',
lastModified: '2023-10-25T15:00:00Z'
}
];
const mockDiscoveries = [
{
id: 'disc-1',
query: 'AI ethics philosophical implications',
results: [
{
title: 'Philosophy and the Age of AI: A New Paradigm?',
url: 'https://example.com/ai-philosophy-paper',
snippet: 'Explores the profound impact of artificial intelligence on traditional philosophical inquiries...',
aiSummary: 'This paper discusses how AI challenges existing philosophical frameworks, particularly in ethics, epistemology, and metaphysics. It argues for a human-centric approach to AI development.',
savedToList: false
},
{
title: 'The Machine Question: Philosophical Perspectives on AI',
url: 'https://example.com/machine-question',
snippet: 'A comprehensive look at the philosophical implications of advanced AI and consciousness...',
aiSummary: 'A book review highlighting debates around AI consciousness, moral status, and agency. It questions whether machines can truly \'think\' or \'feel\'.',
savedToList: true
}
],
createdAt: '2023-10-26T11:00:00Z'
}
];
const mockArguments = [
{
id: 'arg-1',
thesis: 'Artificial intelligence should primarily function as an augmentation tool for human intellect, not a replacement for human labor or creativity.',
points: [
{
statement: 'AI excels at data processing and pattern recognition, freeing humans for higher-order thinking.',
aiCritique: 'While true, this point needs concrete examples of \'higher-order thinking\' that AI cannot perform. Also, address the risk of humans becoming overly reliant.',
userRefinement: 'AI can handle repetitive data analysis, allowing humans to focus on complex problem-solving, ethical reasoning, and artistic creation.',
evidenceSuggestions: ['Studies on cognitive load reduction with AI assistance.', 'Examples of AI in scientific discovery vs. human interpretation.']
},
{
statement: 'Human creativity and intuition are irreducible to algorithmic processes, maintaining their unique value.',
aiCritique: 'Strengthen this by citing philosophical arguments on consciousness or emergent properties. Acknowledge that AI can \'mimic\' creativity.',
userRefinement: 'Genuine human creativity often stems from emotional experience, cultural context, and subjective interpretation, elements AI cannot fully replicate, even when generating novel outputs.',
evidenceSuggestions: ['Theories of embodied cognition.', 'Philosophical debates on consciousness and qualia.']
}
],
createdAt: '2023-10-25T09:00:00Z',
lastModified: '2023-10-26T09:45:00Z'
}
];
const mockVisualizations = [
{
id: 'vis-1',
name: 'AI Augmentation Concept Map',
nodes: [
{ id: 'n1', text: 'Human Intellect', type: 'idea', x: 100, y: 100 },
{ id: 'n2', text: 'AI Augmentation', type: 'idea', x: 300, y: 100 },
{ id: 'n3', text: 'Data Processing', type: 'resource', x: 200, y: 250 },
{ id: 'n4', text: 'Creative Problem Solving', type: 'idea', x: 400, y: 250 }
],
edges: [
{ id: 'e1', source: 'n1', target: 'n2', label: 'Enhanced by' },
{ id: 'e2', source: 'n2', target: 'n3', label: 'Utilizes AI for' },
{ id: 'e3', source: 'n2', target: 'n4', label: 'Leads to' }
],
createdAt: '2023-10-26T16:00:00Z',
lastModified: '2023-10-26T16:30:00Z'
}
];
```
DEPLOYMENT NOTES:
- Build Process: Use `vite build` for optimized production bundles. Ensure all necessary assets are included.
- Environment Variables: If a real AI API were to be integrated later, manage API keys using environment variables (e.g., `.env` files). For this MVP, all AI interaction will be mocked on the client side.
- Performance: Implement debouncing for user inputs that trigger AI requests to minimize unnecessary API calls (even mocked ones). Lazy load components for routes if the app grows larger to improve initial load times.
- LocalStorage: Handle potential `localStorage` size limits and graceful degradation if storage fails or is full.
- Cross-browser Compatibility: Ensure the app functions correctly across major modern browsers.
This prompt provides a comprehensive guide for an AI assistant to develop a fully functional SPA prototype for 'Akıl Yoldaşı', emphasizing human-centered AI, a robust tech stack, detailed features, and a polished user experience.