[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73838":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},73838,"live-api-web-console","google-gemini\u002Flive-api-web-console","google-gemini","A react-based starter app for using the Live API over websockets with Gemini","https:\u002F\u002Fai.google.dev\u002Fapi\u002Flive",null,"TypeScript",2550,730,28,0,1,12,30.59,"Apache License 2.0",false,"main",true,[24,25],"gemini","gemini-api","2026-06-12 02:03:18","# Live API - Web Console\n\nThis repository contains a react-based starter app for using the [Live API](\u003C[https:\u002F\u002Fai.google.dev\u002Fgemini-api](https:\u002F\u002Fai.google.dev\u002Fapi\u002Fmultimodal-live)>) 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\u002Fthumbnail.png)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=J_q7JY1XxFE)\n\nWatch the demo of the Live API [here](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=J_q7JY1XxFE).\n\n## Usage\n\nTo get started, [create a free Gemini API key](https:\u002F\u002Faistudio.google.com\u002Fapikey) and add it to the `.env` file. Then:\n\n```\n$ npm install && 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\u002Fproactive-audio](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fproactive-audio) - demonstrates the Live API's [proactive audio feature](https:\u002F\u002Fai.google.dev\u002Fgemini-api\u002Fdocs\u002Flive-guide#proactive-audio)\n\n\nOriginal demos:\n\n- [demos\u002FGenExplainer](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fgenexplainer)\n- [demos\u002FGenWeather](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fgenweather)\n- [demos\u002FGenList](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fgenlist)\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:\u002F\u002Fgithub.com\u002Fvega\u002Fvega-embed):\n\n```typescript\nimport { type FunctionDeclaration, SchemaType } from \"@google\u002Fgenerative-ai\";\nimport { useEffect, useRef, useState, memo } from \"react\";\nimport vegaEmbed from \"vega-embed\";\nimport { useLiveAPIContext } from \"..\u002F..\u002Fcontexts\u002FLiveAPIContext\";\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>(\"\");\n  const { client, setConfig } = useLiveAPIContext();\n\n  useEffect(() => {\n    setConfig({\n      model: \"models\u002Fgemini-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(() => {\n    const onToolCall = (toolCall: ToolCall) => {\n      console.log(`got toolcall`, toolCall);\n      const fc = toolCall.functionCalls.find(\n        (fc) => 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 () => {\n      client.off(\"toolcall\", onToolCall);\n    };\n  }, [client]);\n\n  const embedRef = useRef\u003CHTMLDivElement>(null);\n\n  useEffect(() => {\n    if (embedRef.current && jsonString) {\n      vegaEmbed(embedRef.current, JSON.parse(jsonString));\n    }\n  }, [embedRef, jsonString]);\n  return \u003Cdiv className=\"vega-embed\" ref={embedRef} \u002F>;\n}\n```\n\n## development\n\nThis project was bootstrapped with [Create React App](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fcreate-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:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost: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:\u002F\u002Ffacebook.github.io\u002Fcreate-react-app\u002Fdocs\u002Fdeployment) 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:\u002F\u002Fdevelopers.google.com\u002Fterms\u002Fsite-policies)._\n","该项目是一个基于React的启动应用程序，用于通过WebSocket与Gemini平台上的Live API进行交互。其核心功能包括流媒体音频播放、录制用户媒体（如麦克风、网络摄像头或屏幕捕获）以及提供统一的日志视图以辅助开发。采用TypeScript编写，支持模块化设计，便于开发者快速构建和测试多媒体应用。适用于需要实时处理音视频数据的应用场景，例如在线教育、远程协作工具或任何涉及即时通讯的服务。项目遵循Apache License 2.0开源协议，社区活跃度高，拥有丰富的示例代码供参考学习。",2,"2026-06-11 03:47:36","high_star"]