One Piece TCG Companion

An AI-powered chat assistant for the One Piece Trading Card Game. This application provides players with a conversational interface to get real-time, accurate information about cards, rules, and strategies, powered by Groq's high-speed inference and the Vercel AI SDK.

Live Demo

✨ Features

• Conversational AI Interface: Ask questions about One Piece TCG in natural language.
• Real-time Card Information: The assistant uses tools to look up card details and deck sets, ensuring the data is accurate and preventing AI hallucinations.
• Streaming Responses: Fast token-by-token responses from the AI model, powered by the Vercel AI SDK and Groq.
• Markdown & Card Previews: Responses are rendered with Markdown, and any mentioned card codes are automatically linked with a hover-to-preview image feature.

🛠️ Tech Stack

• Framework: Next.js (App Router)
• Styling: Tailwind CSS
• AI & Language Model:
  • Vercel AI SDK (@ai-sdk/react) for frontend hooks and backend streaming.
  • Groq API for fast LLM inference.
  • Zod for defining the schema of the AI's tools.
• Deployment & Platform:
  • Cloudflare Pages for hosting and CI/CD.
  • Cloudflare Workers for the serverless edge runtime.

🚀 Running Locally

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v18 or later)
• npm or yarn
• A Groq API key

Installation & Setup

1. Clone the repository:

   git clone https://github.com/Miguelreis/optcg-companion.git
   cd optcg-companion

2. Install dependencies:

   npm install

3. Set up environment variables:

   export GROQ_API_KEY="gsk_YourSecretGroqApiKey"

4. Run the development server: The project is configured to run with Wrangler, which emulates the Cloudflare environment locally.

   npm run dev

   Open http://localhost:3000 with your browser to see the result.

☁️ Deployment

This application is set up for continuous deployment on Cloudflare Pages. Every push to the main branch automatically triggers a new build and deployment to the live environment.

The entire application, including the API routes that use the AI SDK, runs on the Cloudflare Edge network for global low latency.

🙏 Acknowledgements and Data Sources

This project is made possible by the following free and public APIs. A huge thank you to their creators and maintainers.

• Card Data: OPTCG API is used for linking to official card pages.
• Card Images & linking: All card images are provided by the Limitless TCG.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.