Modify the local bolt.new interface to allow input of the API key

Modify the local bolt.new interface to allow input of the API key

In bolt.new, the API key can be configured using environment variables, but this time, we will modify it to allow input of the API key directly from the interface.

Modification Details

We will enable API key input directly from the sidebar.
In the sidebar, which currently displays chat history, we add a new form at the top for entering the API key.

To achieve this, modify the file bolt.new/app/components/sidebar/Menu.client.tsx.

First, import the function to handle API key input:

import { ApiKeyInput } from '~/components/sidebar/ApiKeyInput';

The bolt.new/app/components/sidebar/ApiKeyInput.tsx file will be created later.

Next, add a form for entering the API key within the menu.

...  
  return (  
      <motion.div  
        ref={menuRef}  
        initial="closed"  
        animate={open ? 'open' : 'closed'}  
        variants={menuVariants}  
        className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"  
      >  
        <div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>  
        <div className="flex-1 flex flex-col h-full w-full overflow-hidden">  
          <ApiKeyInput /> {/* Add this line */}  
          <div className="p-4">  
...

The added code should be placed here.

Next, create the file bolt.new/app/components/sidebar/ApiKeyInput.tsx with the following content:

import React, { useState } from 'react';  

export function ApiKeyInput() {  
  const [apiKey, setApiKey] = useState(localStorage.getItem('apiKey') || '');  

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {  
    const value = event.target.value;  
    setApiKey(value);  
    localStorage.setItem('apiKey', value);  
    // Trigger API key change event  
    window.dispatchEvent(new Event('apiKeyChanged'));  
  };  

  return (  
    <div className="px-4 py-3 border-b border-bolt-elements-borderColor">  
      <label   
        htmlFor="api-key"   
        className="block text-bolt-elements-textSecondary text-sm mb-2"  
      >  
        Anthropic API Key  
      </label>  
      <input  
        type="password"  
        id="api-key"  
        value={apiKey}  
        onChange={handleChange}  
        placeholder="sk-..."  
        className="w-full px-3 py-2 bg-bolt-elements-background-depth-1  
                   border border-bolt-elements-borderColor  
                   rounded-md text-bolt-elements-textPrimary  
                   placeholder:text-bolt-elements-textTertiary  
                   focus:outline-none focus:ring-1 focus:ring-bolt-elements-focusRing  
                   transition-all duration-200"  
      />  
    </div>  
  );  
}

This component will allow the user to input and store the API key in localStorage and trigger a custom event when the key is changed.

Chat Screen Modification

Update the chat screen to disable message sending until an API key is entered.
Below is the revised code for bolt.new/app/components/chat/BaseChat.client.tsx, with additions marked between // Append start and // Append end:

export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(  
  (  
    {  
      textareaRef,  
      messageRef,  
      scrollRef,  
      showChat = true,  
      chatStarted = false,  
      isStreaming = false,  
      enhancingPrompt = false,  
      promptEnhanced = false,  
      messages,  
      input = '',  
      sendMessage,  
      handleInputChange,  
      enhancePrompt,  
      handleStop,  
    },  
    ref,  
  ) => {  
    // Append start  
    const [isApiKeyMissing, setIsApiKeyMissing] = useState(true); // Track API key presence  

    useEffect(() => {  
      const checkApiKey = () => {  
        const apiKey = localStorage.getItem('apiKey');  
        console.log('apiKey:', apiKey);  
        setIsApiKeyMissing(!apiKey);  
      };  

      // Initial check  
      checkApiKey();  

      // Add listener for API key changes  
      window.addEventListener('apiKeyChanged', checkApiKey);  

      return () => {  
        window.removeEventListener('apiKeyChanged', checkApiKey);  
      };  
    }, []);  
    // Append end  

    const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;  

    return (  
      <div  
        ref={ref}  
        className={classNames(  
          styles.BaseChat,  
          'relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1',  
        )}  
        data-chat-visible={showChat}  
      >  
        <ClientOnly>{() => <Menu />}</ClientOnly>  
        <div ref={scrollRef} className="flex overflow-y-auto w-full h-full">  
          <div className={classNames(styles.Chat, 'flex flex-col flex-grow min-w-[var(--chat-min-width)] h-full')}>  
            {!chatStarted && (  
              <div id="intro" className="mt-[26vh] max-w-chat mx-auto">  
                <h1 className="text-5xl text-center font-bold text-bolt-elements-textPrimary mb-2">  
                  Where ideas begin  
                </h1>  
                <p className="mb-4 text-center text-bolt-elements-textSecondary">  
                  Bring ideas to life in seconds or get help on existing projects.  
                </p>  
              </div>  
            )}  
            <div  
              className={classNames('pt-6 px-6', {  
                'h-full flex flex-col': chatStarted,  
              })}  
            >  
              <ClientOnly>  
                {() => {  
                  return chatStarted ? (  
                    <Messages  
                      ref={messageRef}  
                      className="flex flex-col w-full flex-1 max-w-chat px-4 pb-6 mx-auto z-1"  
                      messages={messages}  
                      isStreaming={isStreaming}  
                    />  
                  ) : null;  
                }}  
              </ClientOnly>  
              <div  
                className={classNames('relative w-full max-w-chat mx-auto z-prompt', {  
                  'sticky bottom-0': chatStarted,  
                })}  
              >  
                <div  
                  className={classNames(  
                    'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',  
                  )}  
                >  
                  {/* Append start */}  
                  {isApiKeyMissing && (  
                    <div className="px-4 py-2 bg-red-500/10 text-red-400 text-sm">  
                      Please Specify the Anthropic API Key in the Sidebar.  
                    </div>  
                  )}  
                  {/* Append end */}  
                  <textarea  
                    ref={textareaRef}  
                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent ${isApiKeyMissing ? 'cursor-not-allowed opacity-50' : ''}`}  
                    onKeyDown={(event) => {  
                      if (event.key === 'Enter') {  
                        if (event.shiftKey) {  
                          return;  
                        }  

                        event.preventDefault();  

                        sendMessage?.(event);  
                      }  
                    }}  
                    value={input}  
                    onChange={(event) => {  
                      handleInputChange?.(event);  
                    }}  
                    style={{  
                      minHeight: TEXTAREA_MIN_HEIGHT,  
                      maxHeight: TEXTAREA_MAX_HEIGHT,  
                    }}  
                    placeholder="How can Bolt help you today?"  
                    translate="no"  
                    // Append start  
                    disabled={isApiKeyMissing}  
                    // Append end  
                  />  
...

This ensures that users cannot send messages until they enter an API key, with clear visual feedback provided.

Passing the API Key to the LLM

To ensure the API key entered on the interface is accessible to the LLM, update the file bolt.new/app/lib/.server/llm/api-key.ts as follows:

import { env } from 'node:process';

export function getAPIKey(cloudflareEnv: Env) {  
  // Append start  
  const localApiKey = typeof window !== 'undefined' ? localStorage.getItem('apiKey') : null;  
  return localApiKey || env.ANTHROPIC_API_KEY || cloudflareEnv.ANTHROPIC_API_KEY;  
  // Append end  
}

This ensures that the system prioritizes the API key entered via the UI (localApiKey). If no key is found in localStorage, it will fall back to environment variables (env.ANTHROPIC_API_KEY or cloudflareEnv.ANTHROPIC_API_KEY).

Testing the Implementation

After completing the modifications, use the following commands to build and start bolt.new:

pnpm run build  
pnpm run start

Steps for Verification

  1. Launch the application in the browser
    Confirm that before entering an API key, the message input is disabled, and a warning is displayed.

  2. Enter the API key
    Use the sidebar form to input the API key.

  3. Verify that messages can be sent
    After entering the API key, confirm that the message input is enabled and messages can be sent successfully.

These steps ensure that the functionality behaves as intended after the modifications.

コメント

コメントを投稿

このブログの人気の投稿

OpenAI Realtime API Python Code: Understanding the Low-Level Sample Code for Azure's Realtime Audio Python Code

イメージ
OpenAI Realtime API Python Code: Understanding the Low-Level Sample Code for Azure's Realtime Audio Python Code Introduction The “gpt-4o-realtime-preview” has been released. In addition to text and audio input/output, it also allows custom function calling via function calling. As of October 2, 2024, there are issues such as 403 errors, and it seems the API is not usable. This article will be updated once it becomes available. OpenAI has provided a JavaScript code sample on its website. Additionally, Azure has also published a Python code sample on GitHub. In this article, we will analyze Azure’s sample code, “ low_level_sample.py ,” to understand how it works. Libraries The required libraries are as follows: python-dotenv soundfile numpy scipy Code Explanation main Function In the main function, it first loads the dotenv file to retrieve the API key and endpoint: load_dotenv ( ) Next, it checks the arguments. This file is executed
続きを読む

OpnAI Realtime API: Conversing via Local Microphone and Speaker

イメージ
Conversing via Local Microphone and Speaker using Realtime API Several code samples using the Realtime API provided by OpenAI and Azure are available online. However, Python code is only available on Azure’s GitHub, and it assumes the use of an audio file as input. Therefore, I modified the code to accept real-time audio input from the local microphone using Python. The modified version is available on GitHub . Since the code is simple and concise, it should be easy to integrate into other projects. The original code is based on low_level_sample.py , and a detailed explanation is available in this article , which you can refer to. About the Modifications This article explains how to modify a Python application that processes audio to accept input from the local microphone and output audio data returned by the Realtime API through the local speaker. The implementation mainly uses the pyaudio library. The modifications consist of the following two points:
続きを読む

Prompt Caching: Comparing OpenAI, Anthropic, and Gemini

イメージ
Comparing Prompt Caching: OpenAI, Anthropic, and Gemini In recent years, the rapid development of large language models (LLMs) has led to significant increases in context window sizes. A context window refers to the amount of information a model can process at one time, and innovations like Retrieval-Augmented Generation (RAG), video, and image inputs have expanded the usable context length in LLMs. This evolution is aimed at handling more complex tasks and a wider range of information. In response, major providers have introduced “prompt caching” for efficient prompt management. Prompt caching stores previously used prompts and their results for reuse, avoiding repeated processing of the same tasks. This leads to faster processing times and cost savings. In this article, we will compare the prompt caching features of the key LLM providers: OpenAI, Anthropic, and Gemini, focusing on their specifications and differences. Models Supporting Prompt Caching Promp
続きを読む