{"id":26578731,"url":"https://github.com/google-gemini/live-api-web-console","last_synced_at":"2025-10-23T21:58:45.258Z","repository":{"id":267651327,"uuid":"900908903","full_name":"google-gemini/live-api-web-console","owner":"google-gemini","description":"A react-based starter app for using the Live API over websockets with Gemini","archived":false,"fork":false,"pushed_at":"2025-03-19T21:44:08.000Z","size":5779,"stargazers_count":1907,"open_issues_count":29,"forks_count":447,"subscribers_count":17,"default_branch":"main","last_synced_at":"2025-03-19T22:37:56.818Z","etag":null,"topics":["gemini","gemini-api"],"latest_commit_sha":null,"homepage":"https://ai.google.dev/api/multimodal-live","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/google-gemini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2024-12-09T17:35:48.000Z","updated_at":"2025-03-19T21:44:26.000Z","dependencies_parsed_at":"2025-03-19T22:37:59.896Z","dependency_job_id":"d586dabd-42ff-412b-8d61-874e4ce6615e","html_url":"https://github.com/google-gemini/live-api-web-console","commit_stats":null,"previous_names":["google-gemini/multimodal-live-api-web-console","google-gemini/live-api-web-console"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-gemini%2Flive-api-web-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-gemini%2Flive-api-web-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-gemini%2Flive-api-web-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/google-gemini%2Flive-api-web-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/google-gemini","download_url":"https://codeload.github.com/google-gemini/live-api-web-console/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245056909,"owners_count":20553855,"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":["gemini","gemini-api"],"created_at":"2025-03-23T05:02:09.229Z","updated_at":"2025-10-23T21:58:45.239Z","avatar_url":"https://github.com/google-gemini.png","language":"TypeScript","readme":"# Live API - Web Console\n\nThis repository contains a react-based starter app for using the [Live API](\u003c[https://ai.google.dev/gemini-api](https://ai.google.dev/api/multimodal-live)\u003e) over a websocket. It provides modules for streaming audio playback, recording user media such as from a microphone, webcam or screen capture as well as a unified log view to aid in development of your application.\n\n[![Live API Demo](readme/thumbnail.png)](https://www.youtube.com/watch?v=J_q7JY1XxFE)\n\nWatch the demo of the Live API [here](https://www.youtube.com/watch?v=J_q7JY1XxFE).\n\n## Usage\n\nTo get started, [create a free Gemini API key](https://aistudio.google.com/apikey) and add it to the `.env` file. Then:\n\n```\n$ npm install \u0026\u0026 npm start\n```\n\nWe have provided several example applications on other branches of this repository:\n\nNew demos with GenAI SDK:\n\n- [demos/proactive-audio](https://github.com/google-gemini/multimodal-live-api-web-console/tree/demos/proactive-audio) - demonstrates the Live API's [proactive audio feature](https://ai.google.dev/gemini-api/docs/live-guide#proactive-audio)\n\n\nOriginal demos:\n\n- [demos/GenExplainer](https://github.com/google-gemini/multimodal-live-api-web-console/tree/demos/genexplainer)\n- [demos/GenWeather](https://github.com/google-gemini/multimodal-live-api-web-console/tree/demos/genweather)\n- [demos/GenList](https://github.com/google-gemini/multimodal-live-api-web-console/tree/demos/genlist)\n\n## Example\n\nBelow is an example of an entire application that will use Google Search grounding and then render graphs using [vega-embed](https://github.com/vega/vega-embed):\n\n```typescript\nimport { type FunctionDeclaration, SchemaType } from \"@google/generative-ai\";\nimport { useEffect, useRef, useState, memo } from \"react\";\nimport vegaEmbed from \"vega-embed\";\nimport { useLiveAPIContext } from \"../../contexts/LiveAPIContext\";\n\nexport const declaration: FunctionDeclaration = {\n  name: \"render_altair\",\n  description: \"Displays an altair graph in json format.\",\n  parameters: {\n    type: SchemaType.OBJECT,\n    properties: {\n      json_graph: {\n        type: SchemaType.STRING,\n        description:\n          \"JSON STRING representation of the graph to render. Must be a string, not a json object\",\n      },\n    },\n    required: [\"json_graph\"],\n  },\n};\n\nexport function Altair() {\n  const [jsonString, setJSONString] = useState\u003cstring\u003e(\"\");\n  const { client, setConfig } = useLiveAPIContext();\n\n  useEffect(() =\u003e {\n    setConfig({\n      model: \"models/gemini-2.0-flash-exp\",\n      systemInstruction: {\n        parts: [\n          {\n            text: 'You are my helpful assistant. Any time I ask you for a graph call the \"render_altair\" function I have provided you. Dont ask for additional information just make your best judgement.',\n          },\n        ],\n      },\n      tools: [{ googleSearch: {} }, { functionDeclarations: [declaration] }],\n    });\n  }, [setConfig]);\n\n  useEffect(() =\u003e {\n    const onToolCall = (toolCall: ToolCall) =\u003e {\n      console.log(`got toolcall`, toolCall);\n      const fc = toolCall.functionCalls.find(\n        (fc) =\u003e fc.name === declaration.name\n      );\n      if (fc) {\n        const str = (fc.args as any).json_graph;\n        setJSONString(str);\n      }\n    };\n    client.on(\"toolcall\", onToolCall);\n    return () =\u003e {\n      client.off(\"toolcall\", onToolCall);\n    };\n  }, [client]);\n\n  const embedRef = useRef\u003cHTMLDivElement\u003e(null);\n\n  useEffect(() =\u003e {\n    if (embedRef.current \u0026\u0026 jsonString) {\n      vegaEmbed(embedRef.current, JSON.parse(jsonString));\n    }\n  }, [embedRef, jsonString]);\n  return \u003cdiv className=\"vega-embed\" ref={embedRef} /\u003e;\n}\n```\n\n## development\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\nProject consists of:\n\n- an Event-emitting websocket-client to ease communication between the websocket and the front-end\n- communication layer for processing audio in and out\n- a boilerplate view for starting to build your apps and view logs\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n_This is an experiment showcasing the Live API, not an official Google product. We’ll do our best to support and maintain this experiment but your mileage may vary. We encourage open sourcing projects as a way of learning from each other. Please respect our and other creators' rights, including copyright and trademark rights when present, when sharing these works and creating derivative work. If you want more info on Google's policy, you can find that [here](https://developers.google.com/terms/site-policies)._\n","funding_links":[],"categories":["TypeScript","A01_文本生成_文本对话"],"sub_categories":["大语言对话模型及数据"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-gemini%2Flive-api-web-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoogle-gemini%2Flive-api-web-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoogle-gemini%2Flive-api-web-console/lists"}