mokkenstorm.dev
fork of hey-api/openapi-ts because I need some additional things
1import './App.css';
2
3import * as Form from '@radix-ui/react-form';
4import { PlusIcon } from '@radix-ui/react-icons';
5import {
6 Box,
7 Button,
8 Container,
9 Flex,
10 Heading,
11 Section,
12 TextField,
13} from '@radix-ui/themes';
14import OpenAI from 'openai';
15import { useState } from 'react';
16
17import { client as baseClient } from './client/client.gen';
18import { OpenAi } from './client/sdk.gen';
19
20const sdk = new OpenAI({
21 apiKey: import.meta.env.VITE_OPENAI_API_KEY,
22 dangerouslyAllowBrowser: true,
23});
24
25baseClient.setConfig({
26 auth() {
27 return import.meta.env.VITE_OPENAI_API_KEY;
28 },
29});
30
31const client = new OpenAi({
32 client: baseClient,
33});
34
35function App() {
36 const [isRequiredNameError] = useState(false);
37
38 const onCreateResponse = async (values: FormData) => {
39 const stream = await sdk.responses.create({
40 input: values.get('input') as string,
41 model: 'gpt-5-nano',
42 stream: true,
43 });
44
45 for await (const event of stream) {
46 console.log(event);
47 }
48
49 const { data, error } = await client.createResponse({
50 body: {
51 input: values.get('input') as string,
52 model: 'gpt-5-nano',
53 stream: true,
54 },
55 });
56 if (error) {
57 console.log(error);
58 return;
59 }
60 console.log(data?.output);
61 };
62
63 return (
64 <Box
65 style={{ background: 'var(--gray-a2)', borderRadius: 'var(--radius-3)' }}
66 >
67 <Container size="1">
68 <Section size="1" />
69 <Flex align="center">
70 <a className="shrink-0" href="https://heyapi.dev/" target="_blank">
71 <img
72 src="https://heyapi.dev/assets/raw/logo.png"
73 className="h-16 w-16 transition duration-300 will-change-auto"
74 alt="Hey API logo"
75 />
76 </a>
77 <Heading>@hey-api/openapi-ts 🤝 OpenAI</Heading>
78 </Flex>
79 <Section size="1" />
80 <Flex direction="column" gapY="2">
81 <Form.Root
82 className="w-[400px]"
83 onSubmit={(event) => {
84 event.preventDefault();
85 onCreateResponse(new FormData(event.currentTarget));
86 }}
87 >
88 <Form.Field className="grid mb-[10px]" name="input">
89 <div className="flex items-baseline justify-between">
90 <Form.Label className="text-[15px] font-medium leading-[35px] text-white">
91 Input
92 </Form.Label>
93 {isRequiredNameError && (
94 <Form.Message className="text-[13px] text-white opacity-[0.8]">
95 Please enter a name
96 </Form.Message>
97 )}
98 <Form.Message
99 className="text-[13px] text-white opacity-[0.8]"
100 match="valueMissing"
101 >
102 Please enter an input
103 </Form.Message>
104 </div>
105 <Form.Control asChild>
106 <TextField.Root
107 placeholder="Write a one-sentence bedtime story about a unicorn."
108 name="input"
109 type="text"
110 required
111 />
112 </Form.Control>
113 </Form.Field>
114 <Flex gapX="2">
115 <Form.Submit asChild>
116 <Button type="submit">
117 <PlusIcon /> Create Response
118 </Button>
119 </Form.Submit>
120 {/* <Button onClick={onUpdatePet} type="button">
121 <ReloadIcon /> Update Pet
122 </Button> */}
123 </Flex>
124 </Form.Root>
125 </Flex>
126 <Section size="1" />
127 </Container>
128 </Box>
129 );
130}
131
132export default App;