A demo project showcasing the use of the Vercel AI SDK chat component with custom tools. This project features an AI-powered chat interface that generates color palettes using a custom tool, and leverages generative UI to render the tool's structured response data in a visually appealing way.

• AI SDK Custom Tool: Integrates a custom tool for generating color palettes via chat.
• Generative UI: Uses a React component to display the AI tool's structured responses.
• Color Manipulation: Utilizes chroma.js for advanced color processing.
• Markdown Parsing: Renders OpenAI responses with react-markdown.

1. Clone the repository:

   git clone https://github.com/JuanjoFR/generative-color-palette.git
   cd generative-color-palette

2. Install dependencies:

   npm install

3. Set up environment variables:

   • Create a .env.local file in the root directory.
   • Add your OpenAI API key:

     OPENAI_API_KEY=your-openai-api-key
     

4. Run the development server:

   npm run dev

• Interact with the chat to generate different color palettes using natural language.
• For production testing:

  npm run build
  npm start

• dev: Start development server
• build: Build for production
• start: Start production server
• lint: Run ESLint
• format: Run Prettier

• Users can generate a variety of color palettes by chatting with the AI.
• The generative UI component can be extended to support additional tools or response formats.

Open source. You are free to use, modify, and share this project.

Created by Juanjo Fernández (hi@juanjofr.com)