{"id":15631042,"url":"https://github.com/mme/beakjs","last_synced_at":"2025-04-06T20:09:53.620Z","repository":{"id":206277239,"uuid":"716274256","full_name":"mme/beakjs","owner":"mme","description":"🐦 Custom conversational assistants for your React app.","archived":false,"fork":false,"pushed_at":"2023-12-12T16:17:17.000Z","size":5372,"stargazers_count":204,"open_issues_count":4,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T19:05:35.617Z","etag":null,"topics":["assistant","chatbot","chatgpt","copilot","frontend","gpt-4","javascript","openai","react","reactjs","typescript","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mme.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-11-08T19:47:16.000Z","updated_at":"2025-03-30T10:35:29.000Z","dependencies_parsed_at":"2023-12-12T16:53:08.605Z","dependency_job_id":"d124271a-7083-4c6d-99ef-82e3f9d0d8d5","html_url":"https://github.com/mme/beakjs","commit_stats":null,"previous_names":["mme/beakjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mme%2Fbeakjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mme%2Fbeakjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mme%2Fbeakjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mme%2Fbeakjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mme","download_url":"https://codeload.github.com/mme/beakjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247543589,"owners_count":20955865,"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":["assistant","chatbot","chatgpt","copilot","frontend","gpt-4","javascript","openai","react","reactjs","typescript","web"],"created_at":"2024-10-03T10:38:37.481Z","updated_at":"2025-04-06T20:09:53.597Z","avatar_url":"https://github.com/mme.png","language":"TypeScript","readme":"# 🐦 Beak.js [![X (formerly Twitter) Follow](https://img.shields.io/twitter/follow/mme_xyz?style=flat\u0026logo=x)](https://twitter.com/mme_xyz) [![npm (scoped)](https://img.shields.io/npm/v/%40beakjs/react)](https://www.npmjs.com/package/@beakjs/react)\n\nBeak.js contains everything you need to create custom AI-powered assistants for your React app.\n\n**Key Features:**\n\n- **Built-in UI** - Comes with a beautiful, fully customizable chat window.\n- **Easy to Use** - Integrates with your existing React app in just a few lines of code.\n- **Open Source** - Beak.js is open source and free to use.\n\n\u003cimg src=\"https://github.com/mme/beakjs/raw/main/docs/img/screenshot.png\" width=\"500\" alt=\"Beak.js Screenshot\"\u003e\n\n## Getting Started\n\n### Installation\n\nFirst up, add Beak.js to your project:\n\n```bash\nnpm install @beakjs/react --save\n\n# or with yarn\nyarn add @beakjs/react\n```\n\n### Setup\n\nNext, wrap your app in the `Beak` component and add the assistant window:\n\n```jsx\nimport { Beak } from \"@beakjs/react\";\n\nconst App = () =\u003e (\n  \u003cBeak\n    __unsafeOpenAIApiKey__=\"sk-...\"\n    instructions=\"Assistant is running in a web app and helps the user with XYZ.\"\n  \u003e\n    \u003cMyApp /\u003e\n    \u003cAssistantWindow /\u003e\n  \u003c/Beak\u003e\n);\n```\n\nNow, you've got a chat window ready in the bottom right corner of your website. Give it a try!\n\n**Note:** Don't expose your API key in public-facing apps - this is for development only. See [Deployment](#deployment) for information on how to securely deploy your app without compromising your API key.\n\n### Making Beak.js work with your app\n\nYou can let the assistant carry out tasks in your app by setting up functions with `useBeakFunction`:\n\n```jsx\nimport { useBeakFunction } from \"@beakjs/react\";\n\nconst MyApp = () =\u003e {\n  const [message, setMessage] = useState(\"Hello World!\");\n\n  useBeakFunction({\n    name: \"updateMessage\",\n    description: \"This function updates the app's display message.\",\n    parameters: {\n      message: {\n        description: \"A short message to display on screen.\",\n      },\n    },\n    handler: ({ message }) =\u003e {\n      setMessage(message);\n\n      return `Updated the message to: \"${message}\"`;\n    },\n  });\n\n  return \u003cdiv\u003e{message}\u003c/div\u003e;\n};\n```\n\nNote that functions become available to the assistant as soon as their respective component is mounted. This is a powerful concept, ensuring that the assistant will be able to call functions relevant to the current context of your app.\n\n### Let the Assistant Know What's Happening On Screen\n\nYou can easily let the assistant know what it currently on screen by using `useBeakInfo`:\n\n```jsx\nimport { useBeakInfo } from \"@beakjs/react\";\n\nconst MyApp = () =\u003e {\n  const [message, setMessage] = useState(\"Hello World!\");\n\n  useBeakInfo(\"current message\", message);\n\n  // ...\n};\n```\n\nBy using `useBeakFunction` together with `useBeakInfo`, your assistant can see what's happening on the screen and take action within your app depending on the current context.\n\n## Deployment\n\nTo keep your API key safe, we use a server side handler that forwards your assistant's requests to OpenAI. Furthermore, this handler can be used to add authentication and rate limiting to your assistant.\n\nCurrently, the following frameworks are supported:\n\n- [Next.js](/docs/deployment/next.md)\n- [Remix](/docs/deployment/remix.md)\n- [Express](/docs/deployment/express.md)\n\nRead more about secure deployment by clicking the links above.\n\n## Run the Demo\n\nTo run the demo, build the project and start the demo app:\n\n```bash\ngit clone git@github.com:mme/beakjs.git \u0026\u0026 cd beakjs\nyarn \u0026\u0026 yarn build\ncd demo/frontend/presentation\necho \"VITE_OPENAI_API_KEY=sk-your-openai-key\" \u003e .env\nyarn \u0026\u0026 yarn dev\n```\n\nThen go to http://localhost:5173/ to see the demo.\n\n## Issues\n\nFeel free to submit issues and enhancement requests.\n\n## License\n\nMIT\n\nCopyright (c) 2023, Markus Ecker\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmme%2Fbeakjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmme%2Fbeakjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmme%2Fbeakjs/lists"}