Skip to content

Commit d57e3ee

Browse files
authored
Adding AI navigation (#8102)
1 parent c6932be commit d57e3ee

File tree

3 files changed

+313
-0
lines changed

3 files changed

+313
-0
lines changed

Diff for: src/directory/directory.mjs

+54
Original file line numberDiff line numberDiff line change
@@ -721,6 +721,60 @@ export const directory = {
721721
}
722722
]
723723
},
724+
{
725+
path: 'src/pages/[platform]/ai/index.mdx',
726+
children: [
727+
{
728+
path: 'src/pages/[platform]/ai/set-up-ai/index.mdx'
729+
},
730+
{
731+
path: 'src/pages/[platform]/ai/concepts/index.mdx',
732+
children: [
733+
{
734+
path: 'src/pages/[platform]/ai/concepts/architecture/index.mdx'
735+
},
736+
{
737+
path: 'src/pages/[platform]/ai/concepts/models/index.mdx'
738+
},
739+
{
740+
path: 'src/pages/[platform]/ai/concepts/prompting/index.mdx'
741+
},
742+
{
743+
path: 'src/pages/[platform]/ai/concepts/inference-configuration/index.mdx'
744+
},
745+
{
746+
path: 'src/pages/[platform]/ai/concepts/streaming/index.mdx'
747+
},
748+
{
749+
path: 'src/pages/[platform]/ai/concepts/tools/index.mdx'
750+
}
751+
]
752+
},
753+
{
754+
path: 'src/pages/[platform]/ai/conversation/index.mdx',
755+
children: [
756+
{
757+
path: 'src/pages/[platform]/ai/conversation/history/index.mdx'
758+
},
759+
{
760+
path: 'src/pages/[platform]/ai/conversation/tools/index.mdx'
761+
},
762+
{
763+
path: 'src/pages/[platform]/ai/conversation/context/index.mdx'
764+
},
765+
{
766+
path: 'src/pages/[platform]/ai/conversation/response-components/index.mdx'
767+
},
768+
{
769+
path: 'src/pages/[platform]/ai/conversation/knowledge-base/index.mdx'
770+
}
771+
]
772+
},
773+
{
774+
path: 'src/pages/[platform]/ai/generation/index.mdx'
775+
}
776+
]
777+
},
724778
{
725779
path: 'src/pages/[platform]/build-ui/index.mdx',
726780
children: [

Diff for: src/pages/[platform]/ai/generation/index.mdx

+227
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
import { getCustomStaticPath } from "@/utils/getCustomStaticPath";
2+
3+
export const meta = {
4+
title: "Generation",
5+
description:
6+
"Learn how to use AI to generate data for your application.",
7+
platforms: [
8+
"javascript",
9+
"react-native",
10+
"angular",
11+
"nextjs",
12+
"react",
13+
"vue",
14+
],
15+
};
16+
17+
export const getStaticPaths = async () => {
18+
return getCustomStaticPath(meta.platforms);
19+
};
20+
21+
export function getStaticProps(context) {
22+
return {
23+
props: {
24+
platform: context.params.platform,
25+
meta,
26+
},
27+
};
28+
}
29+
30+
31+
32+
33+
AI generation routes are a request-response API used to generate structured output from AI models. Examples of generation routes include:
34+
- generated structured data from unstructured input
35+
- summarization
36+
37+
Under the hood, a generation route is an AWS AppSync query that ensures the AI model responds with the response type defined for the route.
38+
39+
## Generate Typed Objects
40+
41+
```ts title="Schema Definition"
42+
const schema = a.schema({
43+
generateRecipe: a.generation({
44+
aiModel: a.ai.model('Claude 3 Haiku'),
45+
systemPrompt: 'You are a helpful assistant that generates recipes.',
46+
})
47+
.arguments({ description: a.string() })
48+
.returns(
49+
a.customType({
50+
name: a.string(),
51+
ingredients: a.string().array(),
52+
instructions: a.string(),
53+
})
54+
)
55+
.authorization((allow) => allow.authenticated())
56+
});
57+
```
58+
59+
<InlineFilter filters={["javascript","angular","vue"]}>
60+
61+
```ts title="Data Client Request"
62+
const description = 'I would like to bake a birthday cake for my friend. She has celiac disease and loves chocolate.'
63+
const { data, errors } = await client.generations
64+
.generateRecipe({ description })
65+
66+
/**
67+
Example response:
68+
{
69+
"name": "Gluten-Free Chocolate Birthday Cake",
70+
"ingredients": [
71+
"gluten-free all-purpose flour",
72+
"cocoa powder",
73+
"granulated sugar",
74+
"baking powder",
75+
"baking soda",
76+
"salt",
77+
"eggs",
78+
"milk",
79+
"vegetable oil",
80+
"vanilla extract"
81+
],
82+
"instructions": "1. Preheat oven to 350°F. Grease and flour two 9-inch round baking pans.\n2. In a medium bowl, whisk together the gluten-free flour, cocoa powder, sugar, baking powder, baking soda and salt.\n3. In a separate bowl, beat the eggs. Then add the milk, oil and vanilla and mix well.\n4. Gradually add the wet ingredients to the dry ingredients and mix until just combined. Do not over mix.\n5. Divide the batter evenly between the prepared pans.\n6. Bake for 30-35 minutes, until a toothpick inserted in the center comes out clean.\n7. Allow cakes to cool in pans for 10 minutes, then transfer to a wire rack to cool completely.\n8. Frost with your favorite gluten-free chocolate frosting."
83+
}
84+
*/
85+
```
86+
87+
</InlineFilter>
88+
89+
<InlineFilter filters={['react','react-native','next-js']}>
90+
91+
```tsx
92+
import { generateClient } from "aws-amplify/api";
93+
import { createAIHooks } from "@aws-amplify/ui-react-ai";
94+
import { Schema } from "../amplify/data/resource";
95+
96+
const client = generateClient<Schema>({ authMode: "userPool" });
97+
const { useAIGeneration } = createAIHooks(client);
98+
99+
export default function Example() {
100+
// data is React state and will be populated when the generation is returned
101+
const [{ data, isLoading }, generateRecipe] =
102+
useAIGeneration("generateRecipe");
103+
104+
const generateSummary = async () => {
105+
generateRecipe({
106+
description: 'I would like to bake a birthday cake for my friend. She has celiac disease and loves chocolate.',
107+
});
108+
};
109+
}
110+
```
111+
112+
</InlineFilter>
113+
114+
115+
## Generate Scalar Types
116+
117+
```ts title="Schema Definition"
118+
const schema = ({
119+
summarize: a.generation({
120+
aiModel: a.ai.model('Claude 3 Haiku'),
121+
systemPrompt: 'Provide an accurate, clear, and concise summary of the input provided'
122+
})
123+
.arguments({ input: a.string() })
124+
.returns(a.string())
125+
.authorization((allow) => allow.guest()),
126+
});
127+
```
128+
129+
```ts title="Data Client Request"
130+
const { data: summary, errors } = await client.generations
131+
.summarize({ input })
132+
```
133+
134+
## Setting Inference Parameters
135+
136+
You can influence response generation by setting inference parameters for the AI model.
137+
This ability to control the randomness and diversity of responses is useful for generating responses that are tailored to your needs.
138+
139+
[More information about inference parameters](/[platform]/ai/concepts/inference-configuration).
140+
141+
```ts title="Inference Parameters"
142+
const schema = a.schema({
143+
generateHaiku: a.generation({
144+
aiModel: a.ai.model('Claude 3 Haiku'),
145+
systemPrompt: 'You are a helpful assistant that generates haikus.',
146+
// highlight-start
147+
inferenceConfiguration: {
148+
maxTokens: 1000,
149+
temperature: 0.5,
150+
topP: 0.9,
151+
}
152+
// highlight-end
153+
}),
154+
});
155+
```
156+
157+
## Limitations
158+
159+
### 1. Generation routes do not support referencing models
160+
161+
For example, the following schema defines a `Recipe` model, but this model cannot be used as the return type of a generation route.
162+
163+
```ts title="Invalid Model Reference"
164+
const schema = a.schema({
165+
Recipe: a.model({
166+
name: a.string(),
167+
ingredients: a.string().array(),
168+
instructions: a.string(),
169+
}),
170+
generateRecipe: a.generation({
171+
aiModel: a.ai.model('Claude 3 Haiku'),
172+
systemPrompt: 'You are a helpful assistant that generates recipes.',
173+
})
174+
.arguments({ description: a.string() })
175+
.returns(a.ref('Recipe')) // ❌ Invalid
176+
.authorization((allow) => allow.authenticated()),
177+
});
178+
```
179+
180+
You can, however, reference custom types. Here's an example of a custom type that can be used as the return type of a generation route.
181+
182+
```ts title="Valid Custom Type Reference"
183+
const schema = a.schema({
184+
Recipe: a.customType({
185+
name: a.string(),
186+
ingredients: a.string().array(),
187+
instructions: a.string(),
188+
}),
189+
generateRecipe: a.generation({
190+
aiModel: a.ai.model('Claude 3 Haiku'),
191+
systemPrompt: 'You are a helpful assistant that generates recipes.',
192+
})
193+
.arguments({ description: a.string() })
194+
.returns(a.ref('Recipe')) // ✅ Valid
195+
.authorization((allow) => allow.authenticated()),
196+
});
197+
```
198+
199+
### 2. Generation routes do not support some required types.
200+
201+
The following AppSync scalar types are not supported as **required** fields in response types:
202+
- `AWSEmail`
203+
- `AWSDate`
204+
- `AWSTime`
205+
- `AWSDateTime`
206+
- `AWSTimestamp`
207+
- `AWSPhone`
208+
- `AWSURL`
209+
- `AWSIPAddress`
210+
211+
```ts title="Unsupported Required Type"
212+
const schema = a.schema({
213+
generateUser: a.generation({
214+
aiModel: a.ai.model('Claude 3 Haiku'),
215+
systemPrompt: 'You are a helpful assistant that generates users.',
216+
})
217+
.arguments({ description: a.string() })
218+
.returns(
219+
a.customType({
220+
name: a.string(),
221+
email: a.email().required(), // ❌ Required field with unsupported type
222+
dateOfBirth: a.date().required(), // ❌ Required field with unsupported type
223+
})
224+
)
225+
.authorization((allow) => allow.authenticated()),
226+
});
227+

Diff for: src/pages/[platform]/ai/index.mdx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { getChildPageNodes } from '@/utils/getChildPageNodes';
2+
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
3+
4+
export const meta = {
5+
title: 'AI kit',
6+
description: 'The quickest way for fullstack developers to build web apps with AI capabilities such as chat, conversational search, and summarization',
7+
route: '/[platform]/ai',
8+
platforms: [
9+
'angular',
10+
'javascript',
11+
'nextjs',
12+
'react',
13+
'react-native',
14+
'vue'
15+
]
16+
};
17+
18+
export const getStaticPaths = async () => {
19+
return getCustomStaticPath(meta.platforms);
20+
};
21+
22+
export function getStaticProps(context) {
23+
const childPageNodes = getChildPageNodes(meta.route);
24+
return {
25+
props: {
26+
meta,
27+
childPageNodes
28+
}
29+
};
30+
}
31+
32+
<Overview childPageNodes={props.childPageNodes} />

0 commit comments

Comments
 (0)