diff --git a/README.md b/README.md index e215bc4..5050989 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,50 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Next AI Draw.io + +A modern web application that integrates AI capabilities with draw.io diagrams. This tool allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization. + +## Features + +- **AI-Powered Diagram Creation**: Generate diagrams from natural language descriptions +- **Diagram Modification**: Edit existing diagrams using simple text commands +- **Image Processing**: Upload images to use as references for diagram creation +- **XML Extraction and Processing**: Parse and manipulate draw.io XML files +- **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time +- **Diagram History**: Track and restore previous versions of your diagrams +- **Example Templates**: Quick-start with example prompts like "Draw a cat" or "Replicate this flowchart" ## Getting Started -First, run the development server: +### Prerequisites + +- Node.js 18.x or higher +- npm or yarn package manager +- Modern web browser (Chrome, Firefox, Safari, Edge) + +### Installation + +1. Clone the repository: + +```bash +git clone https://github.com/yourusername/next-ai-draw-io.git +cd next-ai-draw-io +``` + +2. Install dependencies: + +```bash +npm install +# or +yarn install +``` + +3. Create a `.env.local` file in the root directory with the following variables: + +``` +OPENAI_API_KEY=your_openai_api_key_here +# Add any other required environment variables +``` + +4. Run the development server: ```bash npm run dev @@ -14,23 +56,97 @@ pnpm dev bun dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application. -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +## Usage -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +### Creating a New Diagram + +Use the chat interface to describe the diagram you want to create: + +``` +Create a flowchart showing the user authentication process with login, validation, and dashboard access steps. +``` + +### Modifying an Existing Diagram + +With an existing diagram open, use natural language to make changes: + +``` +Add a decision node after the validation step that redirects failed attempts to a retry page. +``` + +### Using Image References + +Upload an image as a reference by clicking the attachment button in the chat interface. Then ask the AI to use it as inspiration: + +``` +Create a similar flowchart to this image but add two more steps at the end. +``` + +### Using Example Templates + +Click on the example prompts in the interface to: +- Generate a cat diagram +- Replicate the example flowchart + +## Project Structure + +``` +app/ # Next.js application routes and pages + extract_xml.ts # Utilities for XML processing +components/ # React components + chat-input.tsx # User input component for AI interaction + chatPanel.tsx # Chat interface with diagram control + ui/ # UI components (buttons, cards, etc.) +lib/ # Utility functions and helpers + utils.ts # General utilities including XML conversion +public/ # Static assets including example images +``` + +## How It Works + +The application uses the following technologies: +- **Next.js**: For the frontend framework and routing +- **OpenAI**: For natural language processing and diagram generation +- **@ai-sdk/react**: For the chat interface and AI interactions +- **draw.io XML**: For diagram representation and manipulation + +Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly. ## Learn More -To learn more about Next.js, take a look at the following resources: +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial +- [draw.io Documentation](https://www.drawio.com/doc/) - learn about draw.io features -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. +## Contributing -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +Contributions are welcome! Please feel free to submit a Pull Request. -## Deploy on Vercel +1. Fork the repository +2. Create your feature branch (`git checkout -b feature/amazing-feature`) +3. Commit your changes (`git commit -m 'Add some amazing feature'`) +4. Push to the branch (`git push origin feature/amazing-feature`) +5. Open a Pull Request -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +## License -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +This project is licensed under the MIT License - see the LICENSE file for details. + +## Support & Contact + +For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at: + +- Email: your.email@example.com +- Twitter: [@yourusername](https://twitter.com/yourusername) + +## Deployment + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js. + +Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. + +--- + +Built with ❤️ using [Next.js](https://nextjs.org/) and OpenAI technology.