|
1 | | -# CoAgents Starter |
2 | 1 |
|
3 | | -This example contains a simple starter project. |
| 2 | +# Learn Coding with CopilotKit, CoAgents, and LangGraphs 🚀 |
4 | 3 |
|
5 | | -**These instructions assume you are in the `coagents-starter/` directory** |
| 4 | +[](https://github.com/copilotkit) |
| 5 | +[](https://nextjs.org/) |
| 6 | +[](https://youtu.be/E1q67IDcdMU) |
| 7 | +[](https://learn-coding-with-copilotkit.vercel.app/) |
6 | 8 |
|
7 | | -## Running the Agent |
| 9 | +--- |
8 | 10 |
|
9 | | -First, install the dependencies: |
| 11 | +## 📖 **About** |
10 | 12 |
|
11 | | -```sh |
12 | | -cd agent |
13 | | -poetry install |
14 | | -``` |
| 13 | +**Not everyone can code, but everyone can learn.** |
15 | 14 |
|
16 | | -Then, create a `.env` file inside `./agent` with the following: |
| 15 | +This project is an AI-powered **DSA/Competitive Programming Helper** with an inbuilt editor to help you: |
| 16 | +- Prepare for **coding interviews** |
| 17 | +- Start learning how to code from scratch |
| 18 | +- **Visualize everything** with intuitive representations |
17 | 19 |
|
18 | | -``` |
19 | | -GROQ_API_KEY=... |
20 | | -``` |
| 20 | +**Experience the future of coding education!** |
21 | 21 |
|
22 | | -IMPORTANT: |
23 | | -Make sure the OpenAI API Key you provide, supports gpt-4o. |
| 22 | +🌐 Live Demo: [learn-coding-with-copilotkit.vercel.app](https://learn-coding-with-copilotkit.vercel.app/) |
24 | 23 |
|
25 | | -Then, run the demo: |
| 24 | +--- |
26 | 25 |
|
27 | | -```sh |
28 | | -poetry run demo |
29 | | -``` |
| 26 | +## 🌟 **Why CopilotKit?** |
30 | 27 |
|
31 | | -## Running the UI |
| 28 | +- **Seamless Integration**: Build AI copilots that enhance user experiences effortlessly. |
| 29 | +- **Open Source**: Join a thriving community of developers using and contributing to CopilotKit. |
| 30 | +- **Future-Ready**: Perfect for in-app AI agents, context-aware chatbots, shared state and beyond! |
32 | 31 |
|
33 | | -First, install the dependencies: |
| 32 | +Learn more about [CopilotKit](https://github.com/copilotkit). |
34 | 33 |
|
35 | | -```sh |
36 | | -cd ./ui |
37 | | -pnpm i |
38 | | -``` |
| 34 | +--- |
39 | 35 |
|
40 | | -Then, create a `.env` file inside `./ui` with the following: |
41 | 36 |
|
42 | | -``` |
43 | | -GROQ_API_KEY=... |
44 | | -``` |
| 37 | +## 🛠️ **Project Description** |
45 | 38 |
|
46 | | -Then, run the Next.js project: |
| 39 | +Learn coding in a revolutionary way using **CopilotKit**, **CoAgents**, and **LangGraphs**! This project showcases how cutting-edge tools can simplify coding education through interactive UI and AI-driven technologies. |
47 | 40 |
|
48 | | -```sh |
49 | | -pnpm run dev |
50 | | -``` |
| 41 | +### Key Features: |
| 42 | +- **🌐 CopilotKit**: Effortlessly integrate AI copilots into your apps, enabling in-app chatbots, context-aware interactions, and more. |
| 43 | +- **🤖 CoAgents**: A robust infrastructure for connecting LangGraph agents to humans in the loop, enabling seamless collaboration. |
| 44 | +- **📊 LangGraphs**: Visual representations of programming languages to simplify understanding of their structure and syntax. |
| 45 | +- **🖥️ Inbuilt Editor**: A powerful coding editor designed to boost productivity and learning. |
51 | 46 |
|
52 | | -## Usage |
| 47 | +--- |
53 | 48 |
|
54 | | -Navigate to [http://localhost:3000](http://localhost:3000). |
55 | 49 |
|
56 | | -# LangGraph Studio |
| 50 | +## Screenshots |
57 | 51 |
|
58 | | -Run LangGraph studio, then load the `./agent` folder into it. |
| 52 | +<details> |
| 53 | + <summary>View Achieved Accuracy</summary> |
| 54 | + |
| 55 | + <div align="center"> |
| 56 | + <img src="screenshots/codechef-one.png" alt="Screenshot 1" width="800px"/> |
| 57 | + <img src="screenshots/codechef-one-diagram.png" alt="Screenshot 2" width="800px"/> |
| 58 | + <img src="screenshots/codechef-two.png" alt="Screenshot 3" width="800px"/> |
| 59 | + <img src="screenshots/codechef-two-diagram.png" alt="Screenshot 4" width="800px"/> |
| 60 | + </div> |
59 | 61 |
|
60 | | -Make sure to create teh `.env` mentioned above first! |
| 62 | +</details> |
61 | 63 |
|
62 | | -# Troubleshooting |
63 | 64 |
|
64 | | -A few things to try if you are running into trouble: |
| 65 | +## 🏗️ **Tech Stack** |
| 66 | + |
| 67 | +### Frontend: |
| 68 | +- [Next.js](https://nextjs.org/) |
| 69 | +- [ShadCN UI](https://shadcn.dev/) |
| 70 | +- [Tailwind CSS](https://tailwindcss.com/) |
| 71 | +- [CopilotKit-UI](https://github.com/copilotkit) |
| 72 | + |
| 73 | +### Backend: |
| 74 | +- [Python](https://www.python.org/) |
| 75 | +- [FastAPI](https://fastapi.tiangolo.com/) |
| 76 | +- [LangGraphs](https://langgraphs.example) |
| 77 | +- [CopilotKit](https://github.com/copilotkit) |
| 78 | + |
| 79 | +### APIs: |
| 80 | +- [Groq](https://groq.com/) |
| 81 | +- [Llama-70B](https://example.com/) |
| 82 | + |
| 83 | +--- |
| 84 | + |
| 85 | +## 📚 **Topics Covered** |
| 86 | + |
| 87 | +- **TypeScript** |
| 88 | +- **Next.js** |
| 89 | +- **Competitive Programming** |
| 90 | +- **Tailwind CSS** |
| 91 | +- **Render Deployment** |
| 92 | +- **Koyeb API** |
| 93 | +- **ShadCN-UI** |
| 94 | +- **Llama-70B** |
| 95 | +- **Groq AI** |
| 96 | +- **CopilotKit** |
| 97 | +- **LangGraph (Python)** |
| 98 | +- **CoAgents** |
| 99 | + |
| 100 | +--- |
| 101 | + |
| 102 | +## ⚙️ **Installation** |
| 103 | + |
| 104 | +Clone the repository: |
| 105 | + |
| 106 | +```bash |
| 107 | +git clone https://github.com/<your-repo-name>.git |
| 108 | +``` |
| 109 | + |
| 110 | +--- |
| 111 | + |
| 112 | +### 🧩 **Configuration** |
| 113 | + |
| 114 | +1. Install the dependencies for the backend: |
| 115 | + |
| 116 | + ```bash |
| 117 | + cd agent |
| 118 | + poetry install |
| 119 | + ``` |
| 120 | + |
| 121 | +2. Create a `.env` file in the `./agent` directory: |
| 122 | + |
| 123 | + ```plaintext |
| 124 | + GROQ_API_KEY=your_groq_api_key_here |
| 125 | + ``` |
| 126 | + |
| 127 | +3. Run the demo: |
| 128 | + |
| 129 | + ```bash |
| 130 | + poetry run demo |
| 131 | + ``` |
| 132 | + |
| 133 | +--- |
| 134 | + |
| 135 | +### 🖥️ **Running the UI** |
| 136 | + |
| 137 | +1. Install the dependencies for the frontend: |
| 138 | + |
| 139 | + ```bash |
| 140 | + cd ./frontend-interface |
| 141 | + npm i --legacy-peer-deps |
| 142 | + ``` |
| 143 | + |
| 144 | +2. Create a `.env` file in the `./frontend-interface` directory: |
| 145 | + |
| 146 | + ```plaintext |
| 147 | + GROQ_API_KEY=your_groq_api_key_here |
| 148 | + ``` |
| 149 | + |
| 150 | +3. Run the Next.js project: |
| 151 | + |
| 152 | + ```bash |
| 153 | + npm run dev |
| 154 | + ``` |
| 155 | + |
| 156 | +4. Navigate to [http://localhost:3000](http://localhost:3000). |
| 157 | + |
| 158 | +--- |
| 159 | + |
| 160 | +### 🖥️ **Running the Backend** |
| 161 | + |
| 162 | +1. Install the dependencies for the backend: |
| 163 | + |
| 164 | + ```bash |
| 165 | + cd ./backend |
| 166 | + pip install -r -requirements.txt |
| 167 | + ``` |
| 168 | + |
| 169 | +2. Create a `.env` file in the `./frontend-interface` directory: |
| 170 | + |
| 171 | + ```plaintext |
| 172 | + GROQ_API_KEY=your_groq_api_key_here |
| 173 | + ``` |
| 174 | + |
| 175 | +3. Run the FAST API server: |
| 176 | + |
| 177 | + ```bash |
| 178 | + python run_agent.py |
| 179 | + ``` |
| 180 | + |
| 181 | +--- |
| 182 | + |
| 183 | + |
| 184 | +## 🧑💻 **Usage** |
| 185 | + |
| 186 | +1. **Launch LangGraph Studio**: |
| 187 | + Run LangGraph Studio and load the `./agent` folder into it. |
| 188 | + |
| 189 | +2. **Ensure proper configuration**: Make sure the `.env` file is properly configured as mentioned in the setup steps. |
| 190 | + |
| 191 | +--- |
| 192 | + |
| 193 | +## 🔧 **Troubleshooting** |
| 194 | + |
| 195 | +If you encounter any issues, try the following: |
| 196 | + |
| 197 | +1. Ensure no other application is running on port `8000`. |
| 198 | +2. In `/agent/dsa_agent/demo.py`, change `0.0.0.0` to `127.0.0.1` or `localhost`. |
| 199 | + |
| 200 | +--- |
| 201 | + |
| 202 | +## 📜 **License** |
| 203 | + |
| 204 | +This project is [UN Licensed](LICENSE). |
| 205 | + |
| 206 | +--- |
| 207 | + |
| 208 | +Give CopilotKit a ⭐ on [GitHub](https://github.com/copilotkit) if you love it! |
65 | 209 |
|
66 | | -1. Make sure there is no other local application server running on the 8000 port. |
67 | | -2. Under `/agent/my_agent/demo.py`, change `0.0.0.0` to `127.0.0.1` or to `localhost` |
|
0 commit comments