Create an whiteboard-like app where you can pull information from a library of sources (company documents, past work, chats, images, etc) in order to generate new information through the use of a LLM
I'll create a whiteboard-like app that combines visual organization with AI-powered content generation using your library of sources. This will be a RAG (Retrieval Augmented Generation) application with an intuitive drag-and-drop interface.
I've created a comprehensive AI-powered whiteboard application that combines visual organization with intelligent content generation. Here's what the app includes:
Key Features
🎨 Interactive Whiteboard
- Drag-and-drop interface for organizing content
- Resizable and movable content blocks
- Grid background for better visual organization
- Different visual styles for different content types
📚 Source Library
- Organized collection of documents, chats, images, and notes
- Search and filter functionality
- Multi-select capability for choosing sources
- Quick add to whiteboard with drag-and-drop
🤖 AI Content Generation
- Uses selected sources as context for RAG (Retrieval Augmented Generation) 1
- Intelligent synthesis of information across multiple sources
- Quick prompt suggestions for common use cases
- Generated content clearly marked and linked to source materials
💡 Smart Organization
- Color-coded content types (generated, documents, images, etc.)
- Source tracking for generated content
- Intuitive toolbar with generation controls
- Real-time selection feedback
How It Works
- Select Sources: Choose relevant documents, chats, images, or notes from your library
- Generate Content: Use natural language prompts to create new insights based on your selected sources
- Organize Visually: Drag, resize, and arrange all content on the infinite whiteboard canvas
- Iterate: Continue adding sources and generating new content to build comprehensive knowledge maps
The app uses the AI SDK 2 with OpenAI's GPT-4o-mini model to generate contextually relevant content based on your source materials, making it perfect for research, brainstorming, project planning, and knowledge synthesis.
Please make some adjustments
- Add the ability to type in the open canvas where I can type "@" to search sources from the library and import them into the whiteboard, otherwise when I press "Enter" it should submit a prompt to the LLM
- Add the ability to close/open the sidebar
- Add the ability for me to move around/zoom in the whiteboard
I'll add those features to make the whiteboard more interactive and user-friendly. Let me implement the canvas typing with "@" mentions, sidebar toggle, and pan/zoom functionality.
Perfect! I've implemented all the requested features:
New Features Added
1. Canvas Typing with "@" Mentions
- Click anywhere on the canvas to start typing
- Type "@" to search and select sources from your library
- Press "Enter" to submit prompts to the LLM or create text notes
- Visual feedback shows whether content will be AI-generated or added as text
2. Collapsible Sidebar
- Toggle button in the toolbar (panel icon) to show/hide the source library
- More canvas space when sidebar is closed
- Persistent state during your session
3. Pan & Zoom Navigation
- Mouse wheel to zoom in/out (10% - 300%)
- Ctrl+click or middle mouse button to pan around the canvas
- Zoom indicator in bottom-right corner shows current zoom level
- Smart coordinate system that maintains item positions during zoom/pan
How to Use
Canvas Interaction:
- Click empty space → Start typing immediately
- Use "@sourcename" → AI will use that source for generation
- Press Enter → Submit to LLM or create text note
- Ctrl+scroll → Zoom in/out
- Ctrl+drag → Pan around canvas
Source Integration:
- Type "@" and start typing to search sources
- Selected sources appear as badges above the input
- Remove sources by clicking the X on badges
- AI generation uses all mentioned sources as context
Navigation:
- Zoom with mouse wheel (10% to 300%)
- Pan by holding Ctrl and dragging
- Toggle sidebar for more workspace
- All items maintain their relative positions during zoom/pan
The app now provides a much more fluid and intuitive experience for building knowledge maps with AI assistance!