Easy link with openrouter #951

Author: Polleps

browser/data-browser/src/components/AI/AISettings.tsx

@@ -1,18 +1,21 @@
 import * as React from 'react';
-import { Column } from '../Row';
+import { Column, Row } from '../Row';
 import { Checkbox, CheckboxLabel } from '../forms/Checkbox';
 import { InputStyled, InputWrapper } from '../forms/InputStyles';
 import { MCPServersManager } from '../MCPServersManager';
 import styled from 'styled-components';
 import { transition } from '../../helpers/transition';
 import { useSettings } from '../../helpers/AppSettings';
 import { useEffect, useState } from 'react';
+import { OpenRouterLoginButton } from './OpenRouterLoginButton';
 
 interface CreditUsage {
   total: number;
   used: number;
 }
 
+const CREDITS_ENDPOINT = 'https://openrouter.ai/api/v1/credits';
+
 const AISettings: React.FC = () => {
   const {
     enableAI,
@@ -29,10 +32,12 @@ const AISettings: React.FC = () => {
 
   useEffect(() => {
     if (!openRouterApiKey) {
+      setCreditUsage(undefined);
+
       return;
     }
 
-    fetch('https://openrouter.ai/api/v1/credits', {
+    fetch(CREDITS_ENDPOINT, {
       headers: {
         Authorization: `Bearer ${openRouterApiKey}`,
       },
@@ -57,20 +62,40 @@ const AISettings: React.FC = () => {
         <label htmlFor='openrouter-api-key'>
           <Column gap='0.5rem'>
             OpenRouter API Key
-            <InputWrapper>
-              <InputStyled
-                id='openrouter-api-key'
-                type='password'
-                value={openRouterApiKey || ''}
-                onChange={e => setOpenRouterApiKey(e.target.value || undefined)}
-                placeholder='Enter your OpenRouter API key'
-              />
-            </InputWrapper>
+            <Row center>
+              {!openRouterApiKey && (
+                <>
+                  <OpenRouterLoginButton />
+                  or
+                </>
+              )}
+              <InputWrapper>
+                <InputStyled
+                  id='openrouter-api-key'
+                  type='password'
+                  value={openRouterApiKey || ''}
+                  onChange={e =>
+                    setOpenRouterApiKey(e.target.value || undefined)
+                  }
+                  placeholder='Enter your OpenRouter API key'
+                />
+              </InputWrapper>
+            </Row>
             {creditUsage && (
               <CreditUsage>
                 Credits used: {creditUsage.used} / Total: {creditUsage.total}
               </CreditUsage>
             )}
+            {!openRouterApiKey && (
+              <CreditUsage>
+                <p>
+                  OpenRouter provides a unified API that gives you access to
+                  hundreds of AI models from all major vendors, while
+                  automatically handling fallbacks and selecting the most
+                  cost-effective options.
+                </p>
+              </CreditUsage>
+            )}
           </Column>
         </label>
         <CheckboxLabel>

browser/data-browser/src/components/AI/OpenRouterLoginButton.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { ButtonLink } from '../ButtonLink';
+import { paths } from '../../routes/paths';
+
+const TEXT = 'Login with OpenRouter';
+const AUTH_ENDPOINT = 'https://openrouter.ai/auth';
+
+async function createSHA256CodeChallenge(input: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(input);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+
+  // Convert ArrayBuffer to base64url string
+  const byteArray = new Uint8Array(hashBuffer);
+  const base64String = btoa(String.fromCharCode(...byteArray));
+
+  // Convert base64 to base64url
+  return base64String
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '');
+}
+
+const buildUrl = (challenge: string) => {
+  const url = new URL(AUTH_ENDPOINT);
+
+  url.searchParams.set(
+    'callback_url',
+    `${location.origin}${paths.linkOpenRouter}`,
+  );
+  url.searchParams.set('code_challenge', challenge);
+  url.searchParams.set('code_challenge_method', 'S256');
+
+  return url.toString();
+};
+
+export const OpenRouterLoginButton = () => {
+  const [challenge, setChallenge] = useState<string | null>(null);
+
+  useEffect(() => {
+    const randomString = crypto.randomUUID();
+    createSHA256CodeChallenge(randomString).then(generatedChallenge => {
+      setChallenge(generatedChallenge);
+      sessionStorage.setItem(
+        'atomic.ai.openrouter-code-verifier',
+        randomString,
+      );
+    });
+  }, []);
+
+  if (!challenge) {
+    return <ButtonLink href='#'>{TEXT}</ButtonLink>;
+  }
+
+  return <ButtonLink href={buildUrl(challenge)}>{TEXT}</ButtonLink>;
+};

browser/data-browser/src/helpers/AppSettings.tsx

@@ -32,7 +32,7 @@ export const AppSettingsContextProvider = (
   );
   const [openRouterApiKey, setOpenRouterApiKey] = useLocalStorage<
     string | undefined
-  >('openRouterApiKey', undefined);
+  >('atomic.ai.openrouter-api-key', undefined);
   const [mcpServers, setMcpServers] = useLocalStorage<MCPServer[]>(
     'atomic.ai.mcpServers',
     [],

browser/data-browser/src/routes/LinkOpenRouter.tsx

@@ -0,0 +1,91 @@
+import { createRoute } from '@tanstack/react-router';
+import { pathNames, paths } from './paths';
+import { appRoute } from './RootRoutes';
+import { useEffect, useState } from 'react';
+import { useNavigateWithTransition } from '../hooks/useNavigateWithTransition';
+import styled from 'styled-components';
+import { useSettings } from '../helpers/AppSettings';
+
+export type LinkOpenRouterSearch = {
+  code: string;
+};
+
+const ENDPOINT = 'https://openrouter.ai/api/v1/auth/keys';
+
+export const LinkOpenRouter = createRoute({
+  path: pathNames.linkOpenRouter,
+  component: () => <LinkOpenRouterPage />,
+  getParentRoute: () => appRoute,
+  validateSearch: (search): LinkOpenRouterSearch => ({
+    code: (search.code as string) ?? '',
+  }),
+});
+
+function LinkOpenRouterPage() {
+  const [error, setError] = useState<string>();
+  const { setOpenRouterApiKey } = useSettings();
+  const { code } = LinkOpenRouter.useSearch();
+  const navigate = useNavigateWithTransition();
+
+  useEffect(() => {
+    const codeVerifier = sessionStorage.getItem(
+      'atomic.ai.openrouter-code-verifier',
+    );
+
+    if (!codeVerifier) {
+      setError('No code verifier found');
+
+      return;
+    }
+
+    fetch(ENDPOINT, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        code: code,
+        code_verifier: codeVerifier,
+        code_challenge_method: 'S256',
+      }),
+    })
+      .then(res => res.json())
+      .then(({ key }) => {
+        setOpenRouterApiKey(key);
+        sessionStorage.removeItem('atomic.ai.openrouter-code-verifier');
+        sessionStorage.removeItem('atomic.ai.openrouter-code-challenge');
+
+        navigate({ to: paths.appSettings });
+      })
+      .catch(err => {
+        setError(err.message);
+      });
+  }, [code]);
+
+  if (error) {
+    return (
+      <Center>
+        <div>
+          <h1>Error</h1>
+          <p>{error}</p>
+        </div>
+      </Center>
+    );
+  }
+
+  return (
+    <Center>
+      <div>
+        <h1>Linking OpenRouter</h1>
+        <p>Please wait while we link your OpenRouter account...</p>
+      </div>
+    </Center>
+  );
+}
+
+const Center = styled.div`
+  display: grid;
+  height: 100%;
+  width: 100%;
+  place-items: center;
+`;

browser/data-browser/src/routes/Router.tsx

@@ -17,6 +17,7 @@ import { rootRoute, topRoute, appRoute } from './RootRoutes';
 import { unavailableLazyRoute } from './UnavailableLazyRoute';
 import { ImportRoute } from './ImportRoute';
 import { HistoryRoute } from './History/HistoryRoute';
+import { LinkOpenRouter } from './LinkOpenRouter';
 
 const PruneTestsRoute = createRoute({
   getParentRoute: () => appRoute,
@@ -58,6 +59,7 @@ const routeTree = rootRoute.addChildren({
     NewRoute,
     PruneTestsRoute,
     SandboxRoute,
+    LinkOpenRouter,
   }),
   topRoute,
 });

browser/data-browser/src/routes/paths.tsx

@@ -20,6 +20,7 @@ export const pathNames = {
   sandbox: '/sandbox',
   fetchBookmark: '/fetch-bookmark',
   pruneTests: '/prunetests',
+  linkOpenRouter: '/link-openrouter',
 } as const;
 export const paths = {
   agentSettings: `${pathNames.app}${pathNames.agentSettings}`,
@@ -40,4 +41,5 @@ export const paths = {
   sandbox: `${pathNames.app}${pathNames.sandbox}`,
   fetchBookmark: pathNames.fetchBookmark,
   pruneTests: `${pathNames.app}${pathNames.pruneTests}`,
+  linkOpenRouter: `${pathNames.app}${pathNames.linkOpenRouter}`,
 } as const;