nuxt-hub / core

Build full-stack applications with Nuxt on CloudFlare, with zero configuration.
https://hub.nuxt.com
Apache License 2.0
819 stars 37 forks source link

AI binding support #84

Open danielroe opened 2 months ago

danielroe commented 2 months ago

implemented in a project and it seems to work well 😁

Barbapapazes commented 1 month ago

shouldn't it be in another repository? like @nuxthub/ai? (related project from Daniel: https://www.twitch.tv/videos/2127437533?t=01h00m20s)

RihanArfan commented 1 month ago

Here's a patch to get AI bindings in a NuxtHub project locally. Also it was fun being in Daniel's stream chat sharing what I knew to help :P

  1. Create patches/@nuxthub__core@0.6.14.patch with the following contents:
    
    diff --git a/dist/module.d.ts b/dist/module.d.ts
    index b98d0a4d25d093fc791b0b889d83333b1d6e65cf..18ad766c03b7ece29876a73e7c683006f05608a2 100644
    --- a/dist/module.d.ts
    +++ b/dist/module.d.ts
    @@ -37,6 +37,13 @@ interface ModuleOptions {
      * @see https://hub.nuxt.com/docs/storage/kv
      */
     kv?: boolean;
    +    /**
    +     * Set `true` to enable AI for the project.
    +     *
    +     * @default false
    +     * @see https://developers.cloudflare.com/workers-ai/
    +     */
    +    ai?: boolean;
     /**
      * Set to `true`, 'preview' or 'production' to use the remote storage.
      * Only set the value on a project you are deploying outside of NuxtHub or Cloudflare.
    diff --git a/dist/module.mjs b/dist/module.mjs
    index 9677d7e3d2840219959d03643ad488e2c8df6f73..f216bc64131bff83365a16d178b7c8c24c1a118b 100644
    --- a/dist/module.mjs
    +++ b/dist/module.mjs
    @@ -27,6 +27,11 @@ function generateWrangler(hub) {
       bucket_name: "default"
     }];
    }
    +  if (hub.ai) {
    +    wrangler["ai"] = {
    +        binding: "AI"
    +    };
    +  }
    if (hub.cache || hub.kv) {
     wrangler["kv_namespaces"] = [];
     if (hub.kv) {
    @@ -249,7 +254,8 @@ function addBuildHooks(nuxt, hub) {
           blob: hub.blob,
           cache: hub.cache,
           database: hub.database,
    -          kv: hub.kv
    +          kv: hub.kv,
    +          ai: hub.ai,
         }
       }).catch((e) => {
         if (e.response?._data?.message) {
    @@ -352,6 +358,7 @@ const module = defineNuxtModule({
       cache: false,
       database: false,
       kv: false,
    +      ai: false,
       // Other options
       version,
       env: process.env.NUXT_HUB_ENV || "production",

2. Edit `package.json` and add the `pnpm` section.
```json
{
  ...
  "dependencies": {
    "@nuxthub/core": "^0.6.10",
    ...
  },
  "pnpm": {
    "patchedDependencies": {
      "@nuxthub/core@0.6.14": "patches/@nuxthub__core@0.6.14.patch"
    }
  }
}
  1. Apply patch with pnpm install
  2. Enable AI in your NuxtHub config inside nuxt.config.ts
    export default defineNuxtConfig({
    hub: {
    cache: true,
    database: true,
    ai: true,
    },
    ...
    })
  3. Start your dev server pnpm dev and login to Cloudflare if prompted by Wrangler. Workers AI uses account quota even in local development. If you're not prompted to login to Wrangler (since Wrangler logs not shown) then create a dummy Workers AI template and start it with C3 so you can login, then delete the local files after. - https://developers.cloudflare.com/workers-ai/get-started/workers-wrangler/