[ { "path": ".github/CONTRIBUTING.md", "content": "# Contributing to GitMCP\n\nFirst of all, thank you for your interest in contributing to GitMCP! We appreciate the time and effort you're willing to invest in improving the project. This document provides guidelines and information to make the contribution process as smooth as possible.\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Local Development](#local-development)\n - [Prerequisites](#prerequisites)\n - [Setting Up Your Development Environment](#setting-up-your-development-environment)\n - [Running the Project Locally](#running-the-project-locally)\n - [Testing](#testing)\n - [Code Formatting](#code-formatting)\n - [Development Workflow](#development-workflow)\n - [Project Structure](#project-structure)\n- [How to Contribute](#how-to-contribute)\n - [Reporting Bugs](#reporting-bugs)\n - [Suggesting Enhancements](#suggesting-enhancements)\n - [Submitting Pull Requests](#submitting-pull-requests)\n- [Style Guidelines](#style-guidelines)\n - [Code Style](#code-style)\n - [Commit Messages](#commit-messages)\n- [Additional Resources](#additional-resources)\n\n## Getting Started\n\n1. Fork the repository and clone it to your local machine.\n2. Set up the development environment.\n3. Explore the codebase, run tests, and verify that everything works as expected.\n\n## Local Development\n\n### Prerequisites\n\nBefore you start working on GitMCP, make sure you have the following installed:\n\n- [Node.js](https://nodejs.org/) (version 18 or higher recommended)\n- [pnpm](https://pnpm.io/) (version 8.15.7 or higher)\n- Git\n\n### Setting Up Your Development Environment\n\n1. Clone your forked repository:\n ```bash\n git clone https://github.com/your-username/git-mcp.git\n cd git-mcp\n ```\n\n2. Install dependencies:\n ```bash\n pnpm install\n ```\n\n3. Set up environment variables:\n - Create a `.env.local` file in the root directory\n - Add any necessary environment variables (ask project maintainers if you need access to specific API keys)\n\n### Running the Project Locally\n\nTo start the development server:\n\n```bash\npnpm vercel dev\n```\n\nThis will start the Next.js development server, typically at http://localhost:3000.\n\nFor running with the MCP Inspector (useful for debugging MCP endpoints):\n\n```bash\npnpm run inspector\n```\n\n### Testing\n\nTo run tests:\n\n```bash\npnpm test\n```\n\nGitMCP uses Vitest as the testing framework. When adding new features, please include appropriate tests.\n\n### Code Formatting\n\nGitMCP uses Prettier for code formatting and lint-staged to ensure code is properly formatted before committing. Pre-commit hooks are set up with Husky to run these checks automatically.\n\nTo manually format your code:\n\n```bash\npnpm prettier --write .\n```\n\n### Development Workflow\n\n1. Create a new branch for your feature/bugfix\n2. Make your changes\n3. Add tests for your changes when applicable\n4. Run the tests to ensure they pass\n5. Commit your changes following the commit message guidelines\n6. Push your branch and open a pull request\n\n### Project Structure\n\n- `api/`: Contains the server-side code and MCP implementation\n - `tools/`: MCP tools implementation\n - `utils/`: Utility functions for the API\n- `app/`: Next.js app directory with React components\n- `pages/`: Additional Next.js pages\n- `public/`: Static assets\n- `shared/`: Shared utilities used across the codebase\n\n## How to Contribute\n\n### Reporting Bugs\n\nIf you encounter a bug or issue while using GitMCP, please open a new issue on the [GitHub Issues](https://github.com/idosal/git-mcp/issues) page. Provide a clear and concise description of the problem, steps to reproduce it, and any relevant error messages or logs.\n\n### Suggesting Enhancements\n\nWe welcome ideas for improvements and new features. To suggest an enhancement, open a new issue on the [GitHub Issues](https://github.com/idosal/git-mcp/issues) page. Describe the enhancement in detail, explain the use case, and outline the benefits it would bring to the project.\n\n### Submitting Pull Requests\n\n1. Create a new branch for your feature or bugfix. Use a descriptive name like `feature/your-feature-name` or `fix/your-bugfix-name`.\n2. Make your changes, following the [Style Guidelines](#style-guidelines) below.\n3. Test your changes and ensure that they don't introduce new issues or break existing functionality.\n4. Commit your changes, following the [commit message guidelines](#commit-messages).\n5. Push your branch to your fork on GitHub.\n6. Open a new pull request against the `main` branch of the Wolverine repository. Include a clear and concise description of your changes, referencing any related issues.\n\n## Style Guidelines\n\n### Code Style\n\nGitMCP uses [ESLint](https://eslint.org/) as its code style guide. Please ensure that your code follows these guidelines. \n\n### Commit Messages\n\nWrite clear and concise commit messages that briefly describe the changes made in each commit. Use the imperative mood and start with a capitalized verb, e.g., \"Add new feature\" or \"Fix bug in function\".\n\n## Additional Resources\n\n- [GitHub Help](https://help.github.com/)\n- [GitHub Pull Request Documentation](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests)\n- [ESLint Style Guide](https://eslint.org/)\n\nThank you once again for your interest in contributing to GitMCP. We look forward to collaborating with you and creating an even better project together!\n\n" }, { "path": ".github/workflows/e2e-tests.yml", "content": "name: E2E Tests\n\non:\n pull_request:\n paths:\n - 'src/**'\n - 'tests/e2e/**'\n - 'package.json'\n - 'pnpm-lock.yaml'\n - 'wrangler.jsonc'\n - '.github/workflows/e2e-tests.yml'\n\njobs:\n e2e_test:\n runs-on: ubuntu-latest\n timeout-minutes: 15 # Adjust timeout as needed\n permissions:\n contents: read\n pull-requests: write # Required to post the preview URL comment back to the PR\n\n steps:\n - name: Checkout repository\n uses: actions/checkout@v4\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: '20' # Match your project's Node.js version requirement\n\n - name: Setup PNPM\n uses: pnpm/action-setup@v4\n\n - name: Get pnpm store directory\n shell: bash\n run: |\n echo \"STORE_PATH=$(pnpm store path --silent)\" >> $GITHUB_ENV\n\n - name: Setup pnpm cache\n uses: actions/cache@v4\n with:\n path: ${{ env.STORE_PATH }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - name: Install dependencies\n run: pnpm install --frozen-lockfile\n\n - name: Install Playwright Browsers\n run: npx playwright install chromium --with-deps\n\n - name: Create .dev.vars with test environment\n run: echo \"ENVIRONMENT=test\" > .dev.vars\n\n - name: Run Playwright tests\n run: pnpm run test:e2e" }, { "path": ".github/workflows/run-tests.yml", "content": "name: Run Tests\n\non:\n push:\n branches: [ main ]\n pull_request:\n branches: [ main ]\n\njobs:\n test:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v4\n\n - name: Setup Node.js\n uses: actions/setup-node@v4\n with:\n node-version: '20'\n\n - name: Setup pnpm\n uses: pnpm/action-setup@v3\n with:\n version: '10.7.1'\n\n - name: Get pnpm store directory\n id: pnpm-cache\n run: |\n echo \"pnpm_cache_dir=$(pnpm store path)\" >> $GITHUB_OUTPUT\n\n - name: Setup pnpm cache\n uses: actions/cache@v4\n with:\n path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}\n key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}\n restore-keys: |\n ${{ runner.os }}-pnpm-store-\n\n - name: Install dependencies\n run: pnpm install\n\n - name: Run tests\n run: pnpm test\n" }, { "path": ".gitignore", "content": "node_modules\nbuild\n\n.nx\n.idea\n.vscode\n.zed\n# Logs\n\nlogs\n_.log\nnpm-debug.log_\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n.pnpm-debug.log*\n\n# Diagnostic reports (https://nodejs.org/api/report.html)\n\nreport.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json\n\n# Runtime data\n\npids\n_.pid\n_.seed\n\\*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\n\nlib-cov\n\n# Coverage directory used by tools like istanbul\n\ncoverage\n\\*.lcov\n\n# nyc test coverage\n\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n\n.grunt\n\n# Bower dependency directory (https://bower.io/)\n\nbower_components\n\n# node-waf configuration\n\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\n\nbuild/Release\n\n# Dependency directories\n\nnode_modules/\njspm_packages/\n\n# Snowpack dependency directory (https://snowpack.dev/)\n\nweb_modules/\n\n# TypeScript cache\n\n\\*.tsbuildinfo\n\n# Optional npm cache directory\n\n.npm\n\n# Optional eslint cache\n\n.eslintcache\n\n# Optional stylelint cache\n\n.stylelintcache\n\n# Microbundle cache\n\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n\n.node_repl_history\n\n# Output of 'npm pack'\n\n\\*.tgz\n\n# Yarn Integrity file\n\n.yarn-integrity\n\n# dotenv environment variable files\n\n.env\n.env.development.local\n.env.test.local\n.env.production.local\n.env.local\n\n# parcel-bundler cache (https://parceljs.org/)\n\n.cache\n.parcel-cache\n\n# Next.js build output\n\n.next\nout\n\n# Nuxt.js build / generate output\n\n.nuxt\ndist\n\n# Gatsby files\n\n.cache/\n\n# Comment in the public line in if your project uses Gatsby and not Next.js\n\n# https://nextjs.org/blog/next-9-1#public-directory-support\n\n# public\n\n# vuepress build output\n\n.vuepress/dist\n\n# vuepress v2.x temp and cache directory\n\n.temp\n.cache\n\n# Docusaurus cache and generated files\n\n.docusaurus\n\n# Serverless directories\n\n.serverless/\n\n# FuseBox cache\n\n.fusebox/\n\n# DynamoDB Local files\n\n.dynamodb/\n\n# TernJS port file\n\n.tern-port\n\n# Stores VSCode versions used for testing VSCode extensions\n\n.vscode-test\n\n# yarn v2\n\n.yarn/cache\n.yarn/unplugged\n.yarn/build-state.yml\n.yarn/install-state.gz\n.pnp.\\*\n\n# wrangler project\n\n.dev.vars\n.wrangler/\n\n# playwright\n\nplaywright-results/\nplaywright-report/\ntest-results/" }, { "path": ".husky/pre-commit", "content": "pnpm lint-staged\n" }, { "path": ".prettierrc", "content": "{\n \"semi\": true,\n \"trailingComma\": \"all\",\n \"singleQuote\": false,\n \"printWidth\": 80,\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"bracketSpacing\": true,\n \"arrowParens\": \"always\",\n \"endOfLine\": \"lf\"\n}\n" }, { "path": ".react-router/types/+register.ts", "content": "import \"react-router\";\n\ndeclare module \"react-router\" {\n interface Register {\n params: Params;\n }\n}\n\ntype Params = {\n \"/\": {};\n \"/api/chat\": {};\n \"/*\": {\n \"*\": string;\n };\n};" }, { "path": ".react-router/types/+virtual.d.ts", "content": "declare module \"virtual:react-router/server-build\" {\n import { ServerBuild } from \"react-router\";\n export const assets: ServerBuild[\"assets\"];\n export const assetsBuildDirectory: ServerBuild[\"assetsBuildDirectory\"];\n export const basename: ServerBuild[\"basename\"];\n export const entry: ServerBuild[\"entry\"];\n export const future: ServerBuild[\"future\"];\n export const isSpaMode: ServerBuild[\"isSpaMode\"];\n export const prerender: ServerBuild[\"prerender\"];\n export const publicPath: ServerBuild[\"publicPath\"];\n export const routes: ServerBuild[\"routes\"];\n export const ssr: ServerBuild[\"ssr\"];\n export const unstable_getCriticalCss: ServerBuild[\"unstable_getCriticalCss\"];\n}" }, { "path": ".react-router/types/app/+types/root.ts", "content": "// React Router generated types for route:\n// root.tsx\n\nimport type * as T from \"react-router/route-module\"\n\n\n\ntype Module = typeof import(\"../root.js\")\n\nexport type Info = {\n parents: [],\n id: \"root\"\n file: \"root.tsx\"\n path: \"\"\n params: {} & { [key: string]: string | undefined }\n module: Module\n loaderData: T.CreateLoaderData\n actionData: T.CreateActionData\n}\n\nexport namespace Route {\n export type LinkDescriptors = T.LinkDescriptors\n export type LinksFunction = () => LinkDescriptors\n\n export type MetaArgs = T.CreateMetaArgs\n export type MetaDescriptors = T.MetaDescriptors\n export type MetaFunction = (args: MetaArgs) => MetaDescriptors\n\n export type HeadersArgs = T.HeadersArgs\n export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit\n\n export type unstable_MiddlewareFunction = T.CreateServerMiddlewareFunction\n export type unstable_ClientMiddlewareFunction = T.CreateClientMiddlewareFunction\n export type LoaderArgs = T.CreateServerLoaderArgs\n export type ClientLoaderArgs = T.CreateClientLoaderArgs\n export type ActionArgs = T.CreateServerActionArgs\n export type ClientActionArgs = T.CreateClientActionArgs\n\n export type HydrateFallbackProps = T.CreateHydrateFallbackProps\n export type ComponentProps = T.CreateComponentProps\n export type ErrorBoundaryProps = T.CreateErrorBoundaryProps\n}" }, { "path": ".react-router/types/app/routes/+types/$.ts", "content": "// React Router generated types for route:\n// routes/$.tsx\n\nimport type * as T from \"react-router/route-module\"\n\nimport type { Info as Parent0 } from \"../../+types/root.js\"\n\ntype Module = typeof import(\"../$.js\")\n\nexport type Info = {\n parents: [Parent0],\n id: \"routes/$\"\n file: \"routes/$.tsx\"\n path: \"*\"\n params: {\"*\": string} & { [key: string]: string | undefined }\n module: Module\n loaderData: T.CreateLoaderData\n actionData: T.CreateActionData\n}\n\nexport namespace Route {\n export type LinkDescriptors = T.LinkDescriptors\n export type LinksFunction = () => LinkDescriptors\n\n export type MetaArgs = T.CreateMetaArgs\n export type MetaDescriptors = T.MetaDescriptors\n export type MetaFunction = (args: MetaArgs) => MetaDescriptors\n\n export type HeadersArgs = T.HeadersArgs\n export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit\n\n export type unstable_MiddlewareFunction = T.CreateServerMiddlewareFunction\n export type unstable_ClientMiddlewareFunction = T.CreateClientMiddlewareFunction\n export type LoaderArgs = T.CreateServerLoaderArgs\n export type ClientLoaderArgs = T.CreateClientLoaderArgs\n export type ActionArgs = T.CreateServerActionArgs\n export type ClientActionArgs = T.CreateClientActionArgs\n\n export type HydrateFallbackProps = T.CreateHydrateFallbackProps\n export type ComponentProps = T.CreateComponentProps\n export type ErrorBoundaryProps = T.CreateErrorBoundaryProps\n}" }, { "path": ".react-router/types/app/routes/+types/_index.ts", "content": "// React Router generated types for route:\n// routes/_index.tsx\n\nimport type * as T from \"react-router/route-module\"\n\nimport type { Info as Parent0 } from \"../../+types/root.js\"\n\ntype Module = typeof import(\"../_index.js\")\n\nexport type Info = {\n parents: [Parent0],\n id: \"routes/_index\"\n file: \"routes/_index.tsx\"\n path: \"undefined\"\n params: {} & { [key: string]: string | undefined }\n module: Module\n loaderData: T.CreateLoaderData\n actionData: T.CreateActionData\n}\n\nexport namespace Route {\n export type LinkDescriptors = T.LinkDescriptors\n export type LinksFunction = () => LinkDescriptors\n\n export type MetaArgs = T.CreateMetaArgs\n export type MetaDescriptors = T.MetaDescriptors\n export type MetaFunction = (args: MetaArgs) => MetaDescriptors\n\n export type HeadersArgs = T.HeadersArgs\n export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit\n\n export type unstable_MiddlewareFunction = T.CreateServerMiddlewareFunction\n export type unstable_ClientMiddlewareFunction = T.CreateClientMiddlewareFunction\n export type LoaderArgs = T.CreateServerLoaderArgs\n export type ClientLoaderArgs = T.CreateClientLoaderArgs\n export type ActionArgs = T.CreateServerActionArgs\n export type ClientActionArgs = T.CreateClientActionArgs\n\n export type HydrateFallbackProps = T.CreateHydrateFallbackProps\n export type ComponentProps = T.CreateComponentProps\n export type ErrorBoundaryProps = T.CreateErrorBoundaryProps\n}" }, { "path": ".react-router/types/app/routes/+types/api.chat.ts", "content": "// React Router generated types for route:\n// routes/api.chat.ts\n\nimport type * as T from \"react-router/route-module\"\n\nimport type { Info as Parent0 } from \"../../+types/root.js\"\n\ntype Module = typeof import(\"../api.chat.js\")\n\nexport type Info = {\n parents: [Parent0],\n id: \"routes/api.chat\"\n file: \"routes/api.chat.ts\"\n path: \"api/chat\"\n params: {} & { [key: string]: string | undefined }\n module: Module\n loaderData: T.CreateLoaderData\n actionData: T.CreateActionData\n}\n\nexport namespace Route {\n export type LinkDescriptors = T.LinkDescriptors\n export type LinksFunction = () => LinkDescriptors\n\n export type MetaArgs = T.CreateMetaArgs\n export type MetaDescriptors = T.MetaDescriptors\n export type MetaFunction = (args: MetaArgs) => MetaDescriptors\n\n export type HeadersArgs = T.HeadersArgs\n export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit\n\n export type unstable_MiddlewareFunction = T.CreateServerMiddlewareFunction\n export type unstable_ClientMiddlewareFunction = T.CreateClientMiddlewareFunction\n export type LoaderArgs = T.CreateServerLoaderArgs\n export type ClientLoaderArgs = T.CreateClientLoaderArgs\n export type ActionArgs = T.CreateServerActionArgs\n export type ClientActionArgs = T.CreateClientActionArgs\n\n export type HydrateFallbackProps = T.CreateHydrateFallbackProps\n export type ComponentProps = T.CreateComponentProps\n export type ErrorBoundaryProps = T.CreateErrorBoundaryProps\n}" }, { "path": "LICENSE", "content": " Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright 2025 GitMCP Authors (Ido Salomon and Liad Yosef)\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n" }, { "path": "README.md", "content": "# GitMCP\n\n

\n \"image\"\n

\n\n

\n What is GitMCP •\n Features •\n Getting Started •\n How It Works •\n Badge •\n Examples •\n FAQ •\n Privacy •\n Contributing •\n License\n

\n
\n\n[![GitMCP](https://img.shields.io/endpoint?url=https://gitmcp.io/badge/idosal/git-mcp)](https://gitmcp.io/idosal/git-mcp)\n[![Twitter Follow](https://img.shields.io/twitter/follow/idosal1?style=social)](https://twitter.com/idosal1)\n[![Twitter Follow](https://img.shields.io/twitter/follow/liadyosef?style=social)](https://twitter.com/liadyosef)\n
\n\n
\n \"Pulse\n
\n\n## 🤔 What is GitMCP?\n**Stop vibe-hallucinating and start vibe-coding!**\n\n[GitMCP](https://gitmcp.io) is a free, open-source, remote [Model Context Protocol (MCP)](https://docs.anthropic.com/en/docs/agents-and-tools/mcp) server that transforms **any** GitHub project (repositories or GitHub pages) into a documentation hub. It enables AI tools like Cursor to access up-to-date documentation and code, even if the LLM has never encountered them, thereby eliminating code hallucinations seamlessly.\n\nGitMCP supports **two flavors** -\n\n* **Specific Repository (`gitmcp.io/{owner}/{repo}` or `{owner}.gitmcp.io/{repo}`):** Use these when you primarily work with a select number of libraries. This ensures your AI assistant always targets the correct project, enhancing security and relevance by preventing access to unintended repositories.\n* **Generic Server (`gitmcp.io/docs`):** Use this for maximum flexibility when you need to switch between different repositories frequently. The AI assistant will prompt you (or decide based on context) which repository to access for each request. Be mindful that this relies on correctly identifying the target repository each time.\n\n**With GitMCP:**\n\n* AI assistants access the *latest* documentation and code directly from the source.\n* Get accurate API usage and reliable code examples.\n* Work effectively even with niche, new, or rapidly changing libraries.\n* Significantly reduced hallucinations and improved code correctness.\n\nFor example, this side-by-side comparison shows the result for the same one-shot prompt in Cursor when creating a [three.js](https://github.com/mrdoob/three.js) scene -\n\nhttps://github.com/user-attachments/assets/fbf1b4a7-f9f0-4c0e-831c-4d64faae2c45\n\n## ✨ Features\n\n- 😎 **Latest Documentation on ANY GitHub Project**: Grant your AI assistant seamless access to the GitHub project's documentation and code. The built-in smart search capabilities help find exactly what the AI needs without using too many tokens!\n- 🧠 **No More Hallucinations**: With GitMCP, your AI assistant can provide accurate and relevant answers to your questions.\n- ☁️ **Zero Setup**: GitMCP runs in the cloud. Simply add the chosen GitMCP URL as an MCP server in your IDE — no downloads, installations, signups, or changes are required.\n- 💬 **Embedded Chat**: Start quickly by chatting directly with the repository's documentation through our in-browser chat!\n- ✅ **Open, Free, and Private**: GitMCP is open-source and completely free to use. It doesn't collect personal information or store queries. You can even self-host it!\n\n\n\n## 🚀 Getting Started\n\nUsing GitMCP is easy! Simply follow these steps:\n\n### Step 1: Choose the type of server you want\n\nChoose one of these URL formats depending on what you want to connect to:\n\n- For GitHub repositories: `gitmcp.io/{owner}/{repo}`\n- For GitHub Pages sites: `{owner}.gitmcp.io/{repo}`\n- For a generic tool that supports any repository (dynamic): `gitmcp.io/docs`\n\nReplace `{owner}` with the GitHub username or organization name, and `{repo}` with the repository name.\n\nFor your convenience, you can also use the conversion tool on the landing page to format the GitHub URL into an MCP URL!\n\n### Step 2: Connect your AI assistant\n\nSelect your AI assistant from the options below and follow the configuration instructions:\n\n#### Connecting Cursor\n\nUpdate your Cursor configuration file at `~/.cursor/mcp.json`:\n ```json\n {\n \"mcpServers\": {\n \"gitmcp\": {\n \"url\": \"https://gitmcp.io/{owner}/{repo}\"\n }\n }\n }\n ```\n\n#### Connecting Claude Desktop\n\n1. In Claude Desktop, go to Settings > Developer > Edit Config\n2. Replace the configuration with:\n ```json\n {\n \"mcpServers\": {\n \"gitmcp\": {\n \"command\": \"npx\",\n \"args\": [\n \"mcp-remote\",\n \"https://gitmcp.io/{owner}/{repo}\"\n ]\n }\n }\n }\n ```\n\n#### Connecting Windsurf\n\nUpdate your Windsurf configuration file at `~/.codeium/windsurf/mcp_config.json`:\n ```json\n {\n \"mcpServers\": {\n \"gitmcp\": {\n \"serverUrl\": \"https://gitmcp.io/{owner}/{repo}\"\n }\n }\n }\n ```\n\n#### Connecting VSCode\n\nUpdate your VSCode configuration file at `.vscode/mcp.json`:\n ```json\n {\n \"servers\": {\n \"gitmcp\": {\n \"type\": \"sse\",\n \"url\": \"https://gitmcp.io/{owner}/{repo}\"\n }\n }\n }\n ```\n\n#### Connecting Cline\n\nUpdate your Cline configuration file at `~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json`:\n ```json\n {\n \"mcpServers\": {\n \"gitmcp\": {\n \"url\": \"https://gitmcp.io/{owner}/{repo}\",\n \"disabled\": false,\n \"autoApprove\": []\n }\n }\n }\n ```\n\n#### Connecting Highlight AI\n\n1. Open Highlight AI and click the plugins icon (@ symbol) in the sidebar\n2. Click **Installed Plugins** at the top of the sidebar\n3. Select **Custom Plugin**\n4. Click **Add a plugin using a custom SSE URL**\n\nPlugin name: `gitmcp`\nSSE URL: `https://gitmcp.io/{owner}/{repo}`\n\nFor more details on adding custom MCP servers to HighlightAI, refer to [the documentation](https://docs.highlightai.com/plugins/custom).\n\n#### Connecting Augment Code\n\n1. Open Augment Code settings\n2. Navigate to the MCP section\n3. Add a new MCP server with the following details:\n\nName the MCP server: `git-mcp Docs`\n\nUse this command:\n```bash\nnpx mcp-remote https://gitmcp.io/{owner}/{repo}\n```\n\nOr use the following configuration:\n```json\n{\n \"mcpServers\": {\n \"git-mcp Docs\": {\n \"command\": \"npx\",\n \"args\": [\n \"mcp-remote\",\n \"https://gitmcp.io/{owner}/{repo}\"\n ]\n }\n }\n}\n```\n\n#### Connecting Msty AI\n1. Open Msty Studio\n2. Go to Tools > Import Tools from JSON Clipboard\n3. Paste the following configuration:\n\n```json\n{\n \"mcpServers\": {\n \"git-mcp Docs\": {\n \"command\": \"npx\",\n \"args\": [\n \"mcp-remote\",\n \"https://gitmcp.io/{owner}/{repo}\"\n ]\n }\n }\n}\n```\n\nFor more details on configuring MCP servers in Augment Code, visit [the Augment Code documentation](https://docs.augmentcode.com/setup-augment/mcp).\n\n> **Note:** Remember to replace `{owner}` and `{repo}` with the actual GitHub username/organization and repository name. You can also use the dynamic endpoint `https://gitmcp.io/docs` to allow your AI to access any repository on demand.\n\n## ⚙ How It Works\n\nGitMCP connects your AI assistant to GitHub repositories using the Model Context Protocol (MCP), a standard that lets AI tools request additional information from external sources.\n\nWhat happens when you use GitMCP:\n\n1. **You provide the GitMCP URL** to your AI assistant (e.g., `gitmcp.io/microsoft/typescript`). GitMCP exposes tools like documentation fetching, smart search, code search, etc.\n2. **Prompt the AI assistant** on documentation/code-related questions.\n3. **Your AI sends requests** to GitMCP to use its tools (with your approval).\n4. **GitMCP executes the AI's request** and returns the requested data.\n5. **Your AI receives the information** and generates a more accurate, grounded response without hallucinations.\n\n### Supported Documentation\n\nGitMCP currently supports the following documents (in order of priority):\n1. [llms.txt](https://llmstxt.org)\n2. AI-optimized version of the project's documentation\n3. `README.md`/root\n\n## 💡 Examples\n\nHere are some examples of how to use GitMCP with different AI assistants and repositories:\n\n### Example 1: Using Windsurf with a specific repository\n\nFor the GitHub repository `https://github.com/microsoft/playwright-mcp`, add `https://gitmcp.io/microsoft/playwright-mcp` as an MCP server to Windsurf.\n\n**Prompt to Claude:**\n> \"How do I use the Playwright MCP\"\n\nWindsurf will pull the relevant documentation from GitMCP to implement the memory feature correctly.\n\n### Example 2: Using Cursor with a GitHub Pages site\n\nFor the GitHub Pages site `langchain-ai.github.io/langgraph`, add `https://langchain-ai.gitmcp.io/langgraph` as an MCP server to Cursor.\n\n**Prompt to Cursor:**\n> \"Add memory to my LangGraph agent\"\n\nCursor will pull the relevant documentation and code from GitMCP to correctly implement the memory feature.\n\n### Example 3: Using Claude Desktop with the dynamic endpoint\n\nYou don't have to pick specific repositories. The generic `gitmcp.io/docs` endpoint allows AI to pick the GitHub project on the fly!\n\n**Prompt to any AI assistant:**\n> \"I want to learn about the OpenAI Whisper speech recognition model. Explain how it works.\"\n\nClaude will pull the data from GitMCP and answer the question.\n\n## 🛠️ Tools\n\nGitMCP provides AI assistants with several valuable tools to help them access, understand, and query GitHub repositories.\n\n### `fetch__documentation`\n\nThis tool gets the primary documentation from a GitHub repository. It works by retrieving relevant documentation (e.g., `llms.txt`). This gives the AI a good overview of what the project is about\n\n**When it's useful:** For general questions about a project's purpose, features, or how to get started\n\n### `search__documentation`\n\nThis tool lets the AI search through a repository's documentation by providing a specific search query. Instead of loading all the documentation (which could be very large), it uses intelligent search to find just the relevant parts.\n\n**When it's useful:** For specific questions about particular features, functions, or concepts within a project\n\n### `fetch_url_content`\n\nThis tool helps the AI get information from links mentioned in the documentation. It retrieves the content from those links and converts it to a format the AI can easily read.\n\n**When it's useful:** When documentation references external information that would help answer your question\n\n### `search__code`\n\nThis tool searches through the actual code in the repository using GitHub's code search. It helps AI find specific code examples or implementation details.\n\n**When it's useful:** When you want examples of how something is implemented or need technical details not covered in documentation\n\n> **Note:** When using the dynamic endpoint (`gitmcp.io/docs`), these tools are named slightly differently (`fetch_generic_documentation`, `search_generic_code`, and `search_generic_documentation`) and need additional information about which repository to access.\n\n## 📊 Badge\n\nGitMCP has a badge for your repository's README. It allows users to quickly access your documentation through their IDE or browser (using the embedded chat). It also showcases how many times your documentation has been accessed through GitMCP.\n\nExample (`idosal/git-mcp`): [![GitMCP](https://img.shields.io/endpoint?url=https://gitmcp.io/badge/idosal/git-mcp)](https://gitmcp.io/idosal/git-mcp)\n\n### Adding the Badge to Your Repository\n\nAdd the following to your `README.md`:\n\n```markdown\n[![GitMCP](https://img.shields.io/endpoint?url=https://gitmcp.io/badge/OWNER/REPO)](https://gitmcp.io/OWNER/REPO)\n```\n\nReplace `OWNER` with your GitHub username or organization, and `REPO` with your repository name.\n\n### How We Count Views\n\nIncrement for each tool call on the specific repository.\n\n### Customizing the Badge\n\nYou can customize the badge's appearance with parameters:\n\n| Parameter | Description | Default | Example |\n|-----------|-------------|---------|---------|\n| `color` | Color for the badge value | `aquamarine` | `?color=green` |\n| `label` | Badge label | `GitMCP` | `Documentation`\n\nPlease reach out if you need help!\n\n## ❓ FAQ\n\n### What is the Model Context Protocol?\n\nThe [Model Context Protocol](https://modelcontextprotocol.io/introduction) is a standard that allows AI assistants to request and receive additional context from external sources in a structured manner, enhancing their understanding and performance.\n\n### Does GitMCP work with any AI assistant?\n\nYes, GitMCP is compatible with any AI assistant supporting the Model Context Protocol, including tools like Cursor, VSCode, Claude, etc.\n\n### Is GitMCP compatible with all GitHub projects?\n\nAbsolutely! GitMCP works with any public GitHub repository without requiring any modifications. It prioritizes the `llms.txt` file and falls back to `README.md` or other pages if the former is unavailable. Future updates aim to support additional documentation methods and even generate content dynamically.\n\n### Does GitMCP cost money?\n\nNo, GitMCP is a free service to the community with no associated costs.\n\n## 🔒 Privacy\n\nGitMCP is deeply committed to its users' privacy. The service doesn't have access to or store any personally identifiable information as it doesn't require authentication. In addition, it doesn't store any queries sent by the agents. Moreover, as GitMCP is an open-source project, it can be deployed independently in your environment.\n\nGitMCP only accesses content that is already publicly available and only when queried by a user. GitMCP does not automatically scrape repositories. Before accessing any GitHub Pages site, the code checks for `robots.txt` rules and follows the directives set by site owners, allowing them to opt out. Please note that GitMCP doesn't permanently store data regarding the GitHub projects or their content.\n\n## 👥 Contributing\n\nWe welcome contributions, feedback, and ideas! Please review our [contribution](https://github.com/idosal/git-mcp/blob/main/.github/CONTRIBUTING.md) guidelines.\n\n### Local Development Setup\n\n1. **Clone the repository**\n ```bash\n git clone https://github.com/idosal/git-mcp.git\n cd git-mcp\n ```\n\n2. **Install dependencies**\n ```bash\n pnpm install\n ```\n\n3. **Run locally for development**\n ```bash\n npm run dev\n # or\n pnpm dev\n ```\n\n#### Using MCP Inspector for Testing\n\n1. Install the MCP Inspector tool:\n ```bash\n npx @modelcontextprotocol/inspector\n ```\n\n2. In the inspector interface:\n - Set Transport Type to `SSE`\n - Enter your GitMCP URL (e.g., `http://localhost:5173/docs`)\n - Click \"Connect\"\n\n## 📄 License\n\nThis project is licensed under the [Apache License 2.0](LICENSE).\n\n## Disclaimer\n\nGitMCP is provided \"as is\" without warranty of any kind. While we strive to ensure the reliability and security of our service, we are not responsible for any damages or issues that may arise from its use. GitHub projects accessed through GitMCP are subject to their respective owners' terms and conditions. GitMCP is not affiliated with GitHub or any of the mentioned AI tools.\n\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=idosal/git-mcp&type=Timeline)](https://www.star-history.com/#idosal/git-mcp&Timeline)\n" }, { "path": "SECURITY.md", "content": "# Security Policy\n\nGitMCP is committed to maintaining the security and privacy of its users. We welcome vulnerability disclosures, suggestions, and feedback that can improve it.\n\n## Reporting a Vulnerability\n\nPlease report vulnerabilities using this private [form](https://forms.gle/mMoVv69XFyPqDUTX8). All vulnerabilities will be patched as soon as possible.\n" }, { "path": "app/app.css", "content": "@import \"tailwindcss\";\n\n@theme {\n --font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n\nhtml,\nbody {\n @apply bg-white dark:bg-gray-950;\n\n @media (prefers-color-scheme: dark) {\n color-scheme: dark;\n }\n}\n" }, { "path": "app/chat/ai/providers.server.ts", "content": "import { createOpenAI } from \"@ai-sdk/openai\";\nimport { createGroq } from \"@ai-sdk/groq\";\nimport { createAnthropic } from \"@ai-sdk/anthropic\";\nimport { createXai } from \"@ai-sdk/xai\";\n\nimport {\n customProvider,\n wrapLanguageModel,\n extractReasoningMiddleware,\n type LanguageModel,\n} from \"ai\";\nimport type { modelID, StorageKey } from \"./providers.shared\";\n\nconst middleware = extractReasoningMiddleware({\n tagName: \"think\",\n});\n\nexport const getModel = (\n env: CloudflareEnvironment,\n apiKeys: Partial>,\n) => {\n // Helper to get API keys from environment variables first, then localStorage\n const getApiKey = (key: StorageKey): string | undefined => {\n // Check for environment variables first\n if (env[key]) {\n return env[key] || undefined;\n }\n\n // Check for API keys in localStorage\n if (apiKeys[key]) {\n return apiKeys[key] || undefined;\n }\n\n return undefined;\n };\n\n // Create provider instances with API keys from env/user/localStorage\n const openaiClient = createOpenAI({\n apiKey: getApiKey(\"OPENAI_API_KEY\"),\n });\n\n const anthropicClient = createAnthropic({\n apiKey: getApiKey(\"ANTHROPIC_API_KEY\"),\n });\n\n const groqClient = createGroq({\n apiKey: getApiKey(\"GROQ_API_KEY\"),\n });\n\n const xaiClient = createXai({\n apiKey: getApiKey(\"XAI_API_KEY\"),\n });\n\n const languageModels: Record = {\n \"gpt-4.1-mini\": openaiClient(\"gpt-4.1-mini\"),\n \"claude-3-7-sonnet\": anthropicClient(\"claude-3-7-sonnet-20250219\"),\n \"qwen-qwq\": wrapLanguageModel({\n model: groqClient(\"qwen-qwq-32b\"),\n middleware,\n }),\n \"grok-3-mini\": xaiClient(\"grok-3-mini-latest\"),\n };\n\n const model = customProvider({\n languageModels,\n });\n\n return model;\n};\n" }, { "path": "app/chat/ai/providers.shared.ts", "content": "export interface ModelInfo {\n provider: string;\n name: string;\n description: string;\n apiVersion: string;\n capabilities: string[];\n}\n\nexport type StorageKey =\n | \"OPENAI_API_KEY\"\n | \"ANTHROPIC_API_KEY\"\n | \"GROQ_API_KEY\"\n | \"XAI_API_KEY\";\n\nexport type modelID =\n | \"gpt-4.1-mini\"\n | \"claude-3-7-sonnet\"\n | \"qwen-qwq\"\n | \"grok-3-mini\";\n\nexport const modelDetails: Record = {\n \"gpt-4.1-mini\": {\n provider: \"OpenAI\",\n name: \"GPT-4.1 Mini\",\n description:\n \"Compact version of OpenAI's GPT-4.1 with good balance of capabilities, including vision.\",\n apiVersion: \"gpt-4.1-mini\",\n capabilities: [\"Balance\", \"Creative\", \"Vision\"],\n },\n \"claude-3-7-sonnet\": {\n provider: \"Anthropic\",\n name: \"Claude 3.7 Sonnet\",\n description:\n \"Latest version of Anthropic's Claude 3.7 Sonnet with strong reasoning and coding capabilities.\",\n apiVersion: \"claude-3-7-sonnet-20250219\",\n capabilities: [\"Reasoning\", \"Efficient\", \"Agentic\"],\n },\n \"qwen-qwq\": {\n provider: \"Groq\",\n name: \"Qwen QWQ\",\n description:\n \"Latest version of Alibaba's Qwen QWQ with strong reasoning and coding capabilities.\",\n apiVersion: \"qwen-qwq\",\n capabilities: [\"Reasoning\", \"Efficient\", \"Agentic\"],\n },\n \"grok-3-mini\": {\n provider: \"XAI\",\n name: \"Grok 3 Mini\",\n description:\n \"Latest version of XAI's Grok 3 Mini with strong reasoning and coding capabilities.\",\n apiVersion: \"grok-3-mini-latest\",\n capabilities: [\"Reasoning\", \"Efficient\", \"Agentic\"],\n },\n};\n\nexport const MODELS = Object.keys(modelDetails);\n\nexport const defaultModel: modelID = \"qwen-qwq\";\n" }, { "path": "app/chat/components/api-key-manager.tsx", "content": "import { useState, useCallback } from \"react\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"~/chat/components/ui/dialog\";\nimport { Button } from \"~/chat/components/ui/button\";\nimport { Input } from \"~/chat/components/ui/input\";\nimport { Label } from \"~/chat/components/ui/label\";\nimport { toast } from \"sonner\";\nimport { STORAGE_KEYS } from \"~/chat/lib/constants\";\nimport type { StorageKey } from \"../ai/providers.shared\";\nimport { useApiKeys } from \"./api-keys-provider\";\n\n// API key configuration\nexport interface ApiKeyConfig {\n name: string;\n key: string;\n storageKey: StorageKey;\n label: string;\n placeholder: string;\n}\n\n// Available API keys configuration\nexport const API_KEYS_CONFIG: readonly ApiKeyConfig[] = [\n {\n name: \"OpenAI\",\n key: \"openai\",\n storageKey: \"OPENAI_API_KEY\",\n label: \"OpenAI API Key\",\n placeholder: \"sk-...\",\n },\n {\n name: \"Anthropic\",\n key: \"anthropic\",\n storageKey: \"ANTHROPIC_API_KEY\",\n label: \"Anthropic API Key\",\n placeholder: \"sk-ant-...\",\n },\n {\n name: \"Groq\",\n key: \"groq\",\n storageKey: \"GROQ_API_KEY\",\n label: \"Groq API Key\",\n placeholder: \"gsk_...\",\n },\n {\n name: \"XAI\",\n key: \"xai\",\n storageKey: \"XAI_API_KEY\",\n label: \"XAI API Key\",\n placeholder: \"xai-...\",\n },\n] as const;\n\ninterface ApiKeyManagerProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n}\n\nexport function ApiKeyManager({ open, onOpenChange }: ApiKeyManagerProps) {\n // State to store API keys\n const { apiKeys, setApiKeys } = useApiKeys();\n const [localApiKeys, setLocalApiKeys] =\n useState>>(apiKeys);\n\n // Update API key in state\n const handleApiKeyChange = useCallback(\n (storageKey: StorageKey, value: string) => {\n setLocalApiKeys((prev) => ({\n ...prev,\n [storageKey]: value,\n }));\n },\n [],\n );\n\n // Save API keys to localStorage\n const handleSaveApiKeys = useCallback(() => {\n try {\n setApiKeys(localApiKeys);\n localStorage.setItem(STORAGE_KEYS.API_KEYS, JSON.stringify(localApiKeys));\n\n toast.success(\"API keys saved successfully\");\n onOpenChange(false);\n } catch (error) {\n console.error(\"Error saving API keys:\", error);\n toast.error(\"Failed to save API keys\");\n }\n }, [localApiKeys, setApiKeys, onOpenChange]);\n\n // Clear all API keys\n const handleClearApiKeys = useCallback(() => {\n try {\n setLocalApiKeys({});\n setApiKeys({});\n toast.success(\"All API keys cleared\");\n } catch (error) {\n console.error(\"Error clearing API keys:\", error);\n toast.error(\"Failed to clear API keys\");\n }\n }, [setApiKeys, localApiKeys]);\n\n return (\n \n \n \n API Key Settings\n \n Enter your own API keys for different AI providers. Keys are stored\n securely in your browser's local storage.\n \n \n\n
\n {API_KEYS_CONFIG.map((config) => (\n
\n \n \n handleApiKeyChange(config.storageKey, e.target.value)\n }\n placeholder={config.placeholder}\n />\n
\n ))}\n
\n\n \n \n
\n \n \n
\n \n \n \n );\n}\n" }, { "path": "app/chat/components/api-keys-provider.tsx", "content": "import { createContext, useContext } from \"react\";\nimport type { StorageKey } from \"../ai/providers.shared\";\nimport { STORAGE_KEYS } from \"../lib/constants\";\nimport { useLocalStorage } from \"../lib/hooks/use-local-storage\";\n\nconst ApiKeysContext = createContext<{\n apiKeys: Partial>;\n setApiKeys: (apiKeys: Partial>) => void;\n}>({\n apiKeys: {},\n setApiKeys: () => {},\n});\n\nexport function ApiKeysProvider({ children }: { children: React.ReactNode }) {\n const [apiKeys, setApiKeys] = useLocalStorage<\n Partial>\n >(STORAGE_KEYS.API_KEYS, {});\n\n return (\n \n {children}\n \n );\n}\n\nexport function useApiKeys() {\n return useContext(ApiKeysContext);\n}\n" }, { "path": "app/chat/components/chat-sidebar.tsx", "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n ServerIcon,\n Settings,\n Sparkles,\n ChevronsUpDown,\n Github,\n Key,\n} from \"lucide-react\";\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuBadge,\n useSidebar,\n} from \"~/chat/components/ui/sidebar\";\nimport { Badge } from \"~/chat/components/ui/badge\";\nimport { MCPServerManager } from \"./mcp-server-manager\";\nimport { ApiKeyManager } from \"./api-key-manager\";\nimport { ThemeToggle } from \"./theme-toggle\";\nimport { cn } from \"~/chat/lib/utils\";\n\nimport { useMCP } from \"~/chat/lib/context/mcp-context\";\n\nexport function ChatSidebar() {\n const [mcpSettingsOpen, setMcpSettingsOpen] = useState(false);\n const [apiKeySettingsOpen, setApiKeySettingsOpen] = useState(false);\n const { state } = useSidebar();\n const isCollapsed = state === \"collapsed\";\n\n // Get MCP server data from context\n const {\n mcpServers,\n setMcpServers,\n selectedMcpServers,\n setSelectedMcpServers,\n } = useMCP();\n\n // Get active MCP servers status\n const activeServersCount = selectedMcpServers.length;\n\n return (\n \n \n
\n \n \n \n
\n {!isCollapsed && (\n
\n GitMCP Chat\n
\n )}\n \n \n \n\n \n \n \n \n \n setMcpSettingsOpen(true)}\n className={cn(\n \"w-full flex items-center gap-2 transition-all\",\n \"hover:bg-secondary/50 active:bg-secondary/70 cursor-pointer\",\n )}\n tooltip={isCollapsed ? \"GitMCP Servers\" : undefined}\n >\n 0\n ? \"text-primary\"\n : \"text-muted-foreground\",\n )}\n />\n {!isCollapsed && (\n \n GitMCP Servers\n \n )}\n {activeServersCount > 0 && !isCollapsed ? (\n \n {activeServersCount}\n \n ) : activeServersCount > 0 && isCollapsed ? (\n \n {activeServersCount}\n \n ) : null}\n \n \n
\n \n setApiKeySettingsOpen(true)}\n className=\"w-full flex items-center gap-2 transition-all hover:bg-secondary/50 active:bg-secondary/70 cursor-pointer\"\n >\n \n \n API Keys\n \n \n \n \n \n window.open(\"https://git.new/gitmcp\", \"_blank\")\n }\n className=\"w-full flex items-center gap-2 transition-all hover:bg-secondary/50 active:bg-secondary/70 cursor-pointer\"\n >\n \n \n GitHub\n \n \n \n \n \n
\n \n Theme\n
\n \n \n \n \n \n \n \n \n
\n {!isCollapsed && (\n

\n Built with{\" \"}\n \n Scira Chat\n \n

\n )}\n
\n \n\n \n \n \n );\n}\n" }, { "path": "app/chat/components/chat.tsx", "content": "\"use client\";\n\nimport { defaultModel, type modelID } from \"~/chat/ai/providers.shared\";\nimport { useChat } from \"@ai-sdk/react\";\nimport { Textarea } from \"./textarea\";\nimport { ProjectOverview } from \"./project-overview\";\nimport { Messages } from \"./messages\";\nimport { toast } from \"sonner\";\nimport { useLocalStorage } from \"~/chat/lib/hooks/use-local-storage\";\nimport { useMCP } from \"~/chat/lib/context/mcp-context\";\nimport { useCallback } from \"react\";\nimport { useApiKeys } from \"./api-keys-provider\";\n\nconst CHAT_API_URL = \"https://chat-api-worker.idosalomon.workers.dev/api/chat\";\n\nexport default function Chat() {\n const [selectedModel, setSelectedModel] = useLocalStorage(\n \"selectedModel\",\n defaultModel,\n );\n\n const { apiKeys } = useApiKeys();\n\n // Get MCP server data from context\n const { mcpServersForApi } = useMCP();\n\n const { messages, input, handleInputChange, handleSubmit, status, stop } =\n useChat({\n api: CHAT_API_URL,\n maxSteps: 20,\n body: {\n selectedModel,\n mcpServers: mcpServersForApi,\n apiKeys,\n },\n experimental_throttle: 500,\n onError: (error) => {\n toast.error(\n error.message.length > 0\n ? error.message\n : \"An error occurred, please try again later.\",\n { position: \"top-center\", richColors: true },\n );\n },\n });\n\n // Custom submit handler\n const handleFormSubmit = useCallback(\n (e: React.FormEvent) => {\n e.preventDefault();\n handleSubmit(e);\n },\n [input, handleSubmit],\n );\n\n const isLoading = status === \"streaming\" || status === \"submitted\";\n\n return (\n
\n {messages.length === 0 ? (\n
\n \n
\n \n \n
\n ) : (\n <>\n
\n \n
\n \n \n \n \n )}\n
\n );\n}\n" }, { "path": "app/chat/components/copy-button.tsx", "content": "import { CheckIcon, CopyIcon } from \"lucide-react\";\nimport { cn } from \"~/chat/lib/utils\";\nimport { useCopy } from \"~/chat/lib/hooks/use-copy\";\nimport { Button } from \"./ui/button\";\n\ninterface CopyButtonProps {\n text: string;\n className?: string;\n}\n\nexport function CopyButton({ text, className }: CopyButtonProps) {\n const { copied, copy } = useCopy();\n\n return (\n copy(text)}\n title=\"Copy to clipboard\"\n >\n {copied ? (\n <>\n \n Copied!\n \n ) : (\n <>\n \n Copy\n \n )}\n \n );\n}\n" }, { "path": "app/chat/components/icons.tsx", "content": "import type { SVGProps } from \"react\";\n\nexport const VercelIcon = ({ size = 17 }) => {\n return (\n \n Vercel Icon\n \n \n );\n};\n\nexport const SpinnerIcon = ({ size = 16 }: { size?: number }) => (\n \n Spinner Icon\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport const Github = (props: SVGProps) => (\n \n GitHub Icon\n \n \n);\n\nexport const XAiIcon = ({ size = 16 }) => {\n return (\n \n xAI Icon\n \n \n );\n};\n" }, { "path": "app/chat/components/input.tsx", "content": "import { ArrowUp } from \"lucide-react\";\nimport { Input as ShadcnInput } from \"./ui/input\";\n\ninterface InputProps {\n input: string;\n handleInputChange: (event: React.ChangeEvent) => void;\n isLoading: boolean;\n status: string;\n stop: () => void;\n}\n\nexport const Input = ({\n input,\n handleInputChange,\n isLoading,\n status,\n stop,\n}: InputProps) => {\n return (\n
\n \n {status === \"streaming\" || status === \"submitted\" ? (\n \n
\n \n \n \n \n
\n \n ) : (\n \n \n \n )}\n
\n );\n};\n" }, { "path": "app/chat/components/markdown.tsx", "content": "/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { memo } from \"react\";\nimport ReactMarkdown, { type Components } from \"react-markdown\";\nimport remarkGfm from \"remark-gfm\";\nimport { cn } from \"~/chat/lib/utils\";\n\nconst components: Partial = {\n pre: ({ children, ...props }) => (\n \n {children}\n \n ),\n code: ({\n children,\n className,\n ...props\n }: React.HTMLProps & { className?: string }) => {\n const match = /language-(\\w+)/.exec(className || \"\");\n const isInline = !match && !className;\n\n if (isInline) {\n return (\n \n {children}\n \n );\n }\n return (\n \n {children}\n \n );\n },\n ol: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n ul: ({ node, children, ...props }) => (\n
    \n {children}\n
\n ),\n li: ({ node, children, ...props }) => (\n
  • \n {children}\n
    • \n ),\n p: ({ node, children, ...props }) => (\n

    \n {children}\n

    \n ),\n strong: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n em: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n blockquote: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n a: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n h1: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n h2: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n h3: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n h4: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n h5: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n h6: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n table: ({ node, children, ...props }) => (\n
    \n \n {children}\n \n
    \n ),\n thead: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n tbody: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n tr: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n th: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n td: ({ node, children, ...props }) => (\n \n {children}\n \n ),\n hr: ({ node, ...props }) => (\n \n ),\n};\n\nconst remarkPlugins = [remarkGfm];\n\nconst NonMemoizedMarkdown = ({ children }: { children: string }) => {\n return (\n \n {children}\n \n );\n};\n\nexport const Markdown = memo(\n NonMemoizedMarkdown,\n (prevProps, nextProps) => prevProps.children === nextProps.children,\n);\n" }, { "path": "app/chat/components/mcp-server-manager.tsx", "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"./ui/dialog\";\nimport { Button } from \"./ui/button\";\nimport { Input } from \"./ui/input\";\nimport { Label } from \"./ui/label\";\nimport {\n PlusCircle,\n ServerIcon,\n Globe,\n ExternalLink,\n Trash2,\n CheckCircle,\n Edit2,\n} from \"lucide-react\";\nimport { toast } from \"sonner\";\nimport type { MCPServer } from \"~/chat/lib/context/mcp-context\";\nimport { getRepoData } from \"~/chat/lib/utils\";\n\n// Default template for a new MCP server\nconst INITIAL_NEW_SERVER: Omit = {\n name: \"\",\n url: \"\",\n type: \"sse\",\n command: \"node\",\n args: [],\n env: [],\n headers: [],\n};\n\ninterface MCPServerManagerProps {\n servers: MCPServer[];\n onServersChange: (servers: MCPServer[]) => void;\n selectedServers: string[];\n onSelectedServersChange: (serverIds: string[]) => void;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n}\n\nexport const MCPServerManager = ({\n servers,\n onServersChange,\n selectedServers,\n onSelectedServersChange,\n open,\n onOpenChange,\n}: MCPServerManagerProps) => {\n const [newServer, setNewServer] =\n useState>(INITIAL_NEW_SERVER);\n const [view, setView] = useState<\"list\" | \"add\">(\"list\");\n const [editingServerId, setEditingServerId] = useState(null);\n\n const resetAndClose = () => {\n setView(\"list\");\n setNewServer(INITIAL_NEW_SERVER);\n onOpenChange(false);\n };\n\n const generateServerFromUrl = (url: string): MCPServer | null => {\n if (!url) {\n toast.error(\"Server URL is required\");\n return null;\n }\n\n const { owner, repo } = getRepoData(url);\n\n if (!owner || (owner != \"docs\" && !repo)) {\n toast.error(\"Invalid server URL\");\n return null;\n }\n\n const newUrl = [\"https://gitmcp.io\", owner, repo].filter(Boolean).join(\"/\");\n\n const name = repo ? `${repo} Docs` : \"MCP Docs\";\n\n const id = crypto.randomUUID();\n\n return { id, name, url: newUrl, type: \"sse\" } as const;\n };\n\n const addServer = () => {\n const newServerToAdd = generateServerFromUrl(newServer.url);\n if (!newServerToAdd) {\n return;\n }\n const updatedServers = [...servers, newServerToAdd];\n onServersChange(updatedServers);\n\n toast.success(`Added MCP server: ${newServerToAdd.name}`);\n setView(\"list\");\n setNewServer(INITIAL_NEW_SERVER);\n };\n\n const removeServer = (id: string, e: React.MouseEvent) => {\n e.stopPropagation();\n const updatedServers = servers.filter((server) => server.id !== id);\n onServersChange(updatedServers);\n\n // If the removed server was selected, remove it from selected servers\n if (selectedServers.includes(id)) {\n onSelectedServersChange(\n selectedServers.filter((serverId) => serverId !== id),\n );\n }\n\n toast.success(\"Server removed\");\n };\n\n const toggleServer = (id: string) => {\n if (selectedServers.includes(id)) {\n // Remove from selected servers\n onSelectedServersChange(\n selectedServers.filter((serverId) => serverId !== id),\n );\n const server = servers.find((s) => s.id === id);\n if (server) {\n toast.success(`Disabled MCP server: ${server.name}`);\n }\n } else {\n // Add to selected servers\n onSelectedServersChange([...selectedServers, id]);\n const server = servers.find((s) => s.id === id);\n if (server) {\n toast.success(`Enabled MCP server: ${server.name}`);\n }\n }\n };\n\n const clearAllServers = () => {\n if (selectedServers.length > 0) {\n onSelectedServersChange([]);\n toast.success(\"All MCP servers disabled\");\n resetAndClose();\n }\n };\n\n // Editing support\n const startEditing = (server: MCPServer) => {\n setEditingServerId(server.id);\n setNewServer({\n name: server.name,\n url: server.url,\n type: server.type,\n command: server.command,\n args: server.args,\n env: server.env,\n headers: server.headers,\n });\n setView(\"add\");\n };\n\n const handleFormCancel = () => {\n if (view === \"add\") {\n setView(\"list\");\n setEditingServerId(null);\n setNewServer(INITIAL_NEW_SERVER);\n } else {\n resetAndClose();\n }\n };\n\n const updateServer = () => {\n const newServerToUpdate = generateServerFromUrl(newServer.url);\n if (!newServerToUpdate) {\n return;\n }\n const updated = servers.map((s) =>\n s.id === editingServerId\n ? { ...newServerToUpdate, id: editingServerId! }\n : s,\n );\n onServersChange(updated);\n toast.success(`Updated MCP server: ${newServerToUpdate.name}`);\n setView(\"list\");\n setEditingServerId(null);\n setNewServer(INITIAL_NEW_SERVER);\n };\n\n return (\n \n \n \n \n \n {view == \"list\"\n ? \"MCP Server Configuration\"\n : editingServerId\n ? \"Edit GitMCP Server\"\n : \"Add New GitMCP Server\"}\n \n \n {selectedServers.length > 0 && (\n \n {selectedServers.length} server\n {selectedServers.length !== 1 ? \"s\" : \"\"} currently active\n \n )}\n \n \n\n {view === \"list\" ? (\n
    \n {servers.length > 0 ? (\n
    \n
    \n
    \n

    Available Servers

    \n \n Select multiple servers to combine their tools\n \n
    \n
    \n {servers\n .sort((a, b) => {\n const aActive = selectedServers.includes(a.id);\n const bActive = selectedServers.includes(b.id);\n if (aActive && !bActive) return -1;\n if (!aActive && bActive) return 1;\n return 0;\n })\n .map((server) => {\n const isActive = selectedServers.includes(server.id);\n return (\n \n );\n })}\n
    \n
    \n
    \n ) : (\n
    \n
    \n \n
    \n
    \n

    \n No MCP Servers Added\n

    \n

    \n Add your first MCP server to access additional AI tools\n

    \n
    \n
    \n \n Learn about MCP\n \n \n
    \n
    \n )}\n
    \n ) : (\n
    \n
    \n
    \n \n \n setNewServer({ ...newServer, url: e.target.value })\n }\n placeholder=\"https://gitmcp.io/microsoft/playwright-mcp\"\n className=\"relative z-0 placeholder:text-muted-foreground/60\"\n />\n

    \n A gitmcp.io server, a github.com repository, or a github.io\n pages site\n

    \n
    \n
    \n
    \n )}\n\n {/* Persistent fixed footer with buttons */}\n
    \n {view === \"list\" ? (\n <>\n \n setView(\"add\")}\n size=\"sm\"\n className=\"gap-1.5\"\n >\n \n Add Server\n \n \n ) : (\n <>\n \n \n {editingServerId ? \"Save Changes\" : \"Add Server\"}\n \n \n )}\n
    \n     \n     \n );\n};\n\nfunction McpServerListItem({\n server,\n isActive,\n removeServer,\n startEditing,\n toggleServer,\n}: {\n server: MCPServer;\n isActive: boolean;\n removeServer: (id: string, e: React.MouseEvent) => void;\n startEditing: (server: MCPServer) => void;\n toggleServer: (id: string) => void;\n}) {\n return (\n \n {/* Server Header with Type Badge and Delete Button */}\n
    \n
    \n \n\n

    \n {server.name}\n

    \n
    \n
    \n \n {server.type.toUpperCase()}\n \n {!server.isFixed && (\n <>\n removeServer(server.id, e)}\n className=\"p-1 rounded-full hover:bg-muted/70\"\n aria-label=\"Remove server\"\n >\n \n \n startEditing(server)}\n className=\"p-1 rounded-full hover:bg-muted/50\"\n aria-label=\"Edit server\"\n >\n \n \n \n )}\n
    \n
    \n\n {/* Server Details */}\n

    \n {server.type === \"sse\"\n ? server.url\n : `${server.command} ${server.args?.join(\" \")}`}\n

    \n\n {/* Action Button */}\n {!server.isFixed && (\n toggleServer(server.id)}\n >\n {isActive && }\n {isActive ? \"Active\" : \"Enable Server\"}\n \n )}\n
    \n );\n}\n" }, { "path": "app/chat/components/message.tsx", "content": "\"use client\";\n\nimport type { Message as TMessage } from \"ai\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { memo, useCallback, useEffect, useState } from \"react\";\nimport equal from \"fast-deep-equal\";\nimport { Markdown } from \"./markdown\";\nimport { cn } from \"~/chat/lib/utils\";\nimport {\n ChevronDownIcon,\n ChevronUpIcon,\n LightbulbIcon,\n BrainIcon,\n} from \"lucide-react\";\nimport { SpinnerIcon } from \"./icons\";\nimport { ToolInvocation } from \"./tool-invocation\";\nimport { CopyButton } from \"./copy-button\";\n\ninterface ReasoningPart {\n type: \"reasoning\";\n reasoning: string;\n details: Array<{ type: \"text\"; text: string }>;\n}\n\ninterface ReasoningMessagePartProps {\n part: ReasoningPart;\n isReasoning: boolean;\n}\n\nexport function ReasoningMessagePart({\n part,\n isReasoning,\n}: ReasoningMessagePartProps) {\n const [isExpanded, setIsExpanded] = useState(false);\n\n const memoizedSetIsExpanded = useCallback((value: boolean) => {\n setIsExpanded(value);\n }, []);\n\n useEffect(() => {\n memoizedSetIsExpanded(isReasoning);\n }, [isReasoning, memoizedSetIsExpanded]);\n\n return (\n
    \n {isReasoning ? (\n \n
    \n \n
    \n
    Thinking...
    \n
    \n ) : (\n setIsExpanded(!isExpanded)}\n className={cn(\n \"flex items-center justify-between w-full\",\n \"rounded-md py-2 px-3 mb-0.5\",\n \"bg-muted/50 border border-border/60 hover:border-border/80\",\n \"transition-all duration-150 cursor-pointer\",\n isExpanded ? \"bg-muted border-primary/20\" : \"\",\n )}\n >\n
    \n \n \n
    \n
    \n Reasoning\n \n (click to {isExpanded ? \"hide\" : \"view\"})\n \n
    \n \n \n {isExpanded ? (\n \n ) : (\n \n )}\n \n \n )}\n\n \n {isExpanded && (\n \n
    \n The assistant's thought process:\n
    \n {part.details.map((detail, detailIndex) =>\n detail.type === \"text\" ? (\n \n {detail.text}\n \n ) : (\n \"\"\n ),\n )}\n \n )}\n     \n \n );\n}\n\nconst PurePreviewMessage = ({\n message,\n isLatestMessage,\n status,\n}: {\n message: TMessage;\n isLoading: boolean;\n status: \"error\" | \"submitted\" | \"streaming\" | \"ready\";\n isLatestMessage: boolean;\n}) => {\n // Create a string with all text parts for copy functionality\n const getMessageText = () => {\n if (!message.parts) return \"\";\n return message.parts\n .filter((part) => part.type === \"text\")\n .map((part) => (part.type === \"text\" ? part.text : \"\"))\n .join(\"\\n\\n\");\n };\n\n // Only show copy button if the message is from the assistant and not currently streaming\n const shouldShowCopyButton =\n message.role === \"assistant\" &&\n (!isLatestMessage || status !== \"streaming\");\n\n return (\n \n \n \n
    \n {message.parts?.map((part, i) => {\n switch (part.type) {\n case \"text\":\n return (\n \n \n {part.text}\n
    \n \n );\n case \"tool-invocation\":\n const { toolName, state, args } = part.toolInvocation;\n const result =\n \"result\" in part.toolInvocation\n ? part.toolInvocation.result\n : null;\n\n return (\n \n );\n case \"reasoning\":\n return (\n \n );\n default:\n return null;\n }\n })}\n {shouldShowCopyButton && (\n
    \n \n
    \n )}\n \n \n \n     \n );\n};\n\nexport const Message = memo(PurePreviewMessage, (prevProps, nextProps) => {\n if (prevProps.status !== nextProps.status) return false;\n if (prevProps.message.annotations !== nextProps.message.annotations)\n return false;\n if (!equal(prevProps.message.parts, nextProps.message.parts)) return false;\n return true;\n});\n" }, { "path": "app/chat/components/messages.tsx", "content": "import type { Message as TMessage } from \"ai\";\nimport { Message } from \"./message\";\nimport { useScrollToBottom } from \"~/chat/lib/hooks/use-scroll-to-bottom\";\n\nexport const Messages = ({\n messages,\n isLoading,\n status,\n}: {\n messages: TMessage[];\n isLoading: boolean;\n status: \"error\" | \"submitted\" | \"streaming\" | \"ready\";\n}) => {\n const [containerRef, endRef] = useScrollToBottom();\n\n return (\n
    \n
    \n {messages.map((m, i) => (\n \n ))}\n
    \n
    \n
    \n );\n};\n" }, { "path": "app/chat/components/model-picker.tsx", "content": "\"use client\";\nimport {\n MODELS,\n modelDetails,\n type modelID,\n defaultModel,\n} from \"~/chat/ai/providers.shared\";\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"./ui/select\";\nimport { cn } from \"~/chat/lib/utils\";\nimport {\n Sparkles,\n Zap,\n Info,\n Bolt,\n Code,\n Brain,\n Lightbulb,\n Image,\n Gauge,\n Rocket,\n Bot,\n} from \"lucide-react\";\nimport { useState, useEffect } from \"react\";\n\ninterface ModelPickerProps {\n selectedModel: modelID;\n setSelectedModel: (model: modelID) => void;\n}\n\nexport const ModelPicker = ({\n selectedModel,\n setSelectedModel,\n}: ModelPickerProps) => {\n const [hoveredModel, setHoveredModel] = useState(null);\n\n // Ensure we always have a valid model ID\n const validModelId = MODELS.includes(selectedModel)\n ? selectedModel\n : defaultModel;\n\n // If the selected model is invalid, update it to the default\n useEffect(() => {\n if (selectedModel !== validModelId) {\n setSelectedModel(validModelId as modelID);\n }\n }, [selectedModel, validModelId, setSelectedModel]);\n\n // Function to get the appropriate icon for each provider\n const getProviderIcon = (provider: string) => {\n switch (provider.toLowerCase()) {\n case \"anthropic\":\n return ;\n case \"openai\":\n return ;\n case \"google\":\n return ;\n case \"groq\":\n return ;\n case \"xai\":\n return ;\n default:\n return ;\n }\n };\n\n // Function to get capability icon\n const getCapabilityIcon = (capability: string) => {\n switch (capability.toLowerCase()) {\n case \"code\":\n return ;\n case \"reasoning\":\n return ;\n case \"research\":\n return ;\n case \"vision\":\n return ;\n case \"fast\":\n case \"rapid\":\n return ;\n case \"efficient\":\n case \"compact\":\n return ;\n case \"creative\":\n case \"balance\":\n return ;\n case \"agentic\":\n return ;\n default:\n return ;\n }\n };\n\n // Get capability badge color\n const getCapabilityColor = (capability: string) => {\n switch (capability.toLowerCase()) {\n case \"code\":\n return \"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 ocean:bg-blue-900/30 ocean:text-blue-300\";\n case \"reasoning\":\n case \"research\":\n return \"bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 ocean:bg-purple-900/30 ocean:text-purple-300\";\n case \"vision\":\n return \"bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300 ocean:bg-indigo-900/30 ocean:text-indigo-300\";\n case \"fast\":\n case \"rapid\":\n return \"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 ocean:bg-amber-900/30 ocean:text-amber-300\";\n case \"efficient\":\n case \"compact\":\n return \"bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300 ocean:bg-emerald-900/30 ocean:text-emerald-300\";\n case \"creative\":\n case \"balance\":\n return \"bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300 ocean:bg-rose-900/30 ocean:text-rose-300\";\n case \"agentic\":\n return \"bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300 ocean:bg-cyan-900/30 ocean:text-cyan-300\";\n default:\n return \"bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300 ocean:bg-gray-800 ocean:text-gray-300\";\n }\n };\n\n // Get current model details to display\n const displayModelId = hoveredModel || validModelId;\n const currentModelDetails = modelDetails[displayModelId];\n\n // Handle model change\n const handleModelChange = (modelId: string) => {\n if (MODELS.includes(modelId)) {\n const typedModelId = modelId as modelID;\n setSelectedModel(typedModelId);\n }\n };\n\n return (\n
    \n \n \n \n
    \n {getProviderIcon(modelDetails[validModelId].provider)}\n \n {modelDetails[validModelId].name}\n \n
    \n \n     \n \n
    \n {/* Model selector column */}\n
    \n \n {MODELS.map((id) => {\n const modelId = id as modelID;\n return (\n setHoveredModel(modelId)}\n onMouseLeave={() => setHoveredModel(null)}\n className={cn(\n \"!px-2 sm:!px-3 py-1.5 sm:py-2 cursor-pointer rounded-md text-xs transition-colors duration-150\",\n \"hover:bg-primary/5 hover:text-primary-foreground\",\n \"focus:bg-primary/10 focus:text-primary focus:outline-none\",\n \"data-[highlighted]:bg-primary/10 data-[highlighted]:text-primary\",\n validModelId === id &&\n \"!bg-primary/15 !text-primary font-medium\",\n )}\n >\n
    \n
    \n {getProviderIcon(modelDetails[modelId].provider)}\n \n {modelDetails[modelId].name}\n \n
    \n \n {modelDetails[modelId].provider}\n \n
    \n \n );\n })}\n     \n
    \n\n {/* Model details column - hidden on smallest screens, visible on sm+ */}\n \n\n {/* Condensed model details for mobile only */}\n
    \n
    \n {currentModelDetails.capabilities\n .slice(0, 4)\n .map((capability) => (\n \n {getCapabilityIcon(capability)}\n {capability}\n \n ))}\n {currentModelDetails.capabilities.length > 4 && (\n \n +{currentModelDetails.capabilities.length - 4} more\n \n )}\n
    \n
    \n
    \n \n \n
    \n );\n};\n" }, { "path": "app/chat/components/project-overview.tsx", "content": "import { useMCP } from \"~/chat/lib/context/mcp-context\";\nexport const ProjectOverview = () => {\n const { owner, repo, serverNameText } = useMCP();\n return (\n
    \n

    \n {`Chat with ${serverNameText}`}\n

    \n

    \n Ask questions about {repo ? `${owner}/${repo}` : \"any GitHub repo\"}{\" \"}\n documentation.\n

    \n
    \n );\n};\n" }, { "path": "app/chat/components/suggested-prompts.tsx", "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { Button } from \"./ui/button\";\nimport { memo } from \"react\";\n\ninterface SuggestedPromptsProps {\n sendMessage: (input: string) => void;\n}\n\nfunction PureSuggestedPrompts({ sendMessage }: SuggestedPromptsProps) {\n const suggestedActions = [\n {\n title: \"What are the advantages\",\n label: \"of using Next.js?\",\n action: \"What are the advantages of using Next.js?\",\n },\n {\n title: \"What is the weather\",\n label: \"in San Francisco?\",\n action: \"What is the weather in San Francisco?\",\n },\n ];\n\n return (\n \n {suggestedActions.map((suggestedAction, index) => (\n 1 ? \"hidden sm:block\" : \"block\"}\n >\n {\n sendMessage(suggestedAction.action);\n }}\n className=\"text-left border rounded-xl px-4 py-3.5 text-sm flex-1 gap-1 sm:flex-col w-full h-auto justify-start items-start\"\n >\n {suggestedAction.title}\n \n {suggestedAction.label}\n \n \n \n ))}\n
    \n );\n}\n\nexport const SuggestedPrompts = memo(PureSuggestedPrompts, () => true);\n" }, { "path": "app/chat/components/textarea.tsx", "content": "import type { modelID } from \"~/chat/ai/providers.shared\";\nimport { Textarea as ShadcnTextarea } from \"~/chat/components/ui/textarea\";\nimport { ArrowUp, Loader2 } from \"lucide-react\";\nimport { ModelPicker } from \"./model-picker\";\n\ninterface InputProps {\n input: string;\n handleInputChange: (event: React.ChangeEvent) => void;\n isLoading: boolean;\n status: string;\n stop: () => void;\n selectedModel: modelID;\n setSelectedModel: (model: modelID) => void;\n}\n\nexport const Textarea = ({\n input,\n handleInputChange,\n isLoading,\n status,\n stop,\n selectedModel,\n setSelectedModel,\n}: InputProps) => {\n const isStreaming = status === \"streaming\" || status === \"submitted\";\n\n return (\n
    \n {\n if (e.key === \"Enter\" && !e.shiftKey && !isLoading && input.trim()) {\n e.preventDefault();\n e.currentTarget.form?.requestSubmit();\n }\n }}\n />\n \n\n \n {isStreaming ? (\n \n ) : (\n \n )}\n \n
    \n );\n};\n" }, { "path": "app/chat/components/theme-provider.tsx", "content": "\"use client\";\n\nimport { ThemeProvider as NextThemesProvider } from \"next-themes\";\nimport type { ThemeProviderProps } from \"next-themes\";\n\nexport function ThemeProvider({ children, ...props }: ThemeProviderProps) {\n return {children};\n}\n" }, { "path": "app/chat/components/theme-toggle.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n CircleDashed,\n Flame,\n Sun,\n Moon,\n WavesIcon,\n SunsetIcon,\n} from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\nimport { Button } from \"./ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"./ui/dropdown-menu\";\nimport { cn } from \"~/chat/lib/utils\";\n\nexport function ThemeToggle({\n className,\n ...props\n}: React.ComponentProps) {\n const { setTheme } = useTheme();\n\n return (\n \n \n \n \n Toggle theme\n \n \n \n setTheme(\"dark\")}>\n \n Dark\n \n setTheme(\"light\")}>\n \n Light\n \n setTheme(\"black\")}>\n \n Black\n \n {/* sunset theme */}\n setTheme(\"sunset\")}>\n \n Sunset\n \n setTheme(\"ocean\")}>\n \n Ocean\n \n \n \n );\n}\n" }, { "path": "app/chat/components/tool-invocation.tsx", "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport {\n ChevronDownIcon,\n ChevronUpIcon,\n Loader2,\n CheckCircle2,\n TerminalSquare,\n Code,\n ArrowRight,\n Circle,\n} from \"lucide-react\";\nimport { cn } from \"~/chat/lib/utils\";\n\ninterface ToolInvocationProps {\n toolName: string;\n state: string;\n args: any;\n result: any;\n isLatestMessage: boolean;\n status: string;\n}\n\nexport function ToolInvocation({\n toolName,\n state,\n args,\n result,\n isLatestMessage,\n status,\n}: ToolInvocationProps) {\n const [isExpanded, setIsExpanded] = useState(false);\n\n const variants = {\n collapsed: {\n height: 0,\n opacity: 0,\n },\n expanded: {\n height: \"auto\",\n opacity: 1,\n },\n };\n\n const getStatusIcon = () => {\n if (state === \"call\") {\n if (isLatestMessage && status !== \"ready\") {\n return ;\n }\n return (\n \n );\n }\n return ;\n };\n\n const getStatusClass = () => {\n if (state === \"call\") {\n if (isLatestMessage && status !== \"ready\") {\n return \"text-primary\";\n }\n return \"text-muted-foreground\";\n }\n return \"text-primary\";\n };\n\n const formatContent = (content: any): string => {\n try {\n if (typeof content === \"string\") {\n try {\n const parsed = JSON.parse(content);\n return JSON.stringify(parsed, null, 2);\n } catch {\n return content;\n }\n }\n return JSON.stringify(content, null, 2);\n } catch {\n return String(content);\n }\n };\n\n return (\n \n setIsExpanded(!isExpanded)}\n >\n
    \n \n
    \n
    \n \n {toolName}\n \n \n \n {state === \"call\"\n ? isLatestMessage && status !== \"ready\"\n ? \"Running\"\n : \"Waiting\"\n : \"Completed\"}\n \n
    \n
    \n {getStatusIcon()}\n
    \n {isExpanded ? (\n \n ) : (\n \n )}\n
    \n
    \n \n\n \n {isExpanded && (\n \n {!!args && (\n
    \n
    \n \n Arguments\n
    \n \n {formatContent(args)}\n \n
    \n )}\n\n {!!result && (\n
    \n
    \n \n Result\n
    \n \n {formatContent(result)}\n \n
    \n )}\n \n )}\n     \n \n );\n}\n" }, { "path": "app/chat/components/ui/accordion.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction Accordion({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction AccordionItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n svg]:rotate-180\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n );\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n
    {children}
    \n \n );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n" }, { "path": "app/chat/components/ui/avatar.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction Avatar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback };\n" }, { "path": "app/chat/components/ui/badge.tsx", "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 ocean:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 ocean:focus-visible:ring-destructive/40 dark:bg-destructive/60 ocean:bg-destructive/60\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction Badge({\n className,\n variant,\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\";\n\n return (\n \n );\n}\n\nexport { Badge, badgeVariants };\n" }, { "path": "app/chat/components/ui/button.tsx", "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 ocean:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 ocean:focus-visible:ring-destructive/40 dark:bg-destructive/60 ocean:bg-destructive/60\",\n outline:\n \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 ocean:bg-input/30 dark:border-input ocean:border-input dark:hover:bg-input/50 ocean:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 ocean:hover:bg-accent/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean;\n }) {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n \n );\n}\n\nexport { Button, buttonVariants };\n" }, { "path": "app/chat/components/ui/dialog.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction Dialog({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DialogTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DialogPortal({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DialogClose({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DialogContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n {children}\n \n \n Close\n \n \n \n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nfunction DialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n" }, { "path": "app/chat/components/ui/dropdown-menu.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction DropdownMenu({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n );\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n" }, { "path": "app/chat/components/ui/input.tsx", "content": "import * as React from \"react\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n return (\n \n );\n}\n\nexport { Input };\n" }, { "path": "app/chat/components/ui/label.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction Label({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Label };\n" }, { "path": "app/chat/components/ui/popover.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction Popover({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction PopoverTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction PopoverContent({\n className,\n align = \"center\",\n sideOffset = 4,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nfunction PopoverAnchor({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n" }, { "path": "app/chat/components/ui/scroll-area.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction ScrollArea({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n \n \n );\n}\n\nfunction ScrollBar({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nexport { ScrollArea, ScrollBar };\n" }, { "path": "app/chat/components/ui/select.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction SelectGroup({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction SelectTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}\n \n \n \n \n );\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"popper\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n};\n" }, { "path": "app/chat/components/ui/separator.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction Separator({\n className,\n orientation = \"horizontal\",\n decorative = true,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Separator };\n" }, { "path": "app/chat/components/ui/sheet.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\n\nimport { cn } from \"~/chat/lib/utils\";\n\nfunction Sheet({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n ...props\n}: React.ComponentProps & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n}) {\n return (\n \n \n \n {children}\n \n \n Close\n \n \n \n );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n};\n" }, { "path": "app/chat/components/ui/sidebar.tsx", "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { PanelLeftIcon } from \"lucide-react\";\n\nimport { useIsMobile } from \"~/chat/hooks/use-mobile\";\nimport { cn } from \"~/chat/lib/utils\";\nimport { Button } from \"~/chat/components/ui/button\";\nimport { Input } from \"~/chat/components/ui/input\";\nimport { Separator } from \"~/chat/components/ui/separator\";\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"~/chat/components/ui/sheet\";\nimport { Skeleton } from \"~/chat/components/ui/skeleton\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"~/chat/components/ui/tooltip\";\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\";\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = \"13rem\";\nconst SIDEBAR_WIDTH_MOBILE = \"15rem\";\nconst SIDEBAR_WIDTH_ICON = \"3rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\";\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = React.useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open],\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = React.useCallback(() => {\n return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);\n }, [isMobile, setOpen, setOpenMobile]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? \"expanded\" : \"collapsed\";\n\n const contextValue = React.useMemo(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],\n );\n\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nfunction Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\";\n variant?: \"sidebar\" | \"floating\" | \"inset\";\n collapsible?: \"offcanvas\" | \"icon\" | \"none\";\n}) {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar();\n\n if (collapsible === \"none\") {\n return (\n \n {children}\n \n );\n }\n\n if (isMobile) {\n return (\n \n button]:hidden\"\n style={\n {\n \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n \n Sidebar\n Displays the mobile sidebar.\n \n
    {children}
    \n \n     \n );\n }\n\n return (\n