repository·main·Indexed 18 days ago
https://github.com/copilotkit/open-research-anaA research canvas demo showcasing Agent Native Application (ANA) capabilities. It integrates LangGraph-powered agents, Tavily real-time search, and CopilotKit's agentic interface to facilitate interactive research tasks with Human-in-the-Loop capabilities.
To run the frontend in development mode, use your preferred package manager to execute the dev script. Once started, the application will be available at http://localhost:3000.
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devBefore running the project, ensure you have the following tools installed on your system:
To run the application locally, you need to obtain API keys for the following services:
Once the agent is running and the tunnel is open, start the frontend application. Navigate to the frontend directory, install dependencies with pnpm, configure the .env file, and run the development server.
cd frontend
pnpm install
# Create and populate .env
cat << EOF > .env
OPENAI_API_KEY=your_openai_key
LANGSMITH_API_KEY=your_langsmith_key
NEXT_PUBLIC_COPILOT_CLOUD_API_KEY=your_copilot_cloud_key
EOF
# Start the app
pnpm run devTo allow the frontend to communicate with your locally running agent, use the CopilotKit CLI to create a tunnel. Replace 8123 with the port provided by the langgraph up command if it differs.
npx copilotkit@latest dev --port 8123The agent is the first component to launch. Navigate to the agent directory, configure your environment variables in a .env file, and use the Langgraph CLI to start the agent.
Note: After starting, identify the API URL from the output (e.g., http://localhost:8123).
cd agent
# Create and populate .env
cat << EOF > .env
OPENAI_API_KEY=your_key
TAVILY_API_KEY=your_key
LANGSMITH_API_KEY=your_key
EOF
## Start the agent
langgraph upThe frontend requires several environment variables to connect to the backend agent and authenticate with AI services. Create a .env file in the frontend/ directory and populate it with the following keys:
DEPLOYMENT_URL: The URL where your LangGraph agent is deployed (e.g., a hosted LangGraph Cloud instance).LOCAL_DEPLOYMENT_URL: The URL of your locally running agent (e.g., http://localhost:8123).LANGSMITH_API_KEY: Your API key for LangSmith tracing.OPENAI_API_KEY: Your OpenAI API key for model access.DEPLOYMENT_URL='<LANGGRAPH_DEPLOYMENT_URL>'
LOCAL_DEPLOYMENT_URL='<LANGGRAPH_LOCAL_DEPLOYMENT_URL>'
LANGSMITH_API_KEY="Your-API-key"
OPENAI_API_KEY="Your-API-key"The agent requires several API keys to function, which must be provided in a .env file located in the agent/ directory. You should copy the .env.example file to .env and populate it with your credentials.
Required keys:
OPENAI_API_KEY: Your OpenAI API key for model access.TAVILY_API_KEY: Your Tavily API key for search capabilities.LANGSMITH_API_KEY: Your LangSmith API key for tracing and observability.OPENAI_API_KEY="Your-API-key"
TAVILY_API_KEY="Your-API-key"
LANGSMITH_API_KEY="Your-API-key"The DocumentViewer component accepts the following props:
section (optional): An object of type TSection containing id, title, content, and footer.zoomLevel (number): The magnification level for the document view.compact (boolean, default: false): When true, renders a small, scaled-down version of the section suitable for grid layouts or previews.highlight (boolean, default: false): When compact is true, applies a primary color border to the section.onSelect (function, optional): Callback triggered when a compact section is clicked. Receives the sectionId as a string.placeholder (string, optional): Text to display when no section is provided.onSectionEdit (function): Callback passed to the DocumentEditor when in editMode. Matches DocumentEditorProps['onSectionEdit'].editMode (boolean): If true, switches the component from a viewer to a DocumentEditor.You can extend the CopilotRuntime by adding remote endpoints using langGraphPlatformEndpoint. This allows the CopilotKit runtime to interact with agents deployed on the LangGraph platform.
Required configuration for langGraphPlatformEndpoint:
deploymentUrl: The URL where the LangGraph deployment is hosted.langsmithApiKey: Your LangSmith API key for observability.agents: An array of agent objects, each containing a name and a description.Environment variables used in this configuration:
DEPLOYMENT_URL or LOCAL_DEPLOYMENT_URL (depending on the DEPLOYMENT env var).LANGSMITH_API_KEY.langGraphPlatformEndpoint({
deploymentUrl: deploymentUrl!,
langsmithApiKey: process.env.LANGSMITH_API_KEY!,
agents: [{
name: 'agent',
description: 'Research assistant',
}],
})The ResearchProvider component manages the global research state, including synchronization between the CopilotKit useCoAgent state and local storage. To access and manipulate this state within your application, wrap your component tree with ResearchProvider and use the useResearch hook.
Context Properties:
state: The current ResearchState object.setResearchState: A function to update the research state. It accepts either a new state object or a functional updater.sourcesModalOpen: A boolean indicating if the sources modal is currently visible.setSourcesModalOpen: A function to toggle the visibility of the sources modal.runAgent: A function to trigger the execution of the research agent.Note: useResearch will throw an error if it is called outside of a ResearchProvider.
import { ResearchProvider, useResearch } from '@/components/research-context';
function MyComponent() {
return (
<ResearchProvider>
<ResearchContent />
</ResearchProvider>
);
}
function ResearchContent() {
const { state, runAgent, setSourcesModalOpen } = useResearch();
return (
<div>
<pre>{JSON.stringify(state, null, 2)}</pre>
<button onClick={runAgent}>Run Agent</button>
<button onClick={() => setSourcesModalOpen(true)}>Show Sources</button>
</div>
);
}