|
| 1 | +# Contributing to Open Generative UI |
| 2 | + |
| 3 | +⭐ Thank you for your interest in contributing!! |
| 4 | + |
| 5 | +Here's how you can contribute to this repository. |
| 6 | + |
| 7 | +## How can I contribute? |
| 8 | + |
| 9 | +**Please reach out to us first before starting any significant work on new or existing features.** |
| 10 | + |
| 11 | +We love community contributions! That said, we want to make sure we're all on the same page before you start. |
| 12 | +Investing a lot of time and effort just to find out it doesn't align with the project feels awful, and we don't want that to happen. |
| 13 | +It also helps to make sure the work you're planning isn't already in progress. |
| 14 | + |
| 15 | +Please file an issue first: https://github.com/CopilotKit/open-generative-ui/issues |
| 16 | +Or, reach out to us on Discord: https://discord.com/invite/6dffbvGU3D |
| 17 | + |
| 18 | +Ready to contribute but seeking guidance? Reach out to us directly on [Discord](https://discord.gg/6dffbvGU3D) for immediate assistance! Alternatively, you're welcome to raise an issue and one of our dedicated maintainers will promptly steer you in the right direction! |
| 19 | + |
| 20 | +## Found a bug? |
| 21 | + |
| 22 | +If you find a bug in the source code, you can help us by [submitting an issue](https://github.com/CopilotKit/open-generative-ui/issues/new) to our GitHub Repository. Even better, you can submit a Pull Request with a fix. |
| 23 | + |
| 24 | +## Missing a feature? |
| 25 | + |
| 26 | +So, you've got an awesome feature in mind? Throw it over to us by [creating an issue](https://github.com/CopilotKit/open-generative-ui/issues/new) on our GitHub Repo. |
| 27 | + |
| 28 | +# How do I make a code contribution? |
| 29 | + |
| 30 | +## Step 1: Make a fork |
| 31 | + |
| 32 | +Fork the [open-generative-ui](https://github.com/CopilotKit/open-generative-ui) repository to your GitHub account. This means that you'll have a copy of the repository under _your-GitHub-username/open-generative-ui_. |
| 33 | + |
| 34 | +## Step 2: Clone the repository to your local machine |
| 35 | + |
| 36 | +```bash |
| 37 | +git clone https://github.com/<your-GitHub-username>/open-generative-ui |
| 38 | +``` |
| 39 | + |
| 40 | +## Step 3: Prepare the development environment |
| 41 | + |
| 42 | +This is a **Turborepo monorepo** with a Next.js frontend and a LangGraph Python agent. |
| 43 | + |
| 44 | +### 1) Install Prerequisites |
| 45 | + |
| 46 | +- Node.js 20.x or later |
| 47 | +- pnpm v9.x installed globally (`npm i -g pnpm@^9`) |
| 48 | +- Python 3.11+ (for the agent) |
| 49 | + |
| 50 | +> **Windows users:** Enable **Developer Mode** (Settings > System > For developers > Developer Mode → On) to allow symlink creation. This is required for Next.js standalone builds and pnpm to work correctly. |
| 51 | +
|
| 52 | +### 2) Install Dependencies and Set Up |
| 53 | + |
| 54 | +The quickest way to get started is with the Makefile: |
| 55 | + |
| 56 | +```bash |
| 57 | +make setup # Installs deps + creates .env template |
| 58 | +``` |
| 59 | + |
| 60 | +Or manually: |
| 61 | + |
| 62 | +```bash |
| 63 | +pnpm install |
| 64 | +echo 'OPENAI_API_KEY=your-key-here' > apps/agent/.env |
| 65 | +``` |
| 66 | + |
| 67 | +Then add your real OpenAI API key to `apps/agent/.env`. |
| 68 | + |
| 69 | +### 3) Run the Project |
| 70 | + |
| 71 | +```bash |
| 72 | +make dev # Start all services (frontend + agent + mcp) |
| 73 | +``` |
| 74 | + |
| 75 | +Or run services individually: |
| 76 | + |
| 77 | +```bash |
| 78 | +make dev-app # Next.js frontend on http://localhost:3000 |
| 79 | +make dev-agent # LangGraph agent on http://localhost:8123 |
| 80 | +make dev-mcp # MCP server |
| 81 | +``` |
| 82 | + |
| 83 | +You can also use `pnpm` directly: |
| 84 | + |
| 85 | +```bash |
| 86 | +pnpm dev # All services |
| 87 | +pnpm dev:app # Frontend only |
| 88 | +pnpm dev:agent # Agent only |
| 89 | +``` |
| 90 | + |
| 91 | +### 4) Build and Lint |
| 92 | + |
| 93 | +```bash |
| 94 | +make build # Build all apps |
| 95 | +make lint # Lint all apps |
| 96 | +make clean # Clean build artifacts |
| 97 | +``` |
| 98 | + |
| 99 | +Run `make help` to see all available commands. |
| 100 | + |
| 101 | +## Step 4: Create a branch |
| 102 | + |
| 103 | +Create a new branch for your changes. |
| 104 | +In order to keep branch names uniform and easy-to-understand, please use the following conventions for branch naming: |
| 105 | + |
| 106 | +- for docs changes: `docs/<ISSUE_NUMBER>-<CUSTOM_NAME>` |
| 107 | +- for new features: `feat/<ISSUE_NUMBER>-<CUSTOM_NAME>` |
| 108 | +- for bug fixes: `fix/<ISSUE_NUMBER>-<CUSTOM_NAME>` |
| 109 | + |
| 110 | +```bash |
| 111 | +git checkout -b <new-branch-name-here> |
| 112 | +``` |
| 113 | + |
| 114 | +## Step 5: Make your changes |
| 115 | + |
| 116 | +The project has two main areas you can contribute to: |
| 117 | + |
| 118 | +| Area | Location | Tech | |
| 119 | +|------|----------|------| |
| 120 | +| **Frontend** | `apps/app/` | Next.js 16, React 19, Tailwind CSS 4, CopilotKit v2 | |
| 121 | +| **Agent** | `apps/agent/` | LangGraph, Python, CopilotKit middleware | |
| 122 | + |
| 123 | +## Step 6: Add the changes that are ready to be committed |
| 124 | + |
| 125 | +Stage the changes that are ready to be committed: |
| 126 | + |
| 127 | +```bash |
| 128 | +git add . |
| 129 | +``` |
| 130 | + |
| 131 | +## Step 7: Commit the changes (Git) |
| 132 | + |
| 133 | +Commit the changes with a short message. (See below for more details on how we structure our commit messages) |
| 134 | + |
| 135 | +```bash |
| 136 | +git commit -m "<type>(<scope>): <subject>" |
| 137 | +``` |
| 138 | + |
| 139 | +## Step 8: Push the changes to the remote repository |
| 140 | + |
| 141 | +Push the changes to the remote repository using: |
| 142 | + |
| 143 | +```bash |
| 144 | +git push origin <branch-name-here> |
| 145 | +``` |
| 146 | + |
| 147 | +## Step 9: Create Pull Request |
| 148 | + |
| 149 | +In GitHub, do the following to submit a pull request to the upstream repository: |
| 150 | + |
| 151 | +1. Give the pull request a title and a short description of the changes made. Include also the issue or bug number associated with your change. Explain the changes that you made, any issues you think exist with the pull request you made, and any questions you have for the maintainer. |
| 152 | + |
| 153 | +Remember, it's okay if your pull request is not perfect (no pull request ever is). The reviewer will be able to help you fix any problems and improve it! |
| 154 | + |
| 155 | +2. Wait for the pull request to be reviewed by a maintainer. |
| 156 | + |
| 157 | +3. Make changes to the pull request if the reviewing maintainer recommends them. |
| 158 | + |
| 159 | +Celebrate your success after your pull request is merged :-) |
| 160 | + |
| 161 | +## Git Commit Messages |
| 162 | + |
| 163 | +We structure our commit messages like this: |
| 164 | + |
| 165 | +``` |
| 166 | +<type>(<scope>): <subject> |
| 167 | +``` |
| 168 | + |
| 169 | +Example |
| 170 | + |
| 171 | +``` |
| 172 | +feat(agent): add new visualization tool for 3D scenes |
| 173 | +fix(app): correct iframe resize observer cleanup |
| 174 | +docs(readme): update architecture diagram |
| 175 | +``` |
| 176 | + |
| 177 | +### Types: |
| 178 | + |
| 179 | +- **feat**: A new feature |
| 180 | +- **fix**: A bug fix |
| 181 | +- **docs**: Changes to the documentation |
| 182 | +- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc.) |
| 183 | +- **refactor**: A code change that neither fixes a bug nor adds a feature |
| 184 | +- **perf**: A code change that improves performance |
| 185 | +- **test**: Adding missing or correcting existing tests |
| 186 | +- **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation |
| 187 | + |
| 188 | +### Scopes: |
| 189 | + |
| 190 | +- **app**: Changes to the Next.js frontend (`apps/app/`) |
| 191 | +- **agent**: Changes to the LangGraph agent (`apps/agent/`) |
| 192 | +- **readme**: Documentation changes |
| 193 | + |
| 194 | +## Code of Conduct |
| 195 | + |
| 196 | +Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms. |
| 197 | + |
| 198 | +[Code of Conduct](./CODE_OF_CONDUCT.md) |
| 199 | + |
| 200 | +Our Code of Conduct means that you are responsible for treating everyone on the project with respect and courtesy. |
| 201 | + |
| 202 | +## Need Help? |
| 203 | + |
| 204 | +- **Questions**: Use our [Discord support channel](https://discord.com/invite/6dffbvGU3D) for any questions you have. |
| 205 | +- **Resources**: Visit [CopilotKit documentation](https://docs.copilotkit.ai/) for more helpful documentation. |
| 206 | + |
| 207 | +⭐ Happy coding, and we look forward to your contributions! |
0 commit comments