alexadark
    alexadark/react-copilot
    Public

    Fork

    About

    Your personal AI React copilot agent to write code snippets

    Meta

    Tools

    No tools added to the Pipe.

    Readme

    CodeAlchemist by ⌘ Langbase

    License: MIT Fork to ⌘ Langbase

    Build an AI Code Alchemist with Pipes — ⌘ Langbase

    An AI powered coding assistant to help you write database schema, queries, and fully functional code snippets. This CodeAlchemist app is built by using multiple AI Pipes on Langbase which work with 30+ LLMs (OpenAI, Gemini, Mistral, Llama, Gemma, etc), any Data (10M+ context with Memory sets), and any Framework (standard web API you can use with any software).

    Check out the live demo here.

    Features

    • 👨‍💻 CodeAlchemist — Built with multiple AI Pipes on ⌘ Langbase
      • Code Alchemist Pipe – A decision maker agent to help understand if user asked a question around code or database
      • React Copilot Pipe – Your personal AI React copilot agent to write code snippets
      • Database Architect Pipe – AI database architect agent to build scalable systems or simply generate SQL queries
    • 🗂️ SQL – Generate simple/complex SQL queries or an optimised database schema of a feature
    • 🚀 Build apps - Generate fully functional code snippets in React that you can also experiment with in the browser
      • More frameworks support coming soon.
    • 💻 Improve response — Improve the generated code or SQL by responding back after the query has resolved
    • ⚡️ Streaming — Real-time experience with streamed responses
    • 🗣️ Q/A — Ask questions and get pre-defined answers with your preferred AI model and tone
    • 🔋 Responsive and open source — Works on all devices and platforms

    Learn more

    1. Check the CodeAlchemist Pipe on ⌘ Langbase
    2. Read the source code on GitHub for this example
    3. Go through Documentaion: Pipe Quick Start
    4. Learn more about Pipes & Memory features on ⌘ Langbase

    Get started

    Let's get started with the project:

    To get started with Langbase, you'll need to create a free personal account on Langbase.com and verify your email address. Done? Cool, cool!

    1. Fork the the following Pipes on ⌘ Langbase.
      1. Code Alchemist Pipe
      2. React Copilot Pipe
      3. Database Architect Pipe
    2. Go to the API tab of each Pipe to copy the Pipe's API key (to be used on server-side only).
    3. Download the example project folder from here or clone the repository.
    4. cd into the project directory and open it in your code editor.
    5. Duplicate the .env.example file in this project and rename it to .env.local.
    6. Add the following environment variables:
    sh
    1# Fork https://langbase.com/examples/code-alchemist pipe to get the API key 2# Replace `PIPE_API_KEY` with the copied API key of Code Alchemist Pipe. 3LANGBASE_CODE_ALCHEMY_PIPE_API_KEY="PIPE_API_KEY" 4 5# Fork https://langbase.com/examples/react-copilot pipe to get the API key 6# Replace `PIPE_API_KEY` with the copied API key of React Copilot Pipe. 7LANGBASE_REACT_COPILOT_PIPE_API_KEY="PIPE_API_KEY" 8 9# Fork https://langbase.com/examples/database-architect pipe to get the API key 10# Replace `PIPE_API_KEY` with the copied API key of Database Architect Pipe. 11LANGBASE_DATABASE_ARCHITECT_PIPE_API_KEY="PIPE_API_KEY"
    1. Now execute the following commands in your terminal to run the project:
    sh
    1# Install the dependencies using the following command: 2pnpm install 3 4# OR if you are using npm, run the following command: 5npm install 6 7# Run the project using the following command: 8npm run dev

    Your app template should now be running on localhost:3000.

    NOTE: This is a Next.js project, so you can build and deploy it to any platform of your choice, like Vercel, Netlify, Cloudflare, etc.


    Authors

    This project is created by Langbase team members, with contributions from:

    Built by ⌘ Langbase.com — Ship composable AI pipe agents with hyper-personalized memory (RAG)!