Make omi work in browser (for coding) #2008

kodjima33 · 2025-03-13T22:35:12Z

Is your feature request related to a problem? Please describe.
When starting omi app in chrome, it does'nt work, therefore, it's much harder to build/edit it

Describe the solution you'd like
Let's add an ability to run omi app in the browser, so that it's much easier to run/edit

Additional context
/bounty $1500

algora-pbc · 2025-03-13T22:35:16Z

💎 $1,500 bounty • omi

Steps to solve:

Start working: Comment /attempt #2008 with your implementation plan
Submit work: Create a pull request including /claim #2008 in the PR body to claim the bounty
Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to BasedHardware/omi!

Attempt	Started (UTC)	Solution	Actions
🟢 @Rutik7066	Apr 07, 2025, 04:03:56 PM	#2164	Reward
🟢 @varshith257	Mar 13, 2025, 10:48:04 PM	WIP
🟢 @Marvellous111	Mar 13, 2025, 11:29:06 PM	WIP
🔴 @cscoderr	Mar 13, 2025, 11:10:17 PM	WIP
🟢 @oltenxyz	Mar 14, 2025, 01:23:55 AM	WIP
🟢 @Sarvesh804	Mar 14, 2025, 09:06:59 PM	WIP
🟢 @joshijoe05	Mar 17, 2025, 10:28:15 AM	WIP

varshith257 · 2025-03-13T22:47:07Z

@kodjima33 Yes, it's definitely possible with current stack and there's a solution. And i think we don't need React Native for now. With this i am going to mark my attempt

/attempt #2008

Algora profile	Completed bounties	Tech	Active attempts	Options
@varshith257	31 bounties from 13 projects	Scala, Rust, Go & more		Cancel attempt

Marvellous111 · 2025-03-13T23:18:23Z

@kodjima33 just to be clear you mean the omi apps in the marketplace? it doesn't run on the browser?

Marvellous111 · 2025-03-13T23:29:04Z

@kodjima33 Just went through some docs and articles to better understand this, if it is what i believe it is then it is 100% doable, shouldn't take too long too, I'll work on it right now and see what I can do about it. lets see how it goes. /attempt #2008

Implementation plan is quite simple, port the existing flutter code for web and make it compatible with some minor changes. will get on it now.

Options

Cancel my attempt

oltenxyz · 2025-03-14T01:23:52Z

While I lack any experience with Flutter and this project, I'd like to give it a go to get a feel for it.
/attempt #2008

My plan is to try to run it on Web, fix whatever platform related error comes up, rinse and repeat.

Options

Cancel my attempt

oltenxyz · 2025-03-14T02:00:36Z

Managed to fix a few errors, but am now stuck with the Google Login flow.

I believe some changes might be required in the Google Developer Console for this to work.

Cannot find a Client ID that lets me sign in. I've tried a few.

1031333818730-1cgqp3jc5p8n2rk467pl4t56qc4lnnbr, error: Storagerelay URI is not allowed for 'NATIVE_ANDROID' client type.
1031333818730-dusn243nct6i5rgfpfkj5mchuj1qnmde, error: Storagerelay URI is not allowed for 'NATIVE_IOS' client type.
1031333818730-038eovd7osl3dlho0hp8fl87nq07nnna, error: Storagerelay URI is not allowed for 'NATIVE_IOS' client type.

Another attempt using 1031333818730-l9meebge7tpc0qmquvq6t5qpoe09o1ra actually let me finish the sign in in the Google pop up, but then the frontend errors out with this long stack trace:

frontend error after signing in

┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ [exception] | 2:47:58 739ms | An error occurred while signing in. Please try again later.
│ ClientException: {
│   "error": {
│     "code": 403,
│     "message": "People API has not been used in project 1031333818730 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730 then retry. If you enabled this
API recently, wait a few minutes for the action to propagate to our systems and retry.",
│     "status": "PERMISSION_DENIED",
│     "details": [
│       {
│         "@type": "type.googleapis.com/google.rpc.ErrorInfo",
│         "reason": "SERVICE_DISABLED",
│         "domain": "googleapis.com",
│         "metadata": {
│           "service": "people.googleapis.com",
│           "containerInfo": "1031333818730",
│           "serviceTitle": "People API",
│           "activationUrl": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730",
│           "consumer": "projects/1031333818730"
│         }
│       },
│       {
│         "@type": "type.googleapis.com/google.rpc.LocalizedMessage",
│         "locale": "en-US",
│         "message": "People API has not been used in project 1031333818730 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730 then retry. If you enabled
this API recently, wait a few minutes for the action to propagate to our systems and retry."
│       },
│       {
│         "@type": "type.googleapis.com/google.rpc.Help",
│         "links": [
│           {
│             "description": "Google developers console API activation",
│             "url": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730"
│           }
│         ]
│       }
│     ]
│   }
│ }
│ , uri=https://content-people.googleapis.com/v1/people/me?sources=READ_SOURCE_TYPE_PROFILE&personFields=photos%2Cnames%2CemailAddresses
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────

I'm not sure how to proceed here and am thinking that an admin has to create the corresponding Client ID; set up for the correct platform (web) and then share it here.

To get it working 100% will take a lot more work. However, getting to a point where you can launch the app and browse around, develop new pages, etc. should be quite possible.
This will be hugely useful for working on new features without needing a mobile phone to run the app.

It would also be great to get more clarification on whether full support of all features (microphone, notifications, etc.) is required or just all the frontend pages. The OP makes it sound like the latter is more of a priority and is enough for solving this issue.

kodjima33 · 2025-03-15T20:46:31Z

Task still actual.

@varshith257
🔴 @cscoderr
🟢 @Marvellous111
🟢 @oltenxyz
🟢 @Sarvesh804

PR by @b4s36t4 will probably be declined due to low quality (sorry)

kodjima33 · 2025-03-15T21:11:26Z

Raising a bounty to $1500 if I get a PR today

lutang123 · 2025-03-16T05:12:12Z

Hello,

I worked on a Flutter mobile app that later expanded into Flutter Web, where I played a key role in ensuring a seamless and responsive UI/UX across devices, we have a production Flutter web app. Given my experience, I plan to try to fix this issue. I just started learning omi and MCP today after attending the Hackathon at the AGI House in San Francisco, thanks for all to organize such event, I am glad the OMI App is made with Flutter.

Looking forward to contributing! 🚀

Marvellous111 · 2025-03-16T08:57:44Z

Raising a bounty to $1500 if I get a PR today

Does this still stand, still working on this, will get a pr request today if that's okay, timezones are a mess for me

oltenxyz · 2025-03-16T23:26:13Z

Took another crack at it. This would definitely still take me a few days to straighten everything out nicely.

Beyond all the platform specific code in the frontend, adjustments in the backend and Google Cloud console will be needed to get this working.

The People API has to be enabled and the correct Google client ID configured for the web platform has to be setup/shared.
CORS header: the backend has to allow cross-origin requests from whatever origin the web app will be hosted at.
Alternative way to authenticate the WebSocket connection to the backend. Web compatible libraries don't have the same freedom as dart:io based ones and thus cannot set their own Authorization header when connecting to a WS. The easiest way to go about this would be a new query parameter.

Here's a peek of what it looks like on my end atm:

Screencast_20250316.webm

Up next is playing around with flutter_web_bluetooth.

beastoin · 2025-03-17T04:45:38Z

looking forward to a cool way to handle the platform-specific code.

kodjima33 · 2025-03-17T06:19:53Z

@oltenxyz bro this is an amazing start

I can lock this on you if you can do daily progress

Also pls text me in telegram @kodjima33 if any issues

joshijoe05 · 2025-03-17T10:28:12Z

/attempt #2008

Options

Cancel my attempt

joshijoe05 · 2025-03-17T17:17:18Z

@kodjima33 @mdmohsin7 @beastoin

I don’t have access to the Firebase project, and to get the Omi web app up and running, we need the web platform to be enabled in Firebase. Could you set that up for the dev environment and share the firebase_options.dart file with us?

Also, we’ll need the Google People API enabled for the web Google Client ID.

Once these are sorted, we can get started on making Omi work on the web ASAP. Most dependencies are already web-compatible, but a few might need some tweaking, so we’ll make sure everything is solid without breaking any existing services.

If all of this is set up, I’ll make sure to provide a basic web setup demo video quickly and then move forward with Bluetooth connection and audio streaming. Initially, I’ll focus on completing the core functionality, and later, we can revamp the UI as needed.

beastoin · 2025-03-18T10:22:40Z

the firebased options, done #2047 / pull the latest main please.

tell me more about the Google People API, why do we need that API ?

good luck @joshijoe05

Marvellous111 · 2025-03-18T10:27:58Z

the firebased options, done #2047 / pull the latest main please.

tell me more about the Google People API, why do we need that API ?

good luck @joshijoe05

I created my own firebased options for web and using it to test, that's alright i believe? or do i need to make a pull?

joshijoe05 · 2025-03-18T15:14:10Z

the firebased options, done #2047 / pull the latest main please.

tell me more about the Google People API, why do we need that API ?

good luck @joshijoe05

1/ ✅
2/ To fetch the profile data like name, email and profile we need People API to be enabled for web client id.

Error log :

┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ [exception] | 20:38:29 262ms | An error occurred while signing in. Please try again later.
│ ClientException: {
│ "error": {
│ "code": 403,
│ "message": "People API has not been used in project 1031333818730 before or it is disabled. Enable it by visiting
https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730 then retry. If you enabled
this API recently, wait a few minutes for the action to propagate to our systems and retry.",
│ "status": "PERMISSION_DENIED",
│ "details": [
│ {
│ "@type": "type.googleapis.com/google.rpc.ErrorInfo",
│ "reason": "SERVICE_DISABLED",
│ "domain": "googleapis.com",
│ "metadata": {
│ "containerInfo": "1031333818730",
│ "service": "people.googleapis.com",
│ "serviceTitle": "People API",
│ "activationUrl":
"https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730",
│ "consumer": "projects/1031333818730"
│ }
│ },
│ {
│ "@type": "type.googleapis.com/google.rpc.LocalizedMessage",
│ "locale": "en-US",
│ "message": "People API has not been used in project 1031333818730 before or it is disabled. Enable it by visiting
https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730 then retry. If you enabled
this API recently, wait a few minutes for the action to propagate to our systems and retry."
│ },
│ {
│ "@type": "type.googleapis.com/google.rpc.Help",
│ "links": [
│ {
│ "description": "Google developers console API activation",
│ "url": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=1031333818730"
│ }
│ ]
│ }
│ ]
│ }
│ }
│ ,
uri=https://content-people.googleapis.com/v1/people/me?sources=READ_SOURCE_TYPE_PROFILE&personFields=photos%2Cnames%2CemailAddress
es
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────

joshijoe05 · 2025-03-20T10:03:35Z

@beastoin
Could you please enable the People API at the earliest? I am unable to proceed with my work until authentication is completed.

beastoin · 2025-03-20T13:50:46Z

done @joshijoe05 sir

and, don't forget to lmk why do we need People API for web but not for android/ios ?

beastoin · 2025-03-20T13:51:44Z

the firebased options, done #2047 / pull the latest main please.
tell me more about the Google People API, why do we need that API ?
good luck @joshijoe05

I created my own firebased options for web and using it to test, that's alright i believe? or do i need to make a pull?

@Marvellous111 it's ok, no worries.

joshijoe05 · 2025-03-20T16:49:52Z

@kodjima33 @beastoin
The following video demonstrates my progress in migrating the Flutter app to the web. It provides a quick overview of what I’ve achieved so far. But there’s still a lot more to work on.

Some dependencies are causing issues due to platform limitations, but I’ll tackle them progressively and ensure they work smoothly

2025-03-20.22-13-37.mp4

Marvellous111 · 2025-03-20T20:16:20Z

@kodjima33 @beastoin The following video demonstrates my progress in migrating the Flutter app to the web. It provides a quick overview of what I’ve achieved so far. But there’s still a lot more to work on.

Some dependencies are causing issues due to platform limitations, but I’ll tackle them progressively and ensure they work smoothly

2025-03-20.22-13-37.mp4

Yo joshi, what did you use for the client id when authenticating google sign in??

Marvellous111 · 2025-03-20T20:17:16Z

@beastoin @kodjima33 Could you please share the client ID? I cant find it and it is necessary for authenticating web sign in securely

Rutik7066 · 2025-03-21T05:15:51Z

@kodjima33 I can fix this could you please assign this to me I will raise PR ASAP

Rutik7066 · 2025-03-21T05:16:47Z

/attempt #2008

Algora profile	Completed bounties	Tech	Active attempts	Options
@Rutik7066	12 bounties from 9 projects	Go, TypeScript, Rust & more		Cancel attempt

Rutik7066 · 2025-03-26T09:00:49Z

@beastoin @kodjima33 I completed 80% of the work, due to the size limit of github. I have uploaded the video to Youtube.

Progress Video

algora-pbc · 2025-03-26T19:04:58Z

💡 @Rutik7066 submitted a pull request that claims the bounty. You can visit your bounty board to reward.

beastoin · 2025-03-28T03:28:20Z

#2014 (comment) My suggestion on how to remove the frictions of adding support for a new platform to the current code base. Please leave a check.

Anyway, folks, keep using the mobile's UI for the desktop (web) version looks weird. Could you do it a bit better - sorry, my eyes got burned on your demo 😣

beastoin · 2025-03-28T03:30:08Z

@beastoin @kodjima33 I completed 80% of the work, due to the size limit of github. I have uploaded the video to Youtube.

Progress Video

@FFmpeg is your best friend.

$ffmpeg -i ~/Downloads/x.mov -vcodec libx264 -crf 28 ~/Downloads/x.mp4

kodjima33 added flutter flutter work Paid Bounty 💰 labels Mar 13, 2025

kodjima33 added this to omi TODO / bounties Mar 13, 2025

algora-pbc bot added the 💎 Bounty label Mar 13, 2025

b4s36t4 mentioned this issue Mar 14, 2025

add basic web support #2014

Closed

kodjima33 moved this to TODO (This week) in omi TODO / bounties Mar 17, 2025

Rutik7066 mentioned this issue Mar 26, 2025

feat: web(for coding) #2088

Closed

kodjima33 moved this from TODO (This week) to Someday in omi TODO / bounties Apr 1, 2025

This was referenced Apr 7, 2025

fix: web build #2164

Open

Rebuild app in React Native #1944

Open

kodjima33 moved this from Someday to Next week in omi TODO / bounties Apr 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make omi work in browser (for coding) #2008

Make omi work in browser (for coding) #2008

kodjima33 commented Mar 13, 2025 •

edited

Loading

algora-pbc bot commented Mar 13, 2025 •

edited

Loading

varshith257 commented Mar 13, 2025 •

edited by algora-pbc bot

Loading

Marvellous111 commented Mar 13, 2025

Marvellous111 commented Mar 13, 2025 •

edited by algora-pbc bot

Loading

oltenxyz commented Mar 14, 2025 •

edited by algora-pbc bot

Loading

oltenxyz commented Mar 14, 2025

kodjima33 commented Mar 15, 2025

kodjima33 commented Mar 15, 2025

lutang123 commented Mar 16, 2025 •

edited

Loading

Marvellous111 commented Mar 16, 2025

oltenxyz commented Mar 16, 2025

beastoin commented Mar 17, 2025

kodjima33 commented Mar 17, 2025

joshijoe05 commented Mar 17, 2025 •

edited by algora-pbc bot

Loading

joshijoe05 commented Mar 17, 2025 •

edited

Loading

beastoin commented Mar 18, 2025

Marvellous111 commented Mar 18, 2025

joshijoe05 commented Mar 18, 2025 •

edited

Loading

joshijoe05 commented Mar 20, 2025

beastoin commented Mar 20, 2025

beastoin commented Mar 20, 2025

joshijoe05 commented Mar 20, 2025

Marvellous111 commented Mar 20, 2025

Marvellous111 commented Mar 20, 2025 •

edited

Loading

Rutik7066 commented Mar 21, 2025

Rutik7066 commented Mar 21, 2025 •

edited by algora-pbc bot

Loading

Rutik7066 commented Mar 26, 2025 •

edited

Loading

algora-pbc bot commented Mar 26, 2025

beastoin commented Mar 28, 2025

beastoin commented Mar 28, 2025

Make omi work in browser (for coding) #2008

Make omi work in browser (for coding) #2008

Comments

kodjima33 commented Mar 13, 2025 • edited Loading

algora-pbc bot commented Mar 13, 2025 • edited Loading

💎 $1,500 bounty • omi

Steps to solve:

varshith257 commented Mar 13, 2025 • edited by algora-pbc bot Loading

Marvellous111 commented Mar 13, 2025

Marvellous111 commented Mar 13, 2025 • edited by algora-pbc bot Loading

oltenxyz commented Mar 14, 2025 • edited by algora-pbc bot Loading

oltenxyz commented Mar 14, 2025

kodjima33 commented Mar 15, 2025

kodjima33 commented Mar 15, 2025

lutang123 commented Mar 16, 2025 • edited Loading

Marvellous111 commented Mar 16, 2025

oltenxyz commented Mar 16, 2025

beastoin commented Mar 17, 2025

kodjima33 commented Mar 17, 2025

joshijoe05 commented Mar 17, 2025 • edited by algora-pbc bot Loading

joshijoe05 commented Mar 17, 2025 • edited Loading

beastoin commented Mar 18, 2025

Marvellous111 commented Mar 18, 2025

joshijoe05 commented Mar 18, 2025 • edited Loading

joshijoe05 commented Mar 20, 2025

beastoin commented Mar 20, 2025

beastoin commented Mar 20, 2025

joshijoe05 commented Mar 20, 2025

Marvellous111 commented Mar 20, 2025

Marvellous111 commented Mar 20, 2025 • edited Loading

Rutik7066 commented Mar 21, 2025

Rutik7066 commented Mar 21, 2025 • edited by algora-pbc bot Loading

Rutik7066 commented Mar 26, 2025 • edited Loading

algora-pbc bot commented Mar 26, 2025

beastoin commented Mar 28, 2025

beastoin commented Mar 28, 2025

kodjima33 commented Mar 13, 2025 •

edited

Loading

algora-pbc bot commented Mar 13, 2025 •

edited

Loading

varshith257 commented Mar 13, 2025 •

edited by algora-pbc bot

Loading

Marvellous111 commented Mar 13, 2025 •

edited by algora-pbc bot

Loading

oltenxyz commented Mar 14, 2025 •

edited by algora-pbc bot

Loading

lutang123 commented Mar 16, 2025 •

edited

Loading

joshijoe05 commented Mar 17, 2025 •

edited by algora-pbc bot

Loading

joshijoe05 commented Mar 17, 2025 •

edited

Loading

joshijoe05 commented Mar 18, 2025 •

edited

Loading

Marvellous111 commented Mar 20, 2025 •

edited

Loading

Rutik7066 commented Mar 21, 2025 •

edited by algora-pbc bot

Loading

Rutik7066 commented Mar 26, 2025 •

edited

Loading