Merge pull request #669 from siddharthsambharia-portkey/main

Add Vercel Cookbook

Author: VisargD

cookbook/integrations/vercel/app/api/chat/route.ts

@@ -0,0 +1,12 @@
+import { streamText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+
+export async function POST(request: Request) {
+  const { messages } = await request.json();
+  const stream = await streamText({
+    model: openai('gpt-4o'),
+    system: 'You are a helpful assistant.',
+    messages,
+  });
+  return stream.toAIStreamResponse();
+}

cookbook/integrations/vercel/app/examples/basic-chatbot/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { useChat } from 'ai/react';
+
+export default function Chat() {
+  const { messages, input, handleInputChange, handleSubmit } = useChat();
+  return (
+    <div>
+      {messages.map((m) => (
+        <div key={m.id}>
+          {m.role === 'user' ? 'User: ' : 'AI: '}
+          {m.content}
+        </div>
+      ))}
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          placeholder="Say something..."
+          onChange={handleInputChange}
+        />
+      </form>
+    </div>
+  );
+}

cookbook/integrations/vercel/app/examples/generate-text/action.ts

@@ -0,0 +1,22 @@
+'use server';
+
+import { generateText } from 'ai';
+import { createPortkey } from '@portkey-ai/vercel-provider';
+
+export const generateTextAction = async () => {
+  const llmClient = createPortkey({
+    apiKey: 'PORTKEY_API_KEY',
+    virtualKey: 'YOUR_OPENAI_VIRTUAL_KEY', //head over to https://app.portkey.ai to create Virtual key
+
+    //Portkey's config allows you to use- loadbalance, fallback, retires, timeouts, semantic caching, conditional routing, guardrails,etc. Head over to portkey docs to learn more
+  });
+
+  // Learn more at docs.portkey.ai
+
+  const result = await generateText({
+    model: llmClient.completionModel('gpt-3.5-turbo'), //choose model of choice
+    prompt: 'tell me a joke',
+  });
+
+  return result.text;
+};

cookbook/integrations/vercel/app/examples/generate-text/conditional-routing.ts

@@ -0,0 +1,56 @@
+'use server';
+
+import { generateText } from 'ai';
+import { createPortkey } from '@portkey-ai/vercel-provider';
+
+export const generateTextAction = async () => {
+  // Conditional routing config
+  const portkey_config = {
+    strategy: {
+      mode: 'conditional',
+      conditions: [
+        {
+          query: { 'metadata.user_plan': { $eq: 'paid' } },
+          then: 'anthropic-claude',
+        },
+        {
+          query: { 'metadata.user_plan': { $eq: 'free' } },
+          then: 'openai-gpt-4',
+        },
+      ],
+      default: 'openai-gpt-4',
+    },
+    targets: [
+      {
+        name: 'anthropic-claude',
+        provider: 'anthropic',
+        api_key: 'YOUR_ANTHROPIC_API_KEY',
+        override_params: {
+          model: 'claude-3-5-sonnet-20240620',
+        },
+      },
+      {
+        name: 'openai-gpt-4',
+        provider: 'openai',
+        api_key: 'YOUR_OPENAI_API_KEY',
+        override_params: {
+          model: 'gpt-4o',
+        },
+      },
+    ],
+  };
+
+  const llmClient = createPortkey({
+    apiKey: 'PORTKEY_API_KEY',
+    config: portkey_config,
+    //Portkey's config allows you to use- loadbalance, fallback, retires, timeouts, semantic caching, conditional routing, guardrails,etc. Head over to portkey docs to learn more
+    //we are using API keys inside config, that's why no virtual keys needed
+  });
+
+  const result = await generateText({
+    model: llmClient.completionModel('gpt-3.5-turbo'), //choose model of choice
+    prompt: 'tell me a joke',
+  });
+
+  return result.text;
+};

cookbook/integrations/vercel/app/examples/generate-text/fallback.ts

@@ -0,0 +1,45 @@
+'use server';
+
+import { generateText } from 'ai';
+import { createPortkey } from '@portkey-ai/vercel-provider';
+
+export const generateTextAction = async () => {
+  // Fallback config
+  const portkey_config = {
+    strategy: {
+      mode: 'fallback',
+    },
+    targets: [
+      {
+        provider: 'anthropic',
+        api_key: 'YOUR_ANTHROPIC_API_KEY',
+        override_params: {
+          model: 'claude-3-5-sonnet-20240620',
+        },
+      },
+      {
+        provider: 'openai',
+        api_key: 'YOUR_OPENAI_API_KEY',
+        override_params: {
+          model: 'gpt-4o',
+        },
+      },
+    ],
+  };
+
+  const llmClient = createPortkey({
+    apiKey: 'PORTKEY_API_KEY',
+    config: portkey_config,
+    //Portkey's config allows you to use- loadbalance, fallback, retires, timeouts, semantic caching, conditional routing, guardrails,etc. Head over to portkey docs to learn more
+    //we are using API keys inside config, that's why no virtual keys needed
+  });
+
+  // Learn more at docs.portkey.ai
+
+  const result = await generateText({
+    model: llmClient.completionModel('gpt-3.5-turbo'), //choose model of choice
+    prompt: 'tell me a joke',
+  });
+
+  return result.text;
+};

cookbook/integrations/vercel/app/examples/generate-text/guardrails.ts

@@ -0,0 +1,42 @@
+'use server';
+
+import { generateText } from 'ai';
+import { createPortkey } from '@portkey-ai/vercel-provider';
+
+export const generateTextAction = async () => {
+  const portkey_config = {
+    retry: {
+      attempts: 3,
+    },
+    cache: {
+      mode: 'simple',
+    },
+    virtual_key: 'openai-xxx',
+    before_request_hooks: [
+      {
+        id: 'input-guardrail-id-xx',
+      },
+    ],
+    after_request_hooks: [
+      {
+        id: 'output-guardrail-id-xx',
+      },
+    ],
+  };
+
+  const llmClient = createPortkey({
+    apiKey: 'PORTKEY_API_KEY',
+    config: portkey_config,
+    //Portkey's config allows you to use- loadbalance, fallback, retires, timeouts, semantic caching, conditional routing, guardrails,etc. Head over to portkey docs to learn more
+    //we are using API keys inside config, that's why no virtual keys needed
+  });
+
+  // Learn more at docs.portkey.ai
+
+  const result = await generateText({
+    model: llmClient.completionModel('gpt-3.5-turbo'), //choose model of choice
+    prompt: 'tell me a joke',
+  });
+
+  return result.text;
+};

cookbook/integrations/vercel/app/examples/generate-text/load-balance.ts

@@ -0,0 +1,47 @@
+'use server';
+
+import { generateText } from 'ai';
+import { createPortkey } from '@portkey-ai/vercel-provider';
+
+export const generateTextAction = async () => {
+  // Fallback config
+  const portkey_config = {
+    strategy: {
+      mode: 'loadbalance',
+    },
+    targets: [
+      {
+        provider: 'anthropic',
+        api_key: 'YOUR_ANTHROPIC_API_KEY',
+        override_params: {
+          model: 'claude-3-5-sonnet-20240620',
+        },
+        weight: 0.25,
+      },
+      {
+        provider: 'openai',
+        api_key: 'YOUR_OPENAI_API_KEY',
+        override_params: {
+          model: 'gpt-4o',
+        },
+        weight: 0.75,
+      },
+    ],
+  };
+
+  const llmClient = createPortkey({
+    apiKey: 'PORTKEY_API_KEY',
+    config: portkey_config,
+    //Portkey's config allows you to use- loadbalance, fallback, retires, timeouts, semantic caching, conditional routing, guardrails,etc. Head over to portkey docs to learn more
+    //we are using API keys inside config, that's why no virtual keys needed
+  });
+
+  // Learn more at docs.portkey.ai
+
+  const result = await generateText({
+    model: llmClient.completionModel('gpt-3.5-turbo'), //choose model of choice
+    prompt: 'tell me a joke',
+  });
+
+  return result.text;
+};

cookbook/integrations/vercel/app/examples/generate-text/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { generateTextAction } from './action';
+import { useState } from 'react';
+
+export default function Page() {
+  const [generation, setGeneration] = useState('');
+  return (
+    <div className="space-y-4">
+      <h1 className="text-xl font-semibold">Generate Text Example</h1>
+      <Button
+        onClick={async () => {
+          const result = await generateTextAction();
+          setGeneration(result);
+        }}
+      >
+        Tell me a joke
+      </Button>
+      <pre>{JSON.stringify(generation, null, 2)}</pre>
+    </div>
+  );
+}

cookbook/integrations/vercel/app/examples/generate-ui-streamui/action.tsx

@@ -0,0 +1,77 @@
+'use server';
+
+import { createAI, getMutableAIState, streamUI } from 'ai/rsc';
+import { openai } from '@ai-sdk/openai';
+import { ReactNode } from 'react';
+import { z } from 'zod';
+import { nanoid } from 'nanoid';
+import { JokeComponent } from './joke-component';
+import { generateObject } from 'ai';
+import { jokeSchema } from './joke';
+
+export interface ServerMessage {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export interface ClientMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  display: ReactNode;
+}
+
+export async function continueConversation(
+  input: string
+): Promise<ClientMessage> {
+  'use server';
+
+  const history = getMutableAIState();
+
+  const result = await streamUI({
+    model: openai('gpt-4o'),
+    messages: [...history.get(), { role: 'user', content: input }],
+    text: ({ content, done }) => {
+      if (done) {
+        history.done((messages: ServerMessage[]) => [
+          ...messages,
+          { role: 'assistant', content },
+        ]);
+      }
+
+      return <div>{content}</div>;
+    },
+    tools: {
+      tellAJoke: {
+        description: 'Tell a joke',
+        parameters: z.object({
+          location: z.string().describe('the users location'),
+        }),
+        generate: async function* ({ location }) {
+          yield <div>loading...</div>;
+          const joke = await generateObject({
+            model: openai('gpt-4o'),
+            schema: jokeSchema,
+            prompt:
+              'Generate a joke that incorporates the following location:' +
+              location,
+          });
+          return <JokeComponent joke={joke.object} />;
+        },
+      },
+    },
+  });
+
+  return {
+    id: nanoid(),
+    role: 'assistant',
+    display: result.value,
+  };
+}
+
+export const AI = createAI<ServerMessage[], ClientMessage[]>({
+  actions: {
+    continueConversation,
+  },
+  initialAIState: [],
+  initialUIState: [],
+});

cookbook/integrations/vercel/app/examples/generate-ui-streamui/joke-component.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Joke } from './joke';
+
+export const JokeComponent = ({ joke }: { joke?: Joke }) => {
+  const [showPunchline, setShowPunchline] = useState(false);
+  return (
+    <div className="bg-neutral-100 p-4 rounded-md m-4 max-w-prose flex items-center justify-between">
+      <p>{showPunchline ? joke?.punchline : joke?.setup}</p>
+      <Button
+        onClick={() => setShowPunchline(true)}
+        disabled={showPunchline}
+        variant="outline"
+      >
+        Show Punchline!
+      </Button>
+    </div>
+  );
+};

cookbook/integrations/vercel/app/examples/generate-ui-streamui/joke.ts

@@ -0,0 +1,9 @@
+import { DeepPartial } from 'ai';
+import { z } from 'zod';
+
+export const jokeSchema = z.object({
+  setup: z.string().describe('the setup of the joke'),
+  punchline: z.string().describe('the punchline of the joke'),
+});
+
+export type Joke = DeepPartial<typeof jokeSchema>;