Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: updating examples on the home page #292

Merged
merged 5 commits into from
Feb 20, 2025
Merged

docs: updating examples on the home page #292

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
15e68b7
docs: updating examples on the home page
dereklegenzoff Feb 20, 2025
9c279a4
simplifying example
dereklegenzoff Feb 20, 2025
c88ca97
moving up grok config
dereklegenzoff Feb 20, 2025
34dd77e
reducing top margin a bit
dereklegenzoff Feb 20, 2025
38d63a0
using research in prompt
dereklegenzoff Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
238 changes: 127 additions & 111 deletions website/home/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,126 +22,143 @@ export default function Home() {
const activeExample = hoveredExample ?? committedExample;

const examples: Record<ExampleType, string> = {
components: `import { Component } from 'gensx';
import { OpenAIChatCompletion, OpenAIChatCompletionProps } from 'gensx/openai';
components: `import { gsx } from 'gensx';
import { ChatCompletion } from 'gensx/openai';

type WriteBlogDraftProps = {
interface WriteDraftProps {
research: string[];
prompt: string;
}
type WriteBlogDraftOutput = {
draft: string;
}

const WriteBlogDraft = Component("Write Blog Draft",
(props: WriteBlogDraftProps) => {
const blogPrompt = [
{
role: "user",
content: \`Write a blog for the prompt: \${props.prompt}\`,
},
];
return (
<ChatCompletion messages={chatCompletionMessages} />
);
}
);
const WriteDraft = gsx.Component<WriteDraftProps, string>(
"WriteDraft",
({ prompt, research }) => {
const systemMessage = \`You're an expert technical writer.
Use the information when responding to users: \${research}\`;

type RemoveBuzzWordsProps = {
blog: string;
}
type RemoveBuzzWordsOutput = {
blog: string;
}
const RemoveBuzzWords = Component("Remove Buzz Words",
(props: RemoveBuzzWordsProps) => {
const chatCompletionMessages = [
{
role: "user",
content: \`Remove common buzzwords and jargon from this text while preserving the meaning: \${props.draft}\`,
},
];
};
return (
<ChatCompletion messages={chatCompletionMessages} />
<ChatCompletion
model="gpt-4o-mini"
temperature={0}
messages={[
{
role: "system",
content: systemMessage
},
{
role: "user",
content: \`Write a blog post about \${prompt}\`
},
]}
/>
);
}
},
);
`,
workflows: `import { Workflow } from 'gensx';
import { WriteBlog, RemoveBuzzWords } from './write-blog';
workflows: `import { gsx } from 'gensx';
import { OpenAIProvider } from 'gensx/openai';
import { Research, WriteDraft, EditDraft } from './writeBlog';

type BlogWorkflowProps = {
interface BlogWriterProps {
prompt: string;
}
type BlogWorkflowOutput = {
blog: string;
}
const WriteBlogWorkflow = Workflow("Blog Workflow",
(props: BlogWorkflowInput) => (
<WriteBlog prompt={props.prompt}>
{(output: WriteBlogOutput) => (
<RemoveBuzzWords draft={output.blog}>
{(output: RemoveBuzzWordsOutput) => {
return { blog: output.result };
}}
</RemoveBuzzWords>
)}
</WriteBlog>
)
);

Const blogWriter = gsx.Component( <WriteBlog> <next></WriteBlog>

Const blogWritingWorkflow = gsx.Workflow(“name”, BlogWriter)

Const result = blowWritingWorkflow.run({ prompt: “foo” });


const result = WriteBlogWorkflow.run({ prompt: "Write a blog post about AI developer tools." });
`,
agents: `import { Swarm, Agent, Tool } from 'ai-agent-sdk';
export const WriteBlog = gsx.StreamComponent<BlogWriterProps>(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we make this a regular component to simplify things?

"WriteBlog",
({ prompt }) => {
return (
<OpenAIProvider apiKey={process.env.OPENAI_API_KEY}>
<Research prompt={prompt}>
{(research) => (
<WriteDraft prompt={prompt} research={research.flat()}>
{(draft) => <EditDraft draft={draft} stream={true} />}
</WriteDraft>
)}
</Research>
</OpenAIProvider>
);
},
);

// Define a custom tool
const calculator = new Tool({
name: "calculator",
description: "Perform calculations",
function: async (input: string) => {
return eval(input).toString();
}
const workflow = gsx.Workflow("WriteBlogWorkflow", WriteBlog);
const result = await workflow.run({
prompt: "Write a blog post about AI developer tools"
});
`,
agents: `import { gsx } from 'gensx';
import { OpenAIProvider, GSXTool, GSXChatCompletion } from 'gensx/openai';

const agent = new Agent({
name: "Math Helper",
tools: [calculator],
const webSearchTool = new GSXTool({
name: "web_search",
description: "Search the internet for information",
schema: webSearchSchema,
run: async ({ query }: WebSearchParams) => {
return await searchWeb(query);
},
});

const result = await agent.run({
message: "What is 123 * 456?"
});`,
llms: `import { Swarm, Agent } from 'ai-agent-sdk';

// Create an agent with custom behavior
const agent = new Agent({
name: "Custom Agent",
model: "gpt-4",
temperature: 0.7,
maxTokens: 1000,
const WebSearchAgent = gsx.Component<{}, Stream<ChatCompletionChunk>>(
"WebSearchAgent",
() => (
<OpenAIProvider apiKey={process.env.OPENAI_API_KEY}>
<GSXChatCompletion
stream={true}
messages={[
{
role: "system",
content: "You are a sassy, trash eating racoon.",
},
{
role: "user",
content: "Where are the best trash cans near central park?",
},
]}
model="gpt-4o-mini"
temperature={0.7}
tools={[webSearchTool]}
/>
</OpenAIProvider>
),
);`,
llms: `import { ChatCompletion, OpenAIProvider } from "@gensx/openai";
import { gsx } from "gensx";
import { ClientOptions } from "openai";

// Define custom decision making
async decide(context) {
const { message, memory } = context;
const grok3Config = {
clientOptions: {
apiKey: process.env.GROK_API_KEY,
baseURL: "https://api.x.ai/v1",
},
model: "grok-3",
};

// Access agent's memory
const relevantHistory = await memory.search(message);
const DocumentSummarizer = gsx.Component<DocumentSummarizerProps, string>(
"DocumentSummarizer",
({ document, provider }) => (
<OpenAIProvider {...provider.clientOptions}>
<ChatCompletion
model={provider.model}
messages={[
{
role: "user",
content: \`Summarize the document in 30 words: \${document}\`,
},
]}
/>
</OpenAIProvider>
),
);

// Make decisions based on context
if (relevantHistory.length > 0) {
return this.useHistoricalContext(relevantHistory);
}
const workflow = gsx.Workflow(
"DocumentSummarizerWorkflow",
DocumentSummarizer,
);

return this.generateNewResponse(message);
}
});`,
const result = await workflow.run({
document: "The quick brown fox...",
provider: grok3Config,
});
`,
};

// Define an array of button/tab details so we can map over them.
Expand All @@ -153,29 +170,28 @@ const agent = new Agent({
}[] = [
{
type: "components",
title: "Components",
mobileTitle: "Components",
title: "Create Components",
mobileTitle: "Create Components",
description:
"Create building blocks for your app with reusable components.",
},
{
type: "workflows",
title: "Workflows",
mobileTitle: "Workflows",
description: "Use Components to build and run workflows.",
title: "Run Workflows",
mobileTitle: "Run Workflows",
description: "Combine components to build and run powerful workflows.",
},
{
type: "agents",
title: "Agentic Patterns",
mobileTitle: "Agentic Patterns",
description: "Expressive and powerful agentic patterns.",
title: "Build Agents",
mobileTitle: "Build Agents",
description: "Create agents to handle complex tasks.",
},
{
type: "llms",
title: "Composable and Reusable",
mobileTitle: "LLMs",
description:
"Install or publish components on npm and use throughout your workflows.",
title: "Use any LLM",
mobileTitle: "Use any LLM",
description: "Easily swap between models and providers.",
Comment on lines 191 to +194
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another option for this one could be one around showing how to use components from a fictional package to demonstrate that you can use components from npm and publish them there

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or could be a 5th example if we wanted

},
];

Expand All @@ -185,7 +201,7 @@ const agent = new Agent({
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
className="flex flex-col gap-4 items-center w-full max-w-7xl mx-auto pt-32 px-4 md:px-8 pb-20 mt-0 md:mt-8"
className="flex flex-col gap-4 items-center w-full max-w-7xl mx-auto pt-24 px-4 md:px-8 pb-20 mt-0 md:mt-8"
>
<motion.div
initial={{ opacity: 0, y: 20 }}
Expand Down
Loading