{"id":21645333,"url":"https://github.com/copilotkit/demo-banking","last_synced_at":"2025-05-07T18:49:26.550Z","repository":{"id":258602143,"uuid":"870712516","full_name":"CopilotKit/demo-banking","owner":"CopilotKit","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-01T14:22:23.000Z","size":820,"stargazers_count":43,"open_issues_count":1,"forks_count":24,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-01T15:30:46.104Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://brex-demo-temp.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CopilotKit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-10T14:30:11.000Z","updated_at":"2025-04-25T19:32:15.000Z","dependencies_parsed_at":"2024-12-13T18:30:39.119Z","dependency_job_id":"32c2a849-eae4-485d-b370-efb0ea39941e","html_url":"https://github.com/CopilotKit/demo-banking","commit_stats":null,"previous_names":["copilotkit/demo-banking"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CopilotKit%2Fdemo-banking","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CopilotKit%2Fdemo-banking/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CopilotKit%2Fdemo-banking/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CopilotKit%2Fdemo-banking/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CopilotKit","download_url":"https://codeload.github.com/CopilotKit/demo-banking/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252938229,"owners_count":21828536,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T05:55:12.985Z","updated_at":"2025-05-07T18:49:26.054Z","avatar_url":"https://github.com/CopilotKit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CopilotKit Demo App\n\nThis demo application highlights the capabilities of CopilotKit by demonstrating how to build an app that emphasizes authorization, supports multiple operations, and incorporates generative UI elements. The banking application scenario serves as a practical example of these features in action.\n\n## Installation and running\n\nTo get started, install the package and run the development server:\n\n```bash\npnpm i\n```\nand then\n```bash\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to view the application.\n\nPlease ensure to `export OPENAI_API_KEY=your-key` to enable OpenAI functionality.\n\n## Key Features and Their Locations\n\n### Authorization and Contextualization\nAuthorization is key in this app, with users assigned to different departments and roles.\n\nExplore how user roles and departments impact the app's behavior. Navigate to the bottom left corner and switch between users. This is done through an app-wide context provided to the co-pilot.\u003cbr\u003e\nImplemented in `copilot-context.tsx`, it's a wrapper component that includes `useCopilotReadable` and `useCopilotAction` hooks for anything app-wide.\n\n### Multiple operations and information\n\nThe application offers various operations that can be performed through the co-pilot on different pages. Here are some examples:\n\n* On the `/cards` page, you can request the co-pilot to change a credit card's PIN or add a new card. Note that adding a new card may have different outcomes depending on the user's role.\n* On the `/team` page, the co-pilot can assist with inviting a new member, editing a member's role or department, or removing a member.\n\n### Generative UI\n\nThe app demonstrates the power of Generative UI through two main examples in `cards/page.tsx`:\n\n- Transaction Viewing:\n  - The `showTransactions` `useCopilotAction` exemplifies the ability to present information via a component, eliminating the need for additional text or LLM follow-up.\n  - Trigger this feature by requesting the co-pilot to display all transactions for a specific card, identified by its last 4 digits.\n- Transaction Approval:\n  - The `showAndApproveTransactions` `useCopilotAction` demonstrates the capacity to solicit user action, specifically the approval of transactions. This process is done one transaction at a time, ensuring all are resolved.\n  - Engage this feature by asking the co-pilot to display all transactions awaiting approval, such as \"Show me all transactions pending my approval\".\n\n### Handling Unavailable Actions\n\nThe app handles unsupported actions by redirecting users to the relevant page, optionally starting the task. Explore this on the main page:\n\n- Ask the co-pilot to change a card's PIN (e.g., \"Let's change the pin for my Visa\"), and it will redirect you to the cards page with a change PIN popup.\n- Request assigning a policy to a card, and the co-pilot will acknowledge its inability to assist and offer guidance.\n\nThis feature is implemented in `copilot-context.tsx` as `navigateToPageAndPerform`.\n\n## SQL Query Generator\n\nThe SQL query generator at `/sql` leverages co-pilot chat with Generative UI to convert user questions into SQL queries. Users can pose questions like \"Show me all transactions for my visa ending with 4242\" or \"Let's find the pending transaction for the policy assigned to the card ending with 4242\" and receive a corresponding SQL query. The query can be copied or executed directly (execution functionality is currently unavailable).\n\n## Backend and data\n\nThe `/api/v1` path serves as the primary endpoint for API requests, handling various routes that interact with the application's data. Notably, the `data.ts` file contains hardcoded data that is utilized throughout the application.\n\n\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcopilotkit%2Fdemo-banking","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcopilotkit%2Fdemo-banking","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcopilotkit%2Fdemo-banking/lists"}