Use Chrome's Prompt API to generate a trip planner in Angular

ng new prompt-api-demo

npm i -save-exact -save-dev @types/dom-chromium-ai

// main.ts

///    

import { InjectionToken } from '@angular/core';

export const AI_PROMPT_API_TOKEN = new InjectionToken<AILanguageModelFactory | undefined>('AI_PROMPT_API_TOKEN');

export function provideLanguageModel(): EnvironmentProviders {
   return makeEnvironmentProviders([
       {
           provide: AI_PROMPT_API_TOKEN,
           useFactory: () => {
               const platformId = inject(PLATFORM_ID);
               const objWindow = isPlatformBrowser(platformId) ? window : undefined;
               return  objWindow?.ai?.languageModel;
           },
       }
   ]);
}

// app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideLanguageModel()
  ]
};

export async function checkChromeBuiltInAI(): Promise<string> {
  if (!isChromeBrowser()) {
     throw new Error(ERROR_CODES.NOT_CHROME_BROWSER);
  }

  if (getChromVersion() < CHROME_VERSION) {
     throw new Error(ERROR_CODES.OLD_BROWSER);
  }

  if (!('ai' in globalThis)) {
     throw new Error(ERROR_CODES.NO_PROMPT_API);
  }

  const assistant = inject(AI_PROMPT_API_TOKEN);
  const status = (await assistant?.capabilities())?.available;
  if (!status) {
     throw new Error(ERROR_CODES.API_NOT_READY);
  } else if (status === 'after-download') {
     throw new Error(ERROR_CODES.AFTER_DOWNLOAD);
  } else if (status === 'no') {
     throw new Error(ERROR_CODES.NO_LARGE_LANGUAGE_MODEL);
  }

  return '';
}

export function isPromptAPISupported(): Observable<string> {
  return from(checkChromeBuiltInAI()).pipe(
     catchError(
        (e) => {
           console.error(e);
           return of(e instanceof Error ? e.message : 'unknown');
        }
     )
  );
}

@Component({
    selector: 'app-detect-ai',
    imports: [PromptShowcaseComponent],
    template: `
    

      @let error = hasCapability();
      @if (!error) {
        
      } @else if (error !== 'unknown') {
        {{ error }}
      }
    
  `
})
export class DetectAIComponent {
  hasCapability = toSignal(isPromptAPISupported(), { initialValue: '' });
}

// prompt-showcase.component.ts 

@Component({
   selector: 'app-prompt-showcase',
   imports: [NgComponentOutlet],
   template: `
       @let outlet = componentOutlet();
       
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
})
export class PromptShowcaseComponent {
   promptService = inject(ZeroPromptService);
   componentOutlet = computed(() => {  
      return {
        component: SystemPromptsComponent,
        inputs: {}
      }
   });
}

@Component({
 selector: 'app-prompt-response',
 imports: [TokenizationComponent, FormsModule, LineBreakPipe, NgTemplateOutlet],
 template: `
   @let responseState = state();
   

     Prompt: 
     
   
   {{ responseState.text }}
   

     Response: 
     

   
 `,
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class PromptResponseComponent {
 state = input.required<PromptResponse>();
 query = model.required<string>();
 submitPrompt = output();
}

// system-prompts.component.ts

@Component({
   selector: 'app-system-prompt',
   imports: [FormsModule, PromptResponseComponent],
   template: `
   

     
System Prompts
     

       System Prompt: 
       
     
     
   
 `,
   styleUrl: './prompt.component.css',
   providers: [
     {
       provide: AbstractPromptService,
       useClass: SystemPromptService,
     }
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
})
export class SystemPromptsComponent extends BasePromptComponent {
  systemPrompt = signal(``);
  responseState = computed<PromptResponse>(() => ({
     ...this.state(),
     error: this.error(),
     response: this.response(),
  }));

 constructor() {
   super();
   this.query.set('');
   this.promptService.setPromptOptions({ systemPrompt: this.systemPrompt() });
 }
}

constructor() {
   super();
   this.query.set(`);
   this.promptService.setPromptOptions({ systemPrompt: this.systemPrompt() });
 }

systemPrompt = signal(`You are a professional trip planner who helps travelers to plan a trip to a location. When a traveler specifies a country or city, you have to recommend how to apply for a travel visa, pack suitable clothes for the weather and essentials, and list the known attractions to visit daily. It is preferred to visit two to three attractions each day to maximize the value of the trip. If you don't know the answer, say, "I do not know the answer."`);

this.query.set('I will visit from Hong Kong to Taipei between Feb 13th to Feb 18th. Please help me plan the trip and assume I will arrive in the afternoon on day 1.'); 

@Directive({
   standalone: false
})
export abstract class BasePromptComponent {
   promptService = inject(AbstractPromptService);
   session = this.promptService.session;

   isLoading = signal(false);
   error = signal('');
   query = signal('Tell me about the job responsibility of an A.I. engineer, maximum 500 words.');
   response = signal('');

   state = computed(() => {
       const isLoading = this.isLoading();
       const isUnavailableForCall = isLoading || this.query().trim() === '';
       return {
           status: isLoading ? 'Processing...' : 'Idle',
           text: isLoading ? 'Progressing...' : 'Submit',
           disabled: isLoading,
           submitDisabled: isUnavailableForCall
       }
   });

    async submitPrompt() {
     try {
       this.isLoading.set(true);
       this.error.set('');
       this.response.set('');
       const answer = await this.promptService.prompt(this.query());
       this.response.set(answer);
     } catch(e) {
       const errMsg = e instanceof Error ? (e as Error).message : 'Error in submitPrompt';
       this.error.set(errMsg);
     } finally {
       this.isLoading.set(false);
     }
   }
 }

@Injectable({
 providedIn: 'root'
})
export class SystemPromptService extends AbstractPromptService implements OnDestroy  {
 #controller = new AbortController();

 override async createPromptSession(options?: PromptOptions): Promise<AILanguageModel | undefined> {
   const { systemPrompt = undefined } = options || {};
   return this.promptApi?.create({ systemPrompt, signal: this.#controller.signal });
 }

 ngOnDestroy(): void {
   this.destroySession();
 }
}

export abstract class AbstractPromptService {
   promptApi = inject(AI_PROMPT_API_TOKEN);
   #session = signal<AILanguageModel | undefined>(undefined);
   #tokenContext = signal<Tokenization | null>(null);
   #options = signal<PromptOptions | undefined>(undefined);

   resetSession(newSession: AILanguageModel | undefined) {
       this.#session.set(newSession);
       this.#tokenContext.set(null);
   }

   shouldCreateSession() {
       const session = this.#session();
       const context = this.#tokenContext();
       return !session || (context && context.tokensLeft < 500);
   }

   setPromptOptions(options?: PromptOptions) {
       this.#options.set(options);
   }

   async createSessionIfNotExists(): Promise<void> {
     if (this.shouldCreateSession()) {
        this.destroySession();
        const newSession = await this.createPromptSession(this.#options());
        if (!newSession) {
           throw new Error('Prompt API failed to create a session.');      
        }
        this.resetSession(newSession);
     }
   }
}

abstract createPromptSession(options?: PromptOptions): Promise<AILanguageModel | undefined>;

async prompt(query: string): Promise<string> {
       if (!this.promptApi) {
           throw new Error(ERROR_CODES.NO_PROMPT_API);
       }

       await this.createSessionIfNotExists();
       const session = this.#session();
       if (!session) {
           throw new Error('Session does not exist.');      
       }
       const answer = await session.prompt(query);
       return answer;
}

destroySession() {
    const session = this.session();

    if (session) {
        session.destroy();
        console.log('Destroy the prompt session.');
        this.resetSession(undefined);
    }
}