Repository navigation
feat(firebase-ai-logic-basics): Web (JavaScript) SDK setup and capability guides - #222
AustinBenoit wants to merge 1 commit into
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the Firebase AI Logic Web Setup Guide to provide comprehensive instructions on installation, initialization, App Check integration, and various usage patterns. The review feedback highlights three improvement opportunities: guarding initializeAppCheck with a client-side check to prevent errors during server-side rendering (SSR) in Next.js, removing a redundant await from result.response in the text-only generation snippet, and fixing a minor spacing inconsistency in an import statement.
14d88ad to
c962dbc
Compare
c962dbc to
8eb6852
Compare
8eb6852 to
717c923
Compare
717c923 to
29efeb6
Compare
29efeb6 to
d4cdb70
Compare
AustinBenoit
changed the title
d4cdb70 to
83c07c8
Compare
83c07c8 to
68bb1d8
Compare
43b7275 to
ca8c0ed
Compare
64ea7d8 to
42b232b
Compare
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request adds Web (JavaScript) code examples and documentation for various Firebase AI Logic capabilities, including chat, function calling, image generation, multimodal input, on-device hybrid inference, search grounding, streaming, structured output, and text generation, while updating the setup and text-to-speech guides to reflect the renamed SDK. The review feedback highlights several API mismatches in the proposed examples: the Part object in the JS SDK does not support a top-level type field, the inlineDataParts() helper method is non-existent on response and chunk objects, and Schema is a TypeScript interface rather than a runtime class, requiring schemas to be defined as plain JSON objects instead of using builder methods.
42b232b to
ec30319
Compare
| import { initializeAppCheck, ReCaptchaEnterpriseProvider } from "firebase/app-check"; | ||
|
|
||
| if (typeof self !== "undefined") { | ||
| if (typeof process !== "undefined" && process.env.NODE_ENV === "development") { |
There was a problem hiding this comment.
I know this PR didn't touch it, but this logic is such that a Vite app can potentially pass this first condition, and not reach the "else if" that's supposed to apply to Vite. Both conditional blocks should probably check for the exact env variable names also.
| } | ||
| } | ||
|
|
||
| const appCheck = initializeAppCheck(app, { |
There was a problem hiding this comment.
This can't be allowed to run in NextJS server rendering as recaptcha won't work there and will error. I'm not sure if the best way is to add additional instructions to the agent to tell it to avoid calling this in server-rendering code and let it handle that itself, or to explicitly add a if (typeof window !== 'undefined') around this ourselves and just force it to never run when window isn't available. Further best practices are to use initializeServerApp when running in the NextJS server environment and to pass it the app check token generated during the client render, but that might be beyond the scope of this.
| ```JavaScript | ||
| async function generateText(prompt) { | ||
| const result = await model.generateContent(prompt); | ||
| const response = await result.response; |
There was a problem hiding this comment.
Actually gemini-code-assist was right here, we don't need the await. I think it might be wrong in the devsite snippet
|
|
||
| Text-Only Generation | ||
|
|
||
| ```JavaScript |
There was a problem hiding this comment.
does the different casing break this?
|
|
||
| ## Core Capabilities | ||
|
|
||
| Text-Only Generation |
There was a problem hiding this comment.
Is this supposed to be a ### subheading?
| const pcmBuffer = Uint8Array.from(atob(pcmBase64), (c) => | ||
| c.charCodeAt(0) | ||
| ).buffer; | ||
| playAudio(pcmBuffer); |
There was a problem hiding this comment.
So this function doesn't exist. I think it's in the devsite snippet as a "to be implemented by you the developer" placeholder. It looks like there's instructions below in section 3 on how to actually process and play the Uint8Array itself (not the .buffer) so I don't know if there's some way to say "we don't know how to play this yet, wait until section 3"
| ## Web (JavaScript) | ||
|
|
||
| #### 1. Streaming Playback with Web Audio API | ||
| ### 1. Single-Speaker & Multi-Speaker Generation (`generateContent`) |
|
|
||
| Gemini TTS audio format depends on whether the request is unary or streaming: | ||
|
|
||
| - **Unary Requests (`generateContent`)**: Returns complete **WAV (`audio/wav`)** |
There was a problem hiding this comment.
Jetski says this contradicts the Android, iOS and Flutter snippets, and line 832 in this same file in terms of what audio format is returned.
This branch has not been deployed
2 participants
Summary (PR 5 of 8 — Web / JavaScript SDK Specialist Review)
Consolidates all Web (JavaScript / TypeScript) SDK changes into a single PR for Web JS specialist review:
references/sdk/setup/web_setup.md:firebase(^13.0.0/@firebase/ai3.0.0),useLimitedUseAppCheckTokens: true, and moves inline capability sections into the dedicated capability guides.## Web (JavaScript)across all 10 capability guides (references/sdk/capabilities/*.md):text_generation.md,multimodal_input.md(withreader.onerror = reject;),chat.md,streaming.mdstructured_output.md,function_calling.md,search_grounding.mdimage_generation.md(withreader.onerror = reject;),on_device_hybrid.md(InferenceMode,initializeDeviceModel,inCloudParams/onDeviceParams)text_to_speech.md(ResponseModality.AUDIO,speechConfig,chunk.inlineDataParts(), Web Audio APIAudioContextstreaming, and WAVBlobhelper)