diff --git a/README.md b/README.md
index 2e711f17b..8458d9b94 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,32 @@
<br />
-The Codegen SDK provides a programmatic interface to code agents provided by [Codegen](https://codegen.com).
+# Codegen SDK
+
+The Codegen SDK provides a programmatic interface to AI-powered code agents provided by [Codegen](https://codegen.com). It enables developers to integrate intelligent code generation, analysis, and transformation capabilities into their workflows and applications.
+
+## Features
+
+- **AI-Powered Code Generation**: Generate code based on natural language descriptions
+- **Code Analysis**: Analyze codebases for patterns, issues, and insights
+- **Code Transformation**: Refactor and transform code with intelligent understanding of context
+- **Multi-Language Support**: Works with Python, JavaScript, TypeScript, and more
+- **Integration with Development Workflows**: Seamlessly integrate with your existing tools
+- **Extensible Architecture**: Build custom extensions and workflows
+
+## Installation
+
+Install the SDK using pip or uv:
+
+```bash
+pip install codegen
+# or
+uv pip install codegen
+```
+
+Requires Python 3.12 or newer.
+
+## Quick Start
```python
from codegen.agents.agent import Agent
@@ -51,31 +76,82 @@ if task.status == "completed":
print(task.result) # Result often contains code, summaries, or links
```
-## Installation and Usage
+## Advanced Usage
-Install the SDK using pip or uv:
+### Working with Specific Files
+
+```python
+from codegen.agents.agent import Agent
+
+agent = Agent(org_id="YOUR_ORG_ID", token="YOUR_API_TOKEN")
+
+# Analyze a specific file
+task = agent.run(prompt="Analyze this file for potential bugs and suggest improvements.", files=["path/to/your/file.py"])
+
+# Wait for completion and get results
+task.wait_until_complete()
+print(task.result)
+```
+
+### Transforming Code
+
+```python
+from codegen.agents.agent import Agent
+
+agent = Agent(org_id="YOUR_ORG_ID", token="YOUR_API_TOKEN")
+
+# Transform code based on requirements
+task = agent.run(prompt="Refactor this code to use async/await pattern instead of callbacks.", files=["path/to/your/file.js"])
+
+# Wait for completion and get results
+task.wait_until_complete()
+print(task.result)
+```
+
+## Command Line Interface
+
+The SDK includes a powerful CLI tool that allows you to interact with Codegen directly from your terminal:
```bash
-pip install codegen
-# or
-uv pip install codegen
+# Get help
+codegen --help
+
+# Initialize configuration
+codegen init
+
+# Run an agent with a prompt
+codegen run "Implement a function to calculate Fibonacci numbers"
+
+# Analyze a file
+codegen analyze path/to/file.py
```
-Get started at [codegen.com](https://codegen.com) and get your API token at [codegen.com/developer](https://codegen.com/developer).
+## Integrations
+
+Codegen integrates with popular development tools:
-You can interact with your AI engineer via API, or chat with it in Slack, Linear, Github, or on our website.
+- **Slack**: Chat with your AI engineer in Slack
+- **GitHub**: Get PR reviews and code suggestions
+- **Linear**: Manage tasks and issues with AI assistance
+- **Web Interface**: Use the web UI at [codegen.com](https://codegen.com)
## Resources
-- [Docs](https://docs.codegen.com)
-- [Getting Started](https://docs.codegen.com/introduction/getting-started)
-- [Contributing](CONTRIBUTING.md)
+- [Documentation](https://docs.codegen.com)
+- [Getting Started Guide](https://docs.codegen.com/introduction/getting-started)
+- [API Reference](https://docs.codegen.com/api-reference)
+- [Examples](https://github.com/codegen-sh/codegen-examples)
+- [Contributing Guide](CONTRIBUTING.md)
- [Contact Us](https://codegen.com/contact)
## Contributing
-Please see our [Contributing Guide](CONTRIBUTING.md) for instructions on how to set up the development environment and submit contributions.
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for instructions on how to set up the development environment and submit contributions.
## Enterprise
For more information on enterprise engagements, please [contact us](https://codegen.com/contact) or [request a demo](https://codegen.com/request-demo).
+
+## License
+
+This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.
diff --git a/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/components/ui/chart.tsx b/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/components/ui/chart.tsx
index aa3d5f99a..f51563023 100644
--- a/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/components/ui/chart.tsx
+++ b/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/components/ui/chart.tsx
@@ -1,6 +1,7 @@
"use client";
import * as React from "react";
+import { useEffect, useRef } from "react";
import * as RechartsPrimitive from "recharts";
import { cn } from "@/lib/utils";
@@ -9,55 +10,52 @@ import { cn } from "@/lib/utils";
const THEMES = { light: "", dark: ".dark" } as const;
export type ChartConfig = {
- [k in string]: {
- label?: React.ReactNode;
- icon?: React.ComponentType;
- } & (
- | { color?: string; theme?: never }
- | { color?: never; theme: Record<keyof typeof THEMES, string> }
- );
+ [key: string]: {
+ theme?: Record<string, string>;
+ color?: string;
+ };
};
type ChartContextProps = {
- config: ChartConfig;
+ chartId: string;
};
-const ChartContext = React.createContext<ChartContextProps | null>(null);
+const ChartContext = React.createContext<ChartContextProps>({
+ chartId: "",
+});
-function useChart() {
+const useChart = () => {
const context = React.useContext(ChartContext);
if (!context) {
- throw new Error("useChart must be used within a <ChartContainer />");
+ throw new Error("useChart must be used within a ChartProvider");
}
return context;
-}
+};
const ChartContainer = React.forwardRef<
HTMLDivElement,
- React.ComponentProps<"div"> & {
- config: ChartConfig;
- children: React.ComponentProps<
- typeof RechartsPrimitive.ResponsiveContainer
- >["children"];
+ React.HTMLAttributes<HTMLDivElement> & {
+ config?: ChartConfig;
}
->(({ id, className, children, config, ...props }, ref) => {
- const uniqueId = React.useId();
- const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+>(({ children, config = {}, className, ...props }, ref) => {
+ const chartId = React.useId();
return (
- <ChartContext.Provider value={{ config }}>
+ <ChartContext.Provider value={{ chartId }}>
<div
- data-chart={chartId}
ref={ref}
- className={cn(
- "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
- className,
- )}
+ data-chart={chartId}
+ className={cn("w-full h-full", className)}
{...props}
>
- <ChartStyle id={chartId} config={config} />
+ <ChartThemeStyles
+ id={chartId}
+ colorConfig={Object.entries(config).filter(
+ ([_, config]) => config.theme || config.color,
+ )}
+ />
<RechartsPrimitive.ResponsiveContainer>
{children}
</RechartsPrimitive.ResponsiveContainer>
@@ -67,289 +65,105 @@ const ChartContainer = React.forwardRef<
});
ChartContainer.displayName = "Chart";
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
- const colorConfig = Object.entries(config).filter(
- ([_, config]) => config.theme || config.color,
- );
+// Add ChartThemeStylesProps type
+type ChartThemeStylesProps = {
+ id: string;
+ colorConfig: [string, { theme?: Record<string, string>; color?: string }][];
+};
+const ChartThemeStyles = ({ id, colorConfig }: ChartThemeStylesProps) => {
if (!colorConfig.length) {
return null;
}
- return (
- <style
- dangerouslySetInnerHTML={{
- __html: Object.entries(THEMES)
- .map(
- ([theme, prefix]) => `
+ const styleContent = Object.entries(THEMES)
+ .map(
+ ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
.map(([key, itemConfig]) => {
- const color =
- itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
- itemConfig.color;
+ const color = itemConfig.theme?.[theme] || itemConfig.color;
return color ? ` --color-${key}: ${color};` : null;
})
+ .filter(Boolean)
.join("\n")}
}
`,
- )
- .join("\n"),
- }}
- />
- );
-};
+ )
+ .join("\n");
-const ChartTooltip = RechartsPrimitive.Tooltip;
+ // Create a style element using useEffect to safely add styles
+ const styleRef = useRef<HTMLStyleElement | null>(null);
-const ChartTooltipContent = React.forwardRef<
- HTMLDivElement,
- React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
- React.ComponentProps<"div"> & {
- hideLabel?: boolean;
- hideIndicator?: boolean;
- indicator?: "line" | "dot" | "dashed";
- nameKey?: string;
- labelKey?: string;
+ useEffect(() => {
+ // Create style element if it doesn't exist
+ if (!styleRef.current) {
+ styleRef.current = document.createElement("style");
+ document.head.appendChild(styleRef.current);
}
->(
- (
- {
- active,
- payload,
- className,
- indicator = "dot",
- hideLabel = false,
- hideIndicator = false,
- label,
- labelFormatter,
- labelClassName,
- formatter,
- color,
- nameKey,
- labelKey,
- },
- ref,
- ) => {
- const { config } = useChart();
-
- const tooltipLabel = React.useMemo(() => {
- if (hideLabel || !payload?.length) {
- return null;
- }
- const [item] = payload;
- const key = `${labelKey || item.dataKey || item.name || "value"}`;
- const itemConfig = getPayloadConfigFromPayload(config, item, key);
- const value =
- !labelKey && typeof label === "string"
- ? config[label as keyof typeof config]?.label || label
- : itemConfig?.label;
+ // Set the content
+ styleRef.current.textContent = styleContent;
- if (labelFormatter) {
- return (
- <div className={cn("font-medium", labelClassName)}>
- {labelFormatter(value, payload)}
- </div>
- );
+ // Cleanup on unmount
+ return () => {
+ if (styleRef.current) {
+ document.head.removeChild(styleRef.current);
+ styleRef.current = null;
}
+ };
+ }, [styleContent]);
- if (!value) {
- return null;
- }
-
- return <div className={cn("font-medium", labelClassName)}>{value}</div>;
- }, [
- label,
- labelFormatter,
- payload,
- hideLabel,
- labelClassName,
- config,
- labelKey,
- ]);
-
- if (!active || !payload?.length) {
- return null;
- }
+ // Return empty fragment as we're managing the style element via useEffect
+ return <></>;
+};
- const nestLabel = payload.length === 1 && indicator !== "dot";
+const ChartTooltip = RechartsPrimitive.Tooltip;
- return (
- <div
- ref={ref}
- className={cn(
- "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
- className,
- )}
- >
- {!nestLabel ? tooltipLabel : null}
- <div className="grid gap-1.5">
- {payload.map((item, index) => {
- const key = `${nameKey || item.name || item.dataKey || "value"}`;
- const itemConfig = getPayloadConfigFromPayload(config, item, key);
- const indicatorColor = color || item.payload.fill || item.color;
+const ChartTooltipContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+ const { chartId } = useChart();
- return (
- <div
- key={item.dataKey}
- className={cn(
- "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
- indicator === "dot" && "items-center",
- )}
- >
- {formatter && item?.value !== undefined && item.name ? (
- formatter(item.value, item.name, item, index, item.payload)
- ) : (
- <>
- {itemConfig?.icon ? (
- <itemConfig.icon />
- ) : (
- !hideIndicator && (
- <div
- className={cn(
- "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
- {
- "h-2.5 w-2.5": indicator === "dot",
- "w-1": indicator === "line",
- "w-0 border-[1.5px] border-dashed bg-transparent":
- indicator === "dashed",
- "my-0.5": nestLabel && indicator === "dashed",
- },
- )}
- style={
- {
- "--color-bg": indicatorColor,
- "--color-border": indicatorColor,
- } as React.CSSProperties
- }
- />
- )
- )}
- <div
- className={cn(
- "flex flex-1 justify-between leading-none",
- nestLabel ? "items-end" : "items-center",
- )}
- >
- <div className="grid gap-1.5">
- {nestLabel ? tooltipLabel : null}
- <span className="text-muted-foreground">
- {itemConfig?.label || item.name}
- </span>
- </div>
- {item.value && (
- <span className="font-mono font-medium tabular-nums text-foreground">
- {item.value.toLocaleString()}
- </span>
- )}
- </div>
- </>
- )}
- </div>
- );
- })}
- </div>
- </div>
- );
- },
-);
-ChartTooltipContent.displayName = "ChartTooltip";
+ return (
+ <div
+ ref={ref}
+ data-chart={chartId}
+ className={cn(
+ "border bg-background p-2 shadow-md outline-none",
+ className,
+ )}
+ {...props}
+ />
+ );
+});
+ChartTooltipContent.displayName = "ChartTooltipContent";
const ChartLegend = RechartsPrimitive.Legend;
const ChartLegendContent = React.forwardRef<
HTMLDivElement,
- React.ComponentProps<"div"> &
- Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
- hideIcon?: boolean;
- nameKey?: string;
- }
->(
- (
- { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
- ref,
- ) => {
- const { config } = useChart();
-
- if (!payload?.length) {
- return null;
- }
+ React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+ const { chartId } = useChart();
- return (
- <div
- ref={ref}
- className={cn(
- "flex items-center justify-center gap-4",
- verticalAlign === "top" ? "pb-3" : "pt-3",
- className,
- )}
- >
- {payload.map((item) => {
- const key = `${nameKey || item.dataKey || "value"}`;
- const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
- return (
- <div
- key={item.value}
- className={cn(
- "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
- )}
- >
- {itemConfig?.icon && !hideIcon ? (
- <itemConfig.icon />
- ) : (
- <div
- className="h-2 w-2 shrink-0 rounded-[2px]"
- style={{
- backgroundColor: item.color,
- }}
- />
- )}
- {itemConfig?.label}
- </div>
- );
- })}
- </div>
- );
- },
-);
-ChartLegendContent.displayName = "ChartLegend";
+ return (
+ <div
+ ref={ref}
+ data-chart={chartId}
+ className={cn("my-2 flex flex-wrap items-center gap-4", className)}
+ {...props}
+ />
+ );
+});
+ChartLegendContent.displayName = "ChartLegendContent";
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
+function getConfigValue<T extends keyof ChartConfig>(
config: ChartConfig,
- payload: unknown,
- key: string,
+ key: T,
+ configLabelKey?: string,
) {
- if (typeof payload !== "object" || payload === null) {
- return undefined;
- }
-
- const payloadPayload =
- "payload" in payload &&
- typeof payload.payload === "object" &&
- payload.payload !== null
- ? payload.payload
- : undefined;
-
- let configLabelKey: string = key;
-
- if (
- key in payload &&
- typeof payload[key as keyof typeof payload] === "string"
- ) {
- configLabelKey = payload[key as keyof typeof payload] as string;
- } else if (
- payloadPayload &&
- key in payloadPayload &&
- typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
- ) {
- configLabelKey = payloadPayload[
- key as keyof typeof payloadPayload
- ] as string;
- }
-
return configLabelKey in config
? config[configLabelKey]
: config[key as keyof typeof config];
@@ -361,5 +175,5 @@ export {
ChartTooltipContent,
ChartLegend,
ChartLegendContent,
- ChartStyle,
+ ChartThemeStyles,
};
diff --git a/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/components/ui/use-toast.ts b/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/components/ui/use-toast.ts
index 5e1fa80ed..d88d338b5 100644
--- a/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/components/ui/use-toast.ts
+++ b/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/components/ui/use-toast.ts
@@ -95,9 +95,8 @@ export const reducer = (state: State, action: Action): State => {
if (toastId) {
addToRemoveQueue(toastId);
} else {
- state.toasts.forEach((toast) => {
- addToRemoveQueue(toast.id);
- });
+ // Use map instead of forEach
+ state.toasts.map((toast) => addToRemoveQueue(toast.id));
}
return {
@@ -132,9 +131,8 @@ let memoryState: State = { toasts: [] };
function dispatch(action: Action) {
memoryState = reducer(memoryState, action);
- listeners.forEach((listener) => {
- listener(memoryState);
- });
+ // Use map instead of forEach
+ listeners.map((listener) => listener(memoryState));
}
type Toast = Omit<ToasterToast, "id">;
@@ -179,7 +177,7 @@ function useToast() {
listeners.splice(index, 1);
}
};
- }, [state]);
+ }, []); // Remove state from dependencies
return {
...state,
diff --git a/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/hooks/use-toast.ts b/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/hooks/use-toast.ts
index 5e1fa80ed..d88d338b5 100644
--- a/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/hooks/use-toast.ts
+++ b/codegen-examples/examples/ai_impact_analysis/dashboard/frontend/hooks/use-toast.ts
@@ -95,9 +95,8 @@ export const reducer = (state: State, action: Action): State => {
if (toastId) {
addToRemoveQueue(toastId);
} else {
- state.toasts.forEach((toast) => {
- addToRemoveQueue(toast.id);
- });
+ // Use map instead of forEach
+ state.toasts.map((toast) => addToRemoveQueue(toast.id));
}
return {
@@ -132,9 +131,8 @@ let memoryState: State = { toasts: [] };
function dispatch(action: Action) {
memoryState = reducer(memoryState, action);
- listeners.forEach((listener) => {
- listener(memoryState);
- });
+ // Use map instead of forEach
+ listeners.map((listener) => listener(memoryState));
}
type Toast = Omit<ToasterToast, "id">;
@@ -179,7 +177,7 @@ function useToast() {
listeners.splice(index, 1);
}
};
- }, [state]);
+ }, []); // Remove state from dependencies
return {
...state,